@omni-design/components 0.14.5 → 0.14.6

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/dist/types/components/Alert/Alert.d.ts +2 -1
  6. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -16,5 +16,5 @@ import e,{useState as a,useEffect as t,useRef as i,useCallback as n,forwardRef a
16
16
  object-assign
17
17
  (c) Sindre Sorhus
18
18
  @license MIT
19
- */function Kb(){if(Ob)return Hb;Ob=1;var e=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Hb=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 i={};return"abcdefghijklmnopqrst".split("").forEach(function(e){i[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},i)).join("")}catch(e){return!1}}()?Object.assign:function(i,n){for(var r,o,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(i),s=1;s<arguments.length;s++){for(var c in r=Object(arguments[s]))a.call(r,c)&&(l[c]=r[c]);if(e){o=e(r);for(var d=0;d<o.length;d++)t.call(r,o[d])&&(l[o[d]]=r[o[d]])}}return l},Hb}function _b(){if(Vb)return Eb;Vb=1;return Eb="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function ev(){return jb?Qb:(jb=1,Qb=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var av=$b();Wb.exports=function(){if(Yb)return Ub;Yb=1;var e=$b(),a=Kb(),t=_b(),i=ev(),n=function(){if(Gb)return qb;Gb=1;var e=function(){};if("production"!==process.env.NODE_ENV){var a=_b(),t={},i=ev();e=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}}function n(n,r,o,l,s){if("production"!==process.env.NODE_ENV)for(var c in n)if(i(n,c)){var d;try{if("function"!=typeof n[c]){var h=Error((l||"React class")+": "+o+" type `"+c+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof n[c]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}d=n[c](r,c,l,o,null,a)}catch(e){d=e}if(!d||d instanceof Error||e((l||"React class")+": type specification of "+o+" `"+c+"` 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 u=s?s():"";e("Failed "+o+" type: "+d.message+(null!=u?u:""))}}}return n.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},qb=n}(),r=function(){};function o(){return null}return"production"!==process.env.NODE_ENV&&(r=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}),Ub=function(l,s){var c="function"==typeof Symbol&&Symbol.iterator,d="<<anonymous>>",h={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,i,n,r,o){if("function"!=typeof e)return new m("Property `"+o+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var l=a[i];if(!Array.isArray(l))return new m("Invalid "+r+" `"+o+"` of type `"+v(l)+"` supplied to `"+n+"`, expected an array.");for(var s=0;s<l.length;s++){var c=e(l,s,n,r,o+"["+s+"]",t);if(c instanceof Error)return c}return null})},element:p(function(e,a,t,i,n){var r=e[a];return l(r)?null:new m("Invalid "+i+" `"+n+"` of type `"+v(r)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:p(function(a,t,i,n,r){var o=a[t];return e.isValidElementType(o)?null:new m("Invalid "+n+" `"+r+"` of type `"+v(o)+"` supplied to `"+i+"`, expected a single ReactElement type.")}),instanceOf:function(e){return p(function(a,t,i,n,r){if(!(a[t]instanceof e)){var o=e.name||d;return new m("Invalid "+n+" `"+r+"` of type `"+((l=a[t]).constructor&&l.constructor.name?l.constructor.name:d)+"` supplied to `"+i+"`, expected instance of `"+o+"`.")}var l;return null})},node:p(function(e,a,t,i,n){return b(e[a])?null:new m("Invalid "+i+" `"+n+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return p(function(a,n,r,o,l){if("function"!=typeof e)return new m("Property `"+l+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var s=a[n],c=v(s);if("object"!==c)return new m("Invalid "+o+" `"+l+"` of type `"+c+"` supplied to `"+r+"`, expected an object.");for(var d in s)if(i(s,d)){var h=e(s,d,r,o,l+"."+d,t);if(h instanceof Error)return h}return null})},oneOf:function(e){return Array.isArray(e)?p(function(a,t,i,n,r){for(var o=a[t],l=0;l<e.length;l++)if(u(o,e[l]))return null;var s=JSON.stringify(e,function(e,a){return"symbol"===x(a)?String(a):a});return new m("Invalid "+n+" `"+r+"` of value `"+String(o)+"` supplied to `"+i+"`, expected one of "+s+".")}):("production"!==process.env.NODE_ENV&&r(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&&r("Invalid argument supplied to oneOfType, expected an instance of array."),o;for(var a=0;a<e.length;a++){var n=e[a];if("function"!=typeof n)return r("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(n)+" at index "+a+"."),o}return p(function(a,n,r,o,l){for(var s=[],c=0;c<e.length;c++){var d=(0,e[c])(a,n,r,o,l,t);if(null==d)return null;d.data&&i(d.data,"expectedType")&&s.push(d.data.expectedType)}return new m("Invalid "+o+" `"+l+"` supplied to `"+r+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return p(function(a,i,n,r,o){var l=a[i],s=v(l);if("object"!==s)return new m("Invalid "+r+" `"+o+"` of type `"+s+"` supplied to `"+n+"`, expected `object`.");for(var c in e){var d=e[c];if("function"!=typeof d)return g(n,r,o,c,x(d));var h=d(l,c,n,r,o+"."+c,t);if(h)return h}return null})},exact:function(e){return p(function(n,r,o,l,s){var c=n[r],d=v(c);if("object"!==d)return new m("Invalid "+l+" `"+s+"` of type `"+d+"` supplied to `"+o+"`, expected `object`.");var h=a({},n[r],e);for(var u in h){var p=e[u];if(i(e,u)&&"function"!=typeof p)return g(o,l,s,u,x(p));if(!p)return new m("Invalid "+l+" `"+s+"` key `"+u+"` supplied to `"+o+"`.\nBad object: "+JSON.stringify(n[r],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=p(c,u,o,l,s+"."+u,t);if(f)return f}return null})}};function u(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={},i=0;function n(n,o,l,c,h,u,p){if(c=c||d,u=u||l,p!==t){if(s){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var g=c+":"+l;!a[g]&&i<3&&(r("You are manually calling a React.PropTypes validation function for the `"+u+"` prop on `"+c+"`. 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,i++)}}return null==o[l]?n?null===o[l]?new m("The "+h+" `"+u+"` is marked as required in `"+c+"`, but its value is `null`."):new m("The "+h+" `"+u+"` is marked as required in `"+c+"`, but its value is `undefined`."):null:e(o,l,c,h,u)}var o=n.bind(null,!1);return o.isRequired=n.bind(null,!0),o}function f(e){return p(function(a,t,i,n,r,o){var l=a[t];return v(l)!==e?new m("Invalid "+n+" `"+r+"` of type `"+x(l)+"` supplied to `"+i+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,a,t,i,n){return new m((e||"React class")+": "+a+" type `"+t+"."+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+n+"`.")}function b(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(b);if(null===e||l(e))return!0;var a=function(e){var a=e&&(c&&e[c]||e["@@iterator"]);if("function"==typeof a)return a}(e);if(!a)return!1;var t,i=a.call(e);if(a!==e.entries){for(;!(t=i.next()).done;)if(!b(t.value))return!1}else for(;!(t=i.next()).done;){var n=t.value;if(n&&!b(n[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,h.checkPropTypes=n,h.resetWarningCache=n.resetWarningCache,h.PropTypes=h,h},Ub}()(av.isElement,!0)}else Wb.exports=function(){if(Jb)return Xb;Jb=1;var e=_b();function a(){}function t(){}return t.resetWarningCache=a,Xb=function(){function i(a,t,i,n,r,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 n(){return i}i.isRequired=i;var r={array:i,bigint:i,bool:i,func:i,number:i,object:i,string:i,symbol:i,any:i,arrayOf:n,element:i,elementType:i,instanceOf:n,node:i,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:t,resetWarningCache:a};return r.PropTypes=r,r}}()();var tv=Ib(Wb.exports);function iv({code:e,label:t="Copy code"}){const[i,n]=a(!1);return le(x,{title:i?"Copied!":t,children:le(ob,{variant:"ghost",size:"small",onClick:async()=>{try{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),2e3)}catch(e){console.error("Copy failed:",e)}},"aria-label":i?"Copied":t,sx:{color:i?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(i?ue:pe,{fontSize:"small"})})})}iv.propTypes={code:tv.string.isRequired,label:tv.string};function nv({code:e="",language:a="JSX",showCopy:t=!0,showHeader:i=!0,maxHeight:n,wrap:r=!1,sx:o={},...l}){const s=i&&t&&!!e,c=!i&&t&&!!e;return ce(u,{"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:[i&&(a||t)&&ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(Li,{color:"quiet",children:a}),s?le(iv,{code:e}):null]}),ce(u,{sx:{display:"flex",alignItems:"flex-start",gap:1,p:2},children:[le(u,{component:"pre",sx:{margin:0,fontFamily:"inherit",flex:1,minWidth:0,overflow:"auto",maxHeight:n},children:le(u,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:r?"pre-wrap":"pre",wordBreak:r?"break-word":"normal",display:"block"},children:e})}),c?le(iv,{code:e}):null]})]})}nv.propTypes={code:tv.string,language:tv.string,showCopy:tv.bool,showHeader:tv.bool,maxHeight:tv.oneOfType([tv.number,tv.string]),wrap:tv.bool,sx:tv.object};const rv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ov=["primary","secondary","tertiary","neutral","info","success","warning","error"];function lv({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function sv({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(lv,{ratio:a,threshold:t})]})}function cv({color:e,selected:a,onClick:t}){const i=rv(e);return le(x,{title:i,arrow:!0,children:le(u,{onClick:()=>t(e),role:"button","aria-label":"Select "+i+" color","aria-pressed":a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+i+"-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(ue,{sx:{fontSize:24,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})})}function dv({label:e,selected:a,onClick:t}){return le(u,{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 hv(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a("solid"),[s,c]=a("primary"),[d,h]=a("5"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a({}),k=()=>"solid"===o?s:s+"-"+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=rv(s),a={};"solid"===o?(a.badgeBg=nn("--Icons-"+e),a.badgeText=nn("--Icons-On-"+e),a.badgeBorder=null):"outline"===o&&(a.badgeBg=nn("--Background"),a.badgeText=nn("--Text"),a.badgeBorder=nn("--Buttons-"+e+"-Border")),a.background=nn("--Background"),a.focusVisible=nn("--Focus-Visible"),x(a)},[o,s]),ce(u,{sx:{width:"100%"},children:[le(vA,{title:"Badge",component:"Badge"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),le(wi,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Badge",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{minHeight:400},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[le(u,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)"},children:ce(m,{direction:"row",spacing:6,alignItems:"center",children:[le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(xe,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ye,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ze,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(nv,{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)"}})]}),ce(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(ci,{children:"Playground"}),ce(u,{sx:{mt:3},children:[le(Oi,{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(dv,{label:rv(e),selected:o===e,onClick:()=>l(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ov.map(e=>le(cv,{color:e,selected:s===e,onClick:c},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(z,{size:"small",value:d,onChange:e=>h(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"}}})]}),ce(u,{sx:{mt:3},children:[le(w,{control:le(S,{checked:p,onChange:e=>f(e.target.checked),size:"small"}),label:le(xi,{children:"Dot (no content)"})}),le(w,{control:le(S,{checked:g,onChange:e=>b(e.target.checked),size:"small"}),label:le(xi,{children:"Show zero"})})]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:4},children:[le(ci,{children:"Accessibility Requirements"}),ce(xi,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",o," · ",s]}),ce(m,{spacing:4,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Text Contrast"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(sv,{label:"Badge Text vs. Badge Background",ratio:tn(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)"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Visibility"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=tn(v.badgeBg,v.background),a=v.badgeBorder?tn(v.badgeBorder,v.background):null;return le(sv,{label:"Badge vs. Page Background",ratio:(t=e,i=a,t||i?t?i?parseFloat(t)>=parseFloat(i)?t:i:t:i:null),threshold:3.1,note:"outline"===o?"Border "+(a||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,i})()]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Sizing"}),le(xi,{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(u,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ce(u,{children:[le(xi,{children:"Counter"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"16px height · 4px side padding · 11px digits · pill shape"})]})}),le(u,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ce(u,{children:[le(xi,{children:"Status dot"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA & Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(Li,{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").'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(Li,{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."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]}),le(Lb,{value:3,children:le(pA,{component:"Badge"})})]})]})}const uv={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 mv({children:e,variant:a="light",surface:t,color:i="info",size:n="medium",startDecorator:r,endDecorator:o,className:l="",sx:s={},...c}){const d=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===i?"Default":i),h=uv[n]||uv.medium,m="default"===i?"Default":d,p=t||("light"===a?"Surface-Brightest":"Surface"),f="var(--Buttons-"+d+"-Border)",g=ce(se,{children:[r&&le(u,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:h.iconSize,lineHeight:1,flexShrink:0,mt:"2px"},children:r}),le(u,{className:"alert-message",sx:{flex:1,minWidth:0},children:"string"==typeof e?le("small"===n?xi:wi,{children:e}):e}),o&&le(u,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:"flex-start",flexShrink:0,gap:h.gap,paddingTop:"2px"},children:o})]});return le(u,{role:"alert",className:"alert alert-"+a+" alert-"+n+" alert-"+i+" "+l,sx:{border:"1px solid "+f,borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",boxShadow:Vf,...s},...c,children:le(u,{"data-theme":m,"data-surface":p,className:"alert-inner",sx:{display:"flex",alignItems:"flex-start",gap:h.gap,padding:h.py+" "+h.px,fontSize:h.fontSize,fontFamily:"inherit",lineHeight:1.5,color:"var(--Text)",backgroundColor:"var(--Background)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)"},children:g})})}const pv=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];function fv(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 gv=/-light$/,bv=new Set;const vv={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 xv({variant:e="default",size:a="medium",checked:t,defaultChecked:i,onChange:n,disabled:r=!1,label:o,labelPlacement:l="end",name:s,value:c,icon:d,iconOn:h,iconOff:u,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=function(){const e={};return pv.forEach(a=>{e[a]=fv(a),e[a+"-outline"]=fv(a)}),e.default={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e["default-outline"]={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e.outline={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e}(),x=function(e){const a=String(e||"default");if("light"!==a&&!gv.test(a))return a;const t="light"===a?"primary":a.replace(gv,"");return"production"===process.env.NODE_ENV||bv.has(a)||(bv.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=vv[a]||vv.medium,S="small"===a?xi:wi,C=z.handle,B=Math.max(24,z.trackW),T=Math.max(24,z.trackH),M=(T-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:T,minHeight:24,padding:0,overflow:"visible",opacity:r?"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:Qf},"&:active + .MuiSwitch-track":{boxShadow:Vf},"&.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:M,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!==u?u:d,N=void 0!==h?h: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:i,onChange:n,disabled:r,name:s,value:c,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+x+" "+m,sx:L,disableRipple:!0,...b});return o?le(w,{control:D,label:le(S,{component:"span",sx:{color:r?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"13px":"15px",fontWeight:500,opacity:r?"var(--Disabled, 0.38)":1},children:o}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):D}const yv=xv,zv=e.forwardRef(function({theme:e=null,surface:a="Surface",children:t,minHeight:i=160,sx:n={}},r){return le(u,{ref:r,"data-theme":e||void 0,"data-surface":a,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:i,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...n},children:t})}),wv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Sv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],kv={info:le(we,{}),success:le(Se,{}),warning:le(ke,{}),error:le(Ce,{})};function Cv({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Bv({color:e,selected:a,onClick:t}){const i=wv(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Tv(){const[e,t]=a("light"),[i,n]=a("info"),[r,o]=a("medium"),[l,s]=a(!0),[c,d]=a("Default"),[h,p]=a("Surface"),f=l&&kv[i]?le(Ff,{size:"small",sx:{color:"inherit"},children:kv[i]}):void 0;return ce(u,{sx:{pb:8},children:[le(vA,{title:"Alert",component:"Alert"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Alert",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:480},children:le(mv,{variant:e,color:i,size:r,startDecorator:f,children:"This is an alert message. Check the details for more information."})})}),le(nv,{code:(()=>{const a=['variant="'+e+'"'];return"info"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),l&&kv[i]&&a.push("startDecorator={<Icon><"+wv(i)+"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(Cv,{label:wv(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Sv.map(e=>ce(u,{children:[le(Li,{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(Bv,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Cv,{label:wv(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(xv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show icon"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Alert"})})]})]})}const Mv={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Av={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)"}},Lv=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function Iv({children:e,variant:a="solid",color:t="default",surface:i,size:n="medium",orientation:r="vertical",clickable:o=!1,selected:l=!1,elevated:s=!1,draggable:c=!1,onClick:d,disabled:h=!1,href:m,className:p="",sx:f={},...g}){const b="default"===t,v=b?"":Mv[t],x=i||(b?"Container":"dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface"),y=Av[n]||Av.medium,z="horizontal"===r,w=!!c,S=!h&&(o||!!d||!!m||l||w),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=S?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",T=s?Qf:Vf,M=s?jf:Qf,A=s?Vf:Ef;return le(Lv.Provider,{value:{variant:a,color:t,size:n,orientation:r},children:le(u,{component:k,href:m||void 0,onClick:S?d:void 0,role:S?"button":void 0,tabIndex:S?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":h||void 0,draggable:w||void 0,className:"card card-"+a+" card-"+n+" card-"+r+(S?" card-clickable":"")+(l?" card-selected":"")+(s?" card-elevated":"")+(w?" card-draggable":"")+" "+p,sx:{display:"flex",border:B,borderRadius:"var(--Card-Radius)",boxShadow:T,overflow:"hidden",textDecoration:"none",transition:"box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease",...h&&{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...S&&!w&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M,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)"}},...w&&{cursor:"grab","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:jf,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:S?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d?.())}:void 0,...g,children:le(u,{"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 Nv({children:e,className:a="",sx:t={},...i}){const{size:n}=s(Lv);return le(u,{className:"card-content "+a,sx:{display:"flex",flexDirection:"column",gap:(Av[n]||Av.medium).gap,flex:1,minWidth:0,...t},...i,children:e})}const Wv=e=>le(Iv,{clickable:!0,selected:e.selected,...e}),Dv=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Rv=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Fv(){const e={};return Dv.forEach(a=>{e[a]=function(e){const a=Xf(e);return{color:a,borderToken:Rv(a),icon:"var(--Buttons-"+a+"-Border)"}}(a)}),e}const Pv=/-(outline|light|solid)$/,Hv=new Set;function Ov(e){const a=Fv();return a[function(e){const a=String(e||"default");if(!Pv.test(a))return a;const t=a.replace(Pv,"");return"production"===process.env.NODE_ENV||Hv.has(a)||(Hv.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 Ev={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:xi},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:wi},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:Ti}};function Vv({size:e,variant:a,checked:t,indeterminate:i}){const n=Ov(a),r=Ev[e]||Ev.medium,o=t||i,l=n.borderToken,s="small"===e?"var(--Sm-Checkbox-Radius, 3.2px)":"large"===e?"var(--Lg-Checkbox-Radius, 4.8px)":"var(--Checkbox-Radius, 4px)";return le(u,{className:"chk-box-icon",sx:{width:r.box,height:r.box,boxSizing:"border-box",borderRadius:s,border:"2px solid "+l,overflow:"hidden",flexShrink:0,transition:"border-color 0.15s ease-in-out"},children:le(u,{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(i?Be:ue,{sx:{fontSize:r.icon,color:n.icon}})})})}function Qv({size:e,variant:a}){return le(Vv,{size:e,variant:a,checked:!1,indeterminate:!1})}function jv({size:e,variant:a}){return le(Vv,{size:e,variant:a,checked:!0,indeterminate:!1})}function qv({size:e,variant:a}){return le(Vv,{size:e,variant:a,checked:!1,indeterminate:!0})}function Gv({variant:e="primary",size:a="medium",label:t,checked:i,defaultChecked:n,indeterminate:r=!1,disabled:o=!1,onChange:l,name:s,value:c,className:d="",sx:h={},"aria-label":u,"aria-labelledby":m,"aria-describedby":p,inputProps:f={},...g}){Ov(e);const b=Ev[a]||Ev.medium,v=b.LabelComp,x={...f,...u&&{"aria-label":u},...m&&{"aria-labelledby":m},...p&&{"aria-describedby":p}},y=le(S,{checked:i,defaultChecked:n,indeterminate:r,disabled:o,onChange:l,name:s,value:c,icon:le(Qv,{size:a,variant:e}),checkedIcon:le(jv,{size:a,variant:e}),indeterminateIcon:le(qv,{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"},...h},...g});return t?le(w,{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 Uv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Yv=["photo","icon","initials"],Xv={photo:"Photo",icon:"Icon",initials:"Initials"},Jv=["xx-small","x-small","small","medium","large","x-large","xx-large"],Zv={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function $v({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Kv({color:e,selected:a,onClick:t}){const i=(n=e)?n.charAt(0).toUpperCase()+n.slice(1):"";var n;return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function _v(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a("initials"),[l,s]=a(!1),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface"),x="photo"===r,z=()=>{const a={size:i,clickable:l,insideButton:c};return x||(a.color=e),"initials"===r&&(a.initials="LN"),"photo"===r&&(a.src="https://i.pravatar.cc/150?img=3",a.alt="User avatar"),a};return ce(u,{sx:{pb:8},children:[le(vA,{title:"Avatar",component:"Avatar"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Avatar",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:f,surface:b,children:h?ce(Ig,{max:3,size:i,children:[le(Lg,{...z()}),le(Lg,{color:e,size:i,initials:"AB"}),le(Lg,{color:e,size:i,initials:"CD"}),le(Lg,{color:e,size:i,initials:"EF"})]}):le(Lg,{...z()})}),le(nv,{code:(()=>{const a=[];return x||"default"===e||a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),"initials"===r&&a.push('initials="LN"'),"photo"===r&&a.push('src="..." alt="User avatar"'),l&&a.push("clickable onClick={handleClick}"),c&&a.push("insideButton"),h?"<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:ce(u,{sx:{p:3},children:[ce(u,{sx:{opacity:x?.4:1,pointerEvents:x?"none":"auto"},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Uv.map(a=>ce(u,{children:[le(Li,{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(Kv,{color:a,selected:e===a,onClick:t},a))})]},a.label))}),x&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Jv.map(e=>le($v,{label:Zv[e],selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(m,{direction:"row",spacing:1,children:Yv.map(e=>le($v,{label:Xv[e],selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(xv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clickable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Inside Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(xv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Inside Button"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Group"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(xv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Avatar"})})]})]})}const ex=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ax={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},tx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ix=["filled","outlined","rounded","twotone","sharp"],nx={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},rx={Home:{filled:Me,outlined:Pe,rounded:Ye,twotone:ra,sharp:ba},Favorite:{filled:Te,outlined:He,rounded:Xe,twotone:oa,sharp:va},Delete:{filled:Ae,outlined:Oe,rounded:Je,twotone:la,sharp:xa},Settings:{filled:Le,outlined:Ee,rounded:Ze,twotone:sa,sharp:ya},Search:{filled:Ie,outlined:Ie,rounded:$e,twotone:ca,sharp:za},Star:{filled:Ne,outlined:Ve,rounded:Ke,twotone:da,sharp:wa},Person:{filled:We,outlined:Qe,rounded:_e,twotone:ha,sharp:Sa},Notifications:{filled:ye,outlined:je,rounded:ea,twotone:ua,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:ia,twotone:fa,sharp:Ta},Info:{filled:Fe,outlined:we,rounded:na,twotone:ga,sharp:Ma}};function ox({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function lx({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(ox,{ratio:a,threshold:t})]})}function sx({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function cx(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a("filled"),[s,c]=a("default"),[d,h]=a("medium"),[p,f]=a("40"),[g,b]=a(!1),[v,x]=a("Home"),[z,w]=a(""),[S,k]=a({}),C=ax[s]||"Default",B="twotone"===o,T="custom"===d?(parseInt(p,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[d]||"24px",M=function(e,a){return rx[e]?.[a]||rx[e]?.filled||Me}(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:nn("--Background"),iconColor:nn("--Icons-"+C),iconVariant:nn("--Icons-Variant-"+C)})},[s,C]),ce(u,{sx:{pb:8},children:[le(vA,{title:"Icon",component:"Icon"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Icon",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(u,{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(Ff,{color:s,size:d,fontSize:"custom"===d?parseInt(p,10)||40:void 0,disabled:g,twoTone:B,"aria-label":I?z.trim():void 0,children:le(M,{})})}),le(nv,{code:(()=>{const e=[];"default"!==s&&e.push('color="'+s+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(u,{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)"}}}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Enter a MUI icon name."," ",le(u,{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 ↗"})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ix.map(e=>le(sx,{label:nx[e],selected:o===e,onClick:()=>l(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:tx.map(e=>ce(u,{children:[le(Li,{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=ax[e],t=s===e;return le(u,{component:"button",onClick:()=>c(e),"aria-label":"Select "+ex(e),"aria-pressed":t,title:ex(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(ue,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(sx,{label:ex(e),selected:d===e,onClick:()=>h(e)},e))}),"custom"===d&&ce(u,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(u,{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(Li,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(u,{component:"input",type:"text",value:z,onChange:e=>w(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(Li,{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)'})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(xv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:[nx[o]," / ",ex(s)," / ","custom"===d?p+"px":d,I?" / meaningful":" / decorative"]}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le(lx,{label:"var(--Icons-"+C+") vs. var(--Background)",ratio:tn(S.iconColor,S.background),threshold:3,note:L+" at "+T+" in "+ex(s)+" color"}),B&&le(lx,{label:"var(--Icons-Variant-"+C+") vs. var(--Background)",ratio:tn(S.iconVariant,S.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{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:[ce(xi,{style:{fontWeight:600},children:["Current icon — ",I?"meaningful ✓":"decorative"]}),le(u,{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})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Decorative (no aria-label):"}),le(Li,{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(u,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:N})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Meaningful (with aria-label):"}),le(Li,{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(u,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:W})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:["Disabled state",g?" ← current":"",":"]}),le(Li,{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&&ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:["Two-tone",B?" ← current":"",":"]}),ce(Li,{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."]})]}),ce(u,{sx:{py:1.5},children:[ce(xi,{children:["Touch target — ",T," icon","small"===d?" ⚠":" ✓",":"]}),le(Li,{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 "+T+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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:i},n,r)=>ce(u,{sx:{py:1.5,borderBottom:n<r.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[ce(u,{children:[ce(xi,{children:[e," — ",t]}),le(Li,{style:{color:"var(--Text-Quiet)"},children:i})]}),d===a&&le(u,{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(Lb,{value:3,children:le(pA,{component:"Icon"})})]})]})}const dx={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 hx({children:e,icon:a,label:t,variant:i="solid",color:n="default",size:r="medium",extended:o=!1,animate:l=!1,disabled:s=!1,onClick:c,ariaLabel:d,className:h="",sx:m={},...p}){"production"!==process.env.NODE_ENV&&"solid"!==i&&console.warn('[Fab] variant="'+i+'" 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=Xf("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)"}}(n),g=dx[r]||dx.medium,b=a||e||le(Aa,{sx:{fontSize:g.iconSize}}),v=d||t||"Action";return ce(se,{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"}),ce(u,{component:"button",type:"button",role:"button","aria-label":v,onClick:c,disabled:s,className:"fab fab-solid fab-"+n+" fab-"+r+(o?" fab-extended":"")+(l?" fab-animate":"")+(s?" fab-disabled":"")+(h?" "+h:""),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:`${Zf(n)}, ${jf}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:s?"not-allowed":"pointer",opacity:s?"var(--Disabled, 0.38)":1,outline:"none",flexShrink:0,transition:"background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease","&:hover":s?{}:{backgroundColor:f.hover,boxShadow:`${Zf(n)}, ${qf}`},"&:active":s?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:Zf(n)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!s&&{"--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(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:b}),o&&t&&le(u,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const ux=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",mx=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],px={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function fx({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gx({color:e,selected:a,onClick:t}){const i=px[e]||"Primary";return le(u,{component:"button",onClick:()=>t(e),"aria-label":"Select "+ux(e),"aria-pressed":a,title:ux(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function bx({value:e,onChange:a,placeholder:t,label:i}){return ce(u,{children:[i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:i}),le(u,{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 vx(){const[e,t]=a("default"),[n,r]=a("medium"),[o,l]=a("Add"),[s,c]=a(!1),[d,h]=a("Create"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a("Default"),[z,w]=a("Surface"),S=e,k=i(null),C={small:32,medium:48,large:56},B=cn(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 ce(u,{sx:{pb:8},children:[le(vA,{title:"Floating Action Button",component:"Fab"}),le(u,{sx:{mt:1},children:le(ig,{theme:v,onThemeChange:x,surface:z,onSurfaceChange:w})}),le(u,{ref:k,...v?{"data-theme":v}:{},"data-surface":z,sx:{position:"absolute",width:0,height:0,overflow:"hidden"},"aria-hidden":"true"}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Fab",theme:v,surface:z})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:v,surface:z,children:le(hx,{color:S,size:n,icon:(()=>{const e=ge[o]||ge.Add;return le(Ff,{size:"medium",children:le(e,{})})})(),extended:s,label:d,animate:p,disabled:g,ariaLabel:s?d:o})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==n&&a.push('size="'+n+'"'),a.push("icon={<"+o+"Icon />}"),s&&(a.push("extended"),a.push('label="'+d+'"')),p&&a.push("animate"),g&&a.push("disabled"),a.push('ariaLabel="'+(s?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:ce(u,{sx:{p:3},children:[le(u,{sx:{mb:3}}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:mx.map(a=>ce(u,{children:[le(Li,{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(gx,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(fx,{label:ux(e),selected:n===e,onClick:()=>r(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(bx,{label:"Icon Name",value:o,onChange:l,placeholder:"Add"}),ce(Li,{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)"]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Extended"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(xv,{checked:s,onChange:e=>c(e.target.checked),size:"small","aria-label":"Extended"})]}),s&&le(u,{sx:{mt:1.5},children:le(bx,{label:"Label Text",value:d,onChange:h,placeholder:"Create"})}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Animation"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(xv,{checked:p,onChange:e=>f(e.target.checked),size:"small","aria-label":"Animation"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[ce(di,{children:["Contrast — ",e," on ",z,v?" / "+v:""]}),ce(m,{spacing:0,children:[le(ln,{label:"FAB fill vs. page background",note:"Non-text contrast, 3:1 — the FAB has to be findable against what it floats over.",ratio:tn(B.fabBg,B.background),threshold:3}),le(ln,{label:"Icon vs. FAB fill — resting",note:"The glyph carries the meaning, so it is held to text contrast.",ratio:tn(B.fabIcon,B.fabBg),threshold:4.5}),le(ln,{label:"Icon vs. FAB fill — hover",ratio:tn(B.fabIcon,B.hover,B.fabBg),threshold:4.5}),le(ln,{label:"Icon vs. FAB fill — pressed",ratio:tn(B.fabIcon,B.pressed,B.fabBg),threshold:4.5}),le(ln,{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:tn(B.focusVisible,B.background),threshold:3}),le(sn,{label:"Target size",note:"WCAG 2.5.8 asks 24x24 CSS px minimum; 44x44 is the AAA / platform figure.",pass:C[n]>=44,detail:C[n]+"px"})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Role:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Label:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:s?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Focus:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Disabled:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Best Practices"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"One per screen:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Extended for clarity:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Animation:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})]}),le(Lb,{value:3,children:le(pA,{component:"Fab"})})]})]})}const xx=e=>e.charAt(0).toUpperCase()+e.slice(1);function yx(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+xx(e)+")":"var(--Border-Variant)"}function zx(e,a){const t=e&&!["default","border","border-variant"].includes(e)?xx(e):"Default",i=yx(e);return"light"===a?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+i}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+i}}const wx={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function Sx({color:e="default",orientation:a="horizontal",size:t="small",children:i,indicatorText:n,indicatorStyle:r="outline",textAlign:o="center",className:l="",sx:s={},...c}){const d=yx(e),h=wx[t]||wx.small,m=!(!i&&!n),p=i||n,f="vertical"===a;if(f&&!m)return le(u,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" "+l,sx:{display:"inline-block",width:h,alignSelf:"stretch",minHeight:24,backgroundColor:d,flexShrink:0,...s},...c});if(f&&m){const a=zx(e,r),t="top"===o?"0 0 10%":"1 1 auto",i="top"===o?"1 1 auto":"bottom"===o?"0 0 10%":"1 1 auto";return ce(u,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" divider-indicator "+l,sx:{display:"inline-flex",flexDirection:"column",alignItems:"center",alignSelf:"stretch",minHeight:24,flexShrink:0,...s},...c,children:[le(u,{sx:{flex:t,width:h,backgroundColor:d}}),le(u,{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(u,{sx:{flex:i,width:h,backgroundColor:d}})]})}if(!m)return le(u,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:h,backgroundColor:d,flexShrink:0,...s},...c});const g=zx(e,r),b="left"===o?"0 0 10%":"1 1 auto",v="left"===o?"1 1 auto":"right"===o?"0 0 10%":"1 1 auto";return ce(u,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...s},...c,children:[le(u,{sx:{flex:b,height:h,backgroundColor:d}}),le(u,{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(u,{sx:{flex:v,height:h,backgroundColor:d}})]})}const kx=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Cx(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 Bx={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}},Tx={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}},Mx={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},Ax=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const Lx={info:we,success:Se,warning:ke,error:Ce},Ix={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 Nx({variant:e="primary-outline",size:a="medium",label:t,labelPosition:i="standard",placeholder:n,helperText:r,validation:l,validationMessage:s,disabled:c=!1,id:d,value:h,defaultValue:m,onChange:p,name:f,type:g="text",multiline:b=!1,rows:v,maxRows:x,resize:y="vertical",startAdornment:w,endAdornment:S,fullWidth:k=!1,className:T="",sx:M={},"aria-label":A,"aria-labelledby":L,"aria-describedby":I,"aria-required":N,"aria-invalid":W,inputProps:D={},...R}){const F=function(){const e={};return kx.forEach(a=>{e[a+"-outline"]=Cx(a)}),e.outline=Cx("primary"),e}(),P=F[e]||F["primary-outline"],H="floating"===i;"production"!==process.env.NODE_ENV&&/-light$|^light$/.test(e)&&console.warn('[Input] variant="'+e+'" was removed. It differed from "'+e.replace(/-?light$/,"")+'-outline" only by a token no design system publishes, so the two rendered identically. For a lighter field use data-surface="Surface-Brightest" on its container.');const O=H?Tx[a]||Tx.medium:Bx[a]||Bx.medium,E=o(),V=d||E,{labelX:Q,padX:j,restingY:q,shrunkY:G}=function(e,a){const t=parseInt(e.height,10)||56,i=parseInt(e.fontSize,10)||15,n="var(--Input-Padding, "+(e.leftPad||14)+"px)",r=(e.iconSize||18)+8;return{labelX:a?"calc("+n+" + "+r+"px)":n,padX:n,clearance:a?r:0,restingY:Math.round((t-1.4375*i)/2),shrunkY:6}}(O,!!w),U=Mx[a]||Mx.medium,Y="var(--Text)",X=l?Ix[l]:null,J=l?Lx[l]:null,Z=X||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 ce(u,{className:"inp-"+e+" "+T,sx:{width:k?"100%":"auto",...M},children:[(()=>{if(!t||H)return null;return le("small"===a?xi:wi,{component:"label",htmlFor:V,sx:{display:"block",marginBottom:"6px",color:c?"var(--Quiet)":"var(--Text)",fontSize:O.labelSize,fontWeight:500,opacity:c?"var(--Disabled, 0.38)":1},children:t})})(),le(u,{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",...!c&&{"&:hover":{borderColor:Z.hoverBorder},"&:active":{borderColor:Z.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(u,{children:le(z,{value:h,defaultValue:m,onChange:p,name:f,type:g,disabled:c,placeholder:n,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:w?le(C,{position:"start",children:w}):void 0,endAdornment:(()=>{if(S)return le(C,{position:"end",children:S})})()},sx:{"& .MuiOutlinedInput-root":{backgroundColor:"var(--Hover)",color:"var(--Quiet)",fontSize:O.fontSize,minHeight:b?"auto":O.height,padding:0,borderRadius:0,transition:"color 0.15s ease-in-out",...H&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:Y},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:Y},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"},"& input":{padding: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"},...w&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...Ax(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)",...Ax(U.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:Y},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"}},"& .MuiOutlinedInput-notchedOutline legend":{display:"none"},"& .MuiOutlinedInput-notchedOutline":{top:0},"& .MuiOutlinedInput-root.Mui-focused":{outline:"none"},"& .MuiOutlinedInput-root:focus-within":{outline:"none"}},...R})})}),l&&s?ce(u,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[J&&le(J,{sx:{fontSize:O.iconSize,color:X.icon,flexShrink:0}}),le(B,{sx:{color:X.text,fontSize:"small"===a?"11px":"12px",margin:0},children:s})]}):r?le(B,{sx:{color:"var(--Quiet)",fontSize:"small"===a?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:r}):null]})}const Wx=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Dx=Xf,Rx={small:{touchTarget:24,box:16,dot:8,gap:4,LabelComp:xi},medium:{touchTarget:24,box:20,dot:10,gap:8,LabelComp:wi},large:{touchTarget:24,box:24,dot:12,gap:12,LabelComp:Ti}};function Fx({size:e,color:a,checked:t}){const i=Dx(a),n=t?"var(--Buttons-"+i+"-Border)":"var(--Border)",r="var(--Buttons-"+i+"-Border)",o=Rx[e]||Rx.medium;return le(u,{className:"radio-circle-icon",sx:{width:o.box,height:o.box,boxSizing:"border-box",borderRadius:"50%",border:"2px solid "+n,flexShrink:0,backgroundColor:"transparent",position:"relative",transition:"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"},children:t&&le(u,{sx:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:r}})})}function Px({theme:e,surface:a,color:t="default",size:i="medium",label:n,labelPlacement:r="end",checked:o,disabled:l=!1,onChange:s,name:c,value:d,className:h="",sx:u={},"aria-label":m,"aria-labelledby":p,"aria-describedby":f,inputProps:g={},...b}){const v=Wx.includes(t)?t:"default",x=Rx[i]||Rx.medium,y=x.LabelComp,z=(x.touchTarget-x.box)/2,S={...g,...m&&{"aria-label":m},...p&&{"aria-labelledby":p},...f&&{"aria-describedby":f}},k=le(L,{checked:o,disabled:l,onChange:s,name:c,value:d,icon:le(Fx,{size:i,color:v,checked:!1}),checkedIcon:le(Fx,{size:i,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":a||void 0,className:"radio-"+v+" "+h,inputProps:S,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":{boxShadow:"0 0 0 1px var(--Background), 0 0 0 calc(1px + var(--Sizing-Half, 4px)) color-mix(in srgb, var(--Buttons-"+Dx(v)+"-Border) 10%, transparent)"},"&:not(.Mui-checked):hover .radio-circle-icon":{borderColor:"var(--Buttons-"+Dx(v)+"-Border)"},"&:active .radio-circle-icon":{boxShadow:"0 0 0 1px var(--Background), 0 0 0 calc(1px + var(--Sizing-1, 8px)) color-mix(in srgb, var(--Buttons-"+Dx(v)+"-Border) 10%, transparent)"},"&:not(.Mui-checked):active .radio-circle-icon":{borderColor:"var(--Border)"},"&.Mui-focusVisible .radio-circle-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...u},...b});return n?le(w,{control:k,label:le(y,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:n}),labelPlacement:r,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 Hx({color:e="default",size:t="medium",label:i,options:n=[],value:r,defaultValue:o,onChange:l,orientation:s="vertical",labelPlacement:c="end",disabled:d=!1,spacing:h=1,name:u,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=void 0!==r,[x,y]=a(o),z=v?r:x;return ce(T,{component:"fieldset",disabled:d,className:"radio-group-"+e+" "+m,sx:p,children:[i&&le(M,{component:"legend",sx:{color:d?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===t?"13px":"15px",fontWeight:500,mb:1,"&.Mui-focused":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Quiet)",opacity:"var(--Disabled, 0.38)"}},children:i}),le(A,{value:z??"",onChange:(e,a)=>{v||y(e?.target?.value??a),l?.(e,a)},name:u,"aria-label":f,"aria-labelledby":g,row:"horizontal"===s,sx:{display:"flex",flexDirection:"horizontal"===s?"row":"column",flexWrap:"horizontal"===s?"wrap":"nowrap",alignItems:"horizontal"===s?"center":"flex-start",gap:h},...b,children:n.map(a=>le(Px,{color:e,size:t,label:a.label,labelPlacement:c,value:a.value,disabled:a.disabled||d},a.value))})]})}const Ox=Px,Ex=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Vx={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function Qx({theme:e,surface:a,variant:t="default",size:i="medium",value:n,defaultValue:r,onChange:o,onChangeCommitted:l,min:s=0,max:c=100,step:d=1,marks:h=!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":w,"aria-labelledby":S,...k}){const C=function(){const e={};return Ex.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,T=Vx[i]||Vx.medium,M=null===d,A=(!M||!0!==h)&&h;if("production"!==process.env.NODE_ENV&&M&&!0===h&&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===h&&d){const e=Math.floor((c-s)/d)+1;e>20&&console.warn(`[OmniDesign] <Slider marks> with step=${d} over ${s}–${c} 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(n)||Array.isArray(r),W=void 0!==f?f:g,D="inverted"===W,R=!1===W,F="small"===i?xi:wi,P=T.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?T.track:P,width:L?O?T.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?T.track:P,width:L?V?T.track:P:void 0,borderRadius:P/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":T.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:T.visual,height:T.visual,borderRadius:"50%",backgroundColor:B.thumb,border:B.thumbBorder||"none",boxShadow:`${Zf(t)}, ${Vf}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${Zf(t)}, ${Qf}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${Zf(t)}, ${Qf}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:Zf(t)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${Zf(t)}, ${Qf}`}},...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:T.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...z},j=le(I,{value:n,defaultValue:r,onChange:o,onChangeCommitted:l,min:s,max:c,step:d,marks:A,valueLabelDisplay:m,orientation:p,track:D?"inverted":!R&&"normal",disabled:b,name:x,"aria-label":w,"aria-labelledby":S,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?ce(u,{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"===i?"13px":"15px",fontWeight:500,opacity:b?"var(--Disabled, 0.38)":1},children:v}),j]}):j}const jx=Qx,qx=Qx,Gx=["Default","Primary","Secondary","Tertiary","Neutral"],Ux={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}},Yx=Object.keys(Ux);function Xx(e,a){if("custom"===e)return{...Ux.Classic,name:"Custom",description:"Custom",...a||{}};const t=Ux[e];return t?{...t}:{...Ux.Classic}}function Jx(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 Zx(e){const a=e||"Primary";return"Default"===a?"var(--Text)":"var(--Text-"+a+")"}function $x(e,a){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*a,dy:Math.sin(t)*a}}const Kx={"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 _x({text:a="Your Brand. Perfected.",curves:t,arc:i=160,radius:n=300,direction:r="up",rotation:o=0,autoCrop:l=!0,textStyle:s="display-large",fontSize:c,fontFamily:d,fontWeight:h,letterSpacing:u,color:m="var(--Text, #1a1a1a)",bevel:p=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:b,className:v,style:x,...y}){const z=g?Xx(g,b):null,w=z?!!z.bevel:!!p,S=Kx[s]||Kx["display-large"],k=d??S.fontFamily,C=c??S.fontSize,B=h??S.fontWeight,T=u??S.letterSpacing,M="number"==typeof c?c:S.pxHint,A=t&&t.length>0?t:[{arc:i,radius:n,direction:r}],{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 i=0;let n="M "+t+" "+i,r=0,o=0;for(const{arc:e,radius:l,direction:s}of a){const a=ey(e,1,359),c=Math.max(10,l),d=a*Math.PI/180,h=2*c*Math.sin(d/2),u=c*(1-Math.cos(d/2));t+=h,n+=" A "+c+" "+c+" 0 "+(a>180?1:0)+" "+("up"===s?1:0)+" "+t+" "+i,"up"===s?r=Math.max(r,u):o=Math.max(o,u)}return{d:n,width:t,upMax:r,downMax:o,pathId:e}},[JSON.stringify(a)])}(A),R=Math.ceil(N+M),F=Math.ceil(W+M),P=Math.ceil(M),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,Y]=e.useState(M);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 i=a.width/t;Y(M*i)};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[H,M,q]);const X=w&&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 i=H/2,n=O/2,r=o*Math.PI/180,s=Math.cos(r),c=Math.sin(r),d=(e,a)=>{const t=e-i,r=a-n;return{x:i+t*s-r*c,y:n+t*c+r*s}},h=[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)],u=Math.min(...h.map(e=>e.x)),m=Math.max(...h.map(e=>e.x)),p=Math.min(...h.map(e=>e.y)),f=Math.max(...h.map(e=>e.y)),g=.12*M,b={x:u-g,y:p-g,width:m-u+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,M,T,k,B,w,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 ce("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+")"})}),ce("g",{transform:Q,children:[X&&(()=>{const e=z?z.depth/96:.045,t=Math.max(2,Math.round(M*e)),i=Math.max(1,Math.round(M*e*.67)),n={fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof T?T+"px":T};return ce(se,{children:[le("text",{className:"dino-bevel-layer dino-bevel-layer--lowlight",fill:"rgb(var(--Buttons-"+f+"-Lowlight))",transform:"translate(0 "+t+")",style:n,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 -"+i+")",style:n,children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})})(),le("text",{className:"dino-curved-text__base",fill:X?"var(--Buttons-"+f+"-Button)":w?Zx(f):m,style:{fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof T?T+"px":T},children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})]})}function ey(e,a,t){return Math.max(a,Math.min(t,e))}function ay(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 ty(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function iy([e,a,t]){const i=[e,a,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*i[0]+.7152*i[1]+.0722*i[2]}function ny({targetRef:e,label:i,deps:n=[]}){const[r,o]=a(null),[l,s]=a(null);t(()=>{if(!e.current)return;const a=requestAnimationFrame(()=>{if(!e.current)return;const a=getComputedStyle(e.current);o(ay(a.backgroundColor)),s(ay(a.color))});return()=>cancelAnimationFrame(a)},n);const c=function(e,a){if(!e||!a)return null;const t=iy(e),i=iy(a);return(Math.max(t,i)+.05)/(Math.min(t,i)+.05)}(r,l),d=null!==c&&c>=4.5,h=null===c?"—":null!==c&&c>=7?"AAA":d?"AA":"Fail",u=null===c?"var(--Text-Quiet)":d?"var(--Text-Success)":"var(--Text-Error)";return ce("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[ce("div",{style:{flex:1,minWidth:0},children:[le(xi,{style:{fontWeight:600},children:i}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",ty(r)," · Text ",ty(l)]})]}),ce("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:u},children:h}),le(Li,{style:{color:"var(--Text-Quiet)"},children:null!==c?c.toFixed(2)+":1":"—"})]})]})}const ry=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],oy=[{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)"}],ly=Gx.map(e=>({value:e,label:e}));function sy({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function cy(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a("Your Brand. Perfected."),[c,d]=a("display-large"),[h,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),[w,S]=a(700),[k,C]=a(!1),[B,T]=a("Primary"),[M,A]=a("Classic"),L=i(null),[I,N]=a(null);t(()=>{L.current&&N({current:L.current.querySelector("text")})},[h,c,f,v,y,w,k,B,M]);const W=oy.find(e=>e.value===h)?.css||oy[0].css;function D(e,a){g(t=>t.map((t,i)=>i===e?{...t,...a}:t))}return ce(u,{children:[le(vA,{title:"Curved Display Text",component:"CurvedText"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),le(wi,{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."}),ce(u,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(u,{sx:{minWidth:0},children:le(u,{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(_x,{text:l,curves:f,textStyle:c,rotation:v,letterSpacing:y,fontWeight:w,bevel:k,bevelTheme:B,bevelPreset:k?M:void 0,color:W})})}),le(u,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"CurvedText",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Nx,{label:"Text",value:l,onChange:e=>s(e.target.value),placeholder:"Your headline…",size:"medium"}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(m,{direction:"row",spacing:1,children:[1,2].map(e=>le(sy,{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(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(m,{spacing:2,children:f.map((e,a)=>ce(u,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[ce(m,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[ce(Li,{style:{fontWeight:700},children:["Curve ",a+1]}),le("div",{style:{flex:1}}),ce(m,{direction:"row",spacing:1,children:[le(sy,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>D(a,{direction:"up"})}),le(sy,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>D(a,{direction:"down"})})]})]}),ce(m,{spacing:1,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",ce("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(Qx,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>D(a,{radius:t})})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",ce("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(Qx,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>D(a,{arc:t})})]})]})]},a))})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:ry.map(e=>le(sy,{label:e.label,selected:c===e.value,onClick:()=>d(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",ce("span",{style:{float:"right"},children:[y,"px"]})]}),le(Qx,{min:-4,max:40,step:1,value:y,onChange:(e,a)=>z(a)}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:w})]}),le(Qx,{min:100,max:900,step:100,value:w,onChange:(e,a)=>S(a)}),le(Li,{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."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(yv,{label:"3D bevel effect",checked:k,onChange:e=>C(e.target.checked)}),k&&ce(u,{sx:{mt:1.5},children:[le(Li,{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:Yx.map(e=>le(sy,{label:e,selected:M===e,onClick:()=>A(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:ly.map(e=>le(sy,{label:e.label,selected:B===e.value,onClick:()=>T(e.value)},e.value))})]}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",ce("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."]})]}),ce(u,{children:[ce(m,{direction:"row",alignItems:"center",sx:{mb:1},children:[ce(Oi,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",ce("span",{style:{float:"right",marginRight:12},children:[v,"°"]})]}),le(nb,{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 i=a.getTotalLength();if(!i)return;let n=0;try{n=t.getComputedTextLength?.()||0}catch(e){}n||(n=Math.min(i,18*l.length));const r=Math.max(0,(i-n)/2),o=Math.min(i,r+n),s=a.getPointAtLength(r),c=a.getPointAtLength(o),d=180*Math.atan2(c.y-s.y,c.x-s.x)/Math.PI,h=Math.max(-45,Math.min(45,Math.round(-d)));x(h)},children:"Auto-level"})]}),le(Qx,{min:-45,max:45,step:1,value:v,onChange:(e,a)=>x(a)}),le(Li,{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.'})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:oy.map(e=>le(sy,{label:e.label,selected:h===e.value,onClick:()=>p(e.value)},e.value))})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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(ny,{targetRef:I,label:"Curved text",deps:[h,c,JSON.stringify(f),v,y]}),ce(xi,{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(Lb,{value:3,children:le(pA,{component:"CurvedText"})})]})})})]})]})}const dy={"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 hy({text:a="DinoDesign",theme:t="Primary",preset:i="Classic",custom:n,textStyle:r="display-large",fontSize:o,fontFamily:l,fontWeight:s,letterSpacing:c,className:d,style:h,...u}){const m=dy[r]||dy["display-large"],p=l??m.fontFamily,f=o??m.fontSize,g=s??m.fontWeight,b=c??m.letterSpacing,v="number"==typeof o?o:m.pxHint,x=Xx(i,n),y="dino-bevel-"+e.useId().replace(/:/g,""),z=y+"-s",w=e.useRef(null),[S,k]=e.useState(v),C=.6*v,B=Math.max(400,a.length*C+80),T=1.9*v,M=B/2,A=.7*T;e.useEffect(()=>{if(!w.current||"undefined"==typeof ResizeObserver)return;const e=w.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=S>=19,I=x.bevel?$x(x.angle+180,x.depth):{dx:0,dy:0},N=x.bevel?$x(x.angle,x.depth):{dx:0,dy:0},W=x.shadow?$x(x.angle,x.shadowDistance??6):{dx:0,dy:0},D=L?Jx(t,"base"):Zx(t),R=Jx(t,"highlight"),F=Jx(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 ce("svg",{ref:w,viewBox:"0 0 "+B+" "+T,width:B,height:T,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...h},"aria-label":a,role:"img",className:["dino-bevel-text",d].filter(Boolean).join(" "),...u,children:[ce("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&&ce("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"}),ce("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:M,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:M,y:A,textAnchor:"middle",fill:D,filter:H,style:P,children:a})]})}const uy=[...Yx.map(e=>({value:e,label:e,description:Ux[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],my=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function py({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function fy({option:e,active:a,onClick:t}){return ce(u,{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(Li,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function gy(){const[e,t]=a("Default"),[i,n]=a("Surface"),[r,o]=a("DinoDesign"),[l,s]=a("Primary"),[c,d]=a("Classic"),[h,p]=a("light"),[f,g]=a(135),[b,v]=a(5),[x,y]=a(1),[z,w]=a(!0),[S,k]=a(!0),[C,B]=a(6),[T,M]=a(8),[A,L]=a(60),[I,N]=a(96),[W,D]=a(900),[R,F]=a(0),P="custom"===c,H=P?{angle:f,depth:b,softness:x,bevel:z,shadow:S,shadowDistance:C,shadowBlur:T,shadowOpacity:A/100}:void 0;const O=my.find(e=>e.value===h)?.css||my[0].css;return ce(u,{children:[le(vA,{title:"Bevel Display Text",component:"BevelText"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),le(wi,{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."}),ce(u,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(u,{sx:{minWidth:0},children:le(u,{"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(hy,{text:r,theme:l,preset:c,custom:H,fontSize:I,fontWeight:W,letterSpacing:R})})}),le(u,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"BevelText",theme:e,surface:i})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Nx,{label:"Text",value:r,onChange:e=>o(e.target.value),placeholder:"Your headline…",size:"medium"}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Gx.map(e=>le(py,{label:e,selected:l===e,onClick:()=>s(e)},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",ce("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:uy.map(e=>le(fy,{option:e,active:c===e.value,onClick:()=>function(e){if(d(e),"custom"!==e){const a=Xx(e);g(a.angle),v(a.depth??5),y(a.softness??1),w(a.bevel),k(a.shadow),B(a.shadowDistance??6),M(a.shadowBlur??8),L(Math.round(100*(a.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&ce(u,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),ce(m,{spacing:2,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",ce("span",{style:{float:"right"},children:[f,"°"]})]}),le(Qx,{min:0,max:360,step:5,value:f,onChange:(e,a)=>g(a)})]}),ce(u,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(yv,{label:"Inset bevel",checked:z,onChange:e=>w(e.target.checked)}),z&&ce(m,{spacing:1.5,sx:{mt:1.5},children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",ce("span",{style:{float:"right"},children:[b,"px"]})]}),le(Qx,{min:1,max:16,step:1,value:b,onChange:(e,a)=>v(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",ce("span",{style:{float:"right"},children:[x,"px"]})]}),le(Qx,{min:0,max:6,step:.5,value:x,onChange:(e,a)=>y(a)})]})]})]}),ce(u,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(yv,{label:"Drop shadow",checked:S,onChange:e=>k(e.target.checked)}),S&&ce(m,{spacing:1.5,sx:{mt:1.5},children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",ce("span",{style:{float:"right"},children:[C,"px"]})]}),le(Qx,{min:1,max:24,step:1,value:C,onChange:(e,a)=>B(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",ce("span",{style:{float:"right"},children:[T,"px"]})]}),le(Qx,{min:0,max:24,step:1,value:T,onChange:(e,a)=>M(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",ce("span",{style:{float:"right"},children:[A,"%"]})]}),le(Qx,{min:10,max:100,step:5,value:A,onChange:(e,a)=>L(a)})]})]})]})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),ce(m,{spacing:2,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",ce("span",{style:{float:"right"},children:[I,"px"]})]}),le(Qx,{min:32,max:160,step:4,value:I,onChange:(e,a)=>N(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:W})]}),le(Qx,{min:400,max:900,step:100,value:W,onChange:(e,a)=>D(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",ce("span",{style:{float:"right"},children:[R,"px"]})]}),le(Qx,{min:-2,max:20,step:1,value:R,onChange:(e,a)=>F(a)})]})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(m,{direction:"row",spacing:1,children:my.map(e=>le(py,{label:e.label,selected:h===e.value,onClick:()=>p(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[ce(Li,{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(xi,{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(Lb,{value:3,children:le(pA,{component:"BevelText"})})]})})})]})]})}const by={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function vy(e,a){return"var(--"+(by[e]||"Primary")+"-Color-"+a+")"}const xy={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 yy(e,a){const t=xy[e]||xy.primary;return(t[a]||t.linear).map(e=>({...e}))}function zy({variant:e="linear",color:a="primary",angle:t=135,stops:i=null,position:n=null,blobs:r=null,cardProps:o={},minHeight:l=300,children:s,className:c="",sx:d={},...h}){const m="meshCard"===e,p="mesh"===e||m,f="radial"===e,g="linear"===e||f,b=i||yy(a,f?"radial":"linear"),v=r||yy(a,m?"meshCard":"mesh"),x=p?function(e){if(!e||0===e.length)return"none";const a=e.map(e=>{const a=vy(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+a+" 0%, transparent "+t+"%)"}),t=vy(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=>vy(e.family,e.tone)+" "+e.position+"%"),i=a||{x:50,y:50};return"radial-gradient(circle at "+i.x+"% "+i.y+"%, "+t.join(", ")+")"}(b,n||{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=>vy(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(b,t),y=g?b[0]:v[0];var z,w;const S=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((z=y?.tone||8,"black"===(w=y?.family||"primary")||"white"===w?z<=5?"light":"dark":z<=5?"dark":"light"));return le(u,m?{className:"gradient gradient-mesh-card "+c,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...d},...h,children:le(Iv,{variant:"solid",...o,children:le(Nv,{children:s})})}:{className:"gradient gradient-"+e+" "+c,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",color:S,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...d},...h,children:s})}const wy=e=>le(zy,{variant:"linear",...e}),Sy=e=>le(zy,{variant:"radial",...e}),ky=e=>le(zy,{variant:"mesh",...e}),Cy=e=>le(zy,{variant:"meshCard",...e});function By({color:e,className:a="",sx:t={},...i}){return le(u,{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},...i})}function Ty({children:e,container:a=!1,item:t=!1,spacing:i=2,sx:n={},...r}){return le(y,{container:a,item:t,spacing:i,sx:{transition:"all 0.2s ease-in-out",...n},...r,children: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 My=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],Ay={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function Ly({color:e="primary",width:a="hug",allCaps:t=!1,children:i,className:n="",sx:r={},...o}){const l="fill"===a,s=Ay[e]||"Primary";return le(u,{component:"span",className:"tag tag-"+e+(n?" "+n:""),sx:{display:l?"flex":"inline-flex",alignItems:"center",justifyContent:l?"center":"flex-start",height:"24px",px:"8px",borderRadius:0,backgroundColor:"var(--Tag-"+s+"-BG)",color:"var(--Tag-"+s+"-Text)",width:l?"100%":"auto",flexShrink:0,userSelect:"none",...r},...o,children:le(xi,{component:"span",sx:{color:"inherit",lineHeight:"24px",whiteSpace:"nowrap",fontWeight:600,textTransform:t?"uppercase":"none"},children:i})})}const Iy=e=>le(Ly,{color:"primary",...e}),Ny=e=>le(Ly,{color:"secondary",...e}),Wy=e=>le(Ly,{color:"tertiary",...e}),Dy=e=>le(Ly,{color:"neutral",...e}),Ry=e=>le(Ly,{color:"info",...e}),Fy=e=>le(Ly,{color:"success",...e}),Py=e=>le(Ly,{color:"warning",...e}),Hy=e=>le(Ly,{color:"error",...e}),Oy=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Ey({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Vy({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(Ey,{ratio:a,threshold:t})]})}function Qy({color:e,selected:a,onClick:t}){const i=Ay[e]||((n=e)?n.charAt(0).toUpperCase()+n.slice(1):"");var n;return le(u,{component:"button",onClick:()=>t(e),"aria-label":"Select "+i,"aria-pressed":a,title:i,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Tag-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Tag-"+i+"-Text)",pointerEvents:"none"}})})}function jy(){const[e,i]=a("primary"),[n,r]=a("New"),[o,l]=a(!1),[s,c]=a("Default"),[d,h]=a("Surface"),[p,f]=a({}),g=Ay[e]||"Primary";return t(()=>{f({tagText:nn("--Tag-"+g+"-Text"),tagBg:nn("--Tag-"+g+"-BG"),pageBg:nn("--Background")})},[e,g]),ce(u,{sx:{pb:8},children:[le(vA,{title:"Tag",component:"Tag"}),le(u,{sx:{mt:1},children:le(ig,{theme:s,onThemeChange:c,surface:d,onSurfaceChange:h})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Tag",theme:s,surface:d})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:s,surface:d,children:ce(u,{sx:{width:"100%",maxWidth:480},children:[le(u,{sx:{display:"flex",alignItems:"center",gap:2,mb:3},children:le(Ly,{color:e,allCaps:o,children:n})}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:My.map(e=>le(Ly,{color:e,allCaps:o,children:Ay[e]},e))})]})}),le(nv,{code:(()=>{const a=[];"primary"!==e&&a.push('color="'+e+'"'),o&&a.push("allCaps");return"<Tag"+(a.length?" "+a.join(" "):"")+">"+n+"</Tag>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Oy.map(a=>ce(u,{children:[le(Li,{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(Qy,{color:a,selected:e===a,onClick:i},a))})]},a.label))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:["bg: var(--Tag-",g,"-BG) · text: var(--Tag-",g,"-Text)"]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL TEXT"}),le(u,{component:"input",type:"text",value:n,onChange:e=>r(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)"}}})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(xi,{children:"All caps"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"text-transform: uppercase"})]}),le(xv,{checked:o,onChange:e=>l(e.target.checked),size:"small","aria-label":"All caps"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:['color="',e,'" — var(--Tag-',g,"-BG) / var(--Tag-",g,"-Text)"]}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(xi,{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(Vy,{label:"var(--Tag-"+g+"-Text) vs. var(--Tag-"+g+"-BG)",ratio:tn(p.tagText,p.tagBg),threshold:4.5,note:"Tag text on tag background for "+e+" color"}),le(Vy,{label:"var(--Tag-"+g+"-BG) vs. var(--Background)",ratio:tn(p.tagBg,p.pageBg),threshold:3,note:"Tag background against page background (non-text contrast, WCAG 1.4.11)"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Touch Target (WCAG 2.5.8)"}),le(xi,{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."}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{color:"var(--Text)"},children:"Tag height — 24px"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive. No touch target requirement on the Tag itself."})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"All Colors"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Visual overview of all tag colors in the current theme."}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:My.map(e=>le(Ly,{color:e,allCaps:o,children:Ay[e]},e))})]})]})]})]}),le(Lb,{value:3,children:le(pA,{component:"Tag"})})]})]})}function qy({children:e,maxWidth:a="lg",disableGutters:t=!1,sx:i={},...n}){return le(N,{maxWidth:a,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...i},...n,children:e})}function Gy({theme:e,surface:a="Surface",as:t="section",padding:i,className:n,style:r,children:o,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":a,className:n,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==i?{padding:i}:{},...r},...l,children:o})}function Uy(){return ce("div",{children:[le(si,{style:{marginBottom:12},children:"Section"}),ce(wi,{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(si,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(xi,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary" + data-surface="Surface", paints --Background.'}),ce(Gy,{theme:"Primary",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(vA,{title:"Primary-Light surface",component:"Section"}),le(wi,{children:"Body text picks up --Text automatically."}),le(xi,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(nb,{variant:"primary",children:"Primary button"})})]}),le(si,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),ce(Gy,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(si,{children:"Container surface (inherits theme)"}),le(wi,{children:"Useful for card-like regions."})]}),le(si,{style:{marginTop:32,marginBottom:12},children:"Different element"}),ce(xi,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),ce(Gy,{as:"article",theme:"Neutral",surface:"Surface-Dimmest",padding:"32px",style:{borderRadius:8},children:[le(si,{children:"Neutral / Surface-Dimmest article"}),le(wi,{children:"Renders as an <article> element."})]})]})}const Yy={small:{fab:32,fabSize:"small",action:32,actionSize:"small",gap:8},medium:{fab:48,fabSize:"medium",action:48,actionSize:"medium",gap:12},large:{fab:56,fabSize:"large",action:56,actionSize:"large",gap:16}};function Xy({actions:e=[],variant:r="solid",color:o="default",direction:l="up",size:s="medium",speed:c=50,openOnHover:d=!0,showTooltips:h=!0,open:m,onOpen:p,onClose:f,icon:g,ariaLabel:b="Speed Dial",className:v="",sx:y={},...z}){"production"!==process.env.NODE_ENV&&"solid"!==r&&console.warn('[SpeedDial] variant="'+r+"\" is not a SpeedDial variant; rendering solid. The design's FAB set has no shape axis — only State, Extended and Animate — so an outline FAB is not in the system.");const w=Yy[s]||Yy.medium,S=w.fab,k=w.action,C=w.gap,[B,T]=a(!1),M=void 0!==m,A=M?m:B,L=i(null),I="solid",N=w.actionSize,W=n(()=>{A?(M||T(!1),f?.()):(M||T(!0),p?.())},[A,M,p,f]),D=i(null),R=()=>"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(hover: hover) and (pointer: fine)").matches,F=n(()=>{D.current&&(clearTimeout(D.current),D.current=null)},[]),P=n(()=>{d&&R()&&(F(),A||(M||T(!0),p?.()))},[d,A,M,p,F]),H=n(()=>{d&&R()&&(F(),D.current=setTimeout(()=>{M||T(!1),f?.()},120))},[d,M,f,F]);t(()=>F,[F]);const O=n((e,a)=>{e.onClick?.(a),M||T(!1),f?.()},[M,f]);t(()=>{if(!A)return;const e=e=>{L.current&&!L.current.contains(e.target)&&(M||T(!1),f?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[A,M,f]),t(()=>{if(!A)return;const e=e=>{"Escape"===e.key&&(M||T(!1),f?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[A,M,f]);const E="up"===l||"down"===l,V="up"===l||"down"===l?"left":"top",Q=le(u,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",lineHeight:0,transformOrigin:"50% 50%",transition:"transform 0.3s ease",transform:A?"rotate(45deg)":"rotate(0deg)"},children:g||le(Aa,{})});return ce(u,{ref:L,onMouseEnter:P,onMouseLeave:H,className:"speed-dial speed-dial-"+r+" speed-dial-"+o+" speed-dial-"+l+" "+v,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:E?S+"px":"auto",height:E?"auto":S+"px",...y},...z,children:[le(hx,{size:w.fabSize,variant:I,color:o,onClick:W,"aria-label":b,"aria-expanded":A,"aria-haspopup":"menu",sx:{position:"relative",zIndex:2},children:Q}),le(u,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,a)=>{const t=(e=>{const a=S/2+C+k/2+e*(k+C);switch(l){case"up":default:return{bottom:a+"px",left:(S-k)/2+"px"};case"down":return{top:a+"px",left:(S-k)/2+"px"};case"left":return{right:a+"px",top:(S-k)/2+"px"};case"right":return{left:a+"px",top:(S-k)/2+"px"}}})(a),i=a*c,n=le(hx,{size:N,variant:I,color:o,role:"menuitem","aria-label":e.name||"Action "+(a+1),onClick:()=>O(e,a),sx:{position:"absolute",...t,opacity:A?1:0,transform:A?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:A?i+"ms":"0ms",pointerEvents:A?"auto":"none"},children:e.icon||le(Aa,{})},e.key||a);return h&&e.name?le(x,{title:e.name,placement:V,arrow:!0,open:!!A&&void 0,slotProps:{tooltip:{sx:{backgroundColor:"var(--Container)",color:"var(--Text)",fontSize:"12px",fontWeight:500,border:"1px solid var(--Border)",boxShadow:"0 2px 8px rgba(0,0,0,0.12)"}},arrow:{sx:{color:"var(--Container)"}}},children:n},e.key||a):n})})]})}const Jy=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Zy=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],$y=[{name:"Edit",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(La,{})})},{name:"Share",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Na,{})})},{name:"Delete",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Ae,{})})},{name:"Favorite",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Te,{})})}];function Ky({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _y({color:e,selected:a,onClick:t}){const i=Jy(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function ez(){const[e,t]=a("default"),[i,n]=a("up"),[r,o]=a(!0),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Speed Dial",component:"SpeedDial"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"SpeedDial",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:l,surface:c,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(Xy,{color:e,direction:i,showTooltips:r,actions:$y,ariaLabel:"Quick actions"})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"up"!==i&&a.push('direction="'+i+'"'),r||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:ce(u,{sx:{p:3},children:[ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Zy.map(a=>ce(u,{children:[le(Li,{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(_y,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(Ky,{label:Jy(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Tooltips"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(xv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"SpeedDial"})})]})]})}const az={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 tz({color:e="default",companyName:a="",year:t=(new Date).getFullYear(),rights:i="All rights reserved",children:n,className:r,style:o,...l}){const s=n??`© ${t}${a?" "+a:""}.${i?" "+i+".":""}`,c=az[e]||az.default,d=c.theme?{"data-theme":c.theme,"data-surface":c.surface||"Surface-Dim"}:{},h=c.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:c.bg,color:c.fg};return le("div",{...d,className:["dino-copyright",r].filter(Boolean).join(" "),style:{padding:"var(--Sizing-2, 16px) 24px",textAlign:"center",...h,...o},...l,children:le(xi,{style:{color:"inherit",opacity:.85},children:s})})}const iz={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}};function nz({value:e,defaultValue:r=0,onChange:o,min:l,max:s,step:c=1,variant:d="outlined",style:h="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:w={},...S}){const[k,C]=a(r),[B,T]=a(!1),M=i(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"===h&&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=iz[p]||iz.medium,E="small"===p?xi:wi,V=n(e=>{let a="number"==typeof e?e:parseFloat(e);isNaN(a)&&(a=0),void 0!==l&&a<l&&(a=l),void 0!==s&&a>s&&(a=s),A||C(a),o?.(a)},[A,o,l,s]),Q=i(L);Q.current=L;const j=n(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!==s&&e>0&&a>=s||V(a+e*c)},[x,c,l,s,V]),q=void 0!==l&&L<=l,G=void 0!==s&&L>=s,U=i(null),Y=i(null),X=n(()=>{U.current&&(clearTimeout(U.current),U.current=null),Y.current&&(clearInterval(Y.current),Y.current=null)},[]),J=n(e=>{x||(X(),j(e),U.current=setTimeout(()=>{let a=120,t=0;const i=()=>{j(e),t+=1,10===t&&a>60?(clearInterval(Y.current),a=60,Y.current=setInterval(i,a)):30===t&&a>30&&(clearInterval(Y.current),a=30,Y.current=setInterval(i,a))};Y.current=setInterval(i,a)},400))},[x,j,X]);t(()=>X,[X]);const Z=i(!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){}X()},onPointerCancel:X,onPointerLeave:X,onKeyDown:a=>{"Enter"!==a.key&&" "!==a.key||a.repeat||(a.preventDefault(),J(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||X()},onBlur:X}),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 ce(u,F?{className:"numberfield numberfield-outlined"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...w},...S,children:[te(),le(u,{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(u,{...ae,children:ce(u,{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(u,{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(--"+(Mx[p]||Mx.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(Mx[p]||Mx.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(Mx[p]||Mx.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(Mx[p]||Mx.medium).resting+"-Font-Size)",fontWeight:"var(--"+(Mx[p]||Mx.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(Mx[p]||Mx.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(u,{component:"input",ref:M,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>T(!0),onBlur:()=>T(!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"}}}),ce(u,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+D,flexShrink:0},children:[le(u,{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(Ff,{size:"medium",children:le(Wa,{})})}),le(u,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:D,flexShrink:0}}),le(u,{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(Ff,{size:"medium",children:le(Da,{})})})]})]})})}),v&&le(xi,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]}:{className:"numberfield numberfield-spinner"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{fontFamily:"inherit",...w},...S,children:[te(),ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===p?.5:1,opacity:x?"var(--Disabled, 0.38)":1},children:[le(u,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:48,height:"100%",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(Ff,{size:"small",children:le(Be,{})})}),le(u,{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(u,{...ae,children:le(u,{component:"input",ref:M,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>T(!0),onBlur:()=>T(!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(u,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:48,height:"100%",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(Ff,{size:"small",children:le(Aa,{})})})]}),v&&le(xi,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]})}const rz=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function oz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function lz(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a("DinoDesign"),[c,d]=a((new Date).getFullYear()),[h,p]=a("All rights reserved"),[f,g]=a(""),[b,v]=a(!1),[x,y]=a("default"),z=i(null),[w,S]=a(null);return t(()=>{z.current&&S({current:z.current.querySelector(".dino-copyright")})},[x,b,l,c,h,f]),ce(u,{children:[le(vA,{title:"Copyright",component:"Copyright"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),ce(wi,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",ce("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(u,{ref:z,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(tz,b?{color:x,children:f||"Type a custom message →"}:{color:x,companyName:l,year:Number(c)||(new Date).getFullYear(),rights:h})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Copyright",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:560},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),ce(m,{direction:"row",spacing:1,children:[le(oz,{label:"Auto-generated",selected:!b,onClick:()=>v(!1)}),le(oz,{label:"Custom",selected:b,onClick:()=>v(!0)})]})]}),!b&&ce(se,{children:[le(Nx,{label:"Company name",value:l,onChange:e=>s(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(nz,{label:"Year",value:Number(c),onChange:e=>d(e),min:1900,max:2100}),le(Nx,{label:"Rights text",value:h,onChange:e=>p(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),b&&ce(se,{children:[le(Nx,{label:"Custom text",value:f,onChange:e=>g(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:rz.map(e=>le(oz,{label:e.label,selected:x===e.value,onClick:()=>y(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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."}),w&&le(ny,{targetRef:w,label:"Copyright strip",deps:[x,b,l,c,h,f]})]})]}),le(Lb,{value:3,children:le(pA,{component:"Copyright"})})]})]})}const sz=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function cz(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 i=a.type;if(i){const e=i.displayName||i.name||"";if(sz.some(a=>e.includes(a)))return!0}return!1})(a)&&(t=!0)}),t}function dz({children:e,gap:a,spacing:t,direction:i="column",enforceMinGap:n=!0,minGapToken:r="--min-stack-gap",divider:o,flexWrap:l,useFlexGap:s=!0,alignItems:d,justifyContent:h,sx:u={},className:p="",...f}){const g=void 0!==a?a:t,b=n&&cz(e),v=c(()=>{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}(r,8);return e>=a?g:"var("+r+", "+a+"px)"},[b,g,r]);return le(m,{direction:i,spacing:s?void 0:v,gap:s?v:void 0,divider:o,flexWrap:l,useFlexGap:s,alignItems:d,justifyContent:h,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"}}:{},...u},"data-min-gap-enforced":b?"true":void 0,...f,children:e})}const hz=e=>le(dz,{direction:"row",alignItems:"center",...e}),uz=e=>le(dz,{direction:"column",...e}),mz=e=>le(dz,{direction:"column",alignItems:"center",justifyContent:"center",...e}),pz=e=>le(dz,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),fz=e=>le(dz,{direction:"row",flexWrap:"wrap",...e}),gz=({breakpoint:e="sm",...a})=>le(dz,{direction:{xs:"column",[e]:"row"},...a}),bz=dz,vz=fz,xz=e=>le(u,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),yz=({sx:e,...a})=>le(dz,{sx:{px:2,...e},...a}),zz=({sx:e,...a})=>le(dz,{sx:{overflowY:"auto",...e},...a}),wz={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 Sz({color:e="default",brand:a,address:t,columns:i=[],socialLinks:n=[],copyright:r=!0,children:o,subscribe:l,copyrightName:s,copyrightYear:c,className:d,style:h,...u}){const m=i.slice(0,3),p=wz[e]||wz.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 ce("footer",{...f,className:["dino-footer",d].filter(Boolean).join(" "),style:{...g,...h},...u,children:[ce("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||ce(se,{children:[le(kz,{address:t}),m.map((e,a)=>le(Cz,{...e},a))]})}),(n.length>0||l)&&ce("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:[n.length>0&&le(Bz,{links:n}),l&&le(Tz,{...l})]})]}),r&&le(tz,{color:e,companyName:s,year:c})]})}function kz({address:e}){if(!e)return le("div",{});const{company:a,lines:t=[],email:i,phone:n}=e,r=[...a?[a]:[],...t,...n?[n]:[]];return ce("div",{children:[r.map((e,a)=>le(xi,{style:{color:"inherit",opacity:.85,display:"block"},children:e},a)),i&&le("div",{style:{marginTop:12},children:le(xi,{style:{color:"inherit",opacity:.85,display:"block"},children:le(mn,{href:"mailto:"+i,color:"standard",style:{color:"inherit"},children:i})})})]})}function Cz({title:e,links:a=[]}){return ce(uz,{gap:"var(--Sizing-1)",children:[e&&le(ci,{style:{color:"inherit"},children:e}),le(uz,{component:"ul",gap:"var(--Sizing-1)",sx:{listStyle:"none",m:0,p:0},children:a.map((e,a)=>le("li",{children:le(mn,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},a))})]})}function Bz({links:e}){return le(hz,{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 Tz({title:e="Stay in the loop",description:t,placeholder:i="your@email.com",buttonLabel:n="Subscribe",onSubscribe:r}){const[o,l]=a(""),[s,c]=a(!1);return ce("form",{onSubmit:async e=>{if(e&&e.preventDefault(),o&&!s){c(!0);try{await(r?.(o)),l("")}finally{c(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(ci,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(xi,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),ce("div",{style:{display:"flex",gap:8},children:[le(Nx,{type:"email",value:o,onChange:e=>l(e.target.value),placeholder:i,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(nb,{type:"submit",size:"small",disabled:s||!o,children:n})]})]})}const Mz={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},Az=[{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:"#"}]}],Lz=[{icon:le(Ra,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(Fa,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(Pa,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],Iz=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function Nz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Wz(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a(4),[c,d]=a(!0),[h,p]=a(!0),[f,g]=a("default"),b=i(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,c,h]);const w=Az.slice(0,Math.max(0,l-1)),S=c?Lz:[],k=h?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return ce(u,{children:[le(vA,{title:"Footer",component:"Footer"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),ce(wi,{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(u,{ref:b,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(Sz,{color:f,address:Mz,columns:w,socialLinks:S,subscribe:k,copyrightName:"DinoDesign"})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Footer",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:560},children:[ce(u,{children:[le(Oi,{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(Nz,{label:String(e),selected:l===e,onClick:()=>s(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Iz.map(e=>le(Nz,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(yv,{label:"Show social media row",checked:c,onChange:e=>d(e.target.checked)}),ce(Li,{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."]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(yv,{label:"Show email subscribe form",checked:h,onChange:e=>p(e.target.checked)}),ce(Li,{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)"}),"."]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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(ny,{targetRef:v,label:"Footer body",deps:[f,l,c,h]}),y&&le(ny,{targetRef:y,label:"Copyright strip",deps:[f,l,c,h]})]})]}),le(Lb,{value:3,children:le(pA,{component:"Footer"})})]})]})}const Dz={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function Rz({children:e,theme:a,surface:t,radius:i="none",elevation:n=0,component:r="div",className:o="",sx:l={},style:s,...c}){const d=Math.max(0,Math.min(5,0|n)),h=Dz[i];if(!d)return le(u,{component:r,"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box"+(o?" "+o:""),sx:{background:"var(--Background)",boxSizing:"border-box",...h?{borderRadius:h}:{},...l},style:s,...c,children:e});const m=s||{},{width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:w,marginRight:S,marginBottom:k,marginLeft:C,...B}=m,T={width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:w,marginRight:S,marginBottom:k,marginLeft:C},{width:M,height:A,borderRadius:L,...I}=l;return le(u,{component:r,className:"omni-box-elevation"+(o?" "+o:""),"data-elevation":d,sx:{boxShadow:Uf[d],boxSizing:"border-box",width:M,height:A,borderRadius:void 0!==L?L:h},style:T,...c,children:le(u,{"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 Fz=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],Pz=["Default","Primary","Primary","Secondary","Secondary","Tertiary","Tertiary","Neutral","Neutral","Info","Success","Warning","Error"];function Hz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Oz(){const[e,t]=a(""),[i,n]=a(""),[r,o]=a("Default"),[l,s]=a("Surface");return ce(Rz,{sx:{pb:8},children:[le(vA,{title:"Box",component:"Box"}),le(Rz,{sx:{mt:1},children:le(ig,{theme:r,onThemeChange:o,surface:l,onSurfaceChange:s})}),ce(wi,{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."]}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"When to use"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Box",theme:r,surface:l})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:r,surface:l,children:le(Rz,{sx:{width:"100%",maxWidth:400},children:le(Rz,{theme:e||void 0,surface:i||void 0,children:ce(Rz,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(di,{children:"Box content"}),le(wi,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(nv,{code:(()=>{const a=[];e&&a.push('theme="'+e+'"'),i&&a.push('surface="'+i+'"');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:ce(Rz,{sx:{p:3},children:[le(Rz,{sx:{mb:3}}),ce(Rz,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(Hz,{label:"None",selected:!e,onClick:()=>t("")}),Pz.map(a=>le(Hz,{label:a,selected:e===a,onClick:()=>t(a)},a))]})]}),ce(Rz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(Hz,{label:"None",selected:!i,onClick:()=>n("")}),Fz.map(e=>le(Hz,{label:e,selected:i===e,onClick:()=>n(e)},e))]}),ce(Li,{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(Lb,{value:2,children:le(Rz,{sx:{p:3},children:ce(m,{spacing:2,children:[ce(Rz,{children:[le(xi,{style:{fontWeight:700},children:"Reach for Box when…"}),le(Li,{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."})]}),ce(Rz,{children:[le(xi,{style:{fontWeight:700},children:"Use Ratio when…"}),le(Li,{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."})]}),ce(Rz,{children:[le(xi,{style:{fontWeight:700},children:"Use Card when…"}),le(Li,{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(Lb,{value:3,children:le(pA,{component:"Box"})})]})]})}const Ez={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Vz={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function Qz({value:e,color:a="primary",size:t="medium",className:i="",sx:n={},...r}){const o=Ez[a]||"Primary",l=Vz[t]||Vz.medium,s=null!=e,c=s?Math.min(100,Math.max(0,e)):0,d="var(--Buttons-"+o+"-Border)";return le(u,{role:"progressbar","aria-valuenow":s?Math.round(c):void 0,"aria-valuemin":s?0:void 0,"aria-valuemax":s?100:void 0,"aria-label":s?Math.round(c)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+a+(s?" linear-progress-determinate":" linear-progress-indeterminate")+" "+i,sx:{position:"relative",width:"100%",height:l.height,borderRadius:l.borderRadius,backgroundColor:"var(--Border-Variant)",overflow:"hidden",flexShrink:0,...n},...r,children:le(u,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:d,...s?{width:c+"%",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 jz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",qz=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Gz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Uz({color:e,selected:a,onClick:t}){const i=jz(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Yz(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(65),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Linear Progress",component:"LinearProgress"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"LinearProgress",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:400},children:le(Qz,{color:e,size:i,value:r?l:void 0})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:qz.map(a=>ce(u,{children:[le(Li,{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(Uz,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Gz,{label:jz(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Determinate"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(xv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),r&&le(u,{sx:{mt:2},children:le(Qx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>s(a),size:"small",valueLabelDisplay:"auto"})})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"LinearProgress"})})]})]})}const Xz={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Jz={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 Zz({value:e,color:a="primary",size:t="medium",thickness:i,showValue:n=!1,children:r,className:l="",sx:s={},...c}){const d=Xz[a]||"Primary",h="number"==typeof t?{diameter:t,thickness:Math.max(2,Math.round(t/11)),fontSize:Math.max(8,Math.round(t/3.3))+"px"}:Jz[t]||Jz.medium,m=i||h.thickness,p=null!=e,f=p?Math.min(100,Math.max(0,e)):0,g=(h.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 ce(u,{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:h.diameter+"px",height:h.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)"}}},...s},...c,children:[ce("svg",{viewBox:"0 0 "+h.diameter+" "+h.diameter,width:h.diameter,height:h.diameter,style:{position:"absolute",top:0,left:0,transform:"rotate(-90deg)"},children:[le("defs",{children:ce("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:h.diameter/2,cy:h.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:m,className:"circular-progress-track"}),le("circle",{cx:h.diameter/2,cy:h.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"}})]}),(n||r)&&p&&le(u,{className:"circular-progress-label","aria-hidden":"true",sx:{position:"relative",zIndex:1,fontSize:h.fontSize,fontWeight:700,fontFamily:"inherit",lineHeight:1,color:"var(--Text)",userSelect:"none"},children:r||Math.round(f)+"%"})]})}const $z=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Kz=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function _z({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ew({color:e,selected:a,onClick:t}){const i=$z(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function aw(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(65),[c,d]=a(!1),[h,p]=a("Default"),[f,g]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Circular Progress",component:"CircularProgress"}),le(u,{sx:{mt:1},children:le(ig,{theme:h,onThemeChange:p,surface:f,onSurfaceChange:g})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"CircularProgress",theme:h,surface:f})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:h,surface:f,children:le(Zz,{color:e,size:i,value:r?l:void 0,showValue:r&&c})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),r&&(a.push("value={"+l+"}"),c&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Kz.map(a=>ce(u,{children:[le(Li,{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(ew,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(_z,{label:$z(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Determinate"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(xv,{checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),r&&ce(se,{children:[le(u,{sx:{mt:2},children:le(Qx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>s(a),size:"small",valueLabelDisplay:"auto"})}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Label"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(xv,{checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Role:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Determinate:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Indeterminate:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Label:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Token Reference"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Track (back circle):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Fill (progress arc):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Center label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})]}),le(Lb,{value:3,children:le(pA,{component:"CircularProgress"})})]})]})}const tw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",iw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function nw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function rw({color:e,selected:a,onClick:t}){const i=tw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function ow(){const[e,t]=a("outlined"),[i,n]=a("outline"),[r,o]=a("default"),[l,s]=a("medium"),[c,d]=a("top"),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Number Field",component:"NumberField"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"NumberField",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(nz,{variant:e,style:i,color:r,size:l,label:h?"Quantity":void 0,labelPosition:c,min:0,max:100,disabled:f,fullWidth:b&&"outlined"===e})})}),le(nv,{code:(()=>{const a=['variant="'+e+'"'];return"outline"!==i&&a.push('style="'+i+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==l&&a.push('size="'+l+'"'),h&&a.push('label="Quantity"'),"top"!==c&&a.push('labelPosition="'+c+'"'),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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",spacing:1,children:["outlined","spinner"].map(a=>le(nw,{label:tw(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(nw,{label:tw(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:iw.map(e=>ce(u,{children:[le(Li,{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(rw,{color:e,selected:r===e,onClick:o},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(nw,{label:tw(e),selected:l===e,onClick:()=>s(e)},e))})]}),"outlined"===e&&ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(nw,{label:"none"===e?"None":tw(e),selected:c===e,onClick:()=>d(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Label"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(xv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(xv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"NumberField"})})]})]})}const lw={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},sw={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 cw({theme:e,surface:t,value:i,defaultValue:n,onChange:r,max:o=5,precision:l=1,color:s="default",size:c="medium",readOnly:d=!1,disabled:h=!1,emptyLabel:m="No rating",className:p="",sx:f={},...g}){const[b,v]=a(n??null),[x,y]=a(null),z=void 0!==i,w=z?i:b,S=null!==x?x:w,k=.5===l,C=!d&&!h,B=lw[s]||lw.default,T=sw[c]||sw.medium,M="var(--Buttons-"+B+"-Button)",A="var(--Buttons-"+B+"-Border)",L=e=>{if(!C)return;const a=e===w?null:e;z||v(a),r?.(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,i=null!==S&&a<=S,n=null!==S&&!i&&k&&t<=S,r=n?Ha:Ne,s=((e,a)=>e||a?{color:M,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}})(i,n);return k&&C?ce(u,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...s,...N},onMouseLeave:()=>y(null),children:[le(u,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!0),onClick:()=>L(t)}),le(u,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!1),onClick:()=>L(a)}),le(r,{sx:{fontSize:T.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})]},e):le(u,{component:C?"button":"span",type:C?"button":void 0,role:C?"radio":void 0,"aria-checked":i,"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((w||0)+l,o))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const a=Math.max((w||0)-l,0);L(a||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...T.minHit&&{minWidth:T.minHit+"px",minHeight:T.minHit+"px"},cursor:h?"not-allowed":C?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...s,...N,"&:active":C?{transform:"scale(0.95)"}:{},"&:focus-visible":C?{outline:T.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:T.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(r,{sx:{fontSize:T.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return ce(u,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==w?": "+w+" of "+o+" stars":": "+m),"data-theme":e||void 0,"data-surface":t||void 0,className:"rating rating-"+s+" rating-"+c+(d?" rating-readonly":"")+(h?" rating-disabled":"")+(null===w?" rating-empty":"")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",gap:T.gap+"px",opacity:h?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...f},...g,children:[Array.from({length:o},(e,a)=>W(a)),null===w&&!x&&le(Li,{style:{color:"var(--Quiet)",marginLeft:4},children:m})]})}const dw={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 hw({children:a,separator:t="/",size:i="medium",condense:n=!1,maxItems:r=4,itemsBeforeCollapse:o=1,itemsAfterCollapse:l=1,backOnlyMobile:s=!1,onExpand:c,className:m="",sx:p={},...f}){const g=dw[i]||dw.medium,b=d.toArray(a).filter(h),v=b.length,x=n&&v>r;let y=b;const[z,w]=e.useState(!1);if(x&&!z){const e=b.slice(0,o),a=b.slice(v-l);y=[...e,le(u,{component:"button",onClick:()=>{w(!0),c?.()},"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 S=[];y.forEach((e,a)=>{const i=x&&!z?a===y.length-1:a===v-1;S.push(le(u,{component:"li",className:"breadcrumb-item"+(i?" breadcrumb-current":""),sx:{display:"inline-flex",alignItems:"center",...i&&{color:"var(--Text)",fontWeight:"var(--Body-Medium-Semibold-Font-Weight, 600)"},...!i&&{color:"var(--Link, var(--Hotlink))"},maxWidth:"200px","& > *":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},...i?{"aria-current":"page"}:{},children:e},"crumb-"+a)),a<y.length-1&&S.push(le(u,{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 ce(u,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+i+" "+m,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...p},...f,children:[le(u,{component:"ol",className:"breadcrumbs-list",sx:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"var(--Sizing-1)",listStyle:"none",margin:0,padding:0,...s&&{"@media (max-width: 600px)":{display:"none"}}},children:S}),s&&k&&ce(u,{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(u,{component:"span","aria-hidden":"true",sx:{fontSize:"1.1em",lineHeight:1},children:"←"}),e.cloneElement(k,{style:{...k.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function uw({children:e,href:a,className:t="",sx:i={},...n}){const r=!!a;return le(u,{component:r?"a":"span",href:a||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:r?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:r?"pointer":"default",transition:"color 0.15s ease",...r&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...i},...n,children:e})}const mw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function pw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function fw(){const[e,t]=a("medium"),[i,n]=a("/"),[r,o]=a(!1),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Breadcrumbs",component:"Breadcrumbs"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Breadcrumbs",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:l,surface:c,children:ce(hw,{size:e,separator:i,condense:r,maxItems:3,children:[le(uw,{href:"#",children:"Home"}),le(uw,{href:"#",children:"Products"}),le(uw,{href:"#",children:"Shoes"}),le(uw,{children:"Running Shoes"})]})}),le(nv,{code:(()=>{const a=[];return"medium"!==e&&a.push('size="'+e+'"'),"/"!==i&&a.push('separator="'+i+'"'),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(a=>le(pw,{label:mw(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(m,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(pw,{label:e,selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Condense"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(xv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Condense"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Breadcrumbs"})})]})]})}const gw={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function bw({theme:e,surface:t,count:i=10,page:r,defaultPage:o=1,onChange:l,color:s="default",size:c="medium",siblingCount:d=1,boundaryCount:h=1,disabled:m=!1,showFirstButton:p=!1,showLastButton:f=!1,className:g="",sx:b={},...v}){const[x,y]=a(o),z=void 0!==r,w=z?r:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===s?"Default":s);const S=gw[c]||gw.medium,k=n(e=>{const a=Math.max(1,Math.min(i,e));z||y(a),l?.(a)},[i,z,l]),C=function({count:e,page:a,siblingCount:t=1,boundaryCount:i=1}){const n=(e,a)=>Array.from({length:a-e+1},(a,t)=>e+t);if(2*t+3+2*i>=e)return n(1,e);const r=Math.max(a-t,i+1),o=Math.min(a+t,e-i),l=r>i+2,s=o<e-i-1;if(!l&&s)return[...n(1,Math.min(3+2*t+i,e)),"ellipsis-right",...n(e-i+1,e)];if(l&&!s){const a=n(Math.max(e-(3+2*t+i)+1,1),e);return[...n(1,i),"ellipsis-left",...a]}return l&&s?[...n(1,i),"ellipsis-left",...n(r,o),"ellipsis-right",...n(e-i+1,e)]:n(1,e)}({count:i,page:w,siblingCount:d,boundaryCount:h}),B="default"===s?"default":s;return le(u,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":t||void 0,className:"pagination pagination-"+s+" pagination-"+c+" "+g,sx:{display:"inline-flex",...b},...v,children:ce(u,{component:"ul",sx:{display:"flex",alignItems:"center",gap:S.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[p&&le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||1===w,onClick:()=>k(1),"aria-label":"Go to first page",children:le(Ff,{size:"small",children:le(Va,{})})})}),le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||1===w,onClick:()=>k(w-1),"aria-label":"Go to previous page",children:le(Ff,{size:"small",children:le(Oa,{})})})}),C.map((e,a)=>{if("string"==typeof e)return le(u,{component:"li",children:le(Li,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+a);const t=e===w;return le(u,{component:"li",children:le(nb,{variant:B+"-outline",selected:t,size:S.btnSize,disabled:m,onClick:()=>k(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||w===i,onClick:()=>k(w+1),"aria-label":"Go to next page",children:le(Ff,{size:"small",children:le(Ea,{})})})}),f&&le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||w===i,onClick:()=>k(i),"aria-label":"Go to last page",children:le(Ff,{size:"small",children:le(Qa,{})})})})]})})}const vw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",xw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]},{label:"Buttons only",colors:["black-white"]}];function yw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function zw({color:e,selected:a,onClick:t}){const i=vw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function ww(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(10),[l,s]=a(!1),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Pagination",component:"Pagination"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Pagination",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:f,surface:b,children:le(bw,{color:e,size:i,count:r,showFirstButton:l,showLastButton:c,disabled:h})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),10!==r&&a.push("count={"+r+"}"),l&&a.push("showFirstButton"),c&&a.push("showLastButton"),h&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:xw.map(a=>ce(u,{children:[le(Li,{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(zw,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(yw,{label:vw(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(yw,{label:String(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"First/Last Buttons"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(xv,{variant:"default-outline",checked:l,onChange:e=>{s(e.target.checked),d(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Pagination"})})]})]})}const Sw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",kw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Cw=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Bw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Tw({color:e,selected:a,onClick:t}){const i=Sw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Mw(){const[e,t]=a("standard"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("horizontal"),[c,d]=a("Default"),[h,p]=a("Surface"),[f,g]=a(!1),b="standard"===e?kw:Cw;return ce(u,{sx:{pb:8},children:[le(vA,{title:"Tabs",component:"Tabs"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(y,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:ce(Tb,{defaultValue:0,variant:e,color:i,size:r,orientation:l,children:[ce(Mb,{rounded:f,children:[le(Ab,{children:"Overview"}),le(Ab,{children:"Features"}),le(Ab,{children:"Pricing"})]}),le(Lb,{value:0,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(Lb,{value:1,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(Lb,{value:2,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(nv,{code:(()=>{const a=[];return"standard"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"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(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"})]}),le(Lb,{value:0,children:ce(u,{sx:{p:3},children:[le(u,{sx:{mb:3}}),ce(u,{children:[le(Oi,{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(Bw,{label:Sw("standard"===a?"default":a),selected:e===a,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===i&&n("primary")})(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:b.map(e=>ce(u,{children:[le(Li,{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(Tw,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Bw,{label:Sw(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(Bw,{label:Sw(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(xv,{label:"Rounded corners",checked:f,onChange:e=>g(e.target.checked)}),ce(Li,{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)."]})]})]})}),ce(Lb,{value:1,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]})]})})})]})]})}let Aw=!1;let Lw=!1;const Iw=new Set;function Nw({variant:t="outlined",color:i="default",size:n="medium",disabled:r=!1,orientation:o="horizontal",separated:l=!0,spacing:s,fit:c,fullWidth:d=!1,equalWidth:h=!1,multiple:m=!1,allowEmpty:p=!0,__selectionOwner:f=!1,value:g,defaultValue:b,onChange:v,children:x,className:y="",sx:z={},"aria-label":w,...S}){const k=void 0!==g||void 0!==b||void 0!==v||m;!f&&k&&(Lw||"production"===process.env.NODE_ENV||(Lw=!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||(Aw||"production"===process.env.NODE_ENV||(Aw=!0,console.warn("[OmniDesign] ButtonGroup is separated — a row of actions, spaced — and cannot be joined, so `separated={false}` is ignored. Joining makes the row read as one control with one segment chosen, 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>.")),l=!0);const[B,T]=a(b??(m?[]:null)),M=void 0!==g,A=M?g:B,L=m?Array.isArray(A)?A:null==A?[]:[A]:null,I="horizontal"===o,N=void 0!==s?s:l?"var(--Platform-Spacer)":0,W=!l&&0===N,D="light"===t,R="ghost"===t,F=c??(d?"fill":h?"equal":"hug"),P="fill"===F,H="equal"===F&&I,O=(E=i).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"===i?void 0:O,Y=e.Children.toArray(x).filter(Boolean),X=Y.length,J=(e,a)=>t=>{const i=m?L.includes(e)?L.filter(a=>a!==e):[...L,e]:e;!m||p||0!==i.length?(M||T(i),v?.(i,t),a?.(t)):a?.(t)},Z=Y.map((a,t)=>{if(!e.isValidElement(a))return a;const o=0===t,s=t===X-1,c=a.props.value??t,d=(h=c,m?L.includes(h):A===h);var h;let p,f;if(W&&X>1){const e=I?"var(--Button-Radius)":"var(--Vertical-Button-Radius)";p=I?o&&s?e:o?e+" 0 0 "+e:s?"0 "+e+" "+e+" 0":"0":o&&s?e:o?e+" "+e+" 0 0":s?"0 0 "+e+" "+e:"0"}if(W&&X>1){const e=I?"var(--Button-Focus-Radius)":"var(--Vertical-Button-Focus-Radius)";f=I?o&&s?e:o?e+" 0 0 "+e:s?"0 "+e+" "+e+" 0":"0":o&&s?e:o?e+" "+e+" 0 0":s?"0 0 "+e+" "+e:"0"}const g=W&&X>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 i=String(e.variant||"");i&&!/-outline$/.test(i)&&"ghost"!==i&&"text"!==i&&t.push(`a solid segment (variant="${i}") — 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)Iw.has(e)||(Iw.add(e),console.warn("[ButtonGroup] "+e+"."))}(a.props,l);const w=e.cloneElement(a,{variant:a.props.variant??(C?R?d?i+"-outline":"ghost":d?i:i+"-outline":R?"ghost":i),size:a.props.size??n,disabled:a.props.disabled??r,onClick:J(c,a.props.onClick),...C?{"aria-pressed":d}:{},sx:z});return D&&!d?le(u,{"data-theme":U,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:w},t):e.cloneElement(w,{key:t})});return le(u,{role:w?"group":void 0,"aria-label":w,className:"btn-group btn-group-"+t+" btn-group-"+i+" "+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},...S,children:Z})}const Ww={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"}},Dw=l({variant:"solid",color:"default",size:"medium",spacing:0}),Rw=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),Fw="var(--Accordion-Radius, var(--Button-Radius))";function Pw({children:e,variant:a="solid",surface:t,color:i="default",size:n="medium",spacing:r=0,className:o="",sx:l={},...s}){const c="default"===i?"Default":(d=i).charAt(0).toUpperCase()+d.slice(1);var d;const h=0===r,m="default"===i?"Default":c,p=t||("dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface");return le(Dw.Provider,h?{value:{variant:a,color:i,size:n,spacing:r,dataTheme:m,dataSurface:p},children:le(u,{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:Fw,borderTopRightRadius:Fw},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:Fw,borderTopRightRadius:Fw},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:Fw,borderBottomRightRadius:Fw,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:Fw,borderBottomRightRadius:Fw},...l},...s,children:e})}:{value:{variant:a,color:i,size:n,spacing:r,dataTheme:m,dataSurface:p},children:le(u,{role:"presentation",className:"accordion-group accordion-group-"+a+" accordion-group-spaced "+o,sx:{display:"flex",flexDirection:"column",gap:.5===r?"var(--Sizing-Half)":1===r?"var(--Sizing-1)":1.5===r?"var(--Sizing-1-and-Half)":2===r?"var(--Sizing-2)":8*r+"px",...l},...s,children:e})})}function Hw({children:e,expanded:t,defaultExpanded:i=!1,onChange:n,disabled:r=!1,className:o="",sx:l={},...c}){const[d,h]=a(i),m=void 0!==t,p=m?t:d,{dataTheme:f,dataSurface:g}=s(Dw),[b]=a(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(Rw.Provider,{value:{expanded:p,toggle:()=>{if(r)return;const e=!p;m||h(e),n?.(e)},disabled:r,accordionId:b},children:le(u,{className:"accordion-segment accordion"+(p?" accordion-expanded":"")+(r?" accordion-disabled":"")+" "+o,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:Fw,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:Vf,opacity:r?"var(--Disabled, 0.38)":1,...l},...c,children:e})})}const Ow={small:yi,medium:Si,large:Mi},Ew={small:xi,medium:wi,large:Ti};function Vw({children:e,startDecorator:a,endDecorator:t,eyebrow:i,overline:n,secondary:r,expandIcon:o,className:l="",sx:c={},...d}){const{expanded:h,toggle:m,disabled:p,accordionId:f}=s(Rw),{size:g}=s(Dw),b=Ww[g]||Ww.medium,v=Ow[g]||Ow.medium,x=o||le(Ff,{size:b.iconSize,sx:{color:h?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(he,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return ce(u,{component:"button",role:"button","aria-expanded":h,"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"+(h?" 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:h?"var(--Text)":"var(--Quiet)",fontFamily:"inherit",cursor:p?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:h?Fw+" "+Fw+" 0 0":Fw,"&: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"},...c},...d,children:[a&&le(u,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:a}),ce(u,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(i??n)&&le(Oi,{style:{...y,color:"var(--Text-Quiet)"},children:i??n}),null!=e&&le(v,{style:{...y,color:"inherit"},children:e}),r&&le(xi,{style:{...y,color:"var(--Text-Quiet)"},children:r})]}),t&&le(u,{className:"accordion-summary-end",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:t}),le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",transform:h?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.25s ease",flexShrink:0},children:x})]})}function Qw({children:e,className:a="",sx:t={},...i}){const{expanded:n,accordionId:r}=s(Rw),{size:o}=s(Dw),l=Ww[o]||Ww.medium,c=Ew[o]||Ew.medium;return n?le(u,{role:"region",id:r+"-content","aria-labelledby":r+"-header",className:"accordion-details "+a,sx:{padding:"0 "+l.detailsPx+" "+l.detailsPy+" "+l.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...i,children:"string"==typeof e||"number"==typeof e?le(c,{children:e}):e}):null}function jw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function qw({code:e}){return le(nv,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Gw({passes:e}){return ce(u,{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?Se:ke,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function Uw({leftLabel:e,rightLabel:a,leftContent:t,rightContent:i,leftCode:n,rightCode:r,leftPasses:o,rightPasses:l}){return ce(y,{container:!0,spacing:3,children:[le(y,{item:!0,xs:12,md:6,children:ce(u,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(xi,{style:{fontWeight:600},children:e}),le(Gw,{passes:o})]}),le(u,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le(qw,{code:n})]})}),le(y,{item:!0,xs:12,md:6,children:ce(u,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(xi,{style:{fontWeight:600},children:a}),le(Gw,{passes:l})]}),le(u,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:i}),le(qw,{code:r})]})})]})}function Yw(){const[e,t]=a("column"),[i,n]=a(.5),[r,o]=a("small"),[l,s]=a(!0),[c,d]=a(!1),[h,m]=a("Default"),[p,f]=a("Surface"),g={small:{label:"Small links ⚡",content:ce(se,{children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:ce(se,{children:[le(fb,{label:"React",size:"small"}),le(fb,{label:"TypeScript",size:"small"}),le(fb,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:ce(se,{children:[le(nb,{variant:"primary",size:"medium",children:"Primary"}),le(nb,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:ce(se,{children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{href:"#",size:"small",children:"Or discard"})]})}},b=["small","chips","mixed"].includes(r),v=l&&b;return ce(y,{container:!0,spacing:3,sx:{mt:1},children:[ce(y,{item:!0,xs:12,md:7,children:[le(zv,{theme:h,surface:p,children:ce(u,{sx:{width:"100%"},children:[v&&ce(u,{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(dz,{direction:e,gap:i,enforceMinGap:l,flexWrap:c?"wrap":void 0,children:g[r].content})]})}),le(qw,{code:(()=>{const a=["<OmniStack"];return"column"!==e&&a.push(' direction="'+e+'"'),a.push(" gap={"+i+"}"),l||a.push(" enforceMinGap={false}"),c&&a.push(' flexWrap="wrap"'),a.push(">"),a.push(" {children}"),a.push("</OmniStack>"),a.join("\n")})()})]}),le(y,{item:!0,xs:12,md:5,children:ce(u,{sx:{display:"flex",flexDirection:"column",gap:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CHILDREN"}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Object.entries(g).map(([e,{label:a}])=>le(jw,{label:a,selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(u,{sx:{display:"flex",gap:1},children:["row","column"].map(a=>{return le(jw,{label:(i=a,i?i.charAt(0).toUpperCase()+i.slice(1):""),selected:e===a,onClick:()=>t(a)},a);var i})})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",i," unit",v?" → raised to var(--min-stack-gap)":""]}),ce(u,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(u,{component:"input",type:"range",min:0,max:6,step:.5,value:i,onChange:e=>n(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(Li,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:i})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[ce(u,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[ce(u,{children:[le(xi,{children:"Enforce min gap"}),le(Li,{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(xv,{checked:l,onChange:e=>s(e.target.checked),size:"small"})]}),ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(xi,{children:"Flex wrap"}),le(xv,{checked:c,onChange:e=>d(e.target.checked),size:"small"})]})]})]})]})})]})}function Xw(){const[e,t]=a("Default"),[i,n]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Stack",component:"Stack"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),le(wi,{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."}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Why it matters"}),le(Ab,{children:"Playground"}),le(Ab,{children:"API"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Stack",theme:e,surface:i})}),le(Lb,{value:1,children:ce(u,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"The problem"}),le(wi,{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(Uw,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:ce(u,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:ce(dz,{gap:.5,children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{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'})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Mixed component sizes"}),le(wi,{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(Uw,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:ce(u,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{href:"#",size:"small",children:"Or discard"})]}),rightContent:ce(dz,{gap:.25,children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{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'})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"How detection works"}),le(wi,{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(u,{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,i)=>ce(u,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<i.length-1?"1px solid var(--Border)":"none"},children:[le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-10)",flexShrink:0}}),le(xi,{style:{flex:"0 0 200px"},children:e}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Token-driven minimum"}),le(wi,{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(qw,{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. */"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Auditable opt-out"}),ce(wi,{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(qw,{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(Lb,{value:2,children:le(Yw,{})}),le(Lb,{value:3,children:ce(u,{sx:{pt:3},children:[le(si,{children:"OmniStack props"}),le(wi,{style:{color:"var(--Text-Quiet)",marginTop:4,marginBottom:16},children:"All standard MUI Stack props are supported. These are OmniStack additions:"}),le(u,{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:i},n,r)=>ce(u,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:n<r.length-1?"1px solid var(--Border)":"none",backgroundColor:n%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(Li,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a}),ce(u,{children:[le(Li,{style:{color:"var(--Text)"},children:i}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(si,{children:"Convenience exports"}),le(u,{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,i)=>ce(u,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<i.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(Li,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(Li,{style:{color:"var(--Text-Quiet)"},children:a})]},e))}),le(si,{children:"Debug attributes"}),le(qw,{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(Lb,{value:4,children:le(pA,{component:"Stack"})})]})]})}const Jw=["primary","secondary","tertiary","neutral","info","success","warning","error"],Zw=["small","medium","large"],$w=({label:e,emphasis:a=!1,width:t,children:i})=>ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"center",width:t,textAlign:"center"},children:[le("div",{children:i}),le(Li,{color:a?"standard":"quiet",children:e})]}),Kw=({values:e,render:a,defaultValue:t,width:i})=>{const n=e.filter(e=>e!==t),r=e=>le($w,{label:String(e),emphasis:e===t,width:i,children:a(e)},String(e));return ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-end",flexWrap:"wrap"},children:[void 0!==t?r(t):null,void 0!==t&&n.length?le(Sx,{orientation:"vertical",style:{alignSelf:"stretch"}}):null,n.map(r)]})},_w=({values:e,render:a,defaultValue:t,width:i="100%"})=>{const n=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return le(uz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:420},children:n.map(e=>ce(uz,{gap:"var(--Sizing-Half)",style:{width:i},children:[le(Li,{color:e===t?"standard":"quiet",children:String(e)}),a(e)]},String(e)))})},eS=({render:e,offLabel:a="false",onLabel:t="true",width:i})=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:a,emphasis:!0,width:i,children:e(!1)}),le($w,{label:t,width:i,children:e(!0)})]}),aS=180,tS=(e,a=180)=>le("div",{style:{width:a},children:e}),iS={variant:()=>le(Kw,{values:["default",...Jw],defaultValue:"default",width:aS,render:e=>tS(le(Qx,{variant:e,defaultValue:60,"aria-label":e}))}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",width:aS,render:e=>tS(le(Qx,{size:e,defaultValue:60,"aria-label":e}))}),"value / defaultValue":()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"a number — one thumb"}),tS(le(Qx,{defaultValue:60,"aria-label":"single"}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"an array — two thumbs, a range"}),tS(le(Qx,{defaultValue:[25,75],getAriaLabel:()=>"range"}))]})]}),fill:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-1)",children:[le(Li,{color:"standard",children:"one thumb — Figma: single / single-inverted"}),ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le($w,{label:"standard",emphasis:!0,width:aS,children:tS(le(Qx,{defaultValue:60,"aria-label":"standard"}))}),le($w,{label:"inverted",width:aS,children:tS(le(Qx,{defaultValue:60,fill:"inverted","aria-label":"inverted"}))}),le($w,{label:"false — no fill",width:aS,children:tS(le(Qx,{defaultValue:60,fill:!1,"aria-label":"no fill"}))})]})]}),ce(uz,{gap:"var(--Sizing-1)",children:[le(Li,{color:"quiet",children:"two thumbs — Figma: double / double-inverted"}),ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le($w,{label:"standard — fills between",width:aS,children:tS(le(Qx,{defaultValue:[25,75],getAriaLabel:()=>"between"}))}),le($w,{label:"inverted — fills outside",width:aS,children:tS(le(Qx,{defaultValue:[25,75],fill:"inverted",getAriaLabel:()=>"outside"}))})]})]})]}),orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:"horizontal",emphasis:!0,width:aS,children:tS(le(Qx,{defaultValue:60,"aria-label":"horizontal"}))}),le($w,{label:"vertical",width:60,children:le("div",{style:{height:160},children:le(Qx,{orientation:"vertical",defaultValue:60,"aria-label":"vertical"})})}),le($w,{label:"vertical range",width:60,children:le("div",{style:{height:160},children:le(Qx,{orientation:"vertical",defaultValue:[25,75],getAriaLabel:()=>"vertical range"})})}),le($w,{label:"vertical, inverted",width:60,children:le("div",{style:{height:160},children:le(Qx,{orientation:"vertical",fill:"inverted",defaultValue:60,"aria-label":"vertical inverted"})})})]}),marks:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — no marks"}),tS(le(Qx,{defaultValue:60,"aria-label":"none"}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — a dot at every step"}),tS(le(Qx,{defaultValue:60,step:10,marks:!0,"aria-label":"every step"}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"an array — dots where you say, with labels"}),tS(le(Qx,{defaultValue:60,marks:[{value:0,label:"0"},{value:50,label:"50"},{value:100,label:"100"}],"aria-label":"labelled marks"}),260)]})]}),step:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"1 — every whole number"}),tS(le(Qx,{defaultValue:60,"aria-label":"step 1"}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"25 — a fixed increment"}),tS(le(Qx,{defaultValue:50,step:25,marks:!0,"aria-label":"step 25"}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"null — restricted to the marks, which need not be even"}),tS(le(Qx,{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(Kw,{values:["off","auto","on"],defaultValue:"off",width:aS,render:e=>tS(le(Qx,{valueLabelDisplay:e,defaultValue:60,"aria-label":e}))}),label:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"with a visible label"}),tS(le(Qx,{label:"Volume",defaultValue:60}))]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"without one it needs aria-label"}),tS(le(Qx,{defaultValue:60,"aria-label":"Volume"}))]}),le(xi,{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(eS,{width:aS,offLabel:"enabled",onLabel:"disabled",render:e=>tS(le(Qx,{disabled:e,defaultValue:60,"aria-label":"x"}))})},nS={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 rS({value:e,defaultValue:t="",onChange:n,onFocus:r,onBlur:o,onClear:l,onSubmit:s,placeholder:c="Search…",size:d="medium",color:h="default",showClearButton:m=!0,disabled:p=!1,ariaLabel:f="Search",className:g="",sx:b={},...v}){const[x,y]=a(t),[z,w]=a(!1),S=i(null),k=void 0!==e,C=k?e:x,B=C.length>0,T=z||B,M=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===h?"primary":h),A="default"===h?"var(--Text)":"var(--Text-"+M+")",L=nS[d]||nS.medium,I=()=>{k||y(""),n?.(""),l?.(),S.current?.focus()};return le(u,{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(u,{sx:{border:"1px solid "+("var(--Buttons-"+M+"-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-"+M+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+M+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:ce(u,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:L.height,px:L.px+"px",backgroundColor:"var(--Hover)"},children:[le(Ff,{size:"small",sx:{color:T?A:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(Ie,{})}),le(u,{component:"input",ref:S,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const a=e.target.value;k||y(a),n?.(a,e)},onFocus:e=>{w(!0),r?.(e)},onBlur:e=>{w(!1),o?.(e)},onKeyDown:e=>{"Enter"===e.key&&s?.(C,e),"Escape"===e.key&&B&&I()},placeholder:c,disabled:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:T?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(u,{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(Ff,{size:"small",children:le(Ua,{})})})]})})})}const oS=l(null),lS=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],sS=["Professional","Modern","Bold","Playful"],cS=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],dS={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},hS="omni-foundation",uS="omni-core",mS="omni-typography",pS="omni-mode",fS="omni-base",gS="omni-styles";function bS(e){document.getElementById(e)?.remove()}function vS(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 i=document.getElementById(e);return i?"LINK"===i.tagName&&i.getAttribute("href")!==a?new Promise((e,t)=>{i.onload=()=>e(i),i.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${a}`)),i.setAttribute("href",a)}):Promise.resolve(i):new Promise((i,n)=>{const r=document.createElement("link");r.id=e,r.rel="stylesheet",r.setAttribute("data-omni","true"),r.onload=()=>i(r),r.onerror=()=>n(new Error(`OmniDesignProvider: failed to load ${a}`)),r.href=a;const o=t?document.getElementById(t):null;o?document.head.insertBefore(r,o):document.head.appendChild(r)})}(e,a,t):function(e,a,t){if(!a)return Promise.resolve(null);const i=document.getElementById(e);if(i)return i.textContent=a,Promise.resolve(i);const n=document.createElement("style");n.id=e,n.setAttribute("data-omni","true"),n.textContent=a;const r=t?document.getElementById(t):null;return r?document.head.insertBefore(n,r):document.head.appendChild(n),Promise.resolve(n)}(e,a,t):Promise.resolve(null)}function xS({themeURL:e,foundationCSS:r,coreCSS:o,typographyCSS:l,lightModeCSS:s,darkModeCSS:d,baseCSS:h,stylesCSS:u,defaultTheme:m="Default",defaultStyle:p="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:b=!1,darkTheme:v=null,darkMode:x,onDarkModeChange:y,className:z,style:w,fullHeight:S=!0,children:k}){const[C,B]=a(b),T=void 0!==x,M=T?x:C,[A,L]=a({foundation:r??null,core:o??null,typography:l??null,lightMode:s??null,darkMode:d??null,base:h??null,styles:u??null}),[I,N]=a({}),W=i(!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(\?.*)?$/,""),i=await fetch(a);if(!i.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${a} (${i.status})`);const n=await i.json(),r=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:r(n.foundation),coreURL:r(n.core),typographyURL:r(n.typography),lightModeURL:r(n.lightMode),darkModeURL:r(n.darkMode),baseURL:r(n.base),stylesURL:r(n.styles),defaultTheme:n.defaultTheme??null,defaultStyle:n.defaultStyle??null,defaultSurface:n.defaultSurface??null,darkTheme:n.darkTheme??null,name:n.name??null}}(e).then(e=>{W.current&&(L({foundation:r??e.foundationURL,core:o??e.coreURL,typography:l??e.typographyURL,lightMode:s??e.lightModeURL,darkMode:d??e.darkModeURL,base:h??e.baseURL,styles:u??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),X(e.message),U("error"))}))},[e]);const D=g?dS[g]?.theme??m:"Default"!==m?m:I.defaultTheme??m,R=g?dS[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||r||o||l||s||d||h||u),[G,U]=a(q?"loading":"ready"),[Y,X]=a(null);t(()=>{const{foundation:e,core:a,typography:t,base:i,styles:n}=A;if(e||a||t||i||n)return U("loading"),X(null),Promise.all([vS(hS,e),vS(uS,a),vS(mS,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),vS(fS,i),vS(gS,n)]).then(()=>{W.current&&U("ready")}).catch(e=>{W.current&&(console.error("OmniDesignProvider CSS error:",e),X(e.message),U("error"))}),()=>{bS(hS),bS(uS),bS(mS),bS(fS),bS(gS)};U("ready")},[A.foundation,A.core,A.typography,A.base,A.styles]),t(()=>{const e=M?A.darkMode:A.lightMode;e&&vS(pS,e,fS).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[M,A.lightMode,A.darkMode]),t(()=>()=>bS(pS),[]);const J=M&&P?P:H,Z=n(()=>{T?y?.(!M):B(e=>!e)},[T,M,y]),$=n(e=>{lS.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),O(e)},[]),K=n(e=>{sS.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),V(e)},[]),_=n(e=>{cS.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=c(()=>({theme:J,style:E,surface:Q,isDark:M,cssStatus:G,cssError:Y,setTheme:$,setStyle:K,setSurface:_,toggleDarkMode:Z,themes:lS,styles:sS,surfaces:cS,name:I.name??null}),[J,E,Q,M,G,Y,$,K,_,Z,I.name]);return ce(oS.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:{...S?{minHeight:"100vh"}:{},...w},children:k})]})}function yS(){const e=s(oS);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function zS({theme:e,surface:a,as:t="div",children:i,className:n,style:r,...o}){return le(t,{"data-theme":e,"data-surface":a,className:n,style:r,...o,children:i})}function wS({surface:e,as:a="div",children:t,className:i,style:n,...r}){return le(a,{"data-surface":e,className:i,style:n,...r,children:t})}const SS={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},kS={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},CS={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}},BS={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function TS({children:e,open:a=!1,onClose:r,size:o="medium",anchor:l="left",hideBackdrop:s=!1,className:c="",sx:d={},...h}){const m=i(null),p=i(null),f="left"===l||"right"===l;let g;try{g=yS()}catch{g=null}const b=g?.theme||"Default",v=g?.style||"Modern",x=SS[o]||SS.medium;t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&r?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,r]),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=n(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],i=a[a.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),t.focus())},[]);return a?ce(se,{children:[!s&&le(u,{onClick:()=>r?.(),"aria-hidden":"true",sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0, 0, 0, 0.5)",transition:"opacity 0.3s ease"}}),le(u,{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+" "+c,sx:{position:"fixed",zIndex:10000001,...CS[l],...f?{width:x.width,height:"100%"}:{height:x.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...kS[l],boxShadow:jf,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:BS[l]},to:{transform:"translate(0, 0)"}},...d},...h,children:e})]}):null}function MS({onClick:e,className:a="",sx:t={},...i}){return le(u,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:a,...i,children:le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Ff,{size:"small",children:le(Ua,{})})})})}function AS({children:e,className:a="",sx:t={},...i}){return le(u,{className:"drawer-header "+a,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...i,children:e})}function LS({children:e,className:a="",sx:t={},...i}){return le(u,{className:"drawer-content "+a,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...i,children:e})}const IS={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 NS({children:e,onClick:a,ariaLabel:t}){return le(nb,{iconOnly:!0,variant:"ghost",size:"medium",onClick:a,"aria-label":t,children:e})}function WS({barColor:t="default",surface:i="Surface",loginType:n="login",menuType:r="hamburger",brandType:o="name",searchPosition:l="right",companyName:s="Company",navLinks:c=["Home","Products","About"],rightButtons:d=[],showRightButtons:h=!1,onMenuClick:m,user:p,onLogin:f,onSignOut:g,brand:b,onBrandClick:v,centerSlot:x,endSlot:y,searchValue:z,onSearchChange:w,searchPlaceholder:S="Search...",children:k,className:C="",sx:B={}}){const[T,M]=a(!1),A=IS[t]||IS.default,L=A.theme,I=A.surface||i,N="expanded"===r&&c.length>3?"hamburger":r,W=le(rS,{placeholder:S,size:"medium",value:z,onChange:w,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return ce(se,{children:[le(u,{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:Qf,fontFamily:"inherit",...B},children:k||ce(se,{children:["hamburger"===N&&le(NS,{ariaLabel:"Open navigation menu",onClick:m||(()=>M(!0)),children:le(ja,{sx:{fontSize:"inherit"}})}),void 0!==b?le(si,v?{component:"button",type:"button",width:"hug",onClick:v,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0},children:b}:{component:"span",width:"hug",sx:{whiteSpace:"nowrap",flexShrink:0},children:b}):"logo"===o?le(u,{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}):le(si,{component:"span",width:"hug",sx:{whiteSpace:"nowrap",flexShrink:0},children:s}),ce(se,void 0!==x?{children:[le(u,{sx:{flex:1}}),le(u,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:x}),le(u,{sx:{flex:1}})]}:{children:["left"===l&&W,"expanded"===N&&le(Tb,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(Mb,{"aria-label":"Main navigation",children:c.map(e=>le(Ab,{children:e},e))})}),le(u,{sx:{flex:1}}),"right"===l&&W]}),void 0!==y?le(u,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):ce(se,{children:[h&&d.length>0&&le(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:d.map((a,t)=>a.raw?le(e.Fragment,{children:a.icon},t):le(NS,{ariaLabel:a.label||"Action "+(t+1),children:a.icon},t))}),p?le(nb,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:p.photoURL?le(u,{component:"img",src:p.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(Ga,{sx:{fontSize:24}}),children:p.displayName?.split(" ")[0]||"Account"}):f?le(nb,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===n?le(nb,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Ga,{sx:{fontSize:28}})}):null]})]})}),le(TS,{open:T,onClose:()=>M(!1),anchor:"left",size:"small",children:le(u,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:c.map(e=>le(nb,{variant:"ghost",size:"medium",onClick:()=>M(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function DS({mobileVariant:e="search",barColor:t="default",surface:i="Surface",title:n="Page Title",subtitle:r="Subtitle text",actionIcon:o,companyName:l="Company",navLinks:s=["Home","Products","About"],className:c="",sx:d={}}){const[h,m]=a(!1),p=IS[t]||IS.default,f=p.theme,g=p.surface||i,b={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Qf,fontFamily:"inherit",width:"100%",maxWidth:420,...d},v={"data-theme":f,"data-surface":g},x=le(TS,{open:h,onClose:()=>m(!1),anchor:"left",size:"small",children:le(u,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:s.map(e=>le(nb,{variant:"ghost",size:"medium",onClick:()=>m(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?ce(se,{children:[ce(u,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+c,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(NS,{ariaLabel:"Open navigation menu",onClick:()=>m(!0),children:le(ja,{sx:{fontSize:"inherit"}})}),le(rS,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(nb,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Ga,{sx:{fontSize:28}})})]}),x]}):ce(u,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+c,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(NS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),ce(u,{sx:{flex:1,minWidth:0},children:[le(u,{sx:{fontWeight:600,fontSize:"16px",lineHeight:1.3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n}),r&&le(u,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r})]}),o&&le(NS,{ariaLabel:"Action",children:o})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+c,...v,sx:{...b,px:1.5,pb:2},children:[ce(u,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(NS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),le(u,{sx:{flex:1}}),o&&le(NS,{ariaLabel:"Action",children:o})]}),ce(u,{sx:{px:1.5},children:[le(u,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:n}),r&&le(u,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:r})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+c,...v,sx:{...b,px:1.5,pb:3},children:[ce(u,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(NS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),le(u,{sx:{flex:1}}),o&&le(NS,{ariaLabel:"Action",children:o})]}),ce(u,{sx:{px:1.5,mt:1},children:[le(u,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:n}),r&&le(u,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:r})]})]})}function RS({mode:e="desktop",...a}){return le("mobile"===e?DS:WS,{...a})}const FS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",PS=["default","primary","primary-light","white","black"],HS=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],OS={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 ES({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function VS({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(ES,{ratio:a,threshold:t})]})}function QS({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function jS({color:e,selected:a,onClick:t}){const i=OS[e]||OS.default;return le(u,{component:"button","data-theme":i.theme,"data-surface":i.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(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function qS(){const[e,i]=a("desktop"),[n,r]=a("default"),[o,l]=a("Surface"),[s,c]=a("login"),[d,h]=a("hamburger"),[p,f]=a("name"),[g,b]=a("right"),[v,x]=a("search"),[z,w]=a("Default"),[S,k]=a("Surface"),[C,B]=a({}),T="desktop"===e,M=OS[n]||OS.default,A=M.theme,L=M.surface||o;return t(()=>{const e={};e.text=nn("--Text"),e.textQuiet=nn("--Text-Quiet"),e.background=nn("--Background"),e.border=nn("--Border"),e.focusVisible=nn("--Focus-Visible"),e.hover=nn("--Hover"),e.active=nn("--Pressed"),B(e)},[n,o,e]),ce(u,{sx:{pb:8},children:[le(vA,{title:"App Bar",component:"AppBar"}),le(u,{sx:{mt:1},children:le(ig,{theme:z,onThemeChange:w,surface:S,onSurfaceChange:k})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"AppBar",theme:z,surface:S})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:z,surface:S,children:le(u,{sx:{width:"100%",maxWidth:T?"100%":420,overflow:"hidden"},children:T?le(WS,{barColor:n,surface:o,loginType:s,menuType:d,brandType:p,searchPosition:g,companyName:"My App",navLinks:["Home","Products","About"]}):le(DS,{barColor:n,surface:o,mobileVariant:v,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(nv,{code:(()=>{if(T){const e=[];"default"!==n&&e.push('barColor="'+n+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"login"!==s&&e.push('loginType="'+s+'"'),"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"!==n&&e.push('barColor="'+n+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(m,{direction:"row",spacing:1,children:["desktop","mobile"].map(a=>le(QS,{label:FS(a),selected:e===a,onClick:()=>i(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:PS.map(e=>le(jS,{color:e,selected:n===e,onClick:r},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',A,'"']})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:HS.map(e=>le(QS,{label:e.replace("Surface-","").replace("Surface","Default"),selected:o===e,onClick:()=>l(e)},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',o,'"']})]}),T&&ce(se,{children:[ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(m,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(QS,{label:FS(e),selected:d===e,onClick:()=>h(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(m,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(QS,{label:FS(e),selected:p===e,onClick:()=>f(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(m,{direction:"row",spacing:1,children:["left","right"].map(e=>le(QS,{label:FS(e),selected:g===e,onClick:()=>b(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(m,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(QS,{label:FS(e),selected:s===e,onClick:()=>c(e)},e))})]})]}),!T&&ce(u,{sx:{mt:3},children:[le(Oi,{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(QS,{label:FS(e),selected:v===e,onClick:()=>x(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:[e," / ",n," / ",o,T?"":" / "+v,' — data-theme="',A,'" data-surface="',L,'"']}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(VS,{label:"Resting: var(--Text) vs. var(--Background)",ratio:tn(C.text,C.background),threshold:4.5,note:'data-theme="'+A+'" data-surface="'+L+'"'}),le(VS,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:tn(C.text,C.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(VS,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:tn(C.text,C.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(VS,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:tn(C.focusVisible,C.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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 i=a>=24,n=a>=44,r=a>=48;return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[ce(xi,{style:{color:"var(--Text)"},children:[e," — ",a,"px"]}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),ce(u,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:i?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:i?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:["Desktop ",i?"Y":"N"]}),ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:n?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:n?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["iOS ",n?"Y":"~"]}),ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:r?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:r?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["Android ",r?"Y":"~"]})]})]},e)})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Landmark:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Navigation (expanded menu):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Theme + Surface:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+A+'" data-surface="'+L+'"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Shadow:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Icon buttons:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Keyboard:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})]}),le(Lb,{value:3,children:le(pA,{component:"AppBar"})})]})]})}const GS={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}},US={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 YS({options:e=[],value:r,defaultValue:o=null,onChange:l,inputValue:s,onInputChange:c,label:d,labelPosition:h="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:w=!0,disabled:S=!1,fullWidth:k=!1,className:C="",sx:B={},...T}){const M=(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-"+M+"-Border)",N="default"===b?"var(--Text)":"var(--Text-"+M+")",[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=i(null),q=i(null),G=void 0!==r,U=void 0!==s,Y=G?r:W,X=U?s:R,J="floating"===h,Z="top"===h,$=""!==X,K=J?US[f]||US.medium:GS[f]||GS.medium,_=X?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(X.toLowerCase())):e,ee=n(e=>{U||F(e),c?.(e)},[U,c]),ae=n(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 ce(u,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+L+(P?" autocomplete-open":"")+(S?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...B},...T,children:[Z&&d&&le("small"===f?xi:wi,{component:"label",style:{display:"block",marginBottom:"6px",color:S?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:S?"var(--Disabled, 0.38)":1},children:d}),le(u,{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:S?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(u,{children:ce(u,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:K.height,backgroundColor:"var(--Hover)"},children:[J&&d&&le(u,{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(u,{component:"input",ref:q,type:"text",role:"combobox","aria-expanded":P,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":d||m,autoComplete:"off",value:X,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:S,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(Ya,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),w&&X&&!S&&le(u,{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(Ua,{sx:{fontSize:14}})}),le(u,{component:"button",type:"button","aria-label":P?"Close":"Open",tabIndex:-1,onClick:()=>{S||H(!P)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:S?"not-allowed":"pointer"},children:le(he,{sx:{fontSize:(K.iconSize||18)+"px",transform:P?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),p&&le(u,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:p}),P&&le(u,{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(u,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:x}):0===_.length?le(u,{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,i="string"==typeof e?e:e.value,n=t===(Y?"string"==typeof Y?Y:Y.label:null),r=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,n);return ce(u,{role:"option","aria-selected":n,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",...r,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(xi,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),n&&le(Ff,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]},i||t)})})]})}const XS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",JS=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],ZS=[{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 $S({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function KS({color:e,selected:a,onClick:t}){const i=XS(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function _S(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("top"),[c,d]=a("Fruit"),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Autocomplete",component:"Autocomplete"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Autocomplete",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(YS,{variant:e,color:i,size:r,label:c,labelPosition:l,options:ZS,clearable:h,disabled:f,fullWidth:b})})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),c&&a.push('label="'+c+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),h||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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le($S,{label:XS(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:JS.map(e=>ce(u,{children:[le(Li,{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(KS,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le($S,{label:XS(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le($S,{label:"none"===e?"None":XS(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clearable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(xv,{checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(xv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Autocomplete"})})]})]})}let ek=0;const ak={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},tk="var(--Sizing-1, 8px)",ik="40px",nk="var(--Icon-Size, 24px)",rk="var(--Sizing-Half, 4px)",ok={horizontal:{px:"var(--Sizing-2, 16px)",py:0},vertical:{px:"var(--Sizing-2, 16px)",py:"var(--Sizing-2, 16px)"}},lk={px:0,py:0};function sk({items:e=[],value:t,defaultValue:r=0,onChange:o,showLabels:l=!0,variant:s="fixed",orientation:c="horizontal",barColor:d="default",fabAction:h,fabPosition:m="end",fixed:p=!0,"aria-label":f="Bottom navigation",className:g="",sx:b={},...v}){const[x,y]=a(r),z=void 0!==t,w=z?t:x,S=n(e=>{z||y(e),o?.(e)},[z,o]),k="vertical"===c,C="floating"===s,B=ak[d]||ak.default,T=C?k?ok.vertical:ok.horizontal:lk,M=i(null);null===M.current&&(M.current="bottom-nav-"+ek++);const A=e=>M.current+"-tab-"+e,L=!!h;return ce(u,{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-"+c+(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?"var(--ToolBar, var(--Nav-Bar-Height, 80px))":0,fontFamily:"inherit",width:k?"fit-content":"100%",px:T.px,py:T.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(u,{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"}}),ce(u,{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(ck,{id:L?A(a):void 0,icon:e.icon,label:e.label,selected:a===w,showLabel:l,onClick:()=>S(a),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||a)).flatMap((e,a,t)=>{if(!h)return[e];return a===("center"===m?Math.ceil(t.length/2):t.length)-1?[e,le(hk,{...h,showLabel:l,position:m},"fab")]:[e]}),h&&0===e.length&&le(hk,{...h,showLabel:l,position:m},"fab")]})]})}function ck({id:e,icon:a,label:t,selected:i,showLabel:n,onClick:r,ariaLabel:o,disabled:l}){return ce(u,{component:"button",type:"button",role:"tab",id:e,"aria-selected":i,"aria-label":o,onClick:r,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(i?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:rk,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(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:32,minHeight:32,padding:tk,borderRadius:ik,backgroundColor:i?"var(--Text)":"transparent",color:i?"var(--Background)":"var(--Quiet)",fontSize:nk,transition:"background-color 0.2s ease, color 0.15s ease","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},".bottom-nav-item:hover &":i?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Hover)"},".bottom-nav-item:active &":i?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Pressed)"},".bottom-nav-item:disabled:hover &":{backgroundColor:"transparent"}},children:a}),n&&t&&le(Ni,{className:"bottom-nav-label",style:{color:i?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const dk=32;function hk({icon:e,label:n,onClick:r,showLabel:o,actions:l,position:s="end"}){const c=Array.isArray(l)&&l.length>0,[d,h]=a(!1),m=i(null);t(()=>{if(!d)return;const e=e=>{m.current&&!m.current.contains(e.target)&&h(!1)},a=e=>{"Escape"===e.key&&h(!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:ik,borderWidth:"var(--Button-Border-Width, 1px)",borderStyle:"solid",borderColor:"var(--Buttons-Default-Border)",color:"var(--Buttons-Default-Border)",backgroundColor:"transparent","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}}),f="center"!==s;return ce(u,{ref:m,sx:{position:"relative",display:"flex",flexShrink:0},children:[ce(u,{component:"button",type:"button","aria-label":n||"Action",onClick:e=>{c&&h(e=>!e),r?.(e)},...c?{"aria-haspopup":"menu","aria-expanded":d}:{},className:"bottom-nav-fab"+(d?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:rk,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(u,{sx:{...p(32),padding:tk,fontSize:nk,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&&n&&le(Ni,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:n})]}),c&&d&&le(u,{role:"menu","aria-label":n||"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)=>ce(u,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:a=>{h(!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:ik,"&: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(u,{sx:{width:40,display:"flex",justifyContent:"center",flexShrink:0},children:le(u,{sx:{...p(dk),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Aa,{})})}),le(Di,{style:{color:"inherit"},children:e.label})]},e.key||a))})]})}const uk={Home:le(Me,{sx:{fontSize:"inherit"}}),Explore:le(Xa,{sx:{fontSize:"inherit"}}),Radio:le(Ja,{sx:{fontSize:"inherit"}}),Library:le(Za,{sx:{fontSize:"inherit"}}),Favorite:le(Te,{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($a,{sx:{fontSize:"inherit"}})},mk=Object.keys(uk),pk=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],fk=[{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 gk({label:e,selected:a,onClick:t,disabled:i}){return le(u,{component:"button",onClick:t,disabled:i,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:i?"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:i?.4:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:i?"transparent":a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function bk({value:e,onChange:a,placeholder:t,sx:i}){return le(u,{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)"},...i}})}function vk({value:e,onChange:a,options:t,label:i}){return le(u,{component:"select",value:e,onChange:e=>a(e.target.value),"aria-label":i,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 xk({value:e,onChange:a,min:t,max:i,label:n}){return ce(u,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(Li,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:n}),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(u,{sx:{fontWeight:700,fontSize:"14px",minWidth:24,textAlign:"center"},children:e}),le("button",{type:"button",onClick:()=>{e<i&&a(e+1)},disabled:e>=i,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>=i?"not-allowed":"pointer",fontSize:"14px",opacity:e>=i?.4:1,fontFamily:"inherit"},children:"+"})]})}function yk({label:e,checked:a,onChange:t,caption:i,disabled:n}){return ce(u,{sx:{py:.5,opacity:n?.4:1},children:[le(w,{control:le(S,{checked:a,onChange:e=>t(e.target.checked),size:"small",disabled:n,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(Ri,{children:e}),sx:{m:0}}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:i})]})}function zk(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a(0),[s,c]=a(!0),[d,h]=a(!0),[p,f]=a("fixed"),[g,b]=a("horizontal"),[v,x]=a("default"),[z,w]=a(4),[S,k]=a(pk.map(e=>({icon:e.icon,label:e.label})));t(()=>{k(e=>{const a=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let i=0;i<z;i++)if(e[i])a.push(e[i]);else{const e=t[i-pk.length]||{icon:mk[i%mk.length],label:mk[i%mk.length]};a.push(e)}return a}),l(e=>Math.min(e,z-1))},[z]);const C=(e,a,t)=>{k(i=>{const n=[...i];return n[e]={...n[e],[a]:t},n})},B=S.slice(0,z).map(e=>({icon:uk[e.icon]||uk.Home,label:e.label}));return ce(u,{sx:{pb:8},children:[le(vA,{title:"Bottom Navigation",component:"BottomNavigation"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"BottomNavigation",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{minHeight:400},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[ce(u,{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(u,{sx:{width:"100%",maxWidth:500,overflow:"hidden",boxShadow:"0 2px 12px rgba(0,0,0,0.08)"},children:le(sk,{items:B,value:o,onChange:l,showLabels:d,variant:p,orientation:g,barColor:v,fixed:!1},"bn-"+z+"-"+p+"-"+g+"-"+d+"-"+v)}),ce(Li,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(fk.find(e=>e.value===v)||fk[0]).label]})]}),le(nv,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((a,t)=>{const i=S[t];e.push(" { icon: <"+i.icon+"Icon />, label: '"+i.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+'"'),s||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)"}})]}),ce(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(ci,{children:"Playground"}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:fk.map(e=>le(gk,{label:e.label,selected:v===e.value,onClick:()=>x(e.value)},e.value))}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(fk.find(e=>e.value===v)||fk[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(m,{spacing:0,children:[le(yk,{label:"Fixed",checked:s,onChange:c,caption:"Position fixed to bottom of viewport."}),le(yk,{label:"Labels",checked:d,onChange:h,caption:"Show text labels with icons."}),le(Li,{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."})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(gk,{label:"Fixed",selected:"fixed"===p,onClick:()=>f("fixed")}),le(gk,{label:"Floating",selected:"floating"===p,onClick:()=>f("floating")})]}),le(Li,{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(Oi,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(gk,{label:"Horizontal",selected:"horizontal"===g,onClick:()=>b("horizontal")}),le(gk,{label:"Vertical",selected:"vertical"===g,onClick:()=>b("vertical")})]}),le(Li,{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."})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(xk,{label:"Count",value:z,onChange:w,min:3,max:6}),le(m,{spacing:1.5,sx:{mt:2},children:S.slice(0,z).map((e,a)=>ce(u,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(Li,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:a+1}),le(vk,{value:e.icon,onChange:e=>C(a,"icon",e),options:mk,label:"Item "+(a+1)+" icon"}),d&&le(bk,{value:e.label,onChange:e=>C(a,"label",e),placeholder:"Label"})]},a))})]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:4},children:[le(ci,{children:"Accessibility Requirements"}),ce(xi,{color:"quiet",style:{marginBottom:32},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(fk.find(e=>e.value===v)||fk[0]).label]}),ce(m,{spacing:4,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Landmark:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Tab list:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Tab items:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Focus:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Token Reference"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Bar:"}),le(Li,{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.).'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Unselected icon/label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Selected:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Selected pill:"}),le(Li,{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)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Backfill + horizontal label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Backfill + vertical label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Best Practices"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Item count:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Horizontal layout:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Labels:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Fixed:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]}),le(Lb,{value:3,children:le(pA,{component:"BottomNavigation"})})]})]})}const wk=e=>r(function(a,t){return le(V,{direction:e,ref:t,...a})}),Sk={fade:r(function(e,a){return le(E,{ref:a,...e})}),grow:r(function(e,a){return le(O,{ref:a,...e})}),zoom:r(function(e,a){return le(H,{ref:a,...e})}),"slide-up":wk("up"),"slide-down":wk("down"),"slide-left":wk("left"),"slide-right":wk("right")},kk={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Gf},Ck={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},Bk={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},Tk={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},Mk={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"}},Ak={primary:{...Mk,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:{...Mk,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 Lk({open:e=!1,onClose:a,title:t,children:i,actions:n,maxWidth:r="sm",fullScreen:o=!1,scroll:l="body",alert:s=!1,nonModal:c=!1,transition:d,transitionDuration:h=300,titleId:m="dialog-title",contentId:p="dialog-description",className:f="",sx:g={},PaperProps:b={},...v}){const x=d?Sk[d]:void 0;let y;try{y=yS()}catch{y=null}const z=y?.theme||"Default",w=y?.style||"Modern",S=y?.surface||"Surface";return ce(W,{open:e,onClose:(e,t)=>{s&&"backdropClick"===t||s&&"escapeKeyDown"===t||a?.(e,t)},maxWidth:!o&&r,fullScreen:o,fullWidth:!o,scroll:l,hideBackdrop:c,disableEnforceFocus:c,disableEscapeKeyDown:s,TransitionComponent:x,transitionDuration:h,"aria-labelledby":m,"aria-describedby":p,className:"dialog dialog-"+r+(o?" dialog-fullscreen":"")+(s?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:c?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...b,"data-theme":z,"data-style":w,"data-surface":S,sx:{...kk,...o&&{borderRadius:0,border:"none"},...b.sx},role:s?"alertdialog":"dialog"},...v,children:[t&&ce(D,{id:m,sx:Ck,children:[t,!s&&a&&le(ob,{"aria-label":"Close dialog",onClick:e=>a(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Ua,{fontSize:"small"})})]}),le(R,{dividers:"paper"===l,sx:{...Bk,..."paper"===l&&{maxHeight:o?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:s?le(F,{id:p,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:i}):le(u,{id:p,children:i})}),n&&le(P,{sx:Tk,children:n})]})}function Ik({open:e,onClose:a,title:t,children:i,confirmText:n="Confirm",cancelText:r="Cancel",onConfirm:o,onCancel:l,...s}){return le(Lk,{open:e,onClose:a,title:t,alert:!0,...s,actions:ce(se,{children:[le(u,{component:"button",type:"button",onClick:l||a,sx:Ak.outline,children:r}),le(u,{component:"button",type:"button",onClick:o||a,sx:Ak.primary,children:n})]}),children:i})}function Nk({open:e,onClose:a,title:t,children:i,submitText:n="Submit",cancelText:r="Cancel",onSubmit:o,...l}){return le(Lk,{open:e,onClose:a,title:t,...l,actions:ce(se,{children:[le(u,{component:"button",type:"button",onClick:a,sx:Ak.outline,children:r}),le(u,{component:"button",type:"button",onClick:o,sx:Ak.primary,children:n})]}),children:i})}function Wk({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Dk(){const[e,t]=a(!1),[i,n]=a("sm"),[r,o]=a(!1),[l,s]=a("none"),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Dialog",component:"Dialog"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Dialog",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:f,surface:b,children:le(nb,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(nv,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==i&&e.push('maxWidth="'+i+'"'),r&&e.push("fullScreen"),c&&e.push("alert"),h&&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(Lk,{open:e,onClose:(e,a)=>{c&&"backdropClick"===a||t(!1)},maxWidth:i,fullScreen:r,alert:c,nonModal:h,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:ce(se,{children:[le(nb,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(nb,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(wi,{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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(Wk,{label:e.toUpperCase(),selected:i===e,onClick:()=>{n(e),o(!1)}},e)),le(Wk,{label:"Full Screen",selected:r,onClick:()=>o(!r)})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(Wk,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:l===e,onClick:()=>s(e)},e);var a})})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Alert"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(xv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Alert mode"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Non-Modal"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(xv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Dialog"})})]})]})}const Rk={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},Fk={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)"},Pk={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function Hk(e,a,t=1,i=[]){return e.forEach((n,r)=>{i.push({item:n,level:t,index:r,siblings:e.length}),n.children?.length&&a.includes(n.id)&&Hk(n.children,a,t+1,i)}),i}function Ok(e,a,t=null){for(const i of e){if(i.id===a)return t;if(i.children?.length){const e=Ok(i.children,a,i.id);if(null!=e)return e;if(null===e&&i.children.some(e=>e.id===a))return i.id}}return null}function Ek({node:e,density:a,expanded:t,selected:i,focusedId:n,multiSelect:r,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:s,collapseIcon:c,expandIcon:d,animation:h,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g}){const{item:b,level:v,index:x,siblings:y}=e,z=Rk[a]||Rk.default,w="compact"===a?Li:xi,S=!!b.children?.length,k=S&&t.includes(b.id),C=i.includes(b.id),B=!!b.disabled,T=!B||s;return ce(u,{component:"li",role:"treeitem","aria-expanded":S?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:n===b.id&&T?0:-1,ref:e=>g(b.id,e),onFocus:e=>{e.stopPropagation(),f(b.id)},sx:{outline:"none",listStyle:"none",...b.sx||{}},children:[ce(u,{className:"omni-tree-content",onClick:e=>{B||(e.stopPropagation(),S&&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(u,{"aria-hidden":"true",sx:{width:z.iconSize,height:z.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:S&&(k?c:d)}),o&&!l&&le(Gv,{checked:C,disabled:B,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),b.icon&&le(Ff,{size:"small",sx:{color:"inherit",flexShrink:0},children:b.icon}),le(w,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:b.label}),b.badge&&le(u,{sx:{flexShrink:0},children:b.badge})]}),S&&k&&le(u,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"9px",marginLeft:"12px",listStyle:"none",animation:Fk[h]},children:b.children.map((e,u)=>le(Ek,{node:{item:e,level:v+1,index:u,siblings:b.children.length},density:a,expanded:t,selected:i,focusedId:n,multiSelect:r,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:s,collapseIcon:c,expandIcon:d,animation:h,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g},e.id))})]})}function Vk({color:e="default",variant:t="solid",surface:r,density:o="default",animation:l="slide",selectionStyle:s,items:d=Qk,selectionMode:h="single",checkboxSelection:m=!1,disableSelection:p=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:b,onExpandedItemsChange:v,selectedItems:x,onSelectedItemsChange:y,onItemExpansionToggle:z,onItemSelectionToggle:w,slots:S,"aria-label":k="Tree view",className:C="",sx:B={},...T}){const M=s||t,A="multi"===h,[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=c(()=>Hk(d,N),[d,N]),[H,O]=a(null),E=H??P[0]?.item.id??null,V=i({}),Q=n((e,a)=>{a?V.current[e]=a:delete V.current[e]},[]),j=n(e=>{O(e),V.current[e]?.focus()},[]),q=n((e,a)=>{const t=N.includes(a),i=t?N.filter(e=>e!==a):[...N,a];void 0===b&&I(i),v?.(e,i),z?.(e,a,!t)},[N,b,v,z]),G=n((e,a)=>{const t=F.includes(a),i=A?t?F.filter(e=>e!==a):[...F,a]:[a],n=A?i:i[0]??null;void 0===x&&D(n),y?.(e,n),w?.(e,a,!A||!t)},[F,A,x,y,w]),U=n(e=>{const a=P.filter(e=>!e.item.disabled||f),t=a.findIndex(e=>e.item.id===E),i=a[t];if(!i)return;const{item:n}=i,r=!!n.children?.length,o=r&&N.includes(n.id),l=t=>{const i=a[Math.max(0,Math.min(a.length-1,t))];i&&(e.preventDefault(),j(i.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":r&&!o?(e.preventDefault(),q(e,n.id)):o&&l(t+1);break;case"ArrowLeft":if(o)e.preventDefault(),q(e,n.id);else{const a=Ok(d,n.id);a&&(e.preventDefault(),j(a))}break;case"Enter":case" ":e.preventDefault(),p?r&&q(e,n.id):G(e,n.id)}},[P,E,N,d,f,p,j,q,G]),Y=(X=e).charAt(0).toUpperCase()+X.slice(1);var X;const J="default"===M?void 0:Y,Z=r||("light"===M?"Surface-Brightest":"Surface-Dim"),$=S?.collapseIcon?le(S.collapseIcon,{}):le(Ff,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Ea,{})}),K=S?.expandIcon?le(S.expandIcon,{}):le(Ff,{size:"small",sx:{color:"inherit"},children:le(Ea,{})});return le(u,{"data-theme":J,"data-surface":Z,className:"omni-treeview omni-treeview-"+M+" omni-treeview-"+e+" omni-treeview-"+o+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...Pk,...B},children:le(u,{component:"ul",role:"tree","aria-label":k,"aria-multiselectable":A||void 0,onKeyDown:U,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...T,children:d.map((e,a)=>le(Ek,{node:{item:e,level:1,index:a,siblings:d.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 Qk=[{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"}],jk=e=>le(Vk,{variant:"solid",...e}),qk=e=>le(Vk,{variant:"light",...e}),Gk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Uk=[{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 Yk({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Xk(){const[e,t]=a(!1),[i,n]=a("medium"),[r,o]=a("left"),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Drawer",component:"Drawer"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Drawer",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:l,surface:c,children:le(nb,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(nv,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==i&&e.push('size="'+i+'"'),"left"!==r&&e.push('anchor="'+r+'"'),"<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}}),ce(TS,{open:e,onClose:()=>t(!1),size:i,anchor:r,children:[ce(AS,{children:[le(di,{children:"Navigation"}),le(MS,{onClick:()=>t(!1)})]}),le(LS,{children:le(Vk,{items:Uk,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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Yk,{label:Gk(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(Yk,{label:Gk(e),selected:r===e,onClick:()=>o(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Drawer"})})]})]})}const Jk={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 Zk({onFiles:e,accept:t,multiple:r=!1,size:o="medium",disabled:l=!1,icon:s,label:c,sublabel:d,children:h,className:m="",sx:p={},...f}){const[g,b]=a(!1),v=i(null),x=i(0),y=Jk[o]||Jk.medium,z=n(a=>{!l&&a?.length&&e?.(Array.from(a))},[l,e]),w=n(e=>{e.preventDefault(),e.stopPropagation(),x.current=0,b(!1),l||z(e.dataTransfer.files)},[l,z]),S=n(e=>{e.preventDefault(),e.stopPropagation()},[]),k=n(e=>{e.preventDefault(),e.stopPropagation(),x.current++,l||b(!0)},[l]),C=n(e=>{e.preventDefault(),e.stopPropagation(),x.current--,0===x.current&&b(!1)},[]),B=n(()=>{l||v.current?.click()},[l]),T=n(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v.current?.click())},[l]),M=n(e=>{z(e.target.files),e.target.value=""},[z]),A=s||Ka,L=r?"Drag and drop files here":"Drag and drop file here";return ce(u,{role:"button",tabIndex:l?-1:0,"aria-label":c||L,"aria-disabled":l||void 0,onClick:B,onKeyDown:T,onDrop:w,onDragOver:S,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:r,onChange:M,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),h||ce(se,{children:[le(A,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(xi,{style:{color:"var(--Text)"},children:c||L}),le(Li,{style:{color:"var(--Text-Quiet)"},children:d||"or click to browse"})]})]})}const $k={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Kk={size:40,iconSize:"24px",borderRadius:"8px"},_k=new Set;function eC({children:e,color:a="primary",variant:t="solid",size:i,className:n="",sx:r={},...o}){!function(e){void 0!==e&&("production"===process.env.NODE_ENV||_k.has(e)||(_k.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.')))}(i);const l=Kk,s=$k[a]||$k.primary;let c,d;switch(t){case"light":c=s,d="Surface-Brightest";break;case"dark":c=s,d="Surface-Dimmest";break;default:c=s,d="Surface"}return le(u,{"data-theme":c,"data-surface":d,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" "+n,sx:{width:l.size,height:l.size,borderRadius:l.borderRadius,backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& svg":{width:l.iconSize,height:l.iconSize,fontSize:l.iconSize,color:"inherit",stroke:"currentColor"},...r},...o,children:e})}const aC={eyebrow:Oi,title:wi,secondary:yi},tC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},iC={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 nC({children:e,size:a="medium",isButton:t=!1,onAction:i,ariaLabel:n}){return le(u,t?{component:"button",role:"button",tabIndex:0,"aria-label":n||"Action",onClick:e=>{e.stopPropagation(),i?.(e)},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),i?.(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 rC({children:e,startDecorator:a,endDecorator:t,startDecoratorIsButton:i=!1,endDecoratorIsButton:n=!1,onStartDecoratorAction:r,onEndDecoratorAction:o,startDecoratorAriaLabel:l,endDecoratorAriaLabel:s,size:c="medium",variant:d="default",color:h,eyebrow:m,overline:p,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:x="none",onSelect:y,onClick:z,bottomBorder:w=!1,rightBorder:k=!1,component:C="li",sx:B={},...T}){const M=iC[c]||iC.medium,A=g||!!z,I="checkbox"===x||"radio"===x,N=(A||I)&&!b,W=e=>{b||(I&&y?.(e),z?.(e))};return ce(u,{component:C,role:I?"option":A?"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":"")+(A?" list-item-clickable":"")+(I?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:M.py,px:M.px,minHeight:"32px",fontSize:M.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",...A?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!A&&w?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!A&&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(S,{checked:v,disabled:b,size:M.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(L,{checked:v,disabled:b,size:M.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(nC,{size:c,isButton:i,onAction:r,ariaLabel:l,children:a}),(()=>{const a=aC,t=m??p,i={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return ce(u,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(a.eyebrow,{style:{...i,color:"var(--Quiet)"},children:t}),null!=e&&le(a.title,{style:{...i,color:"var(--Text)"},children:e}),f&&le(a.secondary,{style:{...i,color:"var(--Quiet)"},children:f})]})})(),t&&le(nC,{size:c,isButton:n,onAction:o,ariaLabel:s,children:t})]})}function oC({children:a,items:t,variant:i="default",color:n="primary",size:r="medium",orientation:o="vertical",dividers:l=!1,selectionMode:s="none",loading:c=!1,skeletonRows:d=3,empty:h,error:m,selectedIndices:p=[],onSelectionChange:f,clickable:g=!1,component:b="ul",className:v="",sx:x={},...y}){const z="horizontal"===o,w="checkbox"===s||"radio"===s,S="light"===i,k="default"===i,C={};("solid"===i||S)&&tC[n]&&(C["data-theme"]=tC[n],S&&(C["data-surface"]="Surface-Brightest"));const B=m?"error":c?"loading":t&&0===t.length&&h?"empty":null;return le(u,{component:b,role:w?"listbox":"list","aria-busy":"loading"===B?"true":void 0,"aria-multiselectable":"checkbox"===s||void 0,...C,className:"list-container list-"+i+" list-"+n+" "+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(u,{component:"li",sx:{listStyle:"none"},children:le(Lt,{label:"Loading",children:Array.from({length:d}).map((e,a)=>le(rC,{component:"div",size:r,variant:i,color:n,children:"        "},"sk-"+a))})});if("error"===B)return le(u,{component:"li",sx:{listStyle:"none"},children:m});if("empty"===B)return le(u,{component:"li",sx:{listStyle:"none"},children:h});if(t&&t.length>0){const e=[];return t.forEach((a,o)=>{e.push(le(rC,{size:r,variant:i,color:n,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:w?p.includes(o):a.selected,selectionMode:s,onSelect:()=>(e=>{if(f)if("radio"===s)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(u,{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 i=[];return t.forEach((e,a)=>{i.push(e),a<t.length-1&&i.push(le(u,{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))}),i}return null})()})}const lC={small:16,medium:24,large:32};function sC({theme:e,surface:a,size:t="medium",color:i="primary",message:n="Loading...",sx:r={},"aria-label":o="Loading","aria-labelledby":l,...s}){return ce(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...r},...s,"data-theme":e||void 0,"data-surface":a||void 0,children:[le(Zz,{size:"number"==typeof t?t:lC[t]??lC.medium,color:i,"aria-label":l?void 0:o,"aria-labelledby":l}),n&&le(Q,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:n})]})}function cC({value:e,label:a,sx:t={},...i}){return ce(m,{spacing:1,sx:{...t},...i,children:[a&&ce(m,{direction:"row",justifyContent:"space-between",children:[le(Q,{variant:"body2",sx:{color:"var(--Text)",fontWeight:500},children:a}),void 0!==e&&ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:[e,"%"]})]}),le(j,{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 dC({rows:e=3,height:a=100,spacing:t=2,sx:i={},...n}){return le(m,{spacing:t,sx:{...i},...n,children:Array.from({length:e}).map((e,t)=>le(G,{variant:"rectangular",height:a,sx:{backgroundColor:"var(--Container-Low)",borderRadius:"8px"}},t))})}function hC({message:e="Loading",sx:a={},...t}){return ce(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...a},...t,children:[le(u,{sx:{display:"flex",gap:1},children:[0,1,2].map(e=>le(u,{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(Q,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:e})]})}function uC({message:e="Loading page...",size:a=60,sx:t={},...i}){return le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",backgroundColor:"var(--Background)",...t},...i,children:le(sC,{size:a,message:e})})}function mC({lines:e=3,showImage:a=!0,sx:t={},...i}){return le(q,{sx:{p:2,backgroundColor:"var(--Container)",...t},...i,children:ce(m,{spacing:2,children:[a&&le(G,{variant:"rectangular",height:200,sx:{backgroundColor:"var(--Container-Low)",borderRadius:1}}),le(m,{spacing:1,children:Array.from({length:e}).map((e,a)=>le(G,{variant:"text",height:0===a?24:16,sx:{backgroundColor:"var(--Container-Low)"}},a))})]})})}function pC({isLoading:e=!1,message:a="Loading...",children:t,sx:i={},...n}){return ce(u,{sx:{position:"relative",...i},...n,children:[t,e&&le(u,{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(sC,{size:40,message:a})})]})}const fC=e=>e.charAt(0).toUpperCase()+e.slice(1),gC={small:xi,medium:wi,large:Ti},bC={small:fi,medium:pi,large:mi},vC={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"}},xC=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),yC=()=>s(xC);function zC({children:e,variant:t="outline",color:r="default",size:l="medium",open:s,onOpenChange:c,...d}){const[h,m]=a(!1),p=void 0!==s,f=p?s:h,g=i(null),b=o(),v="menu-"+b,x="menubtn-"+b,y=n(e=>{const a="function"==typeof e?e(f):e;p?c?.(a):m(a)},[p,f,c]);return le(xC.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:v,buttonId:x,variant:t,color:r,size:l},children:le(u,{sx:{display:"inline-flex",position:"relative"},...d,children:e})})}function wC({children:a,className:t="",sx:i={},...n}){const{open:r,setOpen:o,anchorRef:l,menuId:s,buttonId:c,size:d,color:h}=yC(),m=vC[d]||vC.medium,p=fC("default"===h?"Default":h);return ce(u,{component:"button",ref:l,id:c,"aria-haspopup":"true","aria-expanded":r,"aria-controls":r?s: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"},...i},onKeyDown:e=>{"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),o(!0))},...n,children:["string"==typeof a?e.createElement(gC[d]||gC.medium,{style:{color:"inherit",fontWeight:600}},a):a,le(Ff,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:r?"rotate(180deg)":"rotate(0deg)"},children:le(he,{})})]})}function SC({children:e,className:a="",placement:n="bottom-start",sx:r={},...o}){const{open:l,setOpen:s,anchorRef:c,menuId:d,buttonId:h,variant:m,color:p,size:f}=yC(),g=i(null),b=vC[f]||vC.medium,v=fC("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)&&c.current&&!c.current.contains(e.target)&&s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,s,c]),t(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(s(!1),c.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,s,c]),l?le(u,{className:"menu menu-"+m+" "+a,sx:{position:"absolute",top:"100%",left:"bottom-end"===n?"auto":0,right:"bottom-end"===n?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+x,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:Qf,overflow:"hidden",...r},children:le(u,{ref:g,id:d,role:"menu","aria-labelledby":h,"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&&s(!1)},...o,children:e})}):null}function kC({children:e,onClick:a,selected:t=!1,disabled:i=!1,className:n="",sx:r={},...o}){const{setOpen:l,size:s}=yC(),c=vC[s]||vC.medium,d=t?bC[s]||bC.medium:gC[s]||gC.medium,h=()=>{i||(a?.(),l(!1))};return le(u,{role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i||void 0,"aria-selected":t||void 0,onClick:h,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),h())},className:"menu-item"+(t?" menu-item-selected":"")+" "+n,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",padding:c.itemPy+" "+c.itemPx,fontSize:c.fontSize,color:i?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"var(--Hover)":"transparent",cursor:i?"not-allowed":"pointer",opacity:i?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.1s ease, color 0.1s ease",userSelect:"none",...!i&&{"&: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"}},...r},...o,children:le(u,{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 CC({className:e="",sx:a={},...t}){return le(u,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...a},...t})}const BC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",TC=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function MC({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function AC({color:e,selected:a,onClick:t}){const i=BC(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function LC(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Menu",component:"Menu"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Menu",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:l,surface:c,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:ce(zC,{variant:e,color:i,size:r,children:[le(wC,{children:"Actions"}),ce(SC,{children:[le(kC,{children:"Edit"}),le(kC,{children:"Duplicate"}),le(kC,{selected:!0,children:"Archive"}),le(CC,{}),le(kC,{disabled:!0,children:"Delete"})]})]})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"<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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","solid","light"].map(a=>le(MC,{label:BC(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:TC.map(e=>ce(u,{children:[le(Li,{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(AC,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(MC,{label:BC(e),selected:r===e,onClick:()=>o(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Menu"})})]})]})}const IC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},NC={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},WC={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},DC={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 RC(e){const a=DC[e];if(!a)return"";const{from:t,to:i}=a.enter,n=Object.entries(t).map(([e,a])=>e+":"+a).join(";"),r=Object.entries(i).map(([e,a])=>e+":"+a).join(";");return"@keyframes "+a.name+" { from {"+n+"} to {"+r+"} }@keyframes "+a.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function FC({open:e,onClose:n,children:r,title:o,variant:l="default",color:s="primary",size:c="medium",layout:d="center",transition:h="fade",transitionSpeed:m=250,closeOnBackdrop:p=!0,showCloseButton:f=!0,className:g="",sx:b={},...v}){const x=i(null),y=i(null),[z,w]=a(!1);let S;try{S=yS()}catch{S=null}const k=S?.style||"Modern",C="soft"===l,B="solid"===l,T="fullscreen"===d,M=B||C?IC[s]:null,A=NC[l]||NC.default,L=WC[c]||WC.medium,I=DC[h],N=I?I.name:void 0,W=m+"ms";return t(()=>(e?(y.current=document.activeElement,w(!0),requestAnimationFrame(()=>{x.current?.focus()}),document.body.style.overflow="hidden"):(w(!1),document.body.style.overflow="",y.current?.focus()),()=>{document.body.style.overflow=""}),[e]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,n]),e||z?ce(se,{children:["none"!==h&&le("style",{children:RC(h)}),le(u,{"aria-hidden":"true",onClick:p?n:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...N&&{animation:N+"-backdrop "+W+" ease-out forwards"}}}),ce(u,{role:"dialog","aria-modal":"true","aria-label":o||"Modal",ref:x,tabIndex:-1,"data-surface":A,"data-theme":M||void 0,"data-style":k,className:"modal modal-"+l+" modal-"+c+" modal-"+d+(C||B?" modal-"+s:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...T?{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:Gf,display:"flex",flexDirection:"column",overflow:"hidden",...N&&{animation:N+" "+W+" ease-out forwards"},...b},...v,children:[(o||f)&&ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:T?4:L.padding,pt:T?3:L.padding,pb:0,flexShrink:0},children:[o&&le(u,{className:"modal-title",sx:{fontSize:"small"===c?"18px":"large"===c?"24px":"20px",fontWeight:"var(--H4-Font-Weight, 700)",fontFamily:"var(--H4-Font-Family, var(--Font-Family-Header, var(--Header-Font-Family, inherit)))",color:"var(--Header, var(--Text))",flex:1},children:o}),f&&le(u,{component:"button",type:"button","aria-label":"Close modal",onClick:n,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(Ua,{sx:{fontSize:20}})})]}),le(u,{sx:{flex:1,overflowY:"auto",px:T?4:L.padding,pt:T?3:"16px",pb:T?3:L.padding,color:"var(--Text)",fontSize:"small"===c?"13px":"14px",lineHeight:1.6},children:r})]})]}):null}function PC({children:e,surface:a="Container",outlined:t=!1,variant:i=(t?"outlined":"elevation"),sx:n={},...r}){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(q,{variant:i,elevation:"outlined"===i||t?0:l,"data-surface":o,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...n},...r,children:e})}function HC({open:e=!1,onClose:n,anchorRef:r,placement:o="bottom-end",theme:l="Default",surface:s="Surface-Bright",width:c=320,maxHeight:d=400,children:h,sx:m={}}){const p=i(null),[f,g]=a({top:0,left:0,right:"auto"});return t(()=>{if(!e||!r?.current)return;const a=r.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,r,o]),t(()=>{if(!e)return;const a=e=>{p.current?.contains(e.target)||r?.current?.contains(e.target)||n?.()};return document.addEventListener("pointerdown",a),()=>document.removeEventListener("pointerdown",a)},[e,n,r]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,n]),e?de.createPortal(le(u,{ref:p,"data-theme":l,"data-surface":s,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:c,maxHeight:d,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Qf,...m},children:h}),document.body):null}const OC={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},EC="var(--Icon-Size, 24px)",VC="var(--Sizing-Half, 4px)",QC="var(--Button-Height, 32px)";function jC({items:e=[],sections:t,value:i,defaultValue:r=0,onChange:o,expandable:l=!1,expandedWidth:s="partial",defaultExpanded:c=!1,fabAction:d,labelStyle:h="contained",variant:m="default",size:p="medium",className:f="",sx:g={},...b}){const[v,x]=a(r),[y,z]=a(c),w=void 0!==i,S=w?i:v,k=n(e=>{w||x(e),o?.(e)},[w,o]),C=l&&y;return ce(u,{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"===h?"outside":"contained")+" rail-"+(OC[p]?p:"medium")+" "+f,sx:{display:"flex",flexDirection:"column",width:C?("full"===s?320:240)+"px":OC[p]||OC.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(u,{sx:{display:"flex",justifyContent:C?"flex-start":"center",px:C?1.5:0,height:56,alignItems:"center"},children:le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>z(e=>!e),"aria-label":C?"Collapse menu":"Expand menu",children:le(Ff,{size:"small",sx:{color:"inherit"},children:le(C?Ua:ja,{})})})}),d&&le(u,{sx:{px:C?2:1,py:1,flexShrink:0},children:le(nb,{variant:"primary-light",size:"medium",onClick:d.onClick,"aria-label":d.label||"Action",startIcon:d.icon?le(Ff,{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(u,{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,i)=>{i>0&&e.push(le(u,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+i)),t.items.forEach(t=>{const i=a;e.push(le(qC,{item:t,variant:m,selected:S===i,expanded:C,labelStyle:h,onClick:()=>k(i)},"item-"+i)),a++})}),e}return e.map((e,a)=>le(qC,{item:e,variant:m,selected:S===a,expanded:C,labelStyle:h,onClick:()=>k(a)},a))})()})]})}function qC({item:e,selected:a,expanded:t,labelStyle:i,variant:n="default",onClick:r}){const{icon:o,avatar:l,label:s,badge:c,disabled:d}=e,h=a?"var(--Text)":"transparent",m="outside"!==i,p=m&&!t,f=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 ce(u,{component:"button",type:"button",role:"tab","aria-selected":a,"aria-label":s,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:r,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:EC,minHeight:EC,px:t?2.5:0,py:p?VC:0,border:a&&p?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:p||t?h:"transparent",boxShadow:a&&p?"var(--Shadow-1, none)":"none",color:a?p?"var(--Background)":"var(--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",...p||t?f:{}},children:[ce(u,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:m?"100%":QC,height:m?"auto":QC,py:m?VC:0,borderRadius:m?"8px":QC,backgroundColor:m?"transparent":h,border:!m&&a?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...m?{}:f}},children:[l?le(u,{sx:{display:"flex",width:EC,height:EC},children:l}):le(Ff,{size:"small",sx:{color:"inherit"},children:o}),c&&le(GC,{value:c})]}),s&&le(u,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(Ni,{className:"rail-item-label",color:"inherit",style:{textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:s})})]})}function GC({value:e}){return le(u,{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 UC=[{icon:le(Me,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Te,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}];function YC({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function XC(){const[e,t]=a(!0),[i,n]=a("partial"),[r,o]=a(!1),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Rail",component:"Rail"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Rail",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[ce(zv,{theme:l,surface:c,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(jC,{items:UC,expandable:e,expandedWidth:i,fabAction:r?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0}),le(u,{sx:{flex:1,p:3},children:le(xi,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(nv,{code:(()=>{const a=["items={items}"];return e&&(a.push("expandable"),"partial"!==i&&a.push('expandedWidth="full"')),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{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(YC,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:i===e,onClick:()=>n(e)},e);var a})})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Expandable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(xv,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"FAB Action"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(xv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"FAB action"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Rail"})})]})]})}function JC(e){const a=Math.max(0,Math.floor(Number(e)||0)),t=Math.floor(a/3600),i=Math.floor(a%3600/60),n=a%60,r=e=>String(e).padStart(2,"0");return t>0?`${t}:${r(i)}:${r(n)}`:`${i}:${r(n)}`}function ZC({title:e,subtitle:t,avatarSrc:i,avatarInitials:n,position:r,defaultPosition:o=0,duration:l=0,onSeek:s,playing:c,defaultPlaying:d=!1,onPlayPause:h,onPrevious:m,onNext:p,variant:f="default",size:g="medium",disabled:b=!1,showTime:v=!0,className:x="",sx:y={},"aria-label":z="Audio player",...w}){const[S,k]=a(o),[C,B]=a(d),T=void 0!==r,M=void 0!==c,A=T?r:S,L=M?c:C,I=Boolean(e||t||i||n);return ce(hz,{className:"player "+x,gap:"var(--Sizing-2)",role:"group","aria-label":z,style:{alignItems:"center",width:"100%"},sx:y,...w,children:[I&&ce(hz,{gap:"var(--Sizing-1)",style:{alignItems:"center",minWidth:0},children:[(i||n)&&le(Lg,{src:i,initials:n,size:g,alt:e?`Artwork for ${e}`:void 0}),ce(uz,{gap:"0",style:{minWidth:0},children:[e&&le(wi,{style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e}),t&&le(Li,{color:"quiet",style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t})]})]}),ce(hz,{gap:"var(--Sizing-Half)",style:{alignItems:"center",flexShrink:0},children:[m&&le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:m,"aria-label":"Previous track",children:le(tt,{})}),le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:()=>{M||B(!L),h?.(!L)},"aria-label":L?"Pause":"Play",children:le(L?at:et,{})}),p&&le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:p,"aria-label":"Next track",children:le(it,{})})]}),ce(hz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flex:1,minWidth:0},children:[v&&le(Li,{color:"quiet",style:{fontVariantNumeric:"tabular-nums",flexShrink:0},children:JC(A)}),le(u,{sx:{flex:1,minWidth:0},children:le(Qx,{variant:f,size:g,disabled:b||!s,min:0,max:Math.max(l,1),value:A,onChange:(e,a)=>{const t=Array.isArray(a)?a[0]:a;T||k(t),s?.(t)},"aria-label":"Seek",getAriaValueText:e=>JC(e)+" of "+JC(l)})}),v&&le(Li,{color:"quiet",style:{fontVariantNumeric:"tabular-nums",flexShrink:0},children:JC(l)})]})]})}const $C=["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"],KC="1.618034",_C={"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":KC+" / 1","Golden-Vertical":"1 / "+KC},eB={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function aB({ratio:a="1:1",children:t,variant:i="default",color:n="default",padding:r="none",fit:o="width",placeholder:l=!0,elevated:s=!1,clickable:c=!1,onClick:d,maxWidth:h,maxHeight:m,component:p="div",className:f="",sx:g={},...b}){const v=_C[a]||_C["1:1"],x=(y="default"===n?"Default":n).charAt(0).toUpperCase()+y.slice(1);var y;const z=l&&0===e.Children.count(t),w="default"===n?void 0:x,S="dark"===i?"Surface-Dimmest":"light"===i?"Surface-Brightest":void 0,k=void 0!==eB[r]?eB[r]:eB.none,C=c||!!d,B="default"===i,T=s?Qf:Vf,M=s?jf:Qf;return le(u,{component:p,onClick:C?d:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+a.toLowerCase()+" ratio-"+i+(C?" ratio-clickable":"")+(s?" 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!==h&&{maxWidth:h},...void 0!==m&&{maxHeight:m},border:B?"none":"1px solid var(--Border-Variant)",borderRadius:B?0:"var(--Style-Border-Radius)",boxShadow:B?"none":T,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!B&&{"&:hover":{boxShadow:M}},...g},...b,children:le(u,{"data-theme":w||void 0,"data-surface":S,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(Ff,{size:"large",sx:{color:"var(--Background)"},children:le(nt,{})}):t})})}const tB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",iB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],nB=["default","solid","light","dark"],rB=["none","xs","sm","md","lg","xl"];function oB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function lB({color:e,selected:a,onClick:t,variant:i}){const n=tB(e);return le(Rz,{component:"button","data-theme":{solid:n,light:n+"-Light",dark:n,default:void 0}[i],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[i],onClick:()=>t(e),"aria-label":"Select "+n,"aria-pressed":a,title:n,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(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function sB(){const[e,t]=a("1:1"),[i,n]=a("solid"),[r,o]=a("primary"),[l,s]=a("none"),[c,d]=a(!1),[h,u]=a(!1),[p,f]=a("Default"),[g,b]=a("Surface");return ce(Rz,{sx:{pb:8},children:[le(vA,{title:"Ratio",component:"Ratio"}),le(Rz,{sx:{mt:1},children:le(ig,{theme:p,onThemeChange:f,surface:g,onSurfaceChange:b})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Reference"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Ratio",theme:p,surface:g})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:p,surface:g,children:le(Rz,{sx:{width:"100%",maxWidth:480},children:le(aB,{ratio:e,variant:i,color:r,padding:l,elevated:c,clickable:h})})}),le(nv,{code:(()=>{const a=['ratio="'+e+'"'];return"default"!==i&&a.push('variant="'+i+'"'),"default"!==r&&a.push('color="'+r+'"'),"none"!==l&&a.push('padding="'+l+'"'),c&&a.push("elevated"),h&&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:ce(Rz,{sx:{p:3},children:[le(Rz,{sx:{mb:3}}),ce(Rz,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:nB.map(e=>le(oB,{label:tB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(Rz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:iB.map(e=>ce(Rz,{children:[le(Li,{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(lB,{color:e,selected:r===e,onClick:o,variant:"default"===i?"solid":i},e))})]},e.label))})]}),ce(Rz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:rB.map(e=>le(oB,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>s(e)},e))})]}),ce(Rz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:$C.map(a=>le(oB,{label:a,selected:e===a,onClick:()=>t(a)},a))})]}),ce(Rz,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(Rz,{children:[le(Ri,{children:"Elevated"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(xv,{checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Elevated"})]}),ce(Rz,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(Rz,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(xv,{checked:h,onChange:e=>u(e.target.checked),size:"small","aria-label":"Clickable"})]})]})})]})}),le(Lb,{value:2,children:le(Rz,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(Rz,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(Rz,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:e}),le(Li,{style:{color:"var(--Text-Quiet)"},children:a})]},e))})]}),ce(wi,{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(Lb,{value:3,children:le(pA,{component:"Ratio"})})]})]})}const cB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",dB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function hB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function uB({color:e,selected:a,onClick:t}){const i=cB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function mB(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(!0),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Search Field",component:"SearchField"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"SearchField",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:400},children:le(rS,{color:e,size:i,disabled:r,showClearButton:l,placeholder:"Search..."})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),l||a.push("showClearButton={false}"),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:dB.map(a=>ce(u,{children:[le(Li,{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(uB,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(hB,{label:cB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clear Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(xv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clear button"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"SearchField"})})]})]})}const pB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],gB=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],bB=[{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 vB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function xB({color:e,selected:a,onClick:t}){const i=pB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function yB(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("top"),[c,d]=a("Fruit"),[h,p]=a(!1),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a(!1),[w,S]=a("Search"),[k,C]=a(""),[B,T]=a("Default"),[M,A]=a("Surface"),[L,I]=a(!1),[N,W]=a(!0);return ce(u,{sx:{pb:8},children:[le(vA,{title:"Select",component:"Select"}),le(u,{sx:{mt:1},children:le(ig,{theme:B,onThemeChange:T,surface:M,onSurfaceChange:A})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Select",theme:B,surface:M})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:B,surface:M,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(eg,{variant:e,color:i,size:r,label:c,labelPosition:l,mode:L?"color":void 0,showColorLabels:L?N:void 0,options:L?bB:gB,value:k,onChange:C,showDividers:h,disabled:f,fullWidth:b,startDecoration:x?(()=>{const e=ge[w]||ge.Search;return le(Ff,{size:"small",children:le(e,{})})})():void 0})})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),c&&a.push('label="'+c+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),L&&a.push('mode="color"'),L&&!N&&a.push("showColorLabels={false}"),h&&a.push("showDividers"),f&&a.push("disabled"),b&&a.push("fullWidth"),x&&a.push("startDecoration={<Icon><"+w+"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(vB,{label:pB(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:fB.map(e=>ce(u,{children:[le(Li,{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(xB,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(vB,{label:pB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(vB,{label:"none"===e?"None":pB(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Start Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(xv,{checked:x,onChange:e=>z(e.target.checked),size:"small","aria-label":"Start icon"})]}),x&&ce(u,{sx:{mt:2},children:[le(Nx,{label:"Icon Name",value:w,onChange:e=>S(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),ce(Li,{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)"]})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Dividers"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(xv,{checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(xv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Color Mode"}),le(Li,{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(xv,{checked:L,onChange:e=>I(e.target.checked),size:"small","aria-label":"Color mode"})]}),L&&ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Color Labels"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(xv,{checked:N,onChange:e=>W(e.target.checked),size:"small","aria-label":"Show color labels"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(xv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Select"})})]})]})}const zB={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},wB={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function SB(e={}){const{selectedBg:a,selectedText:t,selectedHover:i,selectedPressed:n,muiPrefix:r}=e,o=r?"&.Mui-disabled":"&:disabled",l=r?"&.Mui-focusVisible":"&:focus-visible",s={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:zB,[o]:{...wB,color:"var(--Quiet)"}};return a?{...s,"&.Mui-selected":{backgroundColor:a,...t?{color:t}:{},"&:hover":{backgroundColor:i||"var(--Hover)"},"&:active":{backgroundColor:n||"var(--Pressed)"}}}:s}function kB({open:e,onClose:t,items:i=[],onItemClick:n,width:r=280,variant:o="temporary",header:l,footer:s,sx:c={},...d}){const[h,m]=a(null),[f,g]=a({}),b=(e,a)=>{m(a),n?.(e),"temporary"===o&&t?.()},v="permanent"===o?"permanent":"standard"===o?"standard":"temporary",y=ce(u,{sx:{display:"flex",flexDirection:"column",height:"100%",backgroundColor:"var(--Container)",color:"var(--Text)"},children:[l&&le(u,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:"string"==typeof l?le(Q,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(U,{sx:{flex:1,overflow:"auto",py:1},children:i.map((e,a)=>{const t=h===a,i=e.submenu&&e.submenu.length>0,n=f[a];return ce(u,{children:[le(x,{title:e.tooltip||"",placement:"right",children:le(Y,{disablePadding:!0,children:ce(X,{onClick:()=>{i?(e=>{g(a=>({...a,[e]:!a[e]}))})(a):b(e,a)},selected:t&&!i,sx:{backgroundColor:t&&!i?"var(--Buttons-Primary-Button)":"transparent",color:t&&!i?"var(--Buttons-Primary-Text)":"var(--Text)",...SB({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(J,{sx:{color:t&&!i?"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(Z,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!i?600:500}}),i&&le(u,{sx:{ml:1},children:le(n?fe:he,{})})]})})}),i&&le($,{in:n,timeout:"auto",unmountOnExit:!0,children:le(U,{component:"div",disablePadding:!0,children:e.submenu.map((e,a)=>le(Y,{disablePadding:!0,children:ce(X,{onClick:()=>b(e,a),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...SB({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(J,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le(Z,{primary:e.label})]})},a))})}),e.divider&&le(K,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},a)})}),s&&le(u,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof s?le(Q,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:s}):s})]});return"permanent"===o?le(u,{sx:{width:r,flexShrink:0,...c},children:y}):le(_,{variant:v,open:e,onClose:t,PaperProps:{sx:{width:r,backgroundColor:"var(--Container)",color:"var(--Text)",...c}},...d,children:y})}const CB={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 BB=!1;function TB({children:e,open:a=!1,onClose:r,variant:o="light",surface:l,color:s="info",size:c="medium",anchor:d="bottom",autoHideDuration:h,startDecorator:m,endDecorator:p,action:f,className:g="",sx:b={},...v}){const x=i(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===s?"Default":s),z=CB[c]||CB.medium,w="small"===c?xi:wi,S="default"===s?"Default":y;"production"===process.env.NODE_ENV||"solid"!==o||BB||(BB=!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&&h&&h>0)return x.current=setTimeout(()=>{r?.({},"timeout")},h),()=>clearTimeout(x.current)},[a,h,r]),t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&r?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,r]);const B=n(()=>{x.current&&clearTimeout(x.current)},[]),T=n(()=>{a&&h&&h>0&&(x.current=setTimeout(()=>{r?.({},"timeout")},h))},[a,h,r]),M="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(u,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:B,onMouseLeave:T,className:"snackbar snackbar-"+o+" snackbar-"+c+" snackbar-"+d+" snackbar-"+s+" "+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:jf,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":M,...b},...v,children:ce(u,{"data-theme":S,"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(u,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),le(u,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(w,{children:e}):e}),f&&le(u,{sx:{display:"inline-flex",flexShrink:0},children:f}),p&&le(u,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),r&&le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>r(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Ff,{size:"small",children:le(Ua,{})})})]})}):null}const MB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",AB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],LB={info:le(we,{}),success:le(Se,{}),warning:le(ke,{}),error:le(Ce,{})};function IB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function NB({color:e,selected:a,onClick:t}){const i=MB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function WB(){const[e,t]=a("light"),[i,n]=a("info"),[r,o]=a("medium"),[l,s]=a("bottom"),[c,d]=a(!0),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface"),w=c&&LB[i]?le(Ff,{size:"small",sx:{color:"inherit"},children:LB[i]}):void 0;return ce(u,{sx:{pb:8},children:[le(vA,{title:"Snackbar",component:"Snackbar"}),le(u,{sx:{mt:1},children:le(ig,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Snackbar",theme:b,surface:x})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:b,surface:x,children:le(nb,{variant:"default",onClick:()=>g(!0),children:"Show Snackbar"})}),le(nv,{code:(()=>{const a=["open={open}"];return a.push('variant="'+e+'"'),"info"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"bottom"!==l&&a.push('anchor="top"'),h&&a.push("onClose={handleClose}"),c&&LB[i]&&a.push("startDecorator={<Icon><"+MB(i)+"Icon /></Icon>}"),"<Snackbar\n "+a.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(TB,{open:f,onClose:h?()=>g(!1):void 0,variant:e,color:i,size:r,anchor:l,autoHideDuration:4e3,startDecorator:w,children:"Operation completed successfully."})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(IB,{label:MB(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:AB.map(e=>ce(u,{children:[le(Li,{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(NB,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(IB,{label:MB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(IB,{label:MB(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(xv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show icon"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Close Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(xv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Snackbar"})})]})]})}const DB={empty:{icon:le(rt,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(ot,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le(lt,{}),iconColor:"error",titleColor:"error",role:"alert"}},RB={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 FB({type:e="empty",icon:a,title:t,body:i,action:n,size:r="medium",className:l="",sx:s={},...c}){const d=DB[e]||DB.empty,h=RB[r]||RB.medium,m="small"===r?xi:wi,p=o(),f=t?p+"-title":void 0,g=i?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."),ce(u,{className:"state-message state-message-"+e+" state-message-"+r+" "+l,role:d.role||"group","aria-labelledby":f,"aria-describedby":g,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",gap:h.gap,padding:h.pad,width:"100%",boxSizing:"border-box",...s},...c,children:[le(Ff,{size:h.icon,color:d.iconColor,"aria-hidden":"true",children:a||d.icon}),t&&le(pi,{id:f,color:d.titleColor,children:t}),i&&le(m,{id:g,color:"quiet",sx:{maxWidth:h.maxWidth},children:i}),n&&le(u,{sx:{marginTop:"4px"},children:n})]})}const PB={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},HB={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:56,fontSize:"var(--Lg-Button-Numbers, 16px)",dot:"var(--Lg-No-Count-Step, 16px)",connectorThickness:"var(--Lg-Step-Bar, 4px)",gap:0}},OB=l({orientation:"horizontal",size:"medium",color:"default",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),EB=()=>s(OB);function VB({theme:a,surface:t,children:i,orientation:n="horizontal",size:r="medium",color:o="default",activeStep:l=0,clickable:s=!1,onStepClick:c,dashedIncomplete:d=!1,variant:h="count",className:m="",sx:p={},...f}){const g=e.Children.toArray(i).filter(e.isValidElement),b=g.length,v="horizontal"===n;return le(OB.Provider,{value:{orientation:n,size:r,color:o,activeStep:l,clickable:s,onStepClick:c,dashedIncomplete:d,totalSteps:b,variant:h},children:le(u,{component:"ol",role:"list","aria-label":"Progress","data-theme":a||void 0,"data-surface":t||void 0,className:"stepper stepper-"+n+" stepper-"+r+" 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 QB({children:e,icon:a,label:t,disabled:i=!1,_index:n=0,className:r="",sx:o={},...l}){const{orientation:s,size:c,color:d,activeStep:h,clickable:m,onStepClick:p,dashedIncomplete:f,totalSteps:g,variant:b}=EB(),v=m&&!i,x=HB[c]||HB.medium,y=PB[d]||"Default",z="horizontal"===s,w=n===h,S=n<h,k=n>h,C=n===g-1,B=a||n+1,T=t||e,M=k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",A=w?"var(--Buttons-"+y+"-Button)":"var(--Background)",L=w?"var(--Buttons-"+y+"-Text)":k?"var(--Quiet)":"var(--Buttons-"+y+"-Outline-Text)",I="var(--Buttons-"+y+"-Hover)",N="var(--Buttons-"+y+"-Pressed)",W="noCount"===b,D=le(u,{component:v?"button":"div",onClick:v?()=>p?.(n):void 0,onKeyDown:v?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p?.(n))}:void 0,tabIndex:v?0:void 0,role:v?"button":void 0,"aria-label":v?"Go to step "+(n+1):void 0,"aria-current":w?"step":void 0,"aria-disabled":i||void 0,className:"step-indicator step-indicator-"+c+(w?" step-indicator-active":"")+(S?" 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:(S?"2px":"var(--Button-Border-Width, 1px)")+" solid "+M,backgroundColor:A,color:L,fontSize:x.fontSize,fontFamily:"var(--Font-Family-Button, var(--Font-Family-Body, inherit))",fontWeight:"var(--Button-Font-Weight, 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:i?"not-allowed":v?"pointer":"default",outline:"none",padding:0,...i&&{opacity:"var(--Disabled, 0.38)"},..."small"===c&&{"&::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=le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,width:z&&W?x.dot:x.indicator+"px",height:z?x.indicator+"px":W?x.dot:x.indicator+"px"},children:D}),F=n<h,P=C?null:le(u,{className:"step-connector"+(F?" step-connector-completed":" step-connector-incomplete")+(f&&!F?" 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)`}:{width:x.connectorThickness,minHeight:"24px",marginLeft:`calc(${x.indicator/2}px - ${x.connectorThickness} / 2)`},backgroundColor:F?"var(--Buttons-"+y+"-Border)":"var(--Quiet)",...f&&!F&&{backgroundColor:"transparent",backgroundImage:z?"repeating-linear-gradient(90deg, var(--Quiet) 0px, var(--Quiet) 2px, transparent 2px, transparent 4px)":"repeating-linear-gradient(180deg, var(--Quiet) 0px, var(--Quiet) 4px, transparent 4px, transparent 8px)",backgroundSize:z?"4px 100%":"100% 8px"},transition:"background-color 0.15s ease"}}),H=T?le(Ri,{style:{fontWeight:w?600:400,color:w?"var(--Text)":k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",textAlign:z?"center":"left",whiteSpace:"nowrap",flexShrink:0},children:T}):null;return ce(u,z?{component:"li",className:"step step-"+c+" step-horizontal"+(w?" step-active":"")+(S?" step-completed":"")+(k?" step-incomplete":"")+" "+r,sx:{display:"flex",alignItems:"flex-start",flex:C?"none":1,...o},...l,children:[ce(u,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0,width:W?x.dot:x.indicator+"px"},children:[R,H&&le(u,{sx:{mt:"var(--Sizing-Half)",width:"100%",display:"flex",justifyContent:"center"},children:H})]}),P]}:{component:"li",className:"step step-"+c+" step-vertical"+(w?" step-active":"")+(S?" step-completed":"")+(k?" step-incomplete":"")+" "+r,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...o},...l,children:[ce(u,{sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1)"},children:[R,H]}),P]})}const jB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",qB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],GB=["Account","Details","Review","Confirm","Complete","Done"];function UB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function YB({color:e,selected:a,onClick:t}){const i=jB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function XB(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a("horizontal"),[l,s]=a("count"),[c,d]=a(4),[h,p]=a(1),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Stepper",component:"Stepper"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Stepper",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:"vertical"===r?300:"100%"},children:le(VB,{color:e,size:i,orientation:r,variant:l,activeStep:h,clickable:f,onStepClick:f?p:void 0,dashedIncomplete:b,children:GB.slice(0,c).map(e=>le(QB,{label:e},e))})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),"horizontal"!==r&&a.push('orientation="vertical"'),"count"!==l&&a.push('variant="noCount"'),a.push("activeStep={"+h+"}"),f&&a.push("clickable onStepClick={setActiveStep}"),b&&a.push("dashedIncomplete"),"<Stepper "+a.join(" ")+">\n"+GB.slice(0,c).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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{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(UB,{label:String(e),selected:c===e,onClick:()=>{d(e),h>=e&&p(e-1)}},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(m,{direction:"row",spacing:1,children:GB.slice(0,c).map((e,a)=>le(UB,{label:String(a+1),selected:h===a,onClick:()=>p(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:qB.map(a=>ce(u,{children:[le(Li,{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(YB,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(UB,{label:jB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["count","noCount"].map(e=>le(UB,{label:e,selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(UB,{label:jB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(xv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Clickable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Dashed Incomplete"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(xv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Stepper"})})]})]})}const JB={small:"var(--Small-Button-Height, 24px)",medium:"var(--Button-Height, 32px)",large:"var(--Large-Button-Height, 56px)"},ZB={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"var(--Checkbox-Icon, 14px)",height:"var(--Checkbox-Icon, 14px)",borderRadius:"50%",backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},$B={content:'""',position:"absolute",inset:"calc(-3px - var(--Button-Border-Width, 1px))",borderRadius:"var(--Button-Focus-Radius, 5px)",border:"2px solid var(--Focus-Visible)",pointerEvents:"none"};function KB({color:e,label:a,size:t="medium",fit:i="fixed",selected:n=!1,disabled:r=!1,radio:o=!1,onClick:l,className:s="",sx:c={},"aria-label":d,...h}){const m=Boolean(l)&&!r,p=Boolean(l),f=JB[t]||JB.medium,g=d||a||e,b=le(u,{className:"swatch-chip",sx:{position:"relative",width:"fill"===i?"100%":f,height:f,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",...m&&{cursor:"pointer","&:hover":{backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))"},"&:active":{backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))"}}},children:n&&!o&&p?le(u,{className:"swatch-check",sx:ZB,children:le(ue,{"aria-hidden":"true",sx:{width:"80%",height:"80%",color:"var(--Icon, var(--Text))"}})}):null});return ce(u,{component:m?"button":"div",type:m?"button":void 0,onClick:m?l:void 0,disabled:!(!m||!r)||void 0,"aria-pressed":m?n:void 0,"aria-label":g,className:`swatch ${n?"swatch-selected":""} ${s}`.trim(),sx:{position:"relative",display:"inline-flex",flexDirection:"column",alignItems:"center",gap:"var(--Sizing-Half, 4px)",width:"fill"===i?"100%":"var(--Sizing-7, 56px)",padding:0,background:"none",border:"none",font:"inherit",color:"var(--Text)",...r&&{opacity:.38,pointerEvents:"none"},"&:focus":{outline:"none"},...m&&{"&:focus-visible":{outline:"none","& .swatch-chip::before":$B}},...c},...h,children:[b,o&&p?le(Px,{checked:n,disabled:r,tabIndex:-1,"aria-hidden":"true",onChange:()=>{},sx:{pointerEvents:"none"}}):null,a?le(u,{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 _B={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},eT={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 aT({children:e,columns:a,rows:t,footerRows:i,variant:n="default",color:r="primary",loading:o=!1,skeletonRows:l=3,empty:s,error:c,size:d="medium",stripe:h="none",stickyHeader:m=!1,stickyFooter:p=!1,className:f="",sx:g={},...b}){const v=eT[d]||eT.medium,x="solid"===n,y="outlined"===n,z="light"===n,w=(e=>e.charAt(0).toUpperCase()+e.slice(1))(r),S=y?"1px solid var(--Buttons-"+w+"-Border)":"none",k={};x&&_B[r]&&(k["data-theme"]=_B[r]);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-"+w+"-Button)",e.color="var(--Buttons-"+w+"-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-"+w+"-Button)",e.color="var(--Buttons-"+w+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},T=e=>"none"===h?"Surface":"odd"===h?e%2==0?"Surface":"Surface-Dim":"even"===h&&e%2==0?"Surface-Dim":"Surface",M=()=>({padding:v.py+" "+v.px,fontSize:v.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),A=c?"error":o?"loading":t&&0===t.length&&s?"empty":null,L=Boolean(i&&i.length>0)&&"error"!==A,I=e=>le(u,{component:"tbody",children:le(u,{component:"tr",children:le(u,{component:"td",colSpan:a?a.length:1,sx:{padding:0,border:"none"},children:e})})});return le(u,{className:"table-wrapper table-"+n+(x||z||y?" table-"+r:"")+" "+f,...k,"aria-busy":"loading"===A?"true":void 0,sx:{width:"100%",overflow:"auto",border:S,borderRadius:y||z?"var(--Style-Border-Radius)":0,...g},children:le(u,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed",fontFamily:"inherit","& thead th":C(),"& tbody td":M(),"& 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)?ce(se,{children:[le(u,{component:"thead",children:le(u,{component:"tr",children:a.map((e,a)=>le(u,{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(Lt,{label:"Loading",children:le(u,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:le(u,{component:"tbody",children:Array.from({length:l}).map((e,t)=>le(u,{component:"tr","data-surface":T(t),children:a.map((e,a)=>le(u,{component:"td",sx:M(),children:"        "},"skc-"+t+"-"+a))},"sk-"+t))})})})),"error"===A&&I(c),"empty"===A&&I(s),!A&&t&&le(u,{component:"tbody",children:t.map((e,t)=>le(u,{component:"tr","data-surface":T(t),sx:{backgroundColor:"var(--"+T(t)+")"},children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,i)=>le(u,{component:"td",sx:{...M(),...a[i]&&a[i].align?{textAlign:a[i].align}:{}},children:e},"c-"+t+"-"+i))},"r-"+t))}),L&&le(u,{component:"tfoot",children:i.map((e,t)=>le(u,{component:"tr",children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,i)=>le(u,{component:"td",sx:{...B(),...a[i]&&a[i].align?{textAlign:a[i].align}:{},..."loading"===A?At():{}},children:e},"fc-"+t+"-"+i))},"f-"+t))})]}):null:e})})}function tT({label:e,value:t="",onChange:i,placeholder:n,error:r=!1,errorMessage:o="",disabled:l=!1,helperText:s="",variant:c="outlined",size:d="medium",type:h="text",required:m=!1,fullWidth:p=!0,startAdornment:f,endAdornment:g,sx:b={},"aria-label":v,"aria-labelledby":x,onFocus:y,onBlur:w,...S}){const[k,T]=a(!1),M=r?"var(--Buttons-Error-Border)":k?"var(--Buttons-Primary-Border)":"var(--Border)",A=r||k?"var(--Text)":"var(--Text-Quiet)",L="var(--Text)";return ce(u,{sx:{width:p?"100%":"auto"},children:[le(z,{label:e,value:t,onChange:i,placeholder:n,disabled:l,variant:c,size:d,type:h,required:m,onFocus:e=>{T(!0),y?.(e)},onBlur:e=>{T(!1),w?.(e)},error:r,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:M,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:r?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:r?"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:r?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...b},...S}),r&&o&&le(B,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:o})]})}function iT({label:e="Email",...a}){return le(tT,{label:e,type:"email",placeholder:"user@example.com",...a})}function nT({label:e="Password",...a}){return le(tT,{label:e,type:"password",...a})}function rT({label:e="Search",placeholder:a="Type to search...",...t}){return le(tT,{label:e,type:"search",placeholder:a,...t})}function oT({label:e="Number",...a}){return le(tT,{label:e,type:"number",...a})}function lT({label:e="Phone",placeholder:a="(555) 123-4567",...t}){return le(tT,{label:e,type:"tel",placeholder:a,...t})}function sT({label:e="Website",placeholder:a="https://example.com",...t}){return le(tT,{label:e,type:"url",placeholder:a,...t})}function cT({error:e=!1,errorMessage:a="",rows:t=4,fullWidth:i=!0,...n}){return le(Nx,{multiline:!0,rows:t,fullWidth:i,...e&&{validation:"error",validationMessage:a},...n})}function dT({fields:e=[],spacing:a=2,sx:t={},...i}){return le(u,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${a})`,width:"100%",...t},...i,children:e.map(e=>le(tT,{...e},e.id))})}const hT=Object.fromEntries(["Default","Primary","Secondary","Tertiary","Neutral"].map(e=>[e.toLowerCase(),{theme:e}])),uT={"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function mT({items:e=[],value:t,defaultValue:i,onChange:r,type:o="floating",orientation:l="horizontal",color:s="default",surface:c,fab:d,className:h="",sx:m={},...p}){const[f,g]=a(i??null),b=void 0!==t,v=b?t:f,x=n(e=>{const a=v===e?null:e;b||g(a),r?.(a)},[b,v,r]),y=hT[s]||uT[s]||hT.default,z=y.theme,w=c||y.surface,S="vertical"===l,k="floating"===o,C=le(u,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":z,"data-surface":w||"Surface",className:"toolbar toolbar-"+o+" toolbar-"+l+" toolbar-"+s+" "+h,sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:"4px",width:"fit-content",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:k?"56px":"var(--Style-Border-Radius)",padding:k?S?"16px 8px":"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...k&&{boxShadow:Qf},...m},...p,children:e.map((e,a)=>{const t=v===a;return le(nb,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>x(a),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Ff,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||a)})});return d&&k?ce(u,{sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:1},children:[C,le(hx,{color:d.color||s,size:d.size||"medium",onClick:d.onClick,"aria-label":d.label||"Action",children:d.icon})]}):C}const pT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",fT=[{icon:le(st,{}),label:"Bold"},{icon:le(ct,{}),label:"Italic"},{icon:le(dt,{}),label:"Underline"},{icon:le(ht,{}),label:"Align left"},{icon:le(ut,{}),label:"Align center"}];function gT({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function bT(){const[e,t]=a("floating"),[i,n]=a("default"),[r,o]=a("horizontal"),[l,s]=a(!1),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(vA,{title:"Toolbar",component:"Toolbar"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"Toolbar",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{theme:c,surface:h,sx:{minHeight:200},children:le(mT,{items:fT,type:e,color:i,orientation:r,fab:l&&"floating"===e?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0})}),le(nv,{code:(()=>{const a=["items={items}"];return"floating"!==e&&a.push('type="contextual"'),"default"!==i&&a.push('color="'+i+'"'),"horizontal"!==r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(m,{direction:"row",spacing:1,children:["floating","contextual"].map(a=>le(gT,{label:pT(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(gT,{label:pT(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(gT,{label:pT(e),selected:r===e,onClick:()=>o(e)},e))})]}),"floating"===e&&ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"FAB Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(xv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"FAB button"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(pA,{component:"Toolbar"})})]})]})}const vT=Xf,xT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},yT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},zT={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 wT({children:e,title:a,variant:t="solid",color:i="black-white",size:n="medium",placement:r="bottom",arrow:o=!0,open:l,enterDelay:s=100,leaveDelay:c=0,describeChild:d=!1,className:h="",sx:m={},...p}){const f=zT[n]||zT.medium,g="solid"===t,b="light"===t,v="outline"===t,y=vT(i),z=(e=>String(e).startsWith("left")||String(e).startsWith("right"))(r),w="var(--Buttons-"+y+"-Button)",S=w,k=void 0===l?{}:{open:l};return le(x,{title:a?le(u,{"data-theme":(g?xT[i]:b?yT[i]:null)||void 0,"data-surface":b?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+i+" tooltip-"+n+" "+h,sx:{backgroundColor:w,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:r,arrow:o,enterDelay:s,leaveDelay:c,describeChild:d,...k,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:S,width:z?f.arrowVisible:f.arrowW,height:z?f.arrowW:f.arrowVisible,"&::before":{border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",backgroundColor:S,boxSizing:"border-box",width:"100%",height:"100%"}}}},...p,children:e})}const ST={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}},kT={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 CT({label:e,icon:a,level:t=0,toggle:i="none",onToggle:n,disabled:r=!1,size:o="small",className:l="",sx:s={},children:c,...d}){const h=6===t&&"none"!==i?"none":i,m="on"===h,p="none"!==h,f=p?ST[t]||{padLeft:0,togglePadLeft:0}:kT[t]||kT[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return ce(u,{className:"tree-branch tree-branch-"+o+" tree-branch-level-"+t+" tree-branch-toggle-"+h+(r?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...s},...d,children:[ce(u,{component:"button",type:"button",role:"treeitem","aria-expanded":p?m:void 0,"aria-disabled":r||void 0,tabIndex:r?-1:0,onClick:e=>{r||p&&(e.stopPropagation(),n?.(m?"off":"on"))},disabled:r,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:r?"not-allowed":"pointer",opacity:r?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":r?{}:{backgroundColor:"var(--Hover)"},"&:active":r?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[p&&le(u,{className:"tree-branch-toggle",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,paddingLeft:(f.togglePadLeft??0)+"px"},children:le(u,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s ease",transform:m?"rotate(-90deg)":"rotate(0deg)"},children:le(Ff,{size:"small",children:le(Ea,{})})})}),ce(u,{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(u,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Ff,{size:"small",children:a})}),null!=e&&le(yi,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),m&&c&&le(u,{role:"group",sx:{display:"flex",flexDirection:"column"},children:c})]})}const BT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",TT=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],MT=e=>le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),AT=[{id:"1",label:"Documents",icon:le(_a,{}),badge:MT("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(mt,{}),badge:MT("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(ft,{})},{id:"1-1-2",label:"Meeting notes",icon:le(pt,{})},{id:"1-1-3",label:"Tasks list",icon:le(pt,{})},{id:"1-1-4",label:"Equipment",icon:le(ft,{})},{id:"1-1-5",label:"Video conference",icon:le(gt,{})}]},{id:"1-2",label:"Personal",icon:le(_a,{})},{id:"1-3",label:"Group photo",icon:le(nt,{})}]},{id:"2",label:"Bookmarked",icon:le($a,{}),children:[{id:"2-1",label:"Favourites",icon:le(pt,{})}]},{id:"3",label:"History",icon:le(_a,{})},{id:"4",label:"Trash",icon:le(Ae,{}),disabled:!0}],LT=JSON.stringify(Qk,null,2);function IT({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function NT({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(IT,{ratio:a,threshold:t})]})}function WT({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function DT({color:e,selected:a,onClick:t}){const i=BT(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function RT({value:e,onChange:t}){const[i,n]=a(e),[r,o]=a(null);return ce(u,{children:[ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(Oi,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(nb,{variant:"ghost",size:"small",onClick:()=>{n(LT),o(null),t(Qk)},children:"Reset"})]}),le(u,{component:"textarea",value:i,onChange:e=>{n(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:r?"#f87171":"#e5e7eb",border:"1px solid "+(r?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),r&&ce(Li,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",r]})]})}function FT(){const[e,r]=a("solid"),[o,l]=a("primary"),[s,c]=a("default"),[d,h]=a("slide"),[p,f]=a("single"),[g,b]=a(!1),[v,x]=a(!1),[z,w]=a(!1),[S,k]=a(Qk),[C,B]=a("Default"),[T,M]=a("Surface"),[A,L]=a({}),I=i(null),N=BT(o),W=z?AT:S,D=n((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 ce(u,{sx:{pb:8},children:[le(vA,{title:"Tree View",component:"TreeView"}),le(u,{sx:{mt:1},children:le(ig,{theme:C,onThemeChange:B,surface:T,onSurfaceChange:M})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(mA,{component:"TreeView",theme:C,surface:T})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(zv,{ref:I,theme:C,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(Vk,{color:o,variant:e,density:s,animation:d,selectionMode:p,checkboxSelection:g,disableSelection:v,items:W,defaultExpandedItems:["1","1-1","2"]})})}),le(nv,{code:(()=>{const a=["<OmniTreeView"];return"default"!==o&&a.push(' color="'+o+'"'),"default"!==e&&a.push(' variant="'+e+'"'),"default"!==s&&a.push(' density="'+s+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ce(m,{direction:"row",spacing:1,children:[le(WT,{label:"Solid",selected:"solid"===e,onClick:()=>r("solid")}),le(WT,{label:"Light",selected:"light"===e,onClick:()=>r("light")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:TT.map(e=>ce(u,{children:[le(Li,{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(DT,{color:e,selected:o===e,onClick:l},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),ce(m,{direction:"row",spacing:1,children:[le(WT,{label:"Compact",selected:"compact"===s,onClick:()=>c("compact")}),le(WT,{label:"Default",selected:"default"===s,onClick:()=>c("default")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(m,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(WT,{label:BT(e),selected:d===e,onClick:()=>h(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),ce(m,{direction:"row",spacing:1,children:[le(WT,{label:"Single",selected:"single"===p,onClick:()=>f("single")}),le(WT,{label:"Multi",selected:"multi"===p,onClick:()=>f("multi")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icons"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(xv,{checked:z,onChange:e=>w(e.target.checked),size:"small","aria-label":"Show icons"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Checkbox Selection"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(xv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disable Selection"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(xv,{checked:v,onChange:e=>x(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!z&&le(u,{sx:{mt:3},children:le(RT,{value:LT,onChange:k})})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(NT,{label:"Resting: var(--Text-Quiet) vs. background",ratio:tn(A.textQuiet,A.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(NT,{label:"Hover: var(--Text) vs. background",ratio:tn(A.text,A.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(NT,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+N+"-Button)",ratio:tn(A.text,A.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(NT,{label:"var(--Focus-Visible) vs. background",ratio:tn(A.focusVisible,A.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})]})})]}),le(Lb,{value:3,children:le(pA,{component:"TreeView"})})]})]})}const PT=["outlined","light","ghost"];let HT=!1;function OT(e){HT||"production"===process.env.NODE_ENV||(HT=!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 ET({variant:e,color:a,exclusive:t,multiple:i,onChange:n,allowEmpty:r=!1,separated:o=!1,...l}){const s=void 0===e||PT.includes(e);s||OT(`variant="${e}" names a COLOR.`),void 0!==t&&OT("`exclusive` is `multiple` inverted.");return le(Nw,{__selectionOwner:!0,variant:s&&e||"outlined",color:void 0!==a?a:s?void 0:e,multiple:void 0!==i?i:void 0!==t&&!t,allowEmpty:r,separated:o,onChange:n?!s||void 0!==t?(e,a)=>n(a,e):n:void 0,...l})}const VT=e=>{const a=a=>le(ET,{color:e,...a});return a.displayName=`${e}ToggleButtonGroup`,a},QT=VT("default"),jT=VT("primary"),qT=VT("secondary"),GT=VT("tertiary"),UT=VT("neutral"),YT=VT("black-white"),XT=VT("info"),JT=VT("success"),ZT=VT("warning"),$T=VT("error"),KT={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 _T({children:e,selected:a=!1,onChange:t,value:i,sx:n={},...r}){return le(ee,{value:i,selected:a,onChange:t,sx:{border:"1px solid var(--Border)",...KT,...n},...r,children:e})}const eM=new Set;function aM({children:e,surface:a="Surface",variant:t,color:i="default",elevated:n=!1,component:r="div",className:o="",sx:l={},...s}){const c=(d="default"===i?"Default":i).charAt(0).toUpperCase()+d.slice(1);var d;const h="default"===i?"Default":c;!function(e){void 0!==e&&("production"===process.env.NODE_ENV||eM.has(e)||(eM.add(e),console.warn('[Sheet] variant="'+e+'" — Sheet has no variants. Set `surface` directly: light was surface="Surface-Brightest", dark was surface="Surface-Dimmest", solid was the default surface="Surface".')))}(t);return le(u,{component:r,className:"sheet sheet-"+i+(n?" sheet-elevated":"")+(o?" "+o:""),sx:{border:"1px solid var(--Border-Variant)",borderRadius:"var(--Style-Border-Radius)",boxShadow:n?jf:Qf,overflow:"hidden",transition:"box-shadow 0.2s ease","&:hover":{boxShadow:n?qf:jf},...l},...s,children:le(u,{"data-theme":h,"data-surface":a,sx:{backgroundColor:"var(--Background)",color:"var(--Text)",padding:"var(--Card-Padding)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)",fontFamily:"inherit"},children:e})})}function tM(e,a){return e.filter(e=>!a.includes(e))}function iM(e,a){return e.filter(e=>a.includes(e))}function nM({theme:e,surface:t,leftItems:i,rightItems:r,defaultLeftItems:o=[],defaultRightItems:l=[],onChange:s,leftTitle:c="Available",rightTitle:d="Chosen",mode:h="basic",disabled:m=!1,className:p="",sx:f={},...g}){const b=void 0!==i&&void 0!==r,[v,x]=a(o),[y,z]=a(l),[w,S]=a([]),k=b?i:v,C=b?r:y,B=iM(w,k),T=iM(w,C),M="enhanced"===h,A=n((e,a)=>{b||(x(e),z(a)),s?.({left:e,right:a})},[b,s]),L=e=>{m||S(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},I=(e,a,t)=>{const i=a.length>0&&a.every(e=>w.includes(e)),n=a.some(e=>w.includes(e))&&!i,r=M?t.length+"/"+a.length:a.length+" items";return le(u,{sx:{flex:1,minWidth:0},children:le(u,{sx:{borderRadius:"var(--Card-Radius)",boxShadow:"none"},children:ce(u,{"data-surface":"Container",sx:{backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Card-Radius)",overflow:"hidden",display:"flex",flexDirection:"column",gap:0,opacity:m?"var(--Disabled, 0.38)":1},children:[ce(u,{sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",gap:1,boxSizing:"border-box",minHeight:"40px",padding:"12px 16px"},children:[M&&le(Gv,{size:"small",variant:"default-outline",checked:i,indeterminate:n,onChange:()=>(e=>{if(m)return;const a=e.every(e=>w.includes(e));S(a?a=>tM(a,e):a=>[...new Set([...a,...e])])})(a),disabled:m||0===a.length,"aria-label":i?"Deselect all":"Select all"}),le(xi,{style:{flex:1,fontWeight:700,color:"var(--Text)"},children:e}),le(Li,{style:{color:"var(--Quiet)"},children:r})]}),le(Sx,{orientation:"horizontal",color:"default",size:"small"}),ce(u,{component:"ul",role:"list",sx:{m:0,listStyle:"none",padding:"12px 16px",display:"flex",flexDirection:"column",gap:"16px",overflowY:"auto",maxHeight:240},children:[a.map(e=>{const a=w.includes(e);return ce(u,{component:"li",role:"listitem",onClick:()=>L(e),sx:{display:"flex",alignItems:"center",gap:1,cursor:m?"not-allowed":"pointer"},children:[le(Gv,{size:"small",variant:"default-outline",checked:a,onChange:()=>L(e),disabled:m,"aria-label":"Select "+e,sx:{pointerEvents:"none"}}),le(xi,{style:{color:"var(--Text)",flex:1},children:e})]},e)}),0===a.length&&le(u,{component:"li",sx:{p:2,textAlign:"center"},children:le(Li,{style:{color:"var(--Quiet)"},children:"No items"})})]})]})})})};return ce(u,{className:"transfer-list transfer-list-"+h+(m?" transfer-list-disabled":"")+(p?" "+p:""),"data-theme":e||void 0,"data-surface":t||void 0,role:"group","aria-label":"Transfer list",sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"center",gap:"4px",fontFamily:"inherit",...f},...g,children:[I(c,k,B),ce(u,{sx:{display:"flex",flexDirection:"column",gap:"8px",padding:"8px",flexShrink:0,alignSelf:"center"},children:[M&&le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([],[...C,...k]),S([])},disabled:m||0===k.length,"aria-label":"Move all right",children:le(Ff,{size:"small",children:le(xt,{})})}),le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A(tM(k,B),[...C,...B]),S(tM(w,B))},disabled:m||0===B.length,"aria-label":"Move selected right",children:le(Ff,{size:"small",children:le(Ea,{})})}),le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([...k,...T],tM(C,T)),S(tM(w,T))},disabled:m||0===T.length,"aria-label":"Move selected left",children:le(Ff,{size:"small",children:le(Oa,{})})}),M&&le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([...k,...C],[]),S([])},disabled:m||0===C.length,"aria-label":"Move all left",children:le(Ff,{size:"small",children:le(yt,{})})})]}),I(d,C,T)]})}const rM=[{icon:le(Me,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Te,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}],oM=[{label:"Home"},{label:"Inbox"},{label:"Projects"},{label:"Settings"}],lM=[{label:"Dessert",field:"name",width:"50%"},{label:"Calories",field:"calories",align:"right"},{label:"Fat (g)",field:"fat",align:"right"}],sM=[{name:"Frozen yoghurt",calories:159,fat:6},{name:"Ice cream sandwich",calories:237,fat:9},{name:"Eclair",calories:262,fat:16}],cM=[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"system",label:"System"}],dM=[{icon:le(st,{}),label:"Bold"},{icon:le(ct,{}),label:"Italic"},{icon:le(dt,{}),label:"Underline"}],hM=[{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"}],uM=({w:e=320,h:a,pad:t=0,children:i})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden",padding:t?`0 ${t}px`:void 0,boxSizing:"border-box"},children:i}),mM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open modal"}),le(FC,{open:e,onClose:()=>t(!1),title:"Rename project",children:ce(uz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"Modals take the whole screen's attention, so they owe the reader a way out."}),le(nb,{onClick:()=>t(!1),children:"Done"})]})})]})},pM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open dialog"}),le(Lk,{open:e,onClose:()=>t(!1),title:"Discard changes?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:()=>t(!1),children:"Keep editing"}),le(nb,{variant:"error",onClick:()=>t(!1),children:"Discard"})]}),children:le(wi,{children:"This cannot be undone."})})]})},fM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open drawer"}),le(TS,{open:e,onClose:()=>t(!1),children:ce(uz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(oC,{items:oM,clickable:!0}),le(nb,{onClick:()=>t(!1),children:"Close"})]})})]})},gM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Show snackbar"}),le(TB,{open:e,onClose:()=>t(!1),color:"success",autoHideDuration:4e3,children:"Project saved."})]})},bM=()=>{const[e,t]=a(!1),n=i(null);return ce(se,{children:[le(nb,{ref:n,onClick:()=>t(e=>!e),children:"Open popover"}),le(HC,{open:e,onClose:()=>t(!1),anchorRef:n,width:260,children:le(uz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(wi,{children:"A panel anchored to the thing that opened it, rendered through a portal so no ancestor can clip it."})})})]})};function vM(){const[e,t]=a("left"),[i,n]=a("day");return ce(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"joined — one control, shared edges"}),ce(ET,{value:e,onChange:t,"aria-label":"Alignment",children:[le(nb,{value:"left",children:"Left"}),le(nb,{value:"center",children:"Center"}),le(nb,{value:"right",children:"Right"})]})]}),ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"separated — the same choice, gapped"}),ce(ET,{value:i,onChange:n,separated:!0,"aria-label":"View",children:[le(nb,{value:"day",children:"Day"}),le(nb,{value:"week",children:"Week"}),le(nb,{value:"month",children:"Month"})]})]})]})}function xM(){return ce(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"ButtonGroup — three things you can do"}),ce(Nw,{"aria-label":"Actions",children:[le(nb,{onClick:()=>{},children:"Save"}),le(nb,{onClick:()=>{},children:"Duplicate"}),le(nb,{onClick:()=>{},children:"Delete"})]})]}),ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"ToggleButtonGroup — one answer, and never none"}),le(vM,{})]})]})}function yM(){const[e,t]=a(!1),[i,n]=a(42);return le(ZC,{title:"Weather Report",subtitle:"The Mercury Lamps",avatarInitials:"ML",playing:e,onPlayPause:t,position:i,onSeek:n,duration:195,onPrevious:()=>n(0),onNext:()=>n(0)})}function zM(){const[e,t]=a(!0);return le(_T,{selected:e,onChange:()=>t(!e),"aria-label":"Bold",children:le(st,{})})}const wM={ToggleButton:()=>le(zM,{}),Player:()=>le(yM,{}),ButtonGroup:()=>le(xM,{}),ToggleButtonGroup:()=>le(vM,{}),AppBar:()=>le(uM,{w:"100%",children:le(RS,{navLinks:[{label:"Work"},{label:"Studio"},{label:"Contact"}]})}),Autocomplete:()=>le(uM,{children:le(YS,{label:"Theme",options:["Light","Dark","System","High contrast"],placeholder:"Type to search"})}),BottomNavigation:()=>le(uM,{w:360,children:le(sk,{items:rM.slice(0,4),defaultValue:0})}),CodeBlock:()=>le(uM,{w:"100%",children:le(nv,{code:"npm install @omni-design/components",language:"bash"})}),Dialog:()=>le(pM,{}),Drawer:()=>le(fM,{}),DropZone:()=>le(uM,{w:360,children:le(Zk,{label:"Drop a file here",sublabel:"PNG or SVG, up to 2 MB"})}),IconBadge:()=>le(eC,{color:"primary",children:le(ye,{})}),List:()=>le(uM,{children:le(oC,{items:oM,clickable:!0})}),Loader:()=>le(sC,{message:"Loading projects…"}),Menu:()=>ce(zC,{children:[le(wC,{children:"Actions"}),ce(SC,{children:[le(kC,{children:"Rename"}),le(kC,{children:"Duplicate"}),le(CC,{}),le(kC,{disabled:!0,children:"Delete"})]})]}),Modal:()=>le(mM,{}),Paper:()=>le(PC,{surface:"Container",children:ce(uz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-3)",minWidth:220},children:[le(si,{children:"Paper"}),le(wi,{children:"A surface at one container level, with the elevation that level implies."})]})}),Popover:()=>le(bM,{}),Sheet:()=>le(uM,{w:320,children:le(aM,{surface:"Surface-Bright",elevated:!0,sx:{padding:"var(--Sizing-3)"},children:ce(uz,{gap:"var(--Sizing-1)",children:[le(pi,{color:"standard",children:"Export settings"}),le(xi,{color:"quiet",children:"A panel that carries its own surface, for content that should read as sitting above the page rather than on it."})]})})}),TransferList:()=>le(nM,{leftTitle:"Available",rightTitle:"Chosen",defaultLeftItems:["Colors","Typography","Spacing"],defaultRightItems:["Elevation"]}),Rail:()=>le(uM,{w:88,h:320,children:le(jC,{items:rM,defaultValue:0})}),Ratio:()=>le(uM,{w:240,children:le(aB,{ratio:"16:9"})}),SearchField:()=>le(uM,{children:le(rS,{placeholder:"Search projects…"})}),Select:()=>le(uM,{children:le(eg,{label:"Appearance",options:cM,defaultValue:"system"})}),Sidebar:()=>le(uM,{w:280,h:320,children:le(kB,{variant:"permanent",open:!0,items:oM,width:280})}),Snackbar:()=>le(gM,{}),StateMessage:()=>le(uM,{w:360,children:le(FB,{type:"empty",title:"No projects yet",body:"Create one to get started.",action:le(nb,{size:"small",children:"New project"})})}),Stepper:()=>le(uM,{w:440,pad:48,children:ce(VB,{activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})}),Swatch:()=>le(KB,{color:"#70947b",label:"Primary"}),Table:()=>le(uM,{w:"100%",children:le(aT,{columns:lM,rows:sM})}),Tag:()=>le(Ly,{color:"primary",children:"Beta"}),TextField:()=>le(uM,{children:le(tT,{label:"Project name",placeholder:"Untitled"})}),Toolbar:()=>le(mT,{items:dM,defaultValue:0}),Tooltip:()=>le(wT,{title:"Rename this project",children:le(nb,{variant:"outline",children:"Hover me"})}),TreeView:()=>le(uM,{children:le(Vk,{items:hM,defaultExpandedItems:["src","components"]})})},SM="npm install @omni-design/components",kM={Typography:{textStyle:()=>le(uz,{gap:"var(--Sizing-1)",style:{alignItems:"flex-start"},children:[["h2","A heading"],["subtitle","A subtitle"],["body","Body copy"],["caption","A caption"]].map(([e,a])=>le($w,{label:e,emphasis:"body"===e,children:le(Kt,{textStyle:e,children:a})},e))}),color:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:["standard","quiet","primary","success","error"].map(e=>le($w,{label:e,emphasis:"standard"===e,children:le(wi,{color:e,children:"Body"})},e))}),noWrap:()=>le(uz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le($w,{label:String(e),emphasis:!e,children:le("div",{style:{width:180},children:le(wi,{noWrap:e,children:"A line long enough to need wrapping or an ellipsis."})})},String(e)))}),altMode:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:["default","colored","gradient"].map(e=>le($w,{label:e,emphasis:"default"===e,children:le(Kt,{textStyle:"alt-display-small",altMode:e,children:"Alt"})},e))}),width:()=>le(uz,{gap:"var(--Sizing-2)",children:["hug","fill"].map(e=>le($w,{label:e,emphasis:"hug"===e,children:le(Rz,{surface:"Container",style:{width:240},children:le(wi,{width:e,children:"Text"})})},e))}),gutterBottom:()=>le(uz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le($w,{label:String(e),emphasis:!e,children:ce("div",{children:[le(wi,{gutterBottom:e,children:"First line."}),le(wi,{children:"Second line."})]})},String(e)))})},ToggleButton:{selected:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"false",emphasis:!0,children:le(_T,{"aria-label":"Bold",children:le(st,{})})}),le($w,{label:"true",children:le(_T,{selected:!0,"aria-label":"Bold",children:le(st,{})})})]})},CircularProgress:{size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(Zz,{size:e,value:68})}),showValue:()=>le(eS,{offLabel:"false",onLabel:"true",render:e=>le(Zz,{value:68,showValue:e})})},LinearProgress:{size:()=>le(uz,{gap:"var(--Sizing-2)",children:["small","medium","large"].map(e=>le($w,{label:e,emphasis:"medium"===e,children:le("div",{style:{width:280},children:le(Qz,{size:e,value:68})})},e))})},Player:{size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le("div",{style:{width:420},children:le(ZC,{size:e,title:"Weather Report",subtitle:"The Mercury Lamps",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),"playing / defaultPlaying":()=>ce(uz,{gap:"var(--Sizing-2)",children:[le($w,{label:"paused",emphasis:!0,children:le("div",{style:{width:420},children:le(ZC,{title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),le($w,{label:"playing",children:le("div",{style:{width:420},children:le(ZC,{playing:!0,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})})]}),showTime:()=>le(eS,{offLabel:"true",onLabel:"false",render:e=>le("div",{style:{width:420},children:le(ZC,{showTime:!e,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),disabled:()=>le(eS,{render:e=>le("div",{style:{width:420},children:le(ZC,{disabled:e,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})})},Button:{selected:()=>le(eS,{offLabel:"unselected",onLabel:"selected",render:e=>le(nb,{variant:"outline",selected:e,children:"Bold"})}),avatar:()=>le(eS,{offLabel:"text button",onLabel:"avatar",render:e=>le(nb,e?{avatar:!0,"aria-label":"Jane Doe",children:le(Lg,{})}:{children:"Jane Doe"})}),letterNumber:()=>le(eS,{offLabel:"text button",onLabel:"letterNumber",render:e=>le(nb,e?{letterNumber:!0,"aria-label":"3 unread",children:"3"}:{children:"3 unread"})})},Chip:{variant:()=>le(Kw,{values:Jw,defaultValue:"primary",render:e=>le(fb,{variant:e,label:"Label"})}),selected:()=>le(eS,{render:e=>le(fb,{label:"Design",selected:e,clickable:!0}),offLabel:"unselected",onLabel:"selected"}),clickable:()=>le(eS,{render:e=>le(fb,{label:"Design",clickable:e}),offLabel:"static",onLabel:"clickable"}),disabled:()=>le(eS,{render:e=>le(fb,{label:"Design",clickable:!0,disabled:e}),offLabel:"enabled",onLabel:"disabled"})},Badge:{variant:()=>le(Kw,{values:Jw,defaultValue:"primary",render:e=>le(Og,{variant:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})})}),dot:()=>le(eS,{render:e=>le(Og,{dot:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})}),offLabel:"count",onLabel:"dot"}),showZero:()=>le(eS,{render:e=>le(Og,{showZero:e,badgeContent:0,children:le(Ff,{children:le(xe,{})})}),offLabel:"0 hidden",onLabel:"0 shown"}),invisible:()=>le(eS,{render:e=>le(Og,{invisible:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})}),offLabel:"visible",onLabel:"invisible"}),overlap:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"rectangular",emphasis:!0,children:le(Og,{badgeContent:4,overlap:"rectangular",children:le(Lg,{initials:"JD"})})}),le($w,{label:"circular",children:le(Og,{badgeContent:4,overlap:"circular",children:le(Lg,{initials:"JD"})})})]})},Alert:{color:()=>le(_w,{values:["info","success","warning","error"],defaultValue:"info",render:e=>ce(mv,{color:e,children:[e," — something worth saying."]})}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>ce(mv,{color:"info",size:e,children:["Size ",e,"."]})})},Avatar:{defaultPhoto:()=>le(eS,{render:e=>le(Lg,{defaultPhoto:e}),offLabel:"no photo",onLabel:"default photo"}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(Lg,{size:e,initials:"JD"})}),clickable:()=>le(eS,{render:e=>le(Lg,{initials:"JD",clickable:e,"aria-label":e?"Jane Doe, open menu":void 0}),offLabel:"static",onLabel:"clickable"})},Icon:{color:()=>le(Kw,{values:["default",...Jw,"quiet"],defaultValue:"default",render:e=>le(Ff,{color:e,children:le(Te,{})})}),size:()=>le(Kw,{values:["xxs","xs","small","medium","large","xl","xxl"],defaultValue:"medium",render:e=>le(Ff,{size:e,color:"primary",children:le(Te,{})})}),twoTone:()=>le(eS,{render:e=>le(Ff,{color:"primary",twoTone:e,size:"large",children:le(Te,{})}),offLabel:"solid",onLabel:"twoTone"}),disabled:()=>le(eS,{render:e=>le(Ff,{color:"primary",disabled:e,children:le(Te,{})}),offLabel:"enabled",onLabel:"disabled"})},Swatch:{fit:()=>ce(uz,{gap:"var(--Sizing-3)",children:[le($w,{label:"fixed",emphasis:!0,width:300,children:le(hz,{gap:"var(--Sizing-1)",children:["#505b45","#8a9a7b","#c9d4bd"].map(e=>le(KB,{color:e},e))})}),le($w,{label:"fill",width:300,children:le(hz,{gap:"var(--Sizing-1)",style:{width:300},children:["#505b45","#8a9a7b","#c9d4bd"].map(e=>le("div",{style:{flex:1},children:le(KB,{color:e,fit:"fill"})},e))})})]}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(KB,{color:"#70947b",size:e})}),selected:()=>le(eS,{render:e=>le(KB,{color:"#70947b",label:"Primary",selected:e}),offLabel:"unselected",onLabel:"selected"}),disabled:()=>le(eS,{render:e=>le(KB,{color:"#70947b",label:"Primary",disabled:e}),offLabel:"enabled",onLabel:"disabled"}),radio:()=>le(eS,{render:e=>le(KB,{color:"#70947b",label:"Primary",radio:e,selected:!0}),offLabel:"chip carries it",onLabel:"radio carries it"})},Tag:{color:()=>le(Kw,{values:["default",...Jw],defaultValue:"primary",render:e=>le(Ly,{color:e,children:e})}),width:()=>ce(uz,{gap:"var(--Sizing-2)",style:{width:200},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"hug"}),le(Ly,{color:"primary",children:"Beta"})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"fill"}),le(Ly,{color:"primary",width:"fill",children:"Beta"})]})]}),allCaps:()=>le(eS,{render:e=>le(Ly,{color:"primary",allCaps:e,children:"Beta"}),offLabel:"as written",onLabel:"allCaps"})},IconBadge:{color:()=>le(Kw,{values:["default",...Jw],defaultValue:"primary",render:e=>le(eC,{color:e,children:le(xe,{})})}),size:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(eC,{color:"primary",children:le(xe,{})}),le(wi,{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(eS,{render:e=>le(mn,{href:"#",disabled:e,children:"Read the guide"}),offLabel:"enabled",onLabel:"disabled"})},Divider:{color:()=>le(_w,{values:["border","border-variant",...Jw],defaultValue:"border-variant",render:e=>le(Sx,{color:e})}),orientation:()=>ce(hz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[le($w,{label:"horizontal",emphasis:!0,width:160,children:le("div",{style:{width:160},children:le(Sx,{})})}),le($w,{label:"vertical",width:60,children:le("div",{style:{height:60,display:"flex"},children:le(Sx,{orientation:"vertical",style:{alignSelf:"stretch"}})})})]}),size:()=>le(_w,{values:Zw,defaultValue:"small",render:e=>le(Sx,{size:e,color:"primary"})}),indicatorStyle:()=>le(_w,{values:["outline","solid"],defaultValue:"outline",render:e=>le(Sx,{indicatorText:"OR",indicatorStyle:e,color:"primary"})}),textAlign:()=>le(_w,{values:["left","center","right"],defaultValue:"center",render:e=>le(Sx,{indicatorText:"OR",textAlign:e})})},Loader:{color:()=>le(Kw,{values:["default",...Jw],defaultValue:"primary",render:e=>le(sC,{color:e,size:"small",message:""})}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(sC,{size:e,message:""})})},StateMessage:{type:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:360},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"empty"}),le(FB,{type:"empty",title:"No projects yet",body:"Create one to get started."})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"error"}),le(FB,{type:"error",title:"Could not load",body:"Check your connection and try again."})]}),le(wi,{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(_w,{values:Zw,defaultValue:"medium",render:e=>le(FB,{type:"empty",size:e,title:"No projects yet",body:"Create one to get started."})})},Fab:{variant:()=>le(Kw,{values:["solid","outline","ghost"],defaultValue:"solid",render:e=>le(hx,{variant:e,icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, "+e})})},Rating:{color:()=>le(Kw,{values:["default",...Jw],defaultValue:"default",render:e=>le(cw,{color:e,defaultValue:3,readOnly:!0})}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(cw,{size:e,defaultValue:3,readOnly:!0})}),readOnly:()=>le(eS,{render:e=>le(cw,{defaultValue:3,readOnly:e}),offLabel:"interactive",onLabel:"readOnly"})},CodeBlock:{showCopy:()=>le(_w,{values:[!0,!1],defaultValue:!0,render:e=>le(nv,{code:SM,language:"bash",showCopy:e})}),showHeader:()=>le(_w,{values:[!0,!1],defaultValue:!0,render:e=>le(nv,{code:SM,language:"bash",showHeader:e})}),wrap:()=>le(_w,{values:[!1,!0],defaultValue:!1,render:e=>le(nv,{language:"bash",wrap:e,code:"npx @omni-design/cli generate --theme primary --surface Surface-Bright --out ./tokens"})})}},CM=220,BM=(e,a=CM)=>le("div",{style:{width:a},children:e}),TM=["default",...Jw,"black-white"],MM=["default",...Jw],AM={Checkbox:{variant:()=>le(Kw,{values:TM,defaultValue:"primary",render:e=>le(Gv,{variant:e,defaultChecked:!0})}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(Gv,{size:e,defaultChecked:!0})}),"checked / defaultChecked":()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"unchecked",emphasis:!0,children:le(Gv,{label:"Unchecked"})}),le($w,{label:"checked",children:le(Gv,{defaultChecked:!0,label:"Checked"})})]}),indeterminate:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"false",emphasis:!0,children:le(Gv,{defaultChecked:!0,label:"All"})}),le($w,{label:"indeterminate",children:le(Gv,{indeterminate:!0,label:"Some"})})]}),disabled:()=>le(eS,{render:e=>le(Gv,{defaultChecked:!0,disabled:e,label:"Email me"}),offLabel:"enabled",onLabel:"disabled"})},Radio:{color:()=>le(Kw,{values:TM,defaultValue:"primary",render:e=>le(Px,{color:e,checked:!0,name:"c-"+e})}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(Px,{size:e,checked:!0,name:"s-"+e})}),labelPlacement:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["end","start","top","bottom"].map(e=>le($w,{label:e,emphasis:"end"===e,children:le(Px,{checked:!0,labelPlacement:e,label:"Option",name:"p-"+e})},e))}),checked:()=>ce(Hx,{defaultValue:"b",name:"demo",children:[le(Px,{value:"a",label:"Light"}),le(Px,{value:"b",label:"Dark"}),le(Px,{value:"c",label:"System"})]}),disabled:()=>le(eS,{render:e=>le(Px,{checked:!0,disabled:e,label:"Dark",name:"d-"+e}),offLabel:"enabled",onLabel:"disabled"})},NumberField:{variant:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"outlined",emphasis:!0,children:le(nz,{label:"Quantity",defaultValue:2,min:1,max:10})}),le($w,{label:"spinner",children:le(nz,{variant:"spinner",label:"Quantity",defaultValue:2,min:1,max:10})})]}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(nz,{size:e,label:"Quantity",defaultValue:2,min:1,max:10})}),labelPosition:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"top",emphasis:!0,children:le(nz,{label:"Quantity",defaultValue:2})}),le($w,{label:"floating",children:le(nz,{labelPosition:"floating",label:"Quantity",defaultValue:2})})]}),fullWidth:()=>le(eS,{render:e=>le("div",{style:{width:320},children:le(nz,{fullWidth:e,label:"Quantity",defaultValue:2})})}),disabled:()=>le(eS,{render:e=>le(nz,{disabled:e,label:"Quantity",defaultValue:2,min:1,max:10})})},RadioGroup:{orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"vertical",emphasis:!0,children:le(Hx,{label:"Delivery",name:"o-v",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"},{value:"pick",label:"Collect in store"}]})}),le($w,{label:"horizontal",children:le(Hx,{label:"Delivery",name:"o-h",orientation:"horizontal",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"}]})})]}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(Hx,{size:e,name:"s-"+e,defaultValue:"a",options:[{value:"a",label:"One"},{value:"b",label:"Two"}]})}),labelPlacement:()=>le(Kw,{values:["end","start","top","bottom"],defaultValue:"end",render:e=>le(Hx,{labelPlacement:e,name:"lp-"+e,defaultValue:"a",orientation:"top"===e||"bottom"===e?"horizontal":"vertical",options:[{value:"a",label:"One"},{value:"b",label:"Two"}]})}),disabled:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"the whole group",emphasis:!0,children:le(Hx,{label:"Delivery",name:"d-all",defaultValue:"std",disabled:!0,options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"}]})}),le($w,{label:"one option",children:le(Hx,{label:"Delivery",name:"d-one",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"},{value:"pick",label:"Collect in store",disabled:!0}]})})]})},SwitchInput:{variant:()=>le(Kw,{values:MM,defaultValue:"default",render:e=>le(yv,{variant:e,defaultChecked:!0})}),size:()=>le(Kw,{values:Zw,defaultValue:"medium",render:e=>le(yv,{size:e,defaultChecked:!0})}),"checked / defaultChecked":()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"off",emphasis:!0,children:le(yv,{label:"Notifications"})}),le($w,{label:"on",children:le(yv,{defaultChecked:!0,label:"Notifications"})})]}),icon:()=>ce(uz,{gap:"var(--Sizing-2)",children:[le(Kw,{values:["default","primary","secondary","tertiary"],defaultValue:"default",render:e=>le(yv,{variant:e,defaultChecked:!0,iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"off",children:le(yv,{label:"Sync",iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),le($w,{label:"on",emphasis:!0,children:le(yv,{defaultChecked:!0,label:"Sync",iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),le($w,{label:"same glyph both ways",children:le(yv,{defaultChecked:!0,label:"Sync",icon:le(ue,{fontSize:"inherit"})})})]})]}),labelPlacement:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le($w,{label:"end",emphasis:!0,children:le(yv,{defaultChecked:!0,label:"Auto-save"})}),le($w,{label:"start",children:le(yv,{defaultChecked:!0,labelPlacement:"start",label:"Auto-save"})})]}),disabled:()=>le(eS,{render:e=>le(yv,{defaultChecked:!0,disabled:e,label:"Auto-save"}),offLabel:"enabled",onLabel:"disabled"})},Input:{variant:()=>le(_w,{values:Jw.map(e=>e+"-outline"),defaultValue:"primary-outline",render:e=>BM(le(Nx,{variant:e,label:"Name",placeholder:"Value"}))}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>BM(le(Nx,{size:e,label:"Name",placeholder:"Value"}))}),labelPosition:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"standard",emphasis:!0,width:CM,children:BM(le(Nx,{label:"Project name",placeholder:"Untitled"}))}),le($w,{label:"floating",width:CM,children:BM(le(Nx,{labelPosition:"floating",label:"Project name"}))})]}),validation:()=>le(_w,{values:["none","error"],defaultValue:"none",render:e=>BM(le(Nx,{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(eS,{width:CM,offLabel:"enabled",onLabel:"disabled",render:e=>BM(le(Nx,{disabled:e,label:"Project name",defaultValue:"Untitled"}))})},TextField:{error:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false",emphasis:!0,width:CM,children:BM(le(tT,{label:"Email",value:"jane@example.com"}))}),le($w,{label:"true",width:CM,children:BM(le(tT,{label:"Email",value:"not-an-email",error:!0,errorMessage:"Enter a valid email address."}))})]}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>BM(le(tT,{size:e,label:"Name",placeholder:"Value"}))})},SearchField:{color:()=>le(_w,{values:MM,defaultValue:"default",render:e=>BM(le(rS,{color:e,defaultValue:"dinosaur"}))}),showClearButton:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"true",emphasis:!0,width:CM,children:BM(le(rS,{defaultValue:"dinosaur"}))}),le($w,{label:"false",width:CM,children:BM(le(rS,{defaultValue:"dinosaur",showClearButton:!1}))})]}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>BM(le(rS,{size:e,placeholder:"Search — "+e}))})},Select:{labelPosition:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"top",emphasis:!0,width:CM,children:BM(le(eg,{label:"Appearance",options:cM,defaultValue:"system"}))}),le($w,{label:"floating",width:CM,children:BM(le(eg,{labelPosition:"floating",label:"Appearance",options:cM,defaultValue:"system"}))})]}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>BM(le(eg,{size:e,label:"Option",options:cM,defaultValue:"system"}))}),mode:()=>le(_w,{values:["standard","multiselect","searchable"],defaultValue:"standard",render:e=>BM(le(eg,{mode:e,label:"Option",options:cM,defaultValue:"multiselect"===e?["system"]:"system"}))})},Autocomplete:{labelPosition:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"top",emphasis:!0,width:CM,children:BM(le(YS,{label:"Theme",options:["Light","Dark","System"]}))}),le($w,{label:"floating",width:CM,children:BM(le(YS,{labelPosition:"floating",label:"Theme",options:["Light","Dark","System"]}))})]}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>BM(le(YS,{size:e,label:"Option",options:["Light","Dark","System"]}))})},DropZone:{multiple:()=>ce(uz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one file"}),le(Zk,{label:"Drop a file here",sublabel:"PNG or SVG"})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — several"}),le(Zk,{multiple:!0,label:"Drop files here",sublabel:"PNG or SVG"})]})]}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>le(Zk,{size:e,label:"Drop a file — "+e})}),disabled:()=>ce(uz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(Zk,{label:"Drop a file here"})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled"}),le(Zk,{disabled:!0,label:"Drop a file here"})]})]})},Avatar:{color:()=>le(Kw,{values:["default","primary","secondary","tertiary","neutral"],defaultValue:"default",render:e=>le(Lg,{color:e,initials:"JD"})})}},LM=({w:e=320,h:a,pad:t=0,children:i})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden",padding:t?`0 ${t}px`:void 0,boxSizing:"border-box"},children:i}),IM=(e={})=>ce(hw,{...e,children:[le(uw,{href:"/",children:"Home"}),le(uw,{href:"/projects",children:"Projects"}),le(uw,{href:"/projects/omni",children:"Omni"}),le(uw,{children:"Tokens"})]}),NM=(e={})=>ce(Tb,{defaultValue:0,...e,children:[ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"})]}),le(Lb,{value:0,children:le(wi,{children:"The first panel."})}),le(Lb,{value:1,children:le(wi,{children:"The second panel."})}),le(Lb,{value:2,children:le(wi,{children:"The third panel."})})]}),WM={Tabs:{orientation:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"horizontal"}),le(LM,{w:320,children:NM()})]}),ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"vertical-left",width:260,children:le(LM,{w:260,children:NM({orientation:"vertical-left"})})}),le($w,{label:"vertical-right",width:260,children:le(LM,{w:260,children:NM({orientation:"vertical-right"})})})]})]}),baseline:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true"}),le(LM,{w:320,children:NM()})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false"}),le(LM,{w:320,children:NM({baseline:!1})})]})]}),variant:()=>le(uz,{gap:"var(--Sizing-3)",children:["standard","solid","light","dark"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard"===e?"standard":"quiet",children:e}),le(LM,{w:320,children:NM({variant:e})})]},e))}),size:()=>le(uz,{gap:"var(--Sizing-3)",children:Zw.map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(LM,{w:320,children:NM({size:e})})]},e))}),scrollable:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — the strip wraps or clips"}),le(LM,{w:200,children:le(Tb,{defaultValue:0,children:ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"}),le(Ab,{value:3,children:"Settings"})]})})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the strip scrolls"}),le(LM,{w:200,children:le(Tb,{defaultValue:0,scrollable:!0,children:ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"}),le(Ab,{value:3,children:"Settings"})]})})})]})]})},Breadcrumbs:{size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>IM({size:e})}),condense:()=>ce(uz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),IM()]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the middle collapses behind an ellipsis"}),IM({condense:!0,maxItems:3})]})]}),backOnlyMobile:()=>ce(uz,{gap:"var(--Sizing-2)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"wide — the full trail, either way"}),le(LM,{w:360,children:IM({backOnlyMobile:!0})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"narrow — collapses to a single back link"}),le(LM,{w:180,children:IM({backOnlyMobile:!0})})]})]})},Pagination:{color:()=>le(uz,{gap:"var(--Sizing-3)",children:["default",...Jw,"black-white"].map(e=>le($w,{label:e,emphasis:"default"===e,width:360,children:le(bw,{count:6,defaultPage:3,color:e})},e))}),size:()=>le(_w,{values:Zw,defaultValue:"medium",render:e=>le(bw,{count:8,defaultPage:3,size:e})}),"showFirstButton / showLastButton":()=>ce(uz,{gap:"var(--Sizing-2)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),le(bw,{count:20,defaultPage:9})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — first and last"}),le(bw,{count:20,defaultPage:9,showFirstButton:!0,showLastButton:!0})]})]})},Stepper:{variant:()=>ce(uz,{gap:"var(--Sizing-3)",children:[le($w,{label:"count",emphasis:!0,width:300,children:le(LM,{w:300,pad:24,children:ce(VB,{activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})}),le($w,{label:"noCount",width:300,children:le(LM,{w:300,pad:24,children:ce(VB,{variant:"noCount",activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})})]}),orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"horizontal",emphasis:!0,width:300,children:le(LM,{w:300,pad:24,children:ce(VB,{activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})}),le($w,{label:"vertical",width:160,children:ce(VB,{orientation:"vertical",activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]}),size:()=>le(uz,{gap:"var(--Sizing-3)",children:Zw.map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(LM,{w:320,pad:24,children:ce(VB,{size:e,activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]},e))}),color:()=>ce(uz,{gap:"var(--Sizing-3)",children:[le($w,{label:"default",emphasis:!0,width:320,children:le(LM,{w:320,pad:24,children:ce(VB,{activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})}),Jw.map(e=>le($w,{label:e,width:320,children:le(LM,{w:320,pad:24,children:ce(VB,{color:e,activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})},e))]}),clickable:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — display only"}),le(LM,{w:320,pad:24,children:ce(VB,{activeStep:2,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — completed steps go back"}),le(LM,{w:320,pad:24,children:ce(VB,{activeStep:2,clickable:!0,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]})]}),dashedIncomplete:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one solid connector"}),le(LM,{w:320,pad:24,children:ce(VB,{activeStep:1,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — remaining steps dashed"}),le(LM,{w:320,pad:24,children:ce(VB,{activeStep:1,dashedIncomplete:!0,children:[le(QB,{label:"Colors"}),le(QB,{label:"Type"}),le(QB,{label:"Export"})]})})]})]})},List:{orientation:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"vertical"}),le(LM,{w:240,children:le(oC,{items:oM})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"horizontal"}),le(LM,{w:360,children:le(oC,{items:oM,orientation:"horizontal"})})]})]}),dividers:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false",emphasis:!0,width:200,children:le(LM,{w:200,children:le(oC,{items:oM})})}),le($w,{label:"true",width:200,children:le(LM,{w:200,children:le(oC,{items:oM,dividers:!0})})})]}),clickable:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false — static",emphasis:!0,width:200,children:le(LM,{w:200,children:le(oC,{items:oM})})}),le($w,{label:"true — rows are buttons",width:200,children:le(LM,{w:200,children:le(oC,{items:oM,clickable:!0})})})]}),selectionMode:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le($w,{label:e,emphasis:"none"===e,width:190,children:le(LM,{w:190,children:le(oC,{items:oM,selectionMode:e,selectedIndices:"none"===e?[]:[1]})})},e))}),loading:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false",emphasis:!0,width:200,children:le(LM,{w:200,children:le(oC,{items:oM})})}),le($w,{label:"true",width:200,children:le(LM,{w:200,children:le(oC,{loading:!0,skeletonRows:4})})})]})},TreeView:{selectionMode:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le($w,{label:e,emphasis:"none"===e,width:190,children:le(LM,{w:190,children:le(Vk,{items:hM,selectionMode:e,defaultExpandedItems:["src"]})})},e))})},AppBar:{mode:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"desktop"}),le(LM,{w:"100%",children:le(RS,{navLinks:[{label:"Work"},{label:"Studio"}]})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"mobile"}),le(LM,{w:360,children:le(RS,{mode:"mobile",navLinks:[{label:"Work"},{label:"Studio"}]})})]})]}),brandType:()=>le(uz,{gap:"var(--Sizing-3)",children:["name","logo","both"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"name"===e?"standard":"quiet",children:e}),le(LM,{w:"100%",children:le(RS,{brandType:e,navLinks:[{label:"Work"}]})})]},e))}),menuType:()=>le(uz,{gap:"var(--Sizing-3)",children:["hamburger","none"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"hamburger"===e?"standard":"quiet",children:e}),le(LM,{w:360,children:le(RS,{mode:"mobile",menuType:e,navLinks:[{label:"Work"}]})})]},e))})},Rail:{variant:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["default","primary","secondary","tertiary"].map(e=>le($w,{label:e,emphasis:"default"===e,width:88,children:le(LM,{w:88,h:260,children:le(jC,{items:rM.slice(0,4),variant:e,defaultValue:0})})},e))}),expandable:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false",emphasis:!0,width:88,children:le(LM,{w:88,h:260,children:le(jC,{items:rM.slice(0,4),defaultValue:0})})}),le($w,{label:"true — gains a toggle",width:88,children:le(LM,{w:88,h:260,children:le(jC,{items:rM.slice(0,4),expandable:!0,defaultValue:0})})})]}),expandedWidth:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"partial",emphasis:!0,width:240,children:le(LM,{w:240,h:260,children:le(jC,{items:rM.slice(0,4),expandable:!0,defaultExpanded:!0,defaultValue:0})})}),le($w,{label:"full",width:300,children:le(LM,{w:300,h:260,children:le(jC,{items:rM.slice(0,4),expandable:!0,defaultExpanded:!0,expandedWidth:"full",defaultValue:0})})})]}),labelStyle:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"contained",emphasis:!0,width:88,children:le(LM,{w:88,h:260,children:le(jC,{items:rM.slice(0,4),defaultValue:0})})}),le($w,{label:"outside",width:88,children:le(LM,{w:88,h:260,children:le(jC,{items:rM.slice(0,4),labelStyle:"outside",defaultValue:0})})})]})},BottomNavigation:{showLabels:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true"}),le(LM,{w:360,children:le(sk,{items:rM.slice(0,4),defaultValue:0})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false — icons only, so each needs a name"}),le(LM,{w:360,children:le(sk,{items:rM.slice(0,4),showLabels:!1,defaultValue:0})})]})]}),variant:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"fixed — edge to edge"}),le(LM,{w:360,children:le(sk,{items:rM.slice(0,4),defaultValue:0})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"floating — inset, with its own elevation"}),le(LM,{w:360,children:le(sk,{items:rM.slice(0,4),variant:"floating",defaultValue:0})})]})]})},Sidebar:{variant:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"permanent",width:240,children:le(LM,{w:240,h:260,children:le(kB,{variant:"permanent",open:!0,items:oM,width:240})})}),le($w,{label:"temporary — an overlay, shown open",emphasis:!0,width:240,children:le(LM,{w:240,h:260,children:le(kB,{variant:"permanent",open:!0,items:oM,width:240})})})]})},Toolbar:{type:()=>ce(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"standard",children:"floating — its own surface and elevation"}),le(mT,{items:dM,defaultValue:0})]}),ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"docked — sits flush in the layout"}),le(mT,{items:dM,type:"docked",defaultValue:0})]})]}),color:()=>le(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:["default","primary","secondary","tertiary","neutral"].map(e=>le($w,{label:e,emphasis:"default"===e,children:le(mT,{items:dM,color:e,defaultValue:0})},e))}),surface:()=>le(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:["Surface","Surface-Dim","Surface-Dimmest","Surface-Bright","Surface-Brightest"].map(e=>le($w,{label:e,emphasis:"Surface"===e,children:le(mT,{items:dM,surface:e,defaultValue:0})},e))}),orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"horizontal",emphasis:!0,children:le(mT,{items:dM,defaultValue:0})}),le($w,{label:"vertical",children:le(mT,{items:dM,orientation:"vertical",defaultValue:0})})]})},Menu:{size:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Zw.map(e=>le($w,{label:e,emphasis:"medium"===e,children:ce(zC,{children:[le(wC,{children:e}),ce(SC,{size:e,children:[le(kC,{children:"Rename"}),le(kC,{children:"Duplicate"})]})]})},e))})}},DM=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),RM=ce(uz,{gap:"var(--Sizing-1)",children:[le(si,{children:"Card title"}),le(wi,{children:"What a card looks like in this design system."})]});function FM({values:e,defaultValue:t,render:i,label:n=e=>String(e)}){const[r,o]=a(null),l=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return ce(se,{children:[le(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:l.map(e=>le(nb,{size:"small",variant:e===t?"default":"outline",onClick:()=>o(e),children:n(e)},String(e)))}),null!==r?i(r,()=>o(null)):null]})}function PM(){const[e,t]=a(!1),n=i(null);return ce(se,{children:[ce(nb,{ref:n,variant:"outline",onClick:()=>t(e=>!e),children:[e?"Close":"Open"," popover"]}),le(HC,{open:e,onClose:()=>t(!1),anchorRef:n,width:240,children:le(uz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(wi,{children:"Anchored to the button, portalled to the body so no ancestor can clip it."})})})]})}const HM=[{icon:le(Aa,{}),name:"New document",onClick:()=>{}},{icon:le(We,{}),name:"Invite someone",onClick:()=>{}},{icon:le(Le,{}),name:"Settings",onClick:()=>{}}],OM=360;function EM({labels:e=["Save","Cancel","Delete"],variant:a="default",...t}){return le(Nw,{"aria-label":"Actions",...t,children:e.map(e=>le(nb,{variant:a,onClick:()=>{},children:e},e))})}function VM(e){return ce(Nw,{"aria-label":"Alignment",...e,children:[le(nb,{iconOnly:!0,"aria-label":"Align left",onClick:()=>{},children:le(Ff,{children:le(ht,{})})}),le(nb,{iconOnly:!0,"aria-label":"Align center",onClick:()=>{},children:le(Ff,{children:le(ut,{})})}),le(nb,{iconOnly:!0,"aria-label":"Align right",onClick:()=>{},children:le(Ff,{children:le(bt,{})})})]})}function QM({options:e=["Left","Center","Right"],initial:t="Left",...i}){const[n,r]=a(t);return le(ET,{value:n,onChange:r,"aria-label":"Align",...i,children:e.map(e=>le(nb,{value:e,children:e},e))})}function jM({allowEmpty:e,...t}){const[i,n]=a(["Left"]);return ce(ET,{multiple:!0,allowEmpty:e,value:i,onChange:n,"aria-label":"Align",...t,children:[le(nb,{value:"Left",children:"Left"}),le(nb,{value:"Center",children:"Center"}),le(nb,{value:"Right",children:"Right"})]})}function qM(){const[a,t]=e.useState("left");return ce(ET,{value:a,onChange:t,"aria-label":"Alignment",children:[le(nb,{value:"left",children:"Left"}),le(nb,{value:"center",children:"Center"}),le(nb,{value:"right",disabled:!0,children:"Right"})]})}function GM(){const[e,t]=a(!0),[i,n]=a(!1);return ce(hz,{gap:"var(--Sizing-1)",style:{alignItems:"center"},children:[le(fb,{label:"Unselected"}),le(fb,{label:"Selected",clickable:!0,selected:e,onClick:()=>t(e=>!e)}),i?le(Li,{color:"quiet",children:"dismissed"}):le(fb,{label:"Dismissible",onDelete:()=>n(!0)})]})}const UM={...wM,Button:()=>le(nb,{children:"Button"}),BrandIcon:()=>le(hz,{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(hx,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),Chip:()=>le(GM,{}),Badge:()=>ce(hz,{gap:"var(--Sizing-3)",children:[le(Og,{badgeContent:3,children:le(Ff,{children:le("span",{children:"✉"})})}),le(Og,{dot:!0,children:le(Ff,{children:le("span",{children:"🔔"})})})]}),Alert:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(mv,{color:"info",children:"Something worth knowing."}),le(mv,{color:"error",children:"Something went wrong."})]}),Card:()=>le(Iv,{padding:"medium",children:ce(uz,{gap:"var(--Sizing-1)",children:[le(si,{children:"Card title"}),le(wi,{children:"What a card looks like in this design system."})]})}),Avatar:()=>ce(hz,{gap:"var(--Sizing-1)",children:[le(Lg,{initials:"LN"}),le(Lg,{})]}),Icon:()=>ce(hz,{gap:"var(--Sizing-1)",children:[le(Ff,{color:"primary",children:le("span",{children:"★"})}),le(Ff,{color:"success",children:le("span",{children:"✓"})}),le(Ff,{color:"error",children:le("span",{children:"✕"})})]}),Link:()=>le(mn,{href:"#example",children:"A link, which thickens rather than recolors on hover"}),Divider:()=>le(Sx,{indicatorText:"OR"}),Checkbox:()=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Gv,{label:"Unchecked"}),le(Gv,{label:"Checked",defaultChecked:!0}),le(Gv,{label:"Indeterminate",indeterminate:!0})]}),Radio:()=>le(Hx,{name:"docs-radio",defaultValue:"a",options:[{value:"a",label:"First"},{value:"b",label:"Second"}]}),Input:()=>le(Nx,{label:"Email",placeholder:"you@example.com"}),SwitchInput:()=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(yv,{label:"Off"}),le(yv,{label:"On",defaultChecked:!0})]}),Slider:()=>le(Qx,{defaultValue:40}),Box:()=>ce(Rz,{surface:"Container",radius:"medium",elevation:2,style:{padding:"var(--Sizing-3)",width:280},children:[le(wi,{children:"Container, medium radius, elevation 2."}),le(Li,{color:"quiet",children:"Nothing here names a color."})]}),Copyright:()=>le(tz,{companyName:"Acme"}),Grid:()=>le(Ty,{container:!0,spacing:1,children:[1,2,3,4].map(e=>le(Ty,{item:!0,xs:6,children:le(Rz,{surface:"Container",radius:"small",style:{padding:"var(--Sizing-1)"},children:le(wi,{children:"Cell "+e})})},e))}),MiniSwatch:()=>ce(hz,{gap:"var(--Sizing-1)",children:[le(By,{color:"var(--Primary-Color-6)"}),le(wi,{children:"Primary"})]}),Gradient:()=>le(zy,{minHeight:120,style:{width:280},children:le(Rz,{style:{padding:"var(--Sizing-2)"},children:le(si,{children:"On brand color"})})}),BevelText:()=>le(hy,{text:"Bevel",textStyle:"display-small"}),CurvedText:()=>le(_x,{text:"CURVED AROUND",arc:180,radius:60}),Typography:()=>ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(li,{children:"A heading"}),le(pi,{color:"standard",children:"A subtitle, which is Body at 700"}),le(wi,{children:"Body copy, the style everything else is measured against."}),le(Li,{color:"quiet",children:"A caption, quiet by default."})]}),Section:()=>ce("div",{style:{width:300},children:[ce(Gy,{surface:"Surface",padding:"var(--Sizing-2)",children:[le(wi,{children:"Surface"}),le(Li,{color:"quiet",children:"Text and border arrive with it."})]}),ce(Gy,{surface:"Container",padding:"var(--Sizing-2)",children:[le(wi,{children:"Container"}),le(Li,{color:"quiet",children:"Same markup, one level down."})]})]}),Stack:()=>ce(uz,{gap:"var(--Sizing-2)",children:[ce(hz,{gap:"var(--Sizing-1)",children:[le(Ly,{children:"row"}),le(Ly,{children:"with"}),le(Ly,{children:"a gap"})]}),ce(uz,{gap:"var(--Sizing-1)",children:[le(Ly,{children:"column"}),le(Ly,{children:"with the same gap"})]})]}),Container:()=>le(qy,{maxWidth:"sm",children:le(wi,{children:"Capped and centred, with gutters that keep text off the edge."})}),Footer:()=>le(Sz,{brand:"Acme",columns:[{title:"Product",links:[{label:"Overview",href:"#"},{label:"Pricing",href:"#"}]},{title:"Company",links:[{label:"About",href:"#"},{label:"Careers",href:"#"}]}],copyright:"Acme"}),SpeedDial:()=>le("div",{style:{height:220,position:"relative",width:180},children:le(Xy,{open:!0,showTooltips:!0,ariaLabel:"Create",actions:[{icon:le(Aa,{}),name:"New document",onClick:()=>{}},{icon:le(We,{}),name:"Invite someone",onClick:()=>{}},{icon:le(Le,{}),name:"Settings",onClick:()=>{}}]})}),CircularProgress:()=>le(Zz,{value:68,showValue:!0}),LinearProgress:()=>le("div",{style:{width:280},children:le(Qz,{value:68})}),NumberField:()=>le(nz,{label:"Quantity",defaultValue:2,min:1,max:10}),RadioGroup:()=>le(Hx,{label:"Delivery",name:"lead",defaultValue:"std",options:[{value:"std",label:"Standard — 3 to 5 days"},{value:"exp",label:"Express — next day"},{value:"pick",label:"Collect in store"}]}),Rating:()=>le(cw,{defaultValue:3}),Breadcrumbs:()=>ce(hw,{children:[le(mn,{href:"#a",children:"Home"}),le(mn,{href:"#b",children:"Products"}),le(wi,{children:"Current"})]}),Pagination:()=>le(bw,{count:8,defaultPage:3}),Accordion:()=>le(Hw,{children:le(wi,{children:"An accordion segment, open."})}),Tabs:()=>ce(Tb,{defaultValue:0,children:[ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"})]}),le(Lb,{value:0,children:le(wi,{children:"The first panel."})}),le(Lb,{value:1,children:le(wi,{children:"The second panel."})})]})};function YM(e){return e in UM}const XM={Fab:{size:()=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(hx,{size:"small",icon:le(Ff,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, small"}),le(hx,{size:"medium",icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, medium"}),le(hx,{size:"large",icon:le(Ff,{size:"large",children:le(Aa,{})}),ariaLabel:"Add, large"})]}),color:()=>{const e=(e,a)=>ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"center"},children:[le(hx,{color:e,size:"small",icon:le(Ff,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, "+e}),le(Li,{color:a?"standard":"quiet",children:e})]},e);return ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[e("default",!0),le(Sx,{orientation:"vertical",style:{alignSelf:"stretch"}}),["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"].map(a=>e(a,!1))]})},extended:()=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(hx,{icon:le(Ff,{size:"medium",children:le(La,{})}),ariaLabel:"Edit"}),le(hx,{icon:le(Ff,{size:"medium",children:le(La,{})}),extended:!0,label:"Edit"})]}),animate:()=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(hx,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(hx,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),animate:!0,ariaLabel:"Add, animated"})]}),disabled:()=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(hx,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(hx,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),disabled:!0,ariaLabel:"Add, disabled"})]})},Button:{variant:()=>ce(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap"},children:[le(nb,{children:"solid"}),le(nb,{variant:"outline",children:"outline"}),le(nb,{variant:"ghost",children:"ghost"})]}),size:()=>ce(hz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(nb,{size:"small",children:"small"}),le(nb,{size:"medium",children:"medium"}),le(nb,{size:"large",children:"large"})]}),variantColor:()=>{const e=["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],a=a=>ce(hz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(nb,{variant:a?"default"+a:"default",size:"small",children:"default"}),le(Sx,{orientation:"vertical",style:{alignSelf:"stretch"}}),e.map(e=>le(nb,{variant:a?e+a:e,size:"small",children:e},e))]});return ce(uz,{gap:"var(--Sizing-2)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"solid"}),a("")]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"outline"}),a("-outline")]})]})},disabled:()=>ce(hz,{gap:"var(--Sizing-1)",children:[le(nb,{children:"enabled"}),le(nb,{disabled:!0,children:"disabled"})]}),"startDecorator / endDecorator":()=>ce(uz,{gap:"var(--Sizing-1)",children:[ce(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{startDecorator:le(Ff,{children:le(Aa,{})}),children:"start icon"}),le(nb,{endDecorator:le(Ff,{children:le(Ia,{})}),children:"end icon"})]}),ce(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{startDecorator:le(Lg,{}),children:"start avatar"}),le(nb,{endDecorator:le(Lg,{}),children:"end avatar"})]})]}),iconOnly:()=>ce(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{children:"text"}),le(nb,{iconOnly:!0,"aria-label":"Delete item",children:le(Ae,{})}),le(nb,{letterNumber:!0,"aria-label":"3 unread",children:"3"}),le(nb,{avatar:!0,"aria-label":"Jane Doe",children:le(Lg,{})})]}),elevated:()=>ce(hz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{children:"standard"}),le(nb,{elevated:!0,children:"raised"})]}),fullWidth:()=>ce(uz,{gap:"var(--Sizing-1)",style:{width:"100%",maxWidth:320},children:[le(nb,{children:"default fit"}),le(nb,{fullWidth:!0,children:"full width"})]})}};const JM=[{Slider:iS},kM,AM,WM,{Container:{disableGutters:()=>le(uz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le($w,{label:e?"true":"false",emphasis:!e,children:le(Rz,{surface:"Container",style:{width:320},children:le(qy,{maxWidth:!1,disableGutters:e,children:le(wi,{children:"Text against the edge, or not."})})})},String(e)))})},Stack:{direction:()=>ce(hz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:"column",emphasis:!0,children:ce(uz,{gap:"var(--Sizing-1)",children:[le(Ly,{children:"one"}),le(Ly,{children:"two"}),le(Ly,{children:"three"})]})}),le($w,{label:"row",children:ce(hz,{gap:"var(--Sizing-1)",children:[le(Ly,{children:"one"}),le(Ly,{children:"two"}),le(Ly,{children:"three"})]})})]}),enforceMinGap:()=>ce(hz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:"true",emphasis:!0,children:ce(uz,{gap:"var(--Sizing-Half)",children:[le(Ri,{children:"Display name"}),le(Li,{color:"quiet",children:"Shown beside your comments."})]})}),le($w,{label:"false",children:ce(uz,{gap:"var(--Sizing-Half)",enforceMinGap:!1,children:[le(Ri,{children:"Display name"}),le(Li,{color:"quiet",children:"Shown beside your comments."})]})})]})},Box:{radius:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:["none","small","medium","large"].map(e=>le($w,{label:e,emphasis:"none"===e,children:le(Rz,{surface:"Container",radius:e,style:{width:96,height:64}})},e))})},SpeedDial:{direction:()=>le(hz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[["up","flex-end","center"],["down","flex-start","center"],["left","center","flex-end"],["right","center","flex-start"]].map(([e,a,t])=>le($w,{label:e,emphasis:"up"===e,children:le("div",{style:{height:260,width:260,position:"relative",display:"flex",alignItems:a,justifyContent:t,overflow:"hidden"},children:le(Xy,{open:!0,direction:e,ariaLabel:"Create "+e,actions:HM})})},e))}),size:()=>le(hz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap",alignItems:"flex-end"},children:["small","medium","large"].map(e=>le($w,{label:e,emphasis:"medium"===e,children:le(Xy,{size:e,ariaLabel:"Create "+e,actions:HM})},e))}),openOnHover:()=>ce(hz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[le($w,{label:"true — hover this one",emphasis:!0,children:le("div",{style:{height:240,width:140,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Xy,{ariaLabel:"Create by hover",actions:HM})})}),le($w,{label:"false — this one needs a click",children:le("div",{style:{height:240,width:140,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Xy,{openOnHover:!1,ariaLabel:"Create by click",actions:HM})})})]}),showTooltips:()=>le(hz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[!1,!0].map(e=>le($w,{label:String(e),emphasis:!e,children:le("div",{style:{height:260,width:220,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Xy,{open:!0,showTooltips:e,ariaLabel:"Create "+e,actions:HM})})},String(e)))})},Card:{variant:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["solid","outlined","ghost"].map(e=>le($w,{label:e,emphasis:"solid"===e,width:200,children:le(Iv,{variant:e,padding:"medium",children:RM})},e))}),size:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:Zw.map(e=>le($w,{label:e,emphasis:"medium"===e,width:200,children:le(Iv,{size:e,padding:"medium",children:RM})},e))}),orientation:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"vertical"}),le(DM,{w:200,children:le(Iv,{padding:"medium",children:RM})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"horizontal"}),le(DM,{w:360,children:le(Iv,{orientation:"horizontal",padding:"medium",children:RM})})]})]}),clickable:()=>ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false — static",emphasis:!0,width:200,children:le(Iv,{padding:"medium",children:RM})}),le($w,{label:"true — one control",width:200,children:le(Iv,{padding:"medium",clickable:!0,children:RM})})]}),elevated:()=>ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"standard — level 1",emphasis:!0,width:200,children:le(Iv,{padding:"medium",children:RM})}),le($w,{label:"elevated — level 2",width:200,children:le(Iv,{padding:"medium",elevated:!0,children:RM})})]}),selected:()=>ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false",emphasis:!0,width:200,children:le(Iv,{padding:"medium",clickable:!0,children:RM})}),le($w,{label:"true",width:200,children:le(Iv,{padding:"medium",clickable:!0,selected:!0,children:RM})})]})},Accordion:{variant:()=>le(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:["solid","outlined","ghost"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"solid"===e?"standard":"quiet",children:e}),le(Hw,{variant:e,title:"What is a design system?",defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]},e))}),size:()=>le(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:Zw.map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(Hw,{size:e,title:"Size "+e,defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]},e))}),defaultExpanded:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — starts closed"}),le(Hw,{title:"What is a design system?",children:le(wi,{children:"A set of decisions, written down once."})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — starts open"}),le(Hw,{title:"What is a design system?",defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]})]}),disabled:()=>ce(uz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:380},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(Hw,{title:"What is a design system?",children:le(wi,{children:"A set of decisions, written down once."})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled"}),le(Hw,{title:"What is a design system?",disabled:!0,children:le(wi,{children:"A set of decisions, written down once."})})]})]})},Paper:{outlined:()=>ce(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le($w,{label:"false — elevation",emphasis:!0,width:180,children:le(PC,{surface:"Container",children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:"Elevated"})})})}),le($w,{label:"true — a border, no shadow",width:180,children:le(PC,{surface:"Container",outlined:!0,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:"Outlined"})})})})]}),variant:()=>le(hz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["elevation","outlined"].map(e=>le($w,{label:e,emphasis:"elevation"===e,width:180,children:le(PC,{surface:"Container",variant:e,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:e})})})},e))})},Ratio:{fit:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"width — height follows the column"}),le("div",{style:{width:240},children:le(aB,{ratio:"16:9"})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"height — width follows the row"}),le("div",{style:{height:120},children:le(aB,{ratio:"16:9",fit:"height"})})]})]})},Table:{loading:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%"},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),le(aT,{columns:lM,rows:sM})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the shape is kept"}),le(aT,{columns:lM,rows:[],loading:!0,skeletonRows:3})]})]})},Modal:{open:()=>le(FM,{values:[!0],label:()=>"Open modal",render:(e,a)=>le(FC,{open:!0,onClose:a,title:"Rename project",children:ce(uz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"A modal takes the whole screen`s attention, so it owes the reader a way out."}),le(nb,{onClick:a,children:"Done"})]})})}),size:()=>le(FM,{values:Zw,defaultValue:"medium",render:(e,a)=>le(FC,{open:!0,onClose:a,size:e,title:"Size "+e,children:le(wi,{children:"The modal`s width. Its height always follows its content."})})}),layout:()=>le(FM,{values:["center","top"],defaultValue:"center",render:(e,a)=>le(FC,{open:!0,onClose:a,layout:e,title:"Layout "+e,children:le(wi,{children:"Where the modal sits in the viewport."})})}),closeOnBackdrop:()=>le(FM,{values:[!0,!1],defaultValue:!0,label:e=>e?"true — click outside closes":"false — click outside does nothing",render:(e,a)=>le(FC,{open:!0,onClose:a,closeOnBackdrop:e,title:"Rename project",children:ce(uz,{gap:"var(--Sizing-2)",children:[le(wi,{children:e?"Click the backdrop to close.":"The backdrop will not close this."}),le(nb,{onClick:a,children:"Close"})]})})}),showCloseButton:()=>le(FM,{values:[!0,!1],defaultValue:!0,label:e=>e?"true":"false — needs its own way out",render:(e,a)=>le(FC,{open:!0,onClose:a,showCloseButton:e,title:"Rename project",children:ce(uz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"A modal with no close button must give one in its content."}),le(nb,{onClick:a,children:"Done"})]})})})},Dialog:{open:()=>le(FM,{values:[!0],label:()=>"Open dialog",render:(e,a)=>le(Lk,{open:!0,onClose:a,title:"Discard changes?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:a,children:"Keep editing"}),le(nb,{variant:"error",onClick:a,children:"Discard"})]}),children:le(wi,{children:"This cannot be undone."})})}),maxWidth:()=>le(FM,{values:["xs","sm","md","lg"],defaultValue:"sm",render:(e,a)=>le(Lk,{open:!0,onClose:a,maxWidth:e,title:"maxWidth "+e,actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:"A ceiling, not a width — a short dialog stays narrow."})})}),fullScreen:()=>le(FM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true":"false",render:(e,a)=>le(Lk,{open:!0,onClose:a,fullScreen:e,title:"Edit tokens",actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:"Full screen is for a dialog carrying a whole task on a small screen."})})}),alert:()=>le(FM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — role=alertdialog":"false — role=dialog",render:(e,a)=>le(Lk,{open:!0,onClose:a,alert:e,title:"Delete project?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:a,children:"Cancel"}),le(nb,{variant:"error",onClick:a,children:"Delete"})]}),children:le(wi,{children:"Every file in it goes too. This cannot be undone."})})}),nonModal:()=>le(FM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — the page stays usable":"false — modal",render:(e,a)=>le(Lk,{open:!0,onClose:a,nonModal:e,title:"Find in page",actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:e?"The page behind this is still interactive.":"The page behind this is blocked."})})})},Drawer:{open:()=>le(FM,{values:[!0],label:()=>"Open drawer",render:(e,a)=>le(TS,{open:!0,onClose:a,children:ce(uz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(oC,{items:oM,clickable:!0}),le(nb,{onClick:a,children:"Close"})]})})}),anchor:()=>le(FM,{values:["left","right","top","bottom"],defaultValue:"left",render:(e,a)=>le(TS,{open:!0,onClose:a,anchor:e,children:ce(uz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[ce(si,{children:["anchor=",e]}),le(nb,{onClick:a,children:"Close"})]})})}),size:()=>le(FM,{values:Zw,defaultValue:"medium",render:(e,a)=>le(TS,{open:!0,onClose:a,size:e,children:ce(uz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)"},children:[ce(si,{children:["size=",e]}),le(nb,{onClick:a,children:"Close"})]})})}),hideBackdrop:()=>le(FM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — no scrim":"false — scrim",render:(e,a)=>le(TS,{open:!0,onClose:a,hideBackdrop:e,children:ce(uz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(nb,{onClick:a,children:"Close"})]})})})},Sheet:{surface:()=>le(uz,{gap:"var(--Sizing-2)",children:["Surface","Surface-Dim","Surface-Dimmest","Surface-Bright","Surface-Brightest"].map(e=>le($w,{label:e,emphasis:"Surface"===e,width:260,children:le(aM,{surface:e,sx:{padding:"var(--Sizing-2)",width:220},children:ce(xi,{children:["On ",e]})})},e))}),elevated:()=>le(hz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap"},children:[!1,!0].map(e=>le($w,{label:String(e),emphasis:!e,children:le(aM,{elevated:e,sx:{padding:"var(--Sizing-2)",width:180},children:le(xi,{children:e?"Lifted off the page":"Flat on it"})})},String(e)))})},TransferList:{mode:()=>le(uz,{gap:"var(--Sizing-3)",children:["basic","enhanced"].map(e=>le($w,{label:e,emphasis:"basic"===e,children:le(nM,{mode:e,defaultLeftItems:["Colors","Typography","Spacing"],defaultRightItems:["Elevation"]})},e))}),disabled:()=>le(uz,{gap:"var(--Sizing-3)",children:[!1,!0].map(e=>le($w,{label:String(e),emphasis:!e,children:le(nM,{disabled:e,defaultLeftItems:["Colors","Typography"],defaultRightItems:["Elevation"]})},String(e)))})},Snackbar:{open:()=>le(FM,{values:[!0],label:()=>"Show snackbar",render:(e,a)=>le(TB,{open:!0,onClose:a,color:"success",autoHideDuration:4e3,children:"Project saved."})}),color:()=>le(FM,{values:["info","success","warning","error"],defaultValue:"info",render:(e,a)=>ce(TB,{open:!0,onClose:a,color:e,autoHideDuration:4e3,children:[e," — something happened."]})}),anchor:()=>le(FM,{values:["bottom","top"],defaultValue:"bottom",render:(e,a)=>ce(TB,{open:!0,onClose:a,anchor:e,color:"info",autoHideDuration:4e3,children:["anchor=",e]})})},Tooltip:{placement:()=>le(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:["bottom","top","left","right"].map(e=>le($w,{label:e,emphasis:"bottom"===e,children:le(wT,{title:"placement="+e,placement:e,children:le(nb,{variant:"outline",size:"small",children:e})})},e))}),arrow:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le($w,{label:"true",emphasis:!0,children:le(wT,{title:"With an arrow",children:le(nb,{variant:"outline",size:"small",children:"arrow"})})}),le($w,{label:"false",children:le(wT,{title:"No arrow",arrow:!1,children:le(nb,{variant:"outline",size:"small",children:"no arrow"})})})]}),describeChild:()=>ce(hz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le($w,{label:"false — the tooltip is the name",emphasis:!0,children:le(wT,{title:"Delete item",children:le(nb,{variant:"outline",size:"small",iconOnly:!0,"aria-label":"Delete item",children:"x"})})}),le($w,{label:"true — the tooltip describes it",children:le(wT,{title:"Removes it permanently",describeChild:!0,children:le(nb,{variant:"outline",size:"small",children:"Delete"})})})]})},Popover:{open:()=>le(PM,{})}},{ButtonGroup:{separated:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true — the default, and what Figma draws"}),le(EM,{})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false — joins them, and warns"}),le(EM,{separated:!1})]}),le(wi,{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:()=>ce(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:OM},children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"hug — each button sizes to its label"}),le("div",{style:{width:OM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(EM,{labels:["S","Medium","Extra large"]})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"fill — the group fills, buttons share it equally"}),le("div",{style:{width:OM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(EM,{labels:["S","Medium","Extra large"],fit:"fill"})})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"equal — hugs, but every button matches the widest (code only)"}),le("div",{style:{width:OM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(EM,{labels:["S","Medium","Extra large"],fit:"equal"})})]})]}),orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:"horizontal",emphasis:!0,children:le(EM,{})}),le($w,{label:"vertical",children:le(EM,{orientation:"vertical"})})]}),size:()=>le(uz,{gap:"var(--Sizing-3)",children:Zw.map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(EM,{size:e})]},e))}),variant:()=>ce(uz,{gap:"var(--Sizing-3)",children:[["default","primary","secondary"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"default"===e?"standard":"quiet",children:`<Button variant="${e}">`}),le(EM,{variant:e})]},e)),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"outline, for a row of secondary actions"}),le(EM,{variant:"default-outline"})]})]}),disabled:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(EM,{})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled — the whole group"}),le(EM,{disabled:!0})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"a single button takes its own `disabled`"}),ce(Nw,{"aria-label":"Actions",children:[le(nb,{onClick:()=>{},children:"Save"}),le(nb,{disabled:!0,onClick:()=>{},children:"Cancel"}),le(nb,{onClick:()=>{},children:"Delete"})]})]})]}),"aria-label":()=>ce(uz,{gap:"var(--Sizing-2)",children:[le(VM,{}),le(wi,{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:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — a toggle group. The last one stays on."}),le(jM,{allowEmpty:!1})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — clearable, with toggle styling"}),le(jM,{allowEmpty:!0})]}),le(wi,{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:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one answer, and it cannot be cleared"}),le(QM,{})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — any number, never none"}),le(jM,{allowEmpty:!1})]})]}),separated:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — joined (Figma: Style=Default)"}),le(QM,{})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — separated (Figma: Style=Separated)"}),le(QM,{separated:!0})]})]}),variant:()=>le(uz,{gap:"var(--Sizing-3)",children:["outlined","light","ghost"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"outlined"===e?"standard":"quiet",children:e}),le(QM,{variant:e,color:"primary"})]},e))}),color:()=>le(uz,{gap:"var(--Sizing-2)",children:["default",...Jw].map(e=>ce(hz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le("div",{style:{width:84},children:le(Li,{color:"default"===e?"standard":"quiet",children:e})}),le(QM,{color:e})]},e))}),size:()=>le(uz,{gap:"var(--Sizing-3)",children:Zw.map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(QM,{size:e})]},e))}),fit:()=>le(uz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:OM},children:["hug","fill","equal"].map(e=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"hug"===e?"standard":"quiet",children:e}),le("div",{style:{width:OM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(QM,{options:["S","Medium","Extra large"],initial:"S",fit:e})})]},e))}),orientation:()=>ce(hz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le($w,{label:"horizontal",emphasis:!0,children:le(QM,{})}),le($w,{label:"vertical",children:le(QM,{orientation:"vertical"})})]}),"value / defaultValue":()=>ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"each child needs a `value`; the group matches against it"}),le(QM,{})]}),onChange:()=>ce(uz,{gap:"var(--Sizing-2)",children:[le(QM,{}),le(wi,{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:()=>ce(uz,{gap:"var(--Sizing-3)",children:[ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(QM,{})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled — the whole group"}),le(QM,{disabled:!0})]}),ce(uz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"one choice unavailable"}),le(qM,{})]})]})}}].reduce(function(e,a){for(const[t,i]of Object.entries(a))e[t]={...e[t]||{},...i};return e},XM);const ZM={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."}},$M=e=>ZM[e]||null,KM=/\.(mp4|mov|webm)$/i;function _M({src:e,title:a,shows:t,aspect:i="4 / 3",maxWidth:n=560}){const r={width:"100%",maxWidth:n,display:"block",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"1px solid var(--Border-Variant)"};return e&&KM.test(e)?le(u,{component:"video",src:e,controls:!0,preload:"metadata",playsInline:!0,sx:r}):le(u,e?{component:"img",src:e,alt:a||"",loading:"lazy",sx:r}:{"data-surface":"Container",sx:{width:"100%",maxWidth:n,aspectRatio:i,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:ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center",maxWidth:440},children:[le(Oi,{children:"Screenshot to capture"}),le(xi,{children:a}),t&&le(Li,{color:"quiet",children:t})]})})}const eA="https://omni-design.netlify.app";function aA(e){return e.trim().replace(/\s+/g,"-")}function tA(e,a,t=eA){return`${t.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}/${aA(a)}`}function iA(e,a=eA){return`${a.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}`}const nA="https://github.com/lwnoble/DinoDesign/issues/new";function rA(e){const a=aA(String(e||"")).toLowerCase();return Sg.find(e=>aA(e.name).toLowerCase()===a)||null}const oA=({component:e,what:a})=>le(u,{sx:{p:3},children:ce(wi,{color:"quiet",children:["No ",a," written for ",e," yet."]})}),lA=({title:e,children:a})=>ce(u,{sx:{pt:3,mt:3,borderTop:"1px solid var(--Border-Variant)","&:first-of-type":{borderTop:"none",pt:0,mt:0}},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:e.toUpperCase()}),a]}),sA=({items:e})=>le(m,{spacing:0,children:e.map((e,a)=>ce(u,{sx:{py:.75},children:[le(xi,{children:e.head}),e.sub?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:e.sub}):null]},a))}),cA=["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"],dA=e=>e.sample||e.name,hA=e=>{const a=cA.indexOf(dA(e));return-1===a?cA.length:a},uA=e=>e.map((e,a)=>({pr:e,i:a})).sort((e,a)=>hA(e.pr)-hA(a.pr)||e.i-a.i).map(({pr:e})=>e);function mA({component:e,theme:a=null,surface:t="Surface"}){const i=rA(e);if(!i)return le(oA,{component:e,what:"reference"});const n=YM(i.name)?UM[i.name]:null,r=$M(i.name);return le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[n?le(zv,{theme:a,surface:t,minHeight:120,children:le(u,{sx:{width:"100%",p:3,display:"flex",justifyContent:"center"},children:le(u,{sx:{width:"100%",maxWidth:420,textAlign:"center"},children:n({theme:a,surface:t})})})}):null,le(wi,{children:i.summary}),i.links&&i.links.length?le(u,{sx:{display:"flex",gap:"var(--Sizing-3)",flexWrap:"wrap"},children:i.links.map((e,a)=>le(mn,{href:e.href,target:"_blank",rel:"noopener noreferrer",children:e.label},a))}):null,(i.insteadUse||[]).length>0&&le(lA,{title:"Reach for something else when",children:le(sA,{items:i.insteadUse.map(e=>({head:e.when,sub:`Use ${e.use}`}))})}),(i.props||[]).length>0&&le(lA,{title:"Props",children:le(m,{spacing:0,children:uA(i.props).map((e,n)=>{const o=dA(e),l=function(e,a){return Boolean(JM[e]&&JM[e][a])}(i.name,o)?JM[i.name][o]:null,s=r&&r.after===o?r:null,c=[e.values&&e.values.length?e.values.join(" | "):null,e.default?`default: ${e.default}`:null,e.note].filter(Boolean).join(" · ");return ce(u,{sx:{py:1},children:[ce(xi,{children:[e.label||e.name," — ",e.type]}),c?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:c}):null,l?le(u,{sx:{mt:1.5},children:le(zv,{theme:a,surface:t,minHeight:0,children:le(u,{sx:{p:2},children:l({theme:a,surface:t})})})}):null,s?le(u,{sx:{mt:2},children:ce(m,{spacing:1.5,children:[le(Oi,{children:s.title}),le(xi,{children:s.body}),le(_M,{title:s.shot}),s.caveat?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:s.caveat}):null]})}):null]},n)})})}),(i.states||[]).length>0&&le(lA,{title:"States",children:le(sA,{items:i.states.map(e=>({head:e.state,sub:[`set by ${e.setBy}`,e.note].filter(Boolean).join(" · ")}))})}),(i.theming||[]).length>0&&ce(lA,{title:"Theming",children:[le(sA,{items:i.theming.map(e=>({head:e.collection,sub:`In code: ${e.inCode}\nIn Figma: ${e.inFigma}`}))}),(i.themingNotes||[]).map((e,a)=>le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:e},a))]}),(i.tokens||[]).length>0&&le(lA,{title:"Tokens",children:le(sA,{items:i.tokens.map(e=>({head:e.name,sub:[e.sets,e.variesWith?`varies with ${e.variesWith}`:null,e.figma].filter(Boolean).join(" · ")}))})}),(i.composition||[]).length>0&&le(lA,{title:"Composition",children:le(sA,{items:i.composition.map(e=>({head:e}))})}),(i.gotchas||[]).length>0&&le(lA,{title:"Gotchas",children:le(sA,{items:i.gotchas.map(e=>({head:e}))})})]})})}function pA({component:e}){const a=rA(e),t=a&&a.changes||[],i=encodeURIComponent(`[${e}] `);return le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[0===t.length?ce(wi,{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)=>ce(u,{sx:{py:1},children:[ce(m,{direction:"row",spacing:1,useFlexGap:!0,sx:{alignItems:"center",flexWrap:"wrap"},children:[le(xi,{style:{fontWeight:700},children:e.version}),e.silent?le(Li,{style:{color:"var(--Text-Warning)",fontWeight:600},children:"SILENT — old code still renders"}):null]}),le(wi,{children:e.change}),e.migrate?ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Instead: ",e.migrate]}):null]},a))}),ce(u,{children:[le(di,{children:"Something wrong or missing?"}),le(xi,{color:"quiet",children:"Report it against this component and it arrives with the name already filled in."}),le(u,{sx:{mt:1},children:ce(mn,{href:`${nA}?title=${i}`,target:"_blank",rel:"noreferrer",children:["Report an issue with ",e]})})]})]})})}const fA="Qv2dqF7mYoAGY77EkdrwTv",gA="Omni-Designs-Aug12",bA={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 vA({title:e,component:a}){const t=a?function(e){const a=bA[e];return a?`https://www.figma.com/design/${fA}/${gA}?node-id=${a.replace(":","-")}`:null}(a):null;return ce(u,{sx:{display:"flex",alignItems:"baseline",gap:2,flexWrap:"nowrap"},children:[le(u,{sx:{flex:"0 1 auto",minWidth:0},children:le(si,{children:e})}),t&&ce(mn,{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 xA=[{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 yA(){const e=["# Foundations",""];for(const a of xA)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 zA={"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 wA(){const e=({color:e})=>ce(u,{sx:{textAlign:"center"},children:[le(u,{sx:{width:"80px",height:"80px",backgroundColor:`var(${e.var})`,borderRadius:"8px",border:"1px solid var(--Border)",mb:1,mx:"auto"}}),le(Q,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return ce(m,{spacing:6,children:[ce(u,{children:[le(Q,{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))})]}),ce(u,{children:[le(Q,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(Q,{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:ce(u,{sx:{textAlign:"center"},children:[le(u,{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(Q,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),ce(u,{children:[le(Q,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(ae,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:ce(Q,{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(Q,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),ce(m,{spacing:1,sx:{mb:4},children:[ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(Q,{variant:"body2",children:"Light or Dark theme"})]}),ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(Q,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(Q,{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=>ce(u,{children:[le(Q,{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))})]}),ce(u,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),ce(m,{spacing:2,children:[ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),ce(Q,{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."]})]}),ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(Q,{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."})]}),ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Example Usage"}),le(u,{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 SA(){const e=({name:e,varName:a,baseValue:t})=>le(u,{sx:{mb:2},children:ce(u,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(u,{"aria-hidden":"true",sx:{width:`var(${a})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),ce(m,{spacing:.5,children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:a}),ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),a=({name:e,varName:a,value:t})=>ce(u,{sx:{mb:2},children:[le(u,{"aria-hidden":"true",sx:{width:100,height:t,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,border:"1px solid var(--Border)",mb:1}}),le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:a}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return ce(m,{spacing:3,sx:{p:2},children:[ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(Q,{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))})]}),ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(Q,{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))})]}),ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(Q,{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:ce(u,{children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),ce("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),ce(u,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[ce(Q,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),ce("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),ce("article",{children:[le(Q,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(Q,{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:ce(u,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[ce(Q,{variant:"subtitle2",children:["Padding: ",e]}),le(Q,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),ce("article",{children:[le(Q,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(Q,{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=>ce(u,{children:[le(m,{direction:"row",spacing:e,sx:{mb:1},children:[1,2,3].map(e=>le(u,{"aria-hidden":"true",sx:{width:60,height:60,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,flexShrink:0}},e))}),ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),ce(u,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),ce("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:ce(Q,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(Q,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:ce(Q,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:ce(Q,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(Q,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(Q,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}Object.entries({Display:["display-large","display-medium","display-small"],Headings:["h1","h2","h3","h4","h5","h6"],Subtitle:["subtitle-small","subtitle","subtitle-large"],Body:["body-small","body-small-semibold","body","body-semibold","body-large","body-large-semibold"],Label:["label","label-small","label-large"],Caption:["caption","caption-bold"],Legal:["legal","legal-semibold"],Eyebrow:["eyebrow-small","eyebrow","eyebrow-large"],Button:["button-extra-small","button-small","button"],Number:["number-large","number-medium","number-small"]}).map(([e,a])=>({label:e,options:a.map(e=>({value:e,label:zA[e]}))}));const kA=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",CA=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],BA=[Me,zt,Se,Ne,vt,wt];function TA(){const[e,t]=a("Default"),[i,n]=a("Surface"),[r,o]=a("primary"),[l,s]=a("solid"),[c,d]=a("medium"),h=BA[0];return ce(uz,{spacing:4,style:{paddingBottom:64},children:[le(vA,{title:"Icon Badge",component:"IconBadge"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),ce("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(Iv,{padding:"medium",children:ce(uz,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(eC,{color:r,variant:l,size:c,children:le(h,{})})}),le(hz,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(e=>ce(uz,{spacing:1,alignItems:"center",children:[le(eC,{color:r,variant:l,size:e,children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)"},children:kA(e)})]},e))}),ce(uz,{spacing:1,alignItems:"center",children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(hz,{spacing:3,children:["solid","light","dark"].map(e=>ce(uz,{spacing:1,alignItems:"center",children:[le(eC,{color:r,variant:e,size:"medium",children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:kA(e)})]},e))})]}),ce(uz,{spacing:1,alignItems:"center",children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(hz,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:CA.flatMap(e=>e.colors).map(e=>ce(uz,{spacing:0,alignItems:"center",children:[le(eC,{color:e,variant:l,size:"small",children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:kA(e)})]},e))})]})]})}),le(Iv,{padding:"medium",children:ce(uz,{spacing:4,children:[le(si,{style:{fontSize:"1rem"},children:"Playground"}),ce(uz,{spacing:2,children:[le(Ri,{children:"Color"}),CA.map(e=>ce(uz,{spacing:1,children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:e.label}),le(hz,{spacing:1,children:e.colors.map(e=>le(nb,{variant:r===e?"default":"outline",size:"small",onClick:()=>o(e),children:kA(e)},e))})]},e.label))]}),ce(uz,{spacing:1,children:[le(Ri,{children:"Variant"}),le(Nw,{size:"small",children:["solid","light","dark"].map(e=>le(nb,{variant:l===e?"default":"outline",size:"small",onClick:()=>s(e),children:kA(e)},e))})]}),ce(uz,{spacing:1,children:[le(Ri,{children:"Size"}),le(Nw,{size:"small",children:["small","medium","large"].map(e=>le(nb,{variant:c===e?"default":"outline",size:"small",onClick:()=>d(e),children:kA(e)},e))})]}),ce(uz,{spacing:0,children:[ce(xi,{style:{color:"var(--Quiet)"},children:["data-theme: ",kA(r),"light"===l?"-Light":""]}),ce(xi,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===l?"Surface-Dimmest":"Surface"]}),le(xi,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(xi,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const MA={required:" * Required",optional:"Optional"};function AA({children:e,htmlFor:a,type:t="default",as:i="label",moreInfo:n,disabled:r=!1,className:o="",sx:l={},...s}){const c=MA[t],d="legend"===i;"production"===process.env.NODE_ENV||d||a||console.warn('[FormLabel] no `htmlFor`. A <label> whose control is a sibling has no association — the field announces as unlabelled while looking right. Pass the control\'s id, or use as="legend" inside a <fieldset>.'),"production"!==process.env.NODE_ENV&&n&&!n.label&&console.warn('[FormLabel] `moreInfo` needs a `label`. Name the FIELD it belongs to ("More about your email address"), not the icon.');const h=ce(Ri,{component:d?"legend":"label",htmlFor:d?void 0:a,className:"form-label",style:{color:r?"var(--Quiet)":"var(--Text)"},children:[e,c&&le("span",{className:"form-label-marker form-label-marker-"+t,"aria-hidden":"required"===t?"true":void 0,children:"required"===t?c:" "+c})]}),m=n?ce(mn,{className:"form-label-more-info",href:n.href,onClick:n.onClick,"aria-label":n.label,sx:{display:"inline-flex",alignItems:"center",gap:"var(--Sizing-Half)"},children:[n.text,le(Ff,{size:"small",children:le(we,{})})]}):null;return d?ce(se,{children:[h,m]}):ce(u,{className:"form-label-row "+o,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",...l},...s,children:[h,m]})}const LA={error:St,warning:kt,success:Ct,info:Fe},IA={error:"Error",warning:"Warning",success:"Success",info:"Info"},NA=Object.keys(IA);function WA({children:e,type:a="error",withIcon:t=!0,className:i="",sx:n={},...r}){return ce(u,{className:"input-message input-message-"+a+" "+i,"data-theme":IA[a]||IA.error,"data-surface":"Surface-Brightest",sx:{display:"inline-flex",alignItems:"center",gap:"var(--Sizing-Half)",padding:"0 var(--Sizing-Half)",borderRadius:"var(--Sizing-Half)",backgroundColor:"var(--Background)",...n},...r,children:[t&&le(Ff,{size:"xxs",color:a,children:le(LA[a]||LA.error,{})}),le(Pi,{className:"input-message-text",color:a,children:e})]})}const DA=["none","warning","info","success","error"];function RA({showHelper:e=!0,validation:a="none"}={}){const t=o(),i=e?t+"-helper":void 0,n=a&&"none"!==a?t+"-message":void 0,r=[i,n].filter(Boolean).join(" ")||void 0;return{helperId:i,messageId:n,describedBy:r}}function FA({helperText:e,showHelper:a=!0,validation:t="none",validationMessage:i,withIcon:n=!0,helperId:r,messageId:o,className:l="",sx:s={},...c}){const d=a&&!!e,h="none"!==t&&!!i;return d||h?ce(u,{className:"form-helper "+l,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"var(--Sizing-Half)",...s},...c,children:[d&&le(Pi,{id:r,className:"form-helper-text",children:e}),h&&le(WA,{id:o,type:t,withIcon:n,children:i})]}):null}function PA({children:e,label:a,type:t="default",moreInfo:i,helperText:n,showHelper:r=!0,validation:o="none",validationMessage:l,orientation:s="vertical",disabled:c=!1,className:d="",sx:h={},...m}){const{helperId:p,messageId:f,describedBy:g}=RA({showHelper:r,validation:o});return ce(u,{component:"fieldset",disabled:c||void 0,className:"field-group field-group-"+s+" "+d,"aria-invalid":"error"===o||void 0,"aria-describedby":g,sx:{border:0,margin:0,padding:0,minInlineSize:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)",...h},...m,children:[a&&le(AA,{as:"legend",type:t,moreInfo:i,disabled:c,children:a}),le(FA,{helperText:n,showHelper:r,validation:o,validationMessage:l,helperId:p,messageId:f}),le(u,{className:"field-group-options",sx:{display:"flex",flexDirection:"horizontal"===s?"row":"column",flexWrap:"horizontal"===s?"wrap":"nowrap",alignItems:"horizontal"===s?"center":"flex-start",gap:"var(--Sizing-1)"},children:e})]})}function HA({label:e,type:a="default",moreInfo:t,id:i,disabled:n=!1,className:r="",sx:l={},...s}){const c=o(),d=i||c;return ce(u,{className:"textarea-field "+r,sx:{display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)",...l},children:[le(AA,{htmlFor:d,type:a,moreInfo:t,disabled:n,children:e}),le(cT,{id:d,disabled:n,"aria-required":"required"===a||void 0,...s})]})}function OA({layout:e="side",navItems:t=[{label:"Home",icon:le(Me,{}),path:"/"},{label:"About",icon:le(Fe,{}),path:"/about"},{label:"Settings",icon:le(Le,{}),path:"/settings"},{label:"Help",icon:le(Bt,{}),path:"/help"}],title:i="My App",children:n,onLayoutChange:r,onNavigate:o,sx:l={},...s}){const c=te(),d=ie(c.breakpoints.down("md"));ie(c.breakpoints.down("lg"));const[h,m]=a(!1),[p,f]=a(!1),g=d?"top":e,b=({compact:e=!1})=>le(U,{sx:{py:1},children:t.map((a,t)=>le(x,{title:e?a.label:"",placement:"right",children:ce(X,{onClick:()=>{o?.(a),m(!1)},sx:{color:"var(--Text)",...SB({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le(J,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:a.icon}),!e&&le(Z,{primary:a.label})]})},t))});return ce(u,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...s,children:[le(ne,{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:ce(re,{children:[d&&"rail"!==g&&le(ob,{variant:"ghost",onClick:()=>m(!h),"aria-label":h?"Close navigation":"Open navigation",sx:{mr:2},children:le(h?Ua:ja,{})}),le(Q,{variant:"h6",sx:{flex:1,fontWeight:700},children:i}),!d&&r&&ce(oe,{value:e,exclusive:!0,onChange:(e,a)=>{a&&r(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"})]})]})}),ce(u,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!d&&le(u,{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&&ce(u,{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:[ce(u,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!p&&le(Q,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(ob,{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&&ce(_,{anchor:"left",open:h,onClose:()=>m(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(u,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(Q,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(b,{compact:!1})]}),le(u,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(N,{maxWidth:"lg",sx:{py:4},children:n})})]})]})}const EA=[{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)"}],VA={desktop:"Desktop","ios-mobile":"IOS-Mobile","ios-tablet":"IOS-Tablet",android:"Android"};function QA(e){const a=VA[e]||"Desktop";document.documentElement.setAttribute("data-device",a),document.documentElement.setAttribute("data-platform",a)}function jA(){const{isDark:e,toggleDarkMode:i}=yS(),n=e?"dark":"light",r=a=>{"dark"===a!==e&&i();try{localStorage.setItem("themeMode",a)}catch{}},[o,l]=a(!1),[s,c]=a("desktop");t(()=>{const e=localStorage.getItem("dino-platform")||"desktop";c(e),QA(e)},[]);const d=e=>{c(e),localStorage.setItem("dino-platform",e),QA(e)};return ce(se,{children:[le(u,{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(TS,{anchor:"right",open:o,onClose:()=>l(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:ce(u,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(di,{children:"Settings"}),le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>l(!1),"aria-label":"Close settings",children:le(ve,{fontSize:"small"})})]}),le(K,{sx:{mb:3,borderColor:"var(--Border)"}}),le(u,{sx:{flex:1,overflowY:"auto"},children:ce(m,{spacing:4,children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),ce(m,{direction:"row",spacing:1,children:[le(nb,{variant:"light"===n?"primary":"primary-outline",size:"small",onClick:()=>r("light"),sx:{flex:1},children:"Light"}),le(nb,{variant:"dark"===n?"primary":"primary-outline",size:"small",onClick:()=>r("dark"),sx:{flex:1},children:"Dark"})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(m,{spacing:1,children:EA.map(({value:e,label:a,note:t})=>{const i=s===e;return ce(u,{onClick:()=>d(e),sx:{p:1.5,borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",border:i?"2px solid var(--Buttons-Primary-Button)":"1px solid var(--Border)",backgroundColor:i?"var(--Background)":"transparent",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.15s ease","&:hover":{backgroundColor:"var(--Hover)"}},children:[ce(u,{children:[le(xi,{style:{color:i?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:i?600:400},children:a}),le(Li,{style:{color:"var(--Text)",opacity:.7},children:t})]}),i&&le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le(K,{sx:{my:3,borderColor:"var(--Border)"}}),le(nb,{variant:"primary-outline",size:"small",onClick:()=>{d("desktop"),r("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const qA=e=>(e||[]).map(e=>{const a="number"==typeof e?e:Number(e?.value);return Number.isFinite(a)?a:0}),GA=e=>(e||[]).map((e,a)=>"number"==typeof e?String(a+1):e?.label??String(a+1));function UA(e,{fromZero:a=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),i=Math.max(...e);return a&&(t=Math.min(0,t)),i===t&&(i=t+1),{min:t,max:i}}const YA=(e,{min:a,max:t},i,n)=>i+n-(e-a)/(t-a)*n;function XA(e,a,t,{inset:i=0}={}){if(e<=0)return[];if(1===e)return[a+t/2];const n=(t-2*i)/(e-1);return Array.from({length:e},(e,t)=>a+i+t*n)}function JA(e,a,t,{gapRatio:i=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const n=t/e,r=n*(1-i);return{centres:Array.from({length:e},(e,t)=>a+n*t+n/2),bandWidth:r}}const ZA=e=>e.length?e.map((e,a)=>`${a?"L":"M"}${e.x} ${e.y}`).join(" "):"";function $A(e,{tension:a=0}={}){if(e.length<2)return ZA(e);const t=(1-a)/6;let i=`M${e[0].x} ${e[0].y}`;for(let a=0;a<e.length-1;a++){const n=e[a-1]||e[a],r=e[a],o=e[a+1],l=e[a+2]||o,s={x:r.x+(o.x-n.x)*t,y:r.y+(o.y-n.y)*t},c={x:o.x-(l.x-r.x)*t,y:o.y-(l.y-r.y)*t};i+=` C${s.x} ${s.y} ${c.x} ${c.y} ${o.x} ${o.y}`}return i}const KA=(e,a,t)=>e&&a.length?`${e} L${a[a.length-1].x} ${t} L${a[0].x} ${t} Z`:"";function _A(e,a,t,i,n,r){const o=r-n;if(o>=2*Math.PI-1e-9){const r=n+Math.PI;return _A(e,a,t,i,n,r)+" "+_A(e,a,t,i,r,n+2*Math.PI)}const l=(t,i)=>({x:e+t*Math.sin(i),y:a-t*Math.cos(i)}),s=o>Math.PI?1:0,c=l(i,n),d=l(i,r);if(t<=0)return`M${e} ${a} L${c.x} ${c.y} A${i} ${i} 0 ${s} 1 ${d.x} ${d.y} Z`;const h=l(t,r),u=l(t,n);return`M${c.x} ${c.y} A${i} ${i} 0 ${s} 1 ${d.x} ${d.y} L${h.x} ${h.y} A${t} ${t} 0 ${s} 0 ${u.x} ${u.y} Z`}function eL(e,{startAngle:a=0}={}){const t=e.map(e=>e>0?e:0),i=t.reduce((e,a)=>e+a,0),n=e.filter(e=>e<=0).length;if(i<=0)return{slices:[],total:0,dropped:n};let r=a;return{slices:t.map(e=>{const a=e/i*Math.PI*2,t={start:r,end:r+a,value:e,fraction:e/i};return r+=a,t}),total:i,dropped:n}}function aL({min:e,max:a},t=4){if(t<1)return[];const i=(a-e)/t,n=Math.pow(10,Math.floor(Math.log10(Math.abs(i)||1))),r=[1,2,2.5,5,10].map(e=>e*n).find(e=>e>=i)??10*n,o=[];for(let t=Math.ceil(e/r)*r;t<=a+1e-9;t+=r)o.push(Number(t.toFixed(10)));return o}var tL=Object.freeze({__proto__:null,arcPath:_A,areaPath:KA,bands:XA,extent:UA,linePath:ZA,scaleY:YA,sliceAngles:eL,slots:JA,smoothPath:$A,ticks:aL,toLabels:GA,toNumbers:qA});const iL={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},nL=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],rL={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},oL={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 lL({caption:e,labels:a,values:t,valueHeader:i="Value"}){return ce(u,{component:"table",sx:oL,children:[le("caption",{children:e}),le("thead",{children:ce("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:i})]})}),le("tbody",{children:t.map((e,t)=>ce("tr",{children:[le("th",{scope:"row",children:a[t]}),le("td",{children:e})]},t))})]})}const sL="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",cL="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function dL(a){const[t,i]=e.useState(-1),n=e.useCallback(e=>({onMouseEnter:()=>i(e),onMouseLeave:()=>i(a=>a===e?-1:a),onFocus:()=>i(e),onBlur:()=>i(a=>a===e?-1:a)}),[]);return e.useEffect(()=>{i(e=>e>=a?-1:e)},[a]),{active:t,setActive:i,handlers:n}}function hL({count:e,width:a,centres:t,bandWidth:i,labels:n,values:r,handlers:o}){return e?le(u,{sx:{position:"absolute",inset:0,display:"block",pointerEvents:"none"},children:Array.from({length:e},(e,l)=>le(u,{component:"button",type:"button","aria-label":`${n[l]}: ${r[l]}`,...o(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-i/2)/a*100+"%",width:i/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 uL({x:e,y:a,text:t,width:i,tokens:n}){if(null==t)return null;const r=Math.max(28,8*String(t).length+14),o=Math.min(Math.max(e,r/2+2),i-r/2-2),l=a-26>=2?a-26:a+6;return ce("g",{pointerEvents:"none",children:[le("rect",{x:o-r/2,y:l,width:r,height:20,rx:6,fill:n.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 mL({data:e=[],showTrack:i=!0,rounded:n=!0,showValues:r=!1,showLabels:o=!0,animate:l=!0,interactive:s=!0,height:c=200,gapRatio:d=.4,label:h,className:m="",sx:p={},...f}){const g=qA(e),b=GA(e),{active:v,handlers:x}=dL(g.length),[y,z]=a(!l);t(()=>{if(!l)return;const e=requestAnimationFrame(()=>z(!0));return()=>cancelAnimationFrame(e)},[l]);const w=320,S=r?20:8,k=o?22:8,C=Math.max(0,c-S-k),B=UA(g,{fromZero:!0}),{centres:T,bandWidth:M}=JA(g.length,0,w,{gapRatio:d}),A=S+C,L=n?M/2:0,I=g.length?w/g.length:0;return ce(u,{component:"figure",className:"bar-chart "+m,sx:{display:"block",width:"100%",m:0,position:"relative",...p},...f,children:[ce("svg",{viewBox:`0 0 320 ${c}`,width:"100%",height:c,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[s&&v>=0&&le("rect",{x:T[v]-I/2,y:0,width:I,height:c,fill:"var(--Hover)",rx:6}),g.map((e,a)=>{const t=T[a]-M/2,n=YA(e,B,S,C),r=Math.max(0,A-n);return ce("g",{children:[i&&le("rect",{x:t,y:S,width:M,height:C,rx:L,ry:L,fill:iL.track}),r>0&&le("rect",{x:t,y:n,width:M,height:r,rx:Math.min(L,r/2),ry:Math.min(L,r/2),fill:iL.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${sL}`}})]},a)}),r&&g.map((e,a)=>le("text",{x:T[a],y:YA(e,B,S,C)-6,textAnchor:"middle",fill:iL.label,...rL,children:e},"v"+a)),o&&b.map((e,a)=>le("text",{x:T[a],y:c-6,textAnchor:"middle",fill:iL.quietLabel,...rL,children:e},"l"+a)),s&&v>=0&&!r&&le(uL,{x:T[v],y:YA(g[v],B,S,C),text:g[v],width:w,tokens:iL})]}),s&&le(hL,{count:g.length,width:w,centres:T,bandWidth:I,labels:b,values:g,handlers:x}),le(lL,{caption:h||`Bar chart, ${g.length} values`,labels:b,values:g})]})}function pL({data:e=[],curve:i="smooth",gradient:n=!0,fromZero:r=!1,showGrid:l=!1,showLabels:s=!1,animate:c=!0,interactive:d=!0,height:h=200,strokeWidth:m=3,tension:p=0,label:f,className:g="",sx:b={},...v}){const x="lc-"+o().replace(/:/g,""),y=qA(e),z=GA(e),{active:w,handlers:S}=dL(y.length),[k,C]=a(!c);t(()=>{if(!c)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[c]);const B=320,T=s?22:8,M=Math.max(0,h-8-T),A=UA(y,{fromZero:r}),L=XA(y.length,0,B,{inset:m}),I=y.map((e,a)=>({x:L[a],y:YA(e,A,8,M)})),N="straight"===i?ZA(I):$A(I,{tension:p}),W=8+M;return ce(u,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...b},...v,children:[ce("svg",{viewBox:`0 0 320 ${h}`,width:"100%",height:h,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[n&&le("defs",{children:ce("linearGradient",{id:x,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:iL.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:iL.gradient,stopOpacity:"0"})]})}),l&&aL(A,4).map(e=>le("line",{x1:0,x2:B,y1:YA(e,A,8,M),y2:YA(e,A,8,M),stroke:iL.line,strokeWidth:"1"},e)),n&&I.length>1&&le("path",{d:KA(N,I,W),fill:`url(#${x})`,style:{opacity:k?1:0,transition:`opacity ${sL}`}}),I.length>1&&le("path",{d:N,fill:"none",stroke:iL.fill,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:k?0:1,transition:`stroke-dashoffset ${sL}`}}),1===I.length&&le("circle",{cx:I[0].x,cy:I[0].y,r:m,fill:iL.fill}),d&&w>=0&&ce(se,{children:[le("line",{x1:L[w],x2:L[w],y1:8,y2:W,stroke:iL.line,strokeWidth:"1"}),le("circle",{cx:I[w].x,cy:I[w].y,r:m+1,fill:iL.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(uL,{x:I[w].x,y:I[w].y,text:y[w],width:B,tokens:iL})]}),s&&z.map((e,a)=>le("text",{x:L[a],y:h-6,textAnchor:"middle",fill:iL.quietLabel,...rL,children:e},a))]}),d&&le(hL,{count:y.length,width:B,centres:L,bandWidth:y.length?B/y.length:0,labels:z,values:y,handlers:S}),le(lL,{caption:f||`Line chart, ${y.length} points`,labels:z,values:y})]})}function fL({data:e=[],donut:i=!1,donutRatio:n=.6,colors:r=nL,separatorWidth:o=2,size:l=200,showLabels:s=!1,animate:c=!0,interactive:d=!0,label:h,className:m="",sx:p={},...f}){const g=qA(e),b=GA(e),{slices:v,total:x,dropped:y}=eL(g),{active:z,handlers:w}=dL(g.length),[S,k]=a(!c);t(()=>{if(!c)return;const e=requestAnimationFrame(()=>k(!0));return()=>cancelAnimationFrame(e)},[c]);const C=l/2,B=l/2,T=l/2-1,M=i?T*n:0,A=e=>{return{fill:`var(--Icons-${a=r[e%r.length]})`,onFill:`var(--Icons-On-${a})`};var a};return ce(u,{component:"figure",className:"pie-chart "+m,sx:{display:"block",m:0,position:"relative",...p},...f,children:[ce("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,i=d&&z===a?4:0;return le("path",{d:_A(C,B,M,T,e.start,e.end),fill:A(a).fill,stroke:"var(--Background)",strokeWidth:o,strokeLinejoin:"round",...d?w(a):{},style:{transform:`translate(${i*Math.sin(t)}px, ${-i*Math.cos(t)}px) scale(${S?1:0})`,transformOrigin:`${C}px ${B}px`,transformBox:"view-box",transition:`transform ${S?cL:sL}`}},a)}),s&&v.map((e,a)=>{const t=(e.start+e.end)/2,i=M+.62*(T-M);return e.fraction<.07?null:le("text",{x:C+i*Math.sin(t),y:B-i*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:A(a).onFill,...rL,children:b[a]},a)})]}),le(lL,{caption:(h||`${i?"Donut":"Pie"} chart, ${v.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:b,values:g})]})}const gL=[{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 bL(){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 gL)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 vL=e=>e.replace(/\|/g,"\\|"),xL=(e,a)=>[`| ${e.join(" | ")} |`,`| ${e.map(()=>"---").join(" | ")} |`,...a.map(e=>`| ${e.map(vL).join(" | ")} |`)],yL=(e,a)=>a.length?[`### ${e}`,"",...a.map(e=>`- ${e}`),""]:[];function zL(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(...xL(["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(...xL(["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(...xL(["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(...xL(["Token","Sets","Varies with","Figma variable"],e.tokens.map(e=>[`\`${e.name}\``,e.sets,e.variesWith,"—"===e.figma?"—":`\`${e.figma}\``]))),t.push("")),t.push(...yL("Composition",e.composition)),t.push(...yL("Accessibility",e.accessibility)),t.push(...yL("Gotchas",e.gotchas));const i=a;return i.length&&t.push(...i,""),t.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}var wL={};export{Hw as Accordion,Qw as AccordionDetails,Pw as AccordionGroup,Vw as AccordionSummary,mv as Alert,Ik as AlertDialog,Tv as AlertShowcase,ii as AltDisplayLarge,ni as AltDisplayMedium,ri as AltDisplaySmall,RS as AppBar,qS as AppBarShowcase,YS as Autocomplete,_S as AutocompleteShowcase,Lg as Avatar,Ig as AvatarGroup,_v as AvatarShowcase,Og as Badge,hv as BadgeShowcase,mL as BarChart,hy as BevelText,gy as BevelTextShowcase,YT as BlackWhiteToggleButtonGroup,wi as Body,Ci as Body1,Bi as Body2,ki as BodyBold,Ti as BodyLarge,Ai as BodyLargeBold,Mi as BodyLargeSemibold,Si as BodySemibold,xi as BodySmall,zi as BodySmallBold,yi as BodySmallSemibold,sk as BottomNavigation,zk as BottomNavigationShowcase,Rz as Box,Oz as BoxShowcase,Wf as BrandIcon,uw as BreadcrumbItem,hw as Breadcrumbs,fw as BreadcrumbsShowcase,nb as Button,Nw as ButtonGroup,$i as ButtonSmall,Ki as ButtonText,_t as CAP_HEIGHT_TRIM,rL as CHART_LABEL_TYPE,iL as CHART_TOKENS,gL as COLOR_COLLECTIONS,gL as COLOUR_COLLECTIONS,Sg as COMPONENT_DOCS,Li as Caption,Ii as CaptionBold,Iv as Card,mz as CenteredStack,Gv as Checkbox,fb as Chip,Zz as CircularProgress,aw as CircularProgressShowcase,nv as CodeBlock,wA as Colors,qy as Container,iv as CopyButton,tz as Copyright,lz as CopyrightShowcase,_x as CurvedText,cy as CurvedTextShowcase,Cg as DEFAULT_AVATAR_SRC,Qk as DEFAULT_ITEMS,eA as DOCS_ORIGIN,QT as DefaultToggleButtonGroup,WS as DesktopAppBar,Lk as Dialog,Dk as DialogShowcase,ei as DisplayLarge,ai as DisplayMedium,ti as DisplaySmall,Sx as Divider,hC as DotsLoader,TS as Drawer,MS as DrawerClose,LS as DrawerContent,AS as DrawerHeader,Xk as DrawerShowcase,Zk as DropZone,zC as Dropdown,dz as DynoStack,Vk as DynoTreeView,UM as EXAMPLES,iT as EmailTextField,Hy as ErrorTag,$T as ErrorToggleButtonGroup,Ei as Eyebrow,Qi as EyebrowLarge,Vi as EyebrowMedium,Oi as EyebrowSmall,DA as FORM_HELPER_VALIDATIONS,MA as FORM_LABEL_MARKERS,xA as FOUNDATIONS,hx as Fab,vx as FabShowcase,PA as FieldGroup,Sz as Footer,Wz as FooterShowcase,Nk as FormDialog,FA as FormHelper,AA as FormLabel,Lt as Ghost,zy as Gradient,Ty as Grid,vz as GridStack,oi as H1,li as H2,si as H3,ci as H4,di as H5,hi as H6,hz as HStack,ui as Heading,NA as INPUT_MESSAGE_TYPES,Ff as Icon,eC as IconBadge,TA as IconBadgeShowcase,cx as IconShowcase,Ry as InfoTag,XT as InfoToggleButtonGroup,WA as InputMessage,yz as InsetStack,Ri as Label,Wi as LabelExtraSmall,Fi as LabelLarge,Di as LabelSmall,Pi as Legal,Hi as LegalSemibold,qk as LightTreeView,pL as LineChart,wy as LinearGradient,cC as LinearLoader,Qz as LinearProgress,Yz as LinearProgressShowcase,mn as Link,oC as List,rC as ListItem,nC as ListItemDecorator,sC as Loader,LA as MESSAGE_ICONS,OA as MainLayout,SC as Menu,wC as MenuButton,CC as MenuDivider,kC as MenuItem,LC as MenuShowcase,Cy as MeshCardGradient,ky as MeshGradient,By as MiniSwatch,DS as MobileAppBar,Ni as MobileNavLabel,FC as Modal,Dy as NeutralTag,UT as NeutralToggleButtonGroup,nz as NumberField,ow as NumberFieldShowcase,Ji as NumberLarge,Xi as NumberMedium,Yi as NumberSmall,oT as NumberTextField,xS as OmniDesignProvider,dz as OmniStack,Vk as OmniTreeView,pC as OverlayLoader,qi as Overline,Ui as OverlineLarge,Gi as OverlineMedium,ji as OverlineSmall,uC as PageLoader,bw as Pagination,ww as PaginationShowcase,PC as Paper,nT as PasswordTextField,lT as PhoneTextField,fL as PieChart,ZC as Player,HC as Popover,Iy as PrimaryTag,jT as PrimaryToggleButtonGroup,$C as RATIO_NAMES,Sy as RadialGradient,Px as Radio,Hx as RadioGroup,Ox as RadioInput,jC as Rail,XC as RailShowcase,qx as RangeSlider,cw as Rating,cw as RatingInput,aB as Ratio,sB as RatioShowcase,gz as ResponsiveStack,zz as ScrollStack,rS as SearchField,mB as SearchFieldShowcase,rT as SearchTextField,Ny as SecondaryTag,qT as SecondaryToggleButtonGroup,Gy as Section,Uy as SectionShowcase,eg as Select,yB as SelectShowcase,Wv as SelectableCard,jA as SettingsPanel,kB as Sidebar,mC as SkeletonCard,dC as SkeletonLoader,jx as Slider,jx as SliderInput,TB as Snackbar,WB as SnackbarShowcase,jk as SolidTreeView,pz as SpaceBetweenStack,SA as Spacing,Xy as SpeedDial,ez as SpeedDialShowcase,bz as Stack,xz as StackDivider,Xw as StackShowcase,FB as StateMessage,QB as Step,VB as Stepper,XB as StepperShowcase,pi as Subtitle,bi as Subtitle1,vi as Subtitle2,mi as SubtitleLarge,gi as SubtitleMedium,fi as SubtitleSmall,Fy as SuccessTag,JT as SuccessToggleButtonGroup,wS as Surfaced,KB as Swatch,yv as Switch,yv as SwitchInput,My as TAG_COLORS,Ay as TAG_COLOR_TOKEN_MAP,Ab as Tab,Mb as TabList,Lb as TabPanel,aT as Table,Tb as Tabs,Mw as TabsShowcase,Ly as Tag,jy as TagShowcase,Wy as TertiaryTag,GT as TertiaryToggleButtonGroup,cT as TextArea,HA as TextAreaField,tT as TextField,dT as TextFieldGroup,Nx as TextInput,zS as ThemedZone,_T as ToggleButton,ET as ToggleButtonGroup,mT as Toolbar,bT as ToolbarShowcase,wT as Tooltip,CT as TreeBranch,FT as TreeViewShowcase,Kt as Typography,sT as URLTextField,uz as VStack,Py as WarningTag,ZT as WarningToggleButtonGroup,fz as WrapStack,tL as chartGeometry,iA as componentDocsIndexUrl,tA as componentDocsUrl,wL as default,aA as docsSlug,JC as formatTime,At as ghostBlockSx,YM as hasExample,bL as renderColorSystem,bL as renderColourSystem,zL as renderComponentDoc,yA as renderFoundations,RA as useFormHelperIds,Mt as useGhost,yS as useOmniDesign,EB as useStepperContext,Bb as useTabsContext};
19
+ */function Kb(){if(Ob)return Hb;Ob=1;var e=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable;return Hb=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 i={};return"abcdefghijklmnopqrst".split("").forEach(function(e){i[e]=e}),"abcdefghijklmnopqrst"===Object.keys(Object.assign({},i)).join("")}catch(e){return!1}}()?Object.assign:function(i,n){for(var r,o,l=function(e){if(null==e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}(i),s=1;s<arguments.length;s++){for(var c in r=Object(arguments[s]))a.call(r,c)&&(l[c]=r[c]);if(e){o=e(r);for(var d=0;d<o.length;d++)t.call(r,o[d])&&(l[o[d]]=r[o[d]])}}return l},Hb}function _b(){if(Vb)return Eb;Vb=1;return Eb="SECRET_DO_NOT_PASS_THIS_OR_YOU_WILL_BE_FIRED"}function ev(){return jb?Qb:(jb=1,Qb=Function.call.bind(Object.prototype.hasOwnProperty))}if("production"!==process.env.NODE_ENV){var av=$b();Wb.exports=function(){if(Yb)return Ub;Yb=1;var e=$b(),a=Kb(),t=_b(),i=ev(),n=function(){if(Gb)return qb;Gb=1;var e=function(){};if("production"!==process.env.NODE_ENV){var a=_b(),t={},i=ev();e=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}}function n(n,r,o,l,s){if("production"!==process.env.NODE_ENV)for(var c in n)if(i(n,c)){var d;try{if("function"!=typeof n[c]){var h=Error((l||"React class")+": "+o+" type `"+c+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+typeof n[c]+"`.This often happens because of typos such as `PropTypes.function` instead of `PropTypes.func`.");throw h.name="Invariant Violation",h}d=n[c](r,c,l,o,null,a)}catch(e){d=e}if(!d||d instanceof Error||e((l||"React class")+": type specification of "+o+" `"+c+"` 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 u=s?s():"";e("Failed "+o+" type: "+d.message+(null!=u?u:""))}}}return n.resetWarningCache=function(){"production"!==process.env.NODE_ENV&&(t={})},qb=n}(),r=function(){};function o(){return null}return"production"!==process.env.NODE_ENV&&(r=function(e){var a="Warning: "+e;"undefined"!=typeof console&&console.error(a);try{throw new Error(a)}catch(e){}}),Ub=function(l,s){var c="function"==typeof Symbol&&Symbol.iterator,d="<<anonymous>>",h={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,i,n,r,o){if("function"!=typeof e)return new m("Property `"+o+"` of component `"+n+"` has invalid PropType notation inside arrayOf.");var l=a[i];if(!Array.isArray(l))return new m("Invalid "+r+" `"+o+"` of type `"+v(l)+"` supplied to `"+n+"`, expected an array.");for(var s=0;s<l.length;s++){var c=e(l,s,n,r,o+"["+s+"]",t);if(c instanceof Error)return c}return null})},element:p(function(e,a,t,i,n){var r=e[a];return l(r)?null:new m("Invalid "+i+" `"+n+"` of type `"+v(r)+"` supplied to `"+t+"`, expected a single ReactElement.")}),elementType:p(function(a,t,i,n,r){var o=a[t];return e.isValidElementType(o)?null:new m("Invalid "+n+" `"+r+"` of type `"+v(o)+"` supplied to `"+i+"`, expected a single ReactElement type.")}),instanceOf:function(e){return p(function(a,t,i,n,r){if(!(a[t]instanceof e)){var o=e.name||d;return new m("Invalid "+n+" `"+r+"` of type `"+((l=a[t]).constructor&&l.constructor.name?l.constructor.name:d)+"` supplied to `"+i+"`, expected instance of `"+o+"`.")}var l;return null})},node:p(function(e,a,t,i,n){return b(e[a])?null:new m("Invalid "+i+" `"+n+"` supplied to `"+t+"`, expected a ReactNode.")}),objectOf:function(e){return p(function(a,n,r,o,l){if("function"!=typeof e)return new m("Property `"+l+"` of component `"+r+"` has invalid PropType notation inside objectOf.");var s=a[n],c=v(s);if("object"!==c)return new m("Invalid "+o+" `"+l+"` of type `"+c+"` supplied to `"+r+"`, expected an object.");for(var d in s)if(i(s,d)){var h=e(s,d,r,o,l+"."+d,t);if(h instanceof Error)return h}return null})},oneOf:function(e){return Array.isArray(e)?p(function(a,t,i,n,r){for(var o=a[t],l=0;l<e.length;l++)if(u(o,e[l]))return null;var s=JSON.stringify(e,function(e,a){return"symbol"===x(a)?String(a):a});return new m("Invalid "+n+" `"+r+"` of value `"+String(o)+"` supplied to `"+i+"`, expected one of "+s+".")}):("production"!==process.env.NODE_ENV&&r(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&&r("Invalid argument supplied to oneOfType, expected an instance of array."),o;for(var a=0;a<e.length;a++){var n=e[a];if("function"!=typeof n)return r("Invalid argument supplied to oneOfType. Expected an array of check functions, but received "+y(n)+" at index "+a+"."),o}return p(function(a,n,r,o,l){for(var s=[],c=0;c<e.length;c++){var d=(0,e[c])(a,n,r,o,l,t);if(null==d)return null;d.data&&i(d.data,"expectedType")&&s.push(d.data.expectedType)}return new m("Invalid "+o+" `"+l+"` supplied to `"+r+"`"+(s.length>0?", expected one of type ["+s.join(", ")+"]":"")+".")})},shape:function(e){return p(function(a,i,n,r,o){var l=a[i],s=v(l);if("object"!==s)return new m("Invalid "+r+" `"+o+"` of type `"+s+"` supplied to `"+n+"`, expected `object`.");for(var c in e){var d=e[c];if("function"!=typeof d)return g(n,r,o,c,x(d));var h=d(l,c,n,r,o+"."+c,t);if(h)return h}return null})},exact:function(e){return p(function(n,r,o,l,s){var c=n[r],d=v(c);if("object"!==d)return new m("Invalid "+l+" `"+s+"` of type `"+d+"` supplied to `"+o+"`, expected `object`.");var h=a({},n[r],e);for(var u in h){var p=e[u];if(i(e,u)&&"function"!=typeof p)return g(o,l,s,u,x(p));if(!p)return new m("Invalid "+l+" `"+s+"` key `"+u+"` supplied to `"+o+"`.\nBad object: "+JSON.stringify(n[r],null," ")+"\nValid keys: "+JSON.stringify(Object.keys(e),null," "));var f=p(c,u,o,l,s+"."+u,t);if(f)return f}return null})}};function u(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={},i=0;function n(n,o,l,c,h,u,p){if(c=c||d,u=u||l,p!==t){if(s){var f=new Error("Calling PropTypes validators directly is not supported by the `prop-types` package. Use `PropTypes.checkPropTypes()` to call them. Read more at http://fb.me/use-check-prop-types");throw f.name="Invariant Violation",f}if("production"!==process.env.NODE_ENV&&"undefined"!=typeof console){var g=c+":"+l;!a[g]&&i<3&&(r("You are manually calling a React.PropTypes validation function for the `"+u+"` prop on `"+c+"`. 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,i++)}}return null==o[l]?n?null===o[l]?new m("The "+h+" `"+u+"` is marked as required in `"+c+"`, but its value is `null`."):new m("The "+h+" `"+u+"` is marked as required in `"+c+"`, but its value is `undefined`."):null:e(o,l,c,h,u)}var o=n.bind(null,!1);return o.isRequired=n.bind(null,!0),o}function f(e){return p(function(a,t,i,n,r,o){var l=a[t];return v(l)!==e?new m("Invalid "+n+" `"+r+"` of type `"+x(l)+"` supplied to `"+i+"`, expected `"+e+"`.",{expectedType:e}):null})}function g(e,a,t,i,n){return new m((e||"React class")+": "+a+" type `"+t+"."+i+"` is invalid; it must be a function, usually from the `prop-types` package, but received `"+n+"`.")}function b(e){switch(typeof e){case"number":case"string":case"undefined":return!0;case"boolean":return!e;case"object":if(Array.isArray(e))return e.every(b);if(null===e||l(e))return!0;var a=function(e){var a=e&&(c&&e[c]||e["@@iterator"]);if("function"==typeof a)return a}(e);if(!a)return!1;var t,i=a.call(e);if(a!==e.entries){for(;!(t=i.next()).done;)if(!b(t.value))return!1}else for(;!(t=i.next()).done;){var n=t.value;if(n&&!b(n[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,h.checkPropTypes=n,h.resetWarningCache=n.resetWarningCache,h.PropTypes=h,h},Ub}()(av.isElement,!0)}else Wb.exports=function(){if(Jb)return Xb;Jb=1;var e=_b();function a(){}function t(){}return t.resetWarningCache=a,Xb=function(){function i(a,t,i,n,r,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 n(){return i}i.isRequired=i;var r={array:i,bigint:i,bool:i,func:i,number:i,object:i,string:i,symbol:i,any:i,arrayOf:n,element:i,elementType:i,instanceOf:n,node:i,objectOf:n,oneOf:n,oneOfType:n,shape:n,exact:n,checkPropTypes:t,resetWarningCache:a};return r.PropTypes=r,r}}()();var tv=Ib(Wb.exports);function iv({code:e,label:t="Copy code"}){const[i,n]=a(!1);return le(x,{title:i?"Copied!":t,children:le(ob,{variant:"ghost",size:"small",onClick:async()=>{try{await navigator.clipboard.writeText(e),n(!0),setTimeout(()=>n(!1),2e3)}catch(e){console.error("Copy failed:",e)}},"aria-label":i?"Copied":t,sx:{color:i?"var(--Icons-Success, var(--Text))":"var(--Quiet)"},children:le(i?ue:pe,{fontSize:"small"})})})}iv.propTypes={code:tv.string.isRequired,label:tv.string};function nv({code:e="",language:a="JSX",showCopy:t=!0,showHeader:i=!0,maxHeight:n,wrap:r=!1,sx:o={},...l}){const s=i&&t&&!!e,c=!i&&t&&!!e;return ce(u,{"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:[i&&(a||t)&&ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",gap:1,px:2,py:1,borderBottom:"1px solid var(--Border)",minHeight:40},children:[le(Li,{color:"quiet",children:a}),s?le(iv,{code:e}):null]}),ce(u,{sx:{display:"flex",alignItems:"flex-start",gap:1,p:2},children:[le(u,{component:"pre",sx:{margin:0,fontFamily:"inherit",flex:1,minWidth:0,overflow:"auto",maxHeight:n},children:le(u,{component:"code",sx:{fontFamily:"ui-monospace, SFMono-Regular, Menlo, Consolas, monospace",fontSize:"13px",lineHeight:1.6,color:"var(--Text)",whiteSpace:r?"pre-wrap":"pre",wordBreak:r?"break-word":"normal",display:"block"},children:e})}),c?le(iv,{code:e}):null]})]})}nv.propTypes={code:tv.string,language:tv.string,showCopy:tv.bool,showHeader:tv.bool,maxHeight:tv.oneOfType([tv.number,tv.string]),wrap:tv.bool,sx:tv.object};const rv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ov=["primary","secondary","tertiary","neutral","info","success","warning","error"];function lv({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function sv({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(lv,{ratio:a,threshold:t})]})}function cv({color:e,selected:a,onClick:t}){const i=rv(e);return le(x,{title:i,arrow:!0,children:le(u,{onClick:()=>t(e),role:"button","aria-label":"Select "+i+" color","aria-pressed":a,sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+i+"-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(ue,{sx:{fontSize:24,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})})}function dv({label:e,selected:a,onClick:t}){return le(u,{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 hv(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a("solid"),[s,c]=a("primary"),[d,h]=a("5"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a({}),k=()=>"solid"===o?s:s+"-"+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=rv(s),a={};"solid"===o?(a.badgeBg=nn("--Icons-"+e),a.badgeText=nn("--Icons-On-"+e),a.badgeBorder=null):"outline"===o&&(a.badgeBg=nn("--Background"),a.badgeText=nn("--Text"),a.badgeBorder=nn("--Buttons-"+e+"-Border")),a.background=nn("--Background"),a.focusVisible=nn("--Focus-Visible"),x(a)},[o,s]),ce(u,{sx:{width:"100%"},children:[le(xA,{title:"Badge",component:"Badge"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),le(wi,{color:"quiet",style:{marginBottom:24},children:"Small label attached to an element showing status or count. Solid and outline variants across all 8 colors."}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Badge",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{minHeight:400},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[le(u,{sx:{p:4,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",minHeight:200,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)"},children:ce(m,{direction:"row",spacing:6,alignItems:"center",children:[le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(xe,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ye,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})}),le(Og,{variant:k(),badgeContent:C(),dot:p,showZero:g,children:le(ze,{sx:{fontSize:32,color:"var(--Text-Quiet)"}})})]})}),le(nv,{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)"}})]}),ce(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(ci,{children:"Playground"}),ce(u,{sx:{mt:3},children:[le(Oi,{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(dv,{label:rv(e),selected:o===e,onClick:()=>l(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:ov.map(e=>le(cv,{color:e,selected:s===e,onClick:c},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Counter 16px · Dot 8px · Padding 4px · Digits 11px"})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BADGE CONTENT"}),le(z,{size:"small",value:d,onChange:e=>h(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"}}})]}),ce(u,{sx:{mt:3},children:[le(w,{control:le(S,{checked:p,onChange:e=>f(e.target.checked),size:"small"}),label:le(xi,{children:"Dot (no content)"})}),le(w,{control:le(S,{checked:g,onChange:e=>b(e.target.checked),size:"small"}),label:le(xi,{children:"Show zero"})})]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:4},children:[le(ci,{children:"Accessibility Requirements"}),ce(xi,{color:"quiet",style:{marginBottom:32},children:["Based on current Playground settings: ",o," · ",s]}),ce(m,{spacing:4,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Text Contrast"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Badge text must have ≥ 4.5:1 contrast against badge background (WCAG 1.4.3 AA)"}),le(sv,{label:"Badge Text vs. Badge Background",ratio:tn(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)"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Visibility"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Badge background (or border) must have ≥ 3:1 contrast against page background (WCAG 1.4.11)"}),(()=>{const e=tn(v.badgeBg,v.background),a=v.badgeBorder?tn(v.badgeBorder,v.background):null;return le(sv,{label:"Badge vs. Page Background",ratio:(t=e,i=a,t||i?t?i?parseFloat(t)>=parseFloat(i)?t:i:t:i:null),threshold:3.1,note:"outline"===o?"Border "+(a||"--")+":1 — outline relies on border contrast":"BG "+(e||"--")+":1"});var t,i})()]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Badge Sizing"}),le(xi,{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(u,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ce(u,{children:[le(xi,{children:"Counter"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"16px height · 4px side padding · 11px digits · pill shape"})]})}),le(u,{sx:{display:"flex",justifyContent:"space-between",py:1.5,borderBottom:"1px solid var(--Border)"},children:ce(u,{children:[le(xi,{children:"Status dot"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"8px diameter circle"})]})})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA & Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Screenreader support:"}),le(Li,{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").'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Dot variant:"}),le(Li,{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."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{display:"block",marginBottom:2},children:"Max overflow:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:'When content exceeds max (default 99), displays "99+" visually but announces the actual number to screenreaders.'})]})]})]})]})]})]}),le(Lb,{value:3,children:le(fA,{component:"Badge"})})]})]})}const uv={small:{pad:"12px",fontSize:"13px",iconSize:"18px",gap:"8px",text:"body-small",title:"body-small-semibold"},medium:{pad:"var(--Sizing-2, 16px)",fontSize:"14px",iconSize:"20px",gap:"10px",text:"body",title:"body-semibold"},large:{pad:"20px",fontSize:"16px",iconSize:"22px",gap:"12px",text:"body-large",title:"body-large-semibold"}},mv="var(--Sizing-1, 8px)";function pv({children:e,title:a,variant:t="light",surface:i,color:n="info",size:r="medium",startDecorator:o,endDecorator:l,className:s="",sx:c={},...d}){const h=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===n?"Default":n),m=uv[r]||uv.medium,p="default"===n?"Default":h,f=i||("light"===t?"Surface-Brightest":"Surface"),g="var(--Buttons-"+h+"-Border)",b=(e,a)=>"string"==typeof e?le(Kt,{textStyle:m.text,color:"inherit",className:a,children:e}):e,v=o&&le(u,{className:"alert-start-decorator",sx:{display:"inline-flex",alignItems:"center",fontSize:m.iconSize,lineHeight:1,flexShrink:0,...a?{}:{mt:"2px"}},children:o}),x=l&&le(u,{className:"alert-end-decorator",sx:{display:"inline-flex",alignItems:a?"center":"flex-start",flexShrink:0,gap:m.gap,...a?{}:{paddingTop:"2px"}},children:l}),y=ce(se,a?{children:[ce(u,{className:"alert-header",sx:{display:"flex",alignItems:"center",gap:m.gap},children:[v,le(u,{className:"alert-title",sx:{flex:1,minWidth:0},children:"string"==typeof a?le(Kt,{textStyle:m.title,color:"inherit",children:a}):a}),x]}),null!=e&&le(u,{className:"alert-message",children:b(e)})]}:{children:[v,le(u,{className:"alert-message",sx:{flex:1,minWidth:0},children:b(e)}),x]});return le(u,{role:"alert",className:"alert alert-"+t+" alert-"+r+" alert-"+n+" "+s,sx:{border:"1px solid "+g,borderRadius:mv,overflow:"hidden",boxShadow:Vf,...c},...d,children:le(u,{"data-theme":p,"data-surface":f,className:"alert-inner",sx:{display:"flex",flexDirection:a?"column":"row",alignItems:a?"stretch":"flex-start",gap:m.gap,padding:m.pad,fontSize:m.fontSize,fontFamily:"inherit",lineHeight:1.5,color:"var(--Text-Match, var(--Text))",backgroundColor:"color-mix(in srgb, var(--Background) 75.3%, transparent)",borderRadius:"calc("+mv+" - 1px)"},children:y})})}const fv=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];function gv(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 bv=/-light$/,vv=new Set;const xv={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 yv({variant:e="default",size:a="medium",checked:t,defaultChecked:i,onChange:n,disabled:r=!1,label:o,labelPlacement:l="end",name:s,value:c,icon:d,iconOn:h,iconOff:u,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=function(){const e={};return fv.forEach(a=>{e[a]=gv(a),e[a+"-outline"]=gv(a)}),e.default={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e["default-outline"]={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e.outline={type:"themed",trackOff:"var(--Background)",trackOffBorder:"var(--Quiet)",trackOn:"var(--Icons-Primary)",trackOnBorder:"var(--Icons-Primary)",dotOff:"var(--Quiet)",dotOn:"var(--Icons-On-Primary)",iconOff:"var(--Background)",iconOn:"var(--Icons-Primary)"},e}(),x=function(e){const a=String(e||"default");if("light"!==a&&!bv.test(a))return a;const t="light"===a?"primary":a.replace(bv,"");return"production"===process.env.NODE_ENV||vv.has(a)||(vv.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=xv[a]||xv.medium,S="small"===a?xi:wi,C=z.handle,B=Math.max(24,z.trackW),T=Math.max(24,z.trackH),M=(T-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:T,minHeight:24,padding:0,overflow:"visible",opacity:r?"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:Qf},"&:active + .MuiSwitch-track":{boxShadow:Vf},"&.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:M,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!==u?u:d,N=void 0!==h?h: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:i,onChange:n,disabled:r,name:s,value:c,slotProps:{input:{...f?{"aria-label":f}:{},...g?{"aria-labelledby":g}:{}}},className:"switch-"+x+" "+m,sx:L,disableRipple:!0,...b});return o?le(w,{control:D,label:le(S,{component:"span",sx:{color:r?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===a?"13px":"15px",fontWeight:500,opacity:r?"var(--Disabled, 0.38)":1},children:o}),labelPlacement:l,sx:{gap:"8px",marginLeft:0,marginRight:0}}):D}const zv=yv,wv=e.forwardRef(function({theme:e=null,surface:a="Surface",children:t,minHeight:i=160,sx:n={}},r){return le(u,{ref:r,"data-theme":e||void 0,"data-surface":a,sx:{p:4,display:"flex",alignItems:"center",justifyContent:"center",minHeight:i,backgroundColor:"var(--Background)",borderBottom:"1px solid var(--Border)",...n},children:t})}),Sv=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",kv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Cv={info:le(we,{}),success:le(Se,{}),warning:le(ke,{}),error:le(Ce,{})};function Bv({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Tv({color:e,selected:a,onClick:t}){const i=Sv(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Mv(){const[e,t]=a("light"),[i,n]=a("info"),[r,o]=a("medium"),[l,s]=a(!0),[c,d]=a("Default"),[h,p]=a("Surface"),f=l&&Cv[i]?le(Ff,{size:"small",sx:{color:"inherit"},children:Cv[i]}):void 0;return ce(u,{sx:{pb:8},children:[le(xA,{title:"Alert",component:"Alert"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Alert",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:480},children:le(pv,{variant:e,color:i,size:r,startDecorator:f,children:"This is an alert message. Check the details for more information."})})}),le(nv,{code:(()=>{const a=['variant="'+e+'"'];return"info"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),l&&Cv[i]&&a.push("startDecorator={<Icon><"+Sv(i)+"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(Bv,{label:Sv(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:kv.map(e=>ce(u,{children:[le(Li,{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(Tv,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Bv,{label:Sv(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(yv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Show icon"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Alert"})})]})]})}const Av={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Lv={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)"}},Iv=l({variant:"default",color:"primary",size:"medium",orientation:"vertical"});function Nv({children:e,variant:a="solid",color:t="default",surface:i,size:n="medium",orientation:r="vertical",clickable:o=!1,selected:l=!1,elevated:s=!1,draggable:c=!1,onClick:d,disabled:h=!1,href:m,className:p="",sx:f={},...g}){const b="default"===t,v=b?"":Av[t],x=i||(b?"Container":"dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface"),y=Lv[n]||Lv.medium,z="horizontal"===r,w=!!c,S=!h&&(o||!!d||!!m||l||w),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=S?l?`2px solid ${C}`:"1px solid var(--Buttons-Default-Border)":"1px solid var(--Border-Variant)",T=s?Qf:Vf,M=s?jf:Qf,A=s?Vf:Ef;return le(Iv.Provider,{value:{variant:a,color:t,size:n,orientation:r},children:le(u,{component:k,href:m||void 0,onClick:S?d:void 0,role:S?"button":void 0,tabIndex:S?0:void 0,"aria-pressed":!!l||void 0,"aria-disabled":h||void 0,draggable:w||void 0,className:"card card-"+a+" card-"+n+" card-"+r+(S?" card-clickable":"")+(l?" card-selected":"")+(s?" card-elevated":"")+(w?" card-draggable":"")+" "+p,sx:{display:"flex",border:B,borderRadius:"var(--Card-Radius)",boxShadow:T,overflow:"hidden",textDecoration:"none",transition:"box-shadow 0.2s ease, border-color 0.2s ease, transform 0.1s ease",...h&&{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...S&&!w&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M,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)"}},...w&&{cursor:"grab","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M},"&:active":{cursor:"grabbing",zIndex:10,boxShadow:jf,transform:"scale(1.02)",borderWidth:"2px",borderColor:"var(--Buttons-Primary-Border)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...f},onKeyDown:S?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),d?.())}:void 0,...g,children:le(u,{"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 Wv({children:e,className:a="",sx:t={},...i}){const{size:n}=s(Iv);return le(u,{className:"card-content "+a,sx:{display:"flex",flexDirection:"column",gap:(Lv[n]||Lv.medium).gap,flex:1,minWidth:0,...t},...i,children:e})}const Dv=e=>le(Nv,{clickable:!0,selected:e.selected,...e}),Rv=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Fv=e=>"Default"===e?"var(--Quiet)":"var(--Buttons-"+e+"-Border)";function Pv(){const e={};return Rv.forEach(a=>{e[a]=function(e){const a=Xf(e);return{color:a,borderToken:Fv(a),icon:"var(--Buttons-"+a+"-Border)"}}(a)}),e}const Hv=/-(outline|light|solid)$/,Ov=new Set;function Ev(e){const a=Pv();return a[function(e){const a=String(e||"default");if(!Hv.test(a))return a;const t=a.replace(Hv,"");return"production"===process.env.NODE_ENV||Ov.has(a)||(Ov.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 Vv={small:{box:16,icon:12,gap:4,touchTarget:24,LabelComp:xi},medium:{box:20,icon:14,gap:8,touchTarget:24,LabelComp:wi},large:{box:24,icon:18,gap:12,touchTarget:24,LabelComp:Ti}};function Qv({size:e,variant:a,checked:t,indeterminate:i}){const n=Ev(a),r=Vv[e]||Vv.medium,o=t||i,l=n.borderToken,s="small"===e?"var(--Sm-Checkbox-Radius, 3.2px)":"large"===e?"var(--Lg-Checkbox-Radius, 4.8px)":"var(--Checkbox-Radius, 4px)";return le(u,{className:"chk-box-icon",sx:{width:r.box,height:r.box,boxSizing:"border-box",borderRadius:s,border:"2px solid "+l,overflow:"hidden",flexShrink:0,transition:"border-color 0.15s ease-in-out"},children:le(u,{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(i?Be:ue,{sx:{fontSize:r.icon,color:n.icon}})})})}function jv({size:e,variant:a}){return le(Qv,{size:e,variant:a,checked:!1,indeterminate:!1})}function qv({size:e,variant:a}){return le(Qv,{size:e,variant:a,checked:!0,indeterminate:!1})}function Gv({size:e,variant:a}){return le(Qv,{size:e,variant:a,checked:!1,indeterminate:!0})}function Uv({variant:e="primary",size:a="medium",label:t,checked:i,defaultChecked:n,indeterminate:r=!1,disabled:o=!1,onChange:l,name:s,value:c,className:d="",sx:h={},"aria-label":u,"aria-labelledby":m,"aria-describedby":p,inputProps:f={},...g}){Ev(e);const b=Vv[a]||Vv.medium,v=b.LabelComp,x={...f,...u&&{"aria-label":u},...m&&{"aria-labelledby":m},...p&&{"aria-describedby":p}},y=le(S,{checked:i,defaultChecked:n,indeterminate:r,disabled:o,onChange:l,name:s,value:c,icon:le(jv,{size:a,variant:e}),checkedIcon:le(qv,{size:a,variant:e}),indeterminateIcon:le(Gv,{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"},...h},...g});return t?le(w,{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 Yv=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]}],Xv=["photo","icon","initials"],Jv={photo:"Photo",icon:"Icon",initials:"Initials"},Zv=["xx-small","x-small","small","medium","large","x-large","xx-large"],$v={"xx-small":"XXS","x-small":"XS",small:"Small",medium:"Medium",large:"Large","x-large":"XL","xx-large":"XXL"};function Kv({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _v({color:e,selected:a,onClick:t}){const i=(n=e)?n.charAt(0).toUpperCase()+n.slice(1):"";var n;return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function ex(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a("initials"),[l,s]=a(!1),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface"),x="photo"===r,z=()=>{const a={size:i,clickable:l,insideButton:c};return x||(a.color=e),"initials"===r&&(a.initials="LN"),"photo"===r&&(a.src="https://i.pravatar.cc/150?img=3",a.alt="User avatar"),a};return ce(u,{sx:{pb:8},children:[le(xA,{title:"Avatar",component:"Avatar"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Avatar",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:f,surface:b,children:h?ce(Ig,{max:3,size:i,children:[le(Lg,{...z()}),le(Lg,{color:e,size:i,initials:"AB"}),le(Lg,{color:e,size:i,initials:"CD"}),le(Lg,{color:e,size:i,initials:"EF"})]}):le(Lg,{...z()})}),le(nv,{code:(()=>{const a=[];return x||"default"===e||a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),"initials"===r&&a.push('initials="LN"'),"photo"===r&&a.push('src="..." alt="User avatar"'),l&&a.push("clickable onClick={handleClick}"),c&&a.push("insideButton"),h?"<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:ce(u,{sx:{p:3},children:[ce(u,{sx:{opacity:x?.4:1,pointerEvents:x?"none":"auto"},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Yv.map(a=>ce(u,{children:[le(Li,{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(_v,{color:a,selected:e===a,onClick:t},a))})]},a.label))}),x&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:"Color is ignored when the avatar shows a photo — the image carries the visual."})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:Zv.map(e=>le(Kv,{label:$v[e],selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CONTENT"}),le(m,{direction:"row",spacing:1,children:Xv.map(e=>le(Kv,{label:Jv[e],selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Interactive with hover/focus states"})]}),le(yv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clickable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Inside Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds 2px horizontal margin so the avatar sits cleanly in a Button"})]}),le(yv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Inside Button"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Group"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show as AvatarGroup with overflow"})]}),le(yv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show group"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Avatar"})})]})]})}const ax=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",tx={default:"Default",quiet:"Quiet",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ix=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],nx=["filled","outlined","rounded","twotone","sharp"],rx={filled:"Filled",outlined:"Outlined",rounded:"Rounded",twotone:"Two Tone",sharp:"Sharp"},ox={Home:{filled:Me,outlined:Pe,rounded:Ye,twotone:ra,sharp:ba},Favorite:{filled:Te,outlined:He,rounded:Xe,twotone:oa,sharp:va},Delete:{filled:Ae,outlined:Oe,rounded:Je,twotone:la,sharp:xa},Settings:{filled:Le,outlined:Ee,rounded:Ze,twotone:sa,sharp:ya},Search:{filled:Ie,outlined:Ie,rounded:$e,twotone:ca,sharp:za},Star:{filled:Ne,outlined:Ve,rounded:Ke,twotone:da,sharp:wa},Person:{filled:We,outlined:Qe,rounded:_e,twotone:ha,sharp:Sa},Notifications:{filled:ye,outlined:je,rounded:ea,twotone:ua,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:ia,twotone:fa,sharp:Ta},Info:{filled:Fe,outlined:we,rounded:na,twotone:ga,sharp:Ma}};function lx({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function sx({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(lx,{ratio:a,threshold:t})]})}function cx({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function dx(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a("filled"),[s,c]=a("default"),[d,h]=a("medium"),[p,f]=a("40"),[g,b]=a(!1),[v,x]=a("Home"),[z,w]=a(""),[S,k]=a({}),C=tx[s]||"Default",B="twotone"===o,T="custom"===d?(parseInt(p,10)||40)+"px":{xs:"12px",small:"16px",medium:"24px",large:"36px"}[d]||"24px",M=function(e,a){return ox[e]?.[a]||ox[e]?.filled||Me}(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:nn("--Background"),iconColor:nn("--Icons-"+C),iconVariant:nn("--Icons-Variant-"+C)})},[s,C]),ce(u,{sx:{pb:8},children:[le(xA,{title:"Icon",component:"Icon"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Icon",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(u,{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(Ff,{color:s,size:d,fontSize:"custom"===d?parseInt(p,10)||40:void 0,disabled:g,twoTone:B,"aria-label":I?z.trim():void 0,children:le(M,{})})}),le(nv,{code:(()=>{const e=[];"default"!==s&&e.push('color="'+s+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ICON"}),le(u,{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)"}}}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Enter a MUI icon name."," ",le(u,{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 ↗"})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:nx.map(e=>le(cx,{label:rx[e],selected:o===e,onClick:()=>l(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ix.map(e=>ce(u,{children:[le(Li,{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=tx[e],t=s===e;return le(u,{component:"button",onClick:()=>c(e),"aria-label":"Select "+ax(e),"aria-pressed":t,title:ax(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(ue,{sx:{fontSize:16,color:"var(--Background)",pointerEvents:"none"}})},e)})})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(cx,{label:ax(e),selected:d===e,onClick:()=>h(e)},e))}),"custom"===d&&ce(u,{sx:{display:"flex",alignItems:"center",gap:1,mt:1.5},children:[le(u,{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(Li,{style:{color:"var(--Text-Quiet)"},children:"px"})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ARIA LABEL"}),le(u,{component:"input",type:"text",value:z,onChange:e=>w(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(Li,{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)'})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Reduces opacity to 0.38"})]}),le(yv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Toggle disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:[rx[o]," / ",ax(s)," / ","custom"===d?p+"px":d,I?" / meaningful":" / decorative"]}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Icon Contrast (WCAG 1.4.11 — 3:1)"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Non-text elements must contrast 3:1 against the page background."}),le(sx,{label:"var(--Icons-"+C+") vs. var(--Background)",ratio:tn(S.iconColor,S.background),threshold:3,note:L+" at "+T+" in "+ax(s)+" color"}),B&&le(sx,{label:"var(--Icons-Variant-"+C+") vs. var(--Background)",ratio:tn(S.iconVariant,S.background),threshold:3,note:"Two-tone secondary fill — must also meet 3:1"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{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:[ce(xi,{style:{fontWeight:600},children:["Current icon — ",I?"meaningful ✓":"decorative"]}),le(u,{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})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Decorative (no aria-label):"}),le(Li,{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(u,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:N})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Meaningful (with aria-label):"}),le(Li,{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(u,{component:"pre",sx:{fontFamily:"monospace",fontSize:"11px",color:"var(--Text-Quiet)",mt:.5,whiteSpace:"pre-wrap",wordBreak:"break-word",margin:0},children:W})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:["Disabled state",g?" ← current":"",":"]}),le(Li,{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&&ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:["Two-tone",B?" ← current":"",":"]}),ce(Li,{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."]})]}),ce(u,{sx:{py:1.5},children:[ce(xi,{children:["Touch target — ",T," icon","small"===d?" ⚠":" ✓",":"]}),le(Li,{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 "+T+" — meets 24px minimum. Ensure the wrapping interactive element also meets 24×24px."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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:i},n,r)=>ce(u,{sx:{py:1.5,borderBottom:n<r.length-1?"1px solid var(--Border)":"none",display:"flex",justifyContent:"space-between",alignItems:"flex-start"},children:[ce(u,{children:[ce(xi,{children:[e," — ",t]}),le(Li,{style:{color:"var(--Text-Quiet)"},children:i})]}),d===a&&le(u,{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(Lb,{value:3,children:le(fA,{component:"Icon"})})]})]})}const hx={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 ux({children:e,icon:a,label:t,variant:i="solid",color:n="default",size:r="medium",extended:o=!1,animate:l=!1,disabled:s=!1,onClick:c,ariaLabel:d,className:h="",sx:m={},...p}){"production"!==process.env.NODE_ENV&&"solid"!==i&&console.warn('[Fab] variant="'+i+'" 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=Xf("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)"}}(n),g=hx[r]||hx.medium,b=a||e||le(Aa,{sx:{fontSize:g.iconSize}}),v=d||t||"Action";return ce(se,{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"}),ce(u,{component:"button",type:"button",role:"button","aria-label":v,onClick:c,disabled:s,className:"fab fab-solid fab-"+n+" fab-"+r+(o?" fab-extended":"")+(l?" fab-animate":"")+(s?" fab-disabled":"")+(h?" "+h:""),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:`${Zf(n)}, ${jf}`,fontSize:g.fontSize,fontFamily:"inherit",fontWeight:600,cursor:s?"not-allowed":"pointer",opacity:s?"var(--Disabled, 0.38)":1,outline:"none",flexShrink:0,transition:"background-color 0.15s ease, box-shadow 0.2s ease, transform 0.1s ease","&:hover":s?{}:{backgroundColor:f.hover,boxShadow:`${Zf(n)}, ${qf}`},"&:active":s?{}:{backgroundColor:f.active,transform:"scale(0.96)",boxShadow:Zf(n)},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px"},...l&&!s&&{"--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(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",fontSize:g.iconSize+"px",color:"inherit","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}},children:b}),o&&t&&le(u,{component:"span",sx:{whiteSpace:"nowrap",lineHeight:1},children:t})]})]})}const mx=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",px=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],fx={default:"Tertiary",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function gx({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function bx({color:e,selected:a,onClick:t}){const i=fx[e]||"Primary";return le(u,{component:"button",onClick:()=>t(e),"aria-label":"Select "+mx(e),"aria-pressed":a,title:mx(e),sx:{width:"var(--Button-Height)",height:"var(--Button-Height)",borderRadius:"4px",backgroundColor:"var(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function vx({value:e,onChange:a,placeholder:t,label:i}){return ce(u,{children:[i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:4},children:i}),le(u,{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 xx(){const[e,t]=a("default"),[n,r]=a("medium"),[o,l]=a("Add"),[s,c]=a(!1),[d,h]=a("Create"),[p,f]=a(!1),[g,b]=a(!1),[v,x]=a("Default"),[z,w]=a("Surface"),S=e,k=i(null),C={small:32,medium:48,large:56},B=cn(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 ce(u,{sx:{pb:8},children:[le(xA,{title:"Floating Action Button",component:"Fab"}),le(u,{sx:{mt:1},children:le(ig,{theme:v,onThemeChange:x,surface:z,onSurfaceChange:w})}),le(u,{ref:k,...v?{"data-theme":v}:{},"data-surface":z,sx:{position:"absolute",width:0,height:0,overflow:"hidden"},"aria-hidden":"true"}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Fab",theme:v,surface:z})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:v,surface:z,children:le(ux,{color:S,size:n,icon:(()=>{const e=ge[o]||ge.Add;return le(Ff,{size:"medium",children:le(e,{})})})(),extended:s,label:d,animate:p,disabled:g,ariaLabel:s?d:o})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==n&&a.push('size="'+n+'"'),a.push("icon={<"+o+"Icon />}"),s&&(a.push("extended"),a.push('label="'+d+'"')),p&&a.push("animate"),g&&a.push("disabled"),a.push('ariaLabel="'+(s?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:ce(u,{sx:{p:3},children:[le(u,{sx:{mb:3}}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:px.map(a=>ce(u,{children:[le(Li,{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(bx,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(gx,{label:mx(e),selected:n===e,onClick:()=>r(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(vx,{label:"Icon Name",value:o,onChange:l,placeholder:"Add"}),ce(Li,{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)"]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Extended"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pill shape with icon + text label"})]}),le(yv,{checked:s,onChange:e=>c(e.target.checked),size:"small","aria-label":"Extended"})]}),s&&le(u,{sx:{mt:1.5},children:le(vx,{label:"Label Text",value:d,onChange:h,placeholder:"Create"})}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Animation"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Pulse ring effect to draw attention"})]}),le(yv,{checked:p,onChange:e=>f(e.target.checked),size:"small","aria-label":"Animation"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Disabled"})]})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[ce(di,{children:["Contrast — ",e," on ",z,v?" / "+v:""]}),ce(m,{spacing:0,children:[le(ln,{label:"FAB fill vs. page background",note:"Non-text contrast, 3:1 — the FAB has to be findable against what it floats over.",ratio:tn(B.fabBg,B.background),threshold:3}),le(ln,{label:"Icon vs. FAB fill — resting",note:"The glyph carries the meaning, so it is held to text contrast.",ratio:tn(B.fabIcon,B.fabBg),threshold:4.5}),le(ln,{label:"Icon vs. FAB fill — hover",ratio:tn(B.fabIcon,B.hover,B.fabBg),threshold:4.5}),le(ln,{label:"Icon vs. FAB fill — pressed",ratio:tn(B.fabIcon,B.pressed,B.fabBg),threshold:4.5}),le(ln,{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:tn(B.focusVisible,B.background),threshold:3}),le(sn,{label:"Target size",note:"WCAG 2.5.8 asks 24x24 CSS px minimum; 44x44 is the AAA / platform figure.",pass:C[n]>=44,detail:C[n]+"px"})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Role:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<button role="button" aria-label="...">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Label:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:s?"Extended: visible label provides accessible name.":"Icon-only: aria-label is required."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Focus:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) with 2px offset."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Disabled:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"HTML disabled attribute. 50% opacity, removed from tab order."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Best Practices"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"One per screen:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"FABs represent the primary action. Use at most one per view."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Extended for clarity:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Use extended variant when the icon alone may be ambiguous."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Animation:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Use sparingly. Respect prefers-reduced-motion."})]})]})]})]})})]}),le(Lb,{value:3,children:le(fA,{component:"Fab"})})]})]})}const yx=e=>e.charAt(0).toUpperCase()+e.slice(1);function zx(e){return e&&"default"!==e&&"border-variant"!==e?"border"===e?"var(--Border)":"var(--Icons-"+yx(e)+")":"var(--Border-Variant)"}function wx(e,a){const t=e&&!["default","border","border-variant"].includes(e)?yx(e):"Default",i=zx(e);return"light"===a?{bg:"var(--Tag-"+t+"-BG)",text:"var(--Tag-"+t+"-Text)",border:"1px solid "+i}:{bg:"var(--Background)",text:"var(--Text)",border:"1px solid "+i}}const Sx={small:"var(--Sm-Divider, 0.5px)",medium:"var(--Divider, 1px)",large:"var(--Lg-Divider, 2px)"};function kx({color:e="default",orientation:a="horizontal",size:t="small",children:i,indicatorText:n,indicatorStyle:r="outline",textAlign:o="center",className:l="",sx:s={},...c}){const d=zx(e),h=Sx[t]||Sx.small,m=!(!i&&!n),p=i||n,f="vertical"===a;if(f&&!m)return le(u,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" "+l,sx:{display:"inline-block",width:h,alignSelf:"stretch",minHeight:24,backgroundColor:d,flexShrink:0,...s},...c});if(f&&m){const a=wx(e,r),t="top"===o?"0 0 10%":"1 1 auto",i="top"===o?"1 1 auto":"bottom"===o?"0 0 10%":"1 1 auto";return ce(u,{role:"separator","aria-orientation":"vertical",className:"divider-vertical divider-"+e+" divider-indicator "+l,sx:{display:"inline-flex",flexDirection:"column",alignItems:"center",alignSelf:"stretch",minHeight:24,flexShrink:0,...s},...c,children:[le(u,{sx:{flex:t,width:h,backgroundColor:d}}),le(u,{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(u,{sx:{flex:i,width:h,backgroundColor:d}})]})}if(!m)return le(u,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" "+l,sx:{width:"100%",height:h,backgroundColor:d,flexShrink:0,...s},...c});const g=wx(e,r),b="left"===o?"0 0 10%":"1 1 auto",v="left"===o?"1 1 auto":"right"===o?"0 0 10%":"1 1 auto";return ce(u,{role:"separator","aria-orientation":"horizontal",className:"divider-horizontal divider-"+e+" divider-indicator "+l,sx:{display:"flex",alignItems:"center",width:"100%",...s},...c,children:[le(u,{sx:{flex:b,height:h,backgroundColor:d}}),le(u,{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(u,{sx:{flex:v,height:h,backgroundColor:d}})]})}const Cx=["primary","secondary","tertiary","neutral","info","success","warning","error"];function Bx(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 Tx={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}},Mx={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}},Ax={small:{resting:"Body-Small",shrunk:"Label-ExtraSmall"},medium:{resting:"Body-Medium",shrunk:"Label-Small"},large:{resting:"Body-Large",shrunk:"Label-Medium"}},Lx=e=>({fontSize:"var(--"+e+"-Font-Size)",fontWeight:"var(--"+e+"-Font-Weight)",letterSpacing:"var(--"+e+"-Letter-Spacing)"});const Ix={info:we,success:Se,warning:ke,error:Ce},Nx={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 Wx({variant:e="primary-outline",size:a="medium",label:t,labelPosition:i="standard",placeholder:n,helperText:r,validation:l,validationMessage:s,disabled:c=!1,id:d,value:h,defaultValue:m,onChange:p,name:f,type:g="text",multiline:b=!1,rows:v,maxRows:x,resize:y="vertical",startAdornment:w,endAdornment:S,fullWidth:k=!1,className:T="",sx:M={},"aria-label":A,"aria-labelledby":L,"aria-describedby":I,"aria-required":N,"aria-invalid":W,inputProps:D={},...R}){const F=function(){const e={};return Cx.forEach(a=>{e[a+"-outline"]=Bx(a)}),e.outline=Bx("primary"),e}(),P=F[e]||F["primary-outline"],H="floating"===i;"production"!==process.env.NODE_ENV&&/-light$|^light$/.test(e)&&console.warn('[Input] variant="'+e+'" was removed. It differed from "'+e.replace(/-?light$/,"")+'-outline" only by a token no design system publishes, so the two rendered identically. For a lighter field use data-surface="Surface-Brightest" on its container.');const O=H?Mx[a]||Mx.medium:Tx[a]||Tx.medium,E=o(),V=d||E,{labelX:Q,padX:j,restingY:q,shrunkY:G}=function(e,a){const t=parseInt(e.height,10)||56,i=parseInt(e.fontSize,10)||15,n="var(--Input-Padding, "+(e.leftPad||14)+"px)",r=(e.iconSize||18)+8;return{labelX:a?"calc("+n+" + "+r+"px)":n,padX:n,clearance:a?r:0,restingY:Math.round((t-1.4375*i)/2),shrunkY:6}}(O,!!w),U=Ax[a]||Ax.medium,Y="var(--Text)",X=l?Nx[l]:null,J=l?Ix[l]:null,Z=X||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 ce(u,{className:"inp-"+e+" "+T,sx:{width:k?"100%":"auto",...M},children:[(()=>{if(!t||H)return null;return le("small"===a?xi:wi,{component:"label",htmlFor:V,sx:{display:"block",marginBottom:"6px",color:c?"var(--Quiet)":"var(--Text)",fontSize:O.labelSize,fontWeight:500,opacity:c?"var(--Disabled, 0.38)":1},children:t})})(),le(u,{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",...!c&&{"&:hover":{borderColor:Z.hoverBorder},"&:active":{borderColor:Z.pressedBorder}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(u,{children:le(z,{value:h,defaultValue:m,onChange:p,name:f,type:g,disabled:c,placeholder:n,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:w?le(C,{position:"start",children:w}):void 0,endAdornment:(()=>{if(S)return le(C,{position:"end",children:S})})()},sx:{"& .MuiOutlinedInput-root":{backgroundColor:"var(--Hover)",color:"var(--Quiet)",fontSize:O.fontSize,minHeight:b?"auto":O.height,padding:0,borderRadius:0,transition:"color 0.15s ease-in-out",...H&&{alignItems:"stretch"},"& fieldset":{border:"none"},"&.Mui-focused":{color:Y},"&:not(.Mui-focused) .MuiOutlinedInput-input:not(:placeholder-shown)":{color:Y},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"},"& input":{padding: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"},...w&&{"& input":{paddingLeft:0},"& textarea":{paddingLeft:0}}}},"& .MuiInputLabel-root":{color:"var(--Quiet)",fontFamily:"var(--Font-Families-Body, var(--Body-Font-Family))",...Lx(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)",...Lx(U.shrunk),color:"var(--Quiet)"},"&.Mui-focused":{color:Y},"&.Mui-disabled":{color:"var(--Quiet)",opacity:"var(--Disabled, 0.38)"}},"& .MuiOutlinedInput-notchedOutline legend":{display:"none"},"& .MuiOutlinedInput-notchedOutline":{top:0},"& .MuiOutlinedInput-root.Mui-focused":{outline:"none"},"& .MuiOutlinedInput-root:focus-within":{outline:"none"}},...R})})}),l&&s?ce(u,{sx:{display:"flex",alignItems:"center",gap:"6px",marginTop:"4px",marginLeft:"2px"},children:[J&&le(J,{sx:{fontSize:O.iconSize,color:X.icon,flexShrink:0}}),le(B,{sx:{color:X.text,fontSize:"small"===a?"11px":"12px",margin:0},children:s})]}):r?le(B,{sx:{color:"var(--Quiet)",fontSize:"small"===a?"11px":"12px",marginTop:"4px",marginLeft:"2px"},children:r}):null]})}const Dx=["default","primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],Rx=Xf,Fx={small:{box:16,dot:8,gap:4,LabelComp:xi},medium:{box:20,dot:10,gap:8,LabelComp:wi},large:{box:24,dot:12,gap:12,LabelComp:Ti}};function Px({size:e,color:a,checked:t}){const i=Rx(a),n=t?"var(--Buttons-"+i+"-Border)":"var(--Border)",r="var(--Buttons-"+i+"-Border)",o=Fx[e]||Fx.medium;return le(u,{className:"radio-circle-icon",sx:{width:o.box,height:o.box,boxSizing:"border-box",borderRadius:"50%",border:"2px solid "+n,flexShrink:0,backgroundColor:"transparent",position:"relative",transition:"border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out"},children:t&&le(u,{sx:{position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:o.dot,height:o.dot,borderRadius:"50%",backgroundColor:r}})})}function Hx({theme:e,surface:a,color:t="default",size:i="medium",label:n,labelPlacement:r="end",checked:o,disabled:l=!1,onChange:s,name:c,value:d,className:h="",sx:u={},"aria-label":m,"aria-labelledby":p,"aria-describedby":f,inputProps:g={},...b}){const v=Dx.includes(t)?t:"default",x=Fx[i]||Fx.medium,y=x.LabelComp,z="var(--Sizing-3, 28px)",S={...g,...m&&{"aria-label":m},...p&&{"aria-labelledby":p},...f&&{"aria-describedby":f}},k=le(L,{checked:o,disabled:l,onChange:s,name:c,value:d,icon:le(Px,{size:i,color:v,checked:!1}),checkedIcon:le(Px,{size:i,color:v,checked:!0}),"data-theme":e||void 0,"data-surface":a||void 0,className:"radio-"+v+" "+h,inputProps:S,disableRipple:!0,sx:{padding:0,display:"inline-flex",alignItems:"center",justifyContent:"center",width:z,height:z,minWidth:z,minHeight:z,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":{boxShadow:"0 0 0 1px var(--Background), 0 0 0 calc(1px + var(--Sizing-Half, 4px)) color-mix(in srgb, var(--Buttons-"+Rx(v)+"-Border) 10%, transparent)"},"&:not(.Mui-checked):hover .radio-circle-icon":{borderColor:"var(--Buttons-"+Rx(v)+"-Border)"},"&:active .radio-circle-icon":{boxShadow:"0 0 0 1px var(--Background), 0 0 0 calc(1px + var(--Sizing-1, 8px)) color-mix(in srgb, var(--Buttons-"+Rx(v)+"-Border) 10%, transparent)"},"&:not(.Mui-checked):active .radio-circle-icon":{borderColor:"var(--Border)"},"&.Mui-focusVisible .radio-circle-icon":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"1px"},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none"},...u},...b});return n?le(w,{control:k,label:le(y,{component:"span",sx:{color:l?"var(--Text-Quiet)":"var(--Text)",lineHeight:1.4,userSelect:"none"},children:n}),labelPlacement:r,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 Ox({color:e="default",size:t="medium",label:i,options:n=[],value:r,defaultValue:o,onChange:l,orientation:s="vertical",labelPlacement:c="end",disabled:d=!1,spacing:h=1,name:u,className:m="",sx:p={},"aria-label":f,"aria-labelledby":g,...b}){const v=void 0!==r,[x,y]=a(o),z=v?r:x;return ce(T,{component:"fieldset",disabled:d,className:"radio-group-"+e+" "+m,sx:p,children:[i&&le(M,{component:"legend",sx:{color:d?"var(--Text-Quiet)":"var(--Text)",fontSize:"small"===t?"13px":"15px",fontWeight:500,mb:1,"&.Mui-focused":{color:"var(--Text)"},"&.Mui-disabled":{color:"var(--Text-Quiet)",opacity:"var(--Disabled, 0.38)"}},children:i}),le(A,{value:z??"",onChange:(e,a)=>{v||y(e?.target?.value??a),l?.(e,a)},name:u,"aria-label":f,"aria-labelledby":g,row:"horizontal"===s,sx:{display:"flex",flexDirection:"horizontal"===s?"row":"column",flexWrap:"horizontal"===s?"wrap":"nowrap",alignItems:"horizontal"===s?"center":"flex-start",gap:h},...b,children:n.map(a=>le(Hx,{color:e,size:t,label:a.label,labelPlacement:c,value:a.value,disabled:a.disabled||d},a.value))})]})}const Ex=Hx,Vx=["default","primary","secondary","tertiary","neutral","info","success","warning","error"];const Qx={small:{visual:12,track:2,labelSize:11},medium:{visual:16,track:4,labelSize:12},large:{visual:20,track:6,labelSize:13}};function jx({theme:e,surface:a,variant:t="default",size:i="medium",value:n,defaultValue:r,onChange:o,onChangeCommitted:l,min:s=0,max:c=100,step:d=1,marks:h=!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":w,"aria-labelledby":S,...k}){const C=function(){const e={};return Vx.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,T=Qx[i]||Qx.medium,M=null===d,A=(!M||!0!==h)&&h;if("production"!==process.env.NODE_ENV&&M&&!0===h&&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===h&&d){const e=Math.floor((c-s)/d)+1;e>20&&console.warn(`[OmniDesign] <Slider marks> with step=${d} over ${s}–${c} 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(n)||Array.isArray(r),W=void 0!==f?f:g,D="inverted"===W,R=!1===W,F="small"===i?xi:wi,P=T.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?T.track:P,width:L?O?T.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?T.track:P,width:L?V?T.track:P:void 0,borderRadius:P/2},"& .MuiSlider-thumb":{width:24,height:24,backgroundColor:"transparent",border:"none",boxShadow:"none",transition:"none","--_height":T.visual+"px","--_bevel":"min(calc(var(--Button-Bevel) * var(--_height) / 100), calc(var(--_height) / 5))","&::after":{display:"none"},"&::before":{content:'""',position:"absolute",width:T.visual,height:T.visual,borderRadius:"50%",backgroundColor:B.thumb,border:B.thumbBorder||"none",boxShadow:`${Zf(t)}, ${Vf}`,transition:"box-shadow 0.15s ease-in-out",top:"50%",left:"50%",transform:"translate(-50%, -50%)"},"&:hover::before":{boxShadow:`${Zf(t)}, ${Qf}`},"&.Mui-focusVisible::before, &:focus-visible::before":{boxShadow:`${Zf(t)}, ${Qf}, 0 0 0 1px var(--Focus-Visible)`},"&.Mui-active::before":{boxShadow:Zf(t)},"&.Mui-focusVisible":{outline:"none",borderRadius:"50%"},"&.Mui-focusVisible::before":{boxShadow:`${Zf(t)}, ${Qf}`}},...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:T.labelSize},"&.Mui-disabled":{opacity:"var(--Disabled, 0.38)",cursor:"not-allowed",pointerEvents:"none","& .MuiSlider-thumb::before":{boxShadow:"none"}},...z},j=le(I,{value:n,defaultValue:r,onChange:o,onChangeCommitted:l,min:s,max:c,step:d,marks:A,valueLabelDisplay:m,orientation:p,track:D?"inverted":!R&&"normal",disabled:b,name:x,"aria-label":w,"aria-labelledby":S,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?ce(u,{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"===i?"13px":"15px",fontWeight:500,opacity:b?"var(--Disabled, 0.38)":1},children:v}),j]}):j}const qx=jx,Gx=jx,Ux=["Default","Primary","Secondary","Tertiary","Neutral"],Yx={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}},Xx=Object.keys(Yx);function Jx(e,a){if("custom"===e)return{...Yx.Classic,name:"Custom",description:"Custom",...a||{}};const t=Yx[e];return t?{...t}:{...Yx.Classic}}function Zx(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 $x(e){const a=e||"Primary";return"Default"===a?"var(--Text)":"var(--Text-"+a+")"}function Kx(e,a){const t=(e-90)*Math.PI/180;return{dx:Math.cos(t)*a,dy:Math.sin(t)*a}}const _x={"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 ey({text:a="Your Brand. Perfected.",curves:t,arc:i=160,radius:n=300,direction:r="up",rotation:o=0,autoCrop:l=!0,textStyle:s="display-large",fontSize:c,fontFamily:d,fontWeight:h,letterSpacing:u,color:m="var(--Text, #1a1a1a)",bevel:p=!1,bevelTheme:f="Primary",bevelPreset:g,bevelCustom:b,className:v,style:x,...y}){const z=g?Jx(g,b):null,w=z?!!z.bevel:!!p,S=_x[s]||_x["display-large"],k=d??S.fontFamily,C=c??S.fontSize,B=h??S.fontWeight,T=u??S.letterSpacing,M="number"==typeof c?c:S.pxHint,A=t&&t.length>0?t:[{arc:i,radius:n,direction:r}],{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 i=0;let n="M "+t+" "+i,r=0,o=0;for(const{arc:e,radius:l,direction:s}of a){const a=ay(e,1,359),c=Math.max(10,l),d=a*Math.PI/180,h=2*c*Math.sin(d/2),u=c*(1-Math.cos(d/2));t+=h,n+=" A "+c+" "+c+" 0 "+(a>180?1:0)+" "+("up"===s?1:0)+" "+t+" "+i,"up"===s?r=Math.max(r,u):o=Math.max(o,u)}return{d:n,width:t,upMax:r,downMax:o,pathId:e}},[JSON.stringify(a)])}(A),R=Math.ceil(N+M),F=Math.ceil(W+M),P=Math.ceil(M),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,Y]=e.useState(M);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 i=a.width/t;Y(M*i)};a();const t=new ResizeObserver(a);return t.observe(e),()=>t.disconnect()},[H,M,q]);const X=w&&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 i=H/2,n=O/2,r=o*Math.PI/180,s=Math.cos(r),c=Math.sin(r),d=(e,a)=>{const t=e-i,r=a-n;return{x:i+t*s-r*c,y:n+t*c+r*s}},h=[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)],u=Math.min(...h.map(e=>e.x)),m=Math.max(...h.map(e=>e.x)),p=Math.min(...h.map(e=>e.y)),f=Math.max(...h.map(e=>e.y)),g=.12*M,b={x:u-g,y:p-g,width:m-u+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,M,T,k,B,w,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 ce("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+")"})}),ce("g",{transform:Q,children:[X&&(()=>{const e=z?z.depth/96:.045,t=Math.max(2,Math.round(M*e)),i=Math.max(1,Math.round(M*e*.67)),n={fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof T?T+"px":T};return ce(se,{children:[le("text",{className:"dino-bevel-layer dino-bevel-layer--lowlight",fill:"rgb(var(--Buttons-"+f+"-Lowlight))",transform:"translate(0 "+t+")",style:n,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 -"+i+")",style:n,children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})})(),le("text",{className:"dino-curved-text__base",fill:X?"var(--Buttons-"+f+"-Button)":w?$x(f):m,style:{fontFamily:k,fontSize:"number"==typeof C?C+"px":C,fontWeight:B,letterSpacing:"number"==typeof T?T+"px":T},children:le("textPath",{href:"#"+D,startOffset:"50%",textAnchor:"middle",children:a})})]})]})}function ay(e,a,t){return Math.max(a,Math.min(t,e))}function ty(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 iy(e){return e?"#"+e.map(e=>e.toString(16).padStart(2,"0")).join(""):"—"}function ny([e,a,t]){const i=[e,a,t].map(e=>(e/=255)<=.03928?e/12.92:Math.pow((e+.055)/1.055,2.4));return.2126*i[0]+.7152*i[1]+.0722*i[2]}function ry({targetRef:e,label:i,deps:n=[]}){const[r,o]=a(null),[l,s]=a(null);t(()=>{if(!e.current)return;const a=requestAnimationFrame(()=>{if(!e.current)return;const a=getComputedStyle(e.current);o(ty(a.backgroundColor)),s(ty(a.color))});return()=>cancelAnimationFrame(a)},n);const c=function(e,a){if(!e||!a)return null;const t=ny(e),i=ny(a);return(Math.max(t,i)+.05)/(Math.min(t,i)+.05)}(r,l),d=null!==c&&c>=4.5,h=null===c?"—":null!==c&&c>=7?"AAA":d?"AA":"Fail",u=null===c?"var(--Text-Quiet)":d?"var(--Text-Success)":"var(--Text-Error)";return ce("div",{style:{display:"flex",alignItems:"center",gap:16,padding:"12px 16px",borderRadius:8,background:"var(--Container)",border:"1px solid var(--Border)"},children:[ce("div",{style:{flex:1,minWidth:0},children:[le(xi,{style:{fontWeight:600},children:i}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Background ",iy(r)," · Text ",iy(l)]})]}),ce("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:u},children:h}),le(Li,{style:{color:"var(--Text-Quiet)"},children:null!==c?c.toFixed(2)+":1":"—"})]})]})}const oy=[{value:"display-large",label:"Display Large"},{value:"display-small",label:"Display Small"}],ly=[{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)"}],sy=Ux.map(e=>({value:e,label:e}));function cy({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function dy(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a("Your Brand. Perfected."),[c,d]=a("display-large"),[h,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),[w,S]=a(700),[k,C]=a(!1),[B,T]=a("Primary"),[M,A]=a("Classic"),L=i(null),[I,N]=a(null);t(()=>{L.current&&N({current:L.current.querySelector("text")})},[h,c,f,v,y,w,k,B,M]);const W=ly.find(e=>e.value===h)?.css||ly[0].css;function D(e,a){g(t=>t.map((t,i)=>i===e?{...t,...a}:t))}return ce(u,{children:[le(xA,{title:"Curved Display Text",component:"CurvedText"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),le(wi,{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."}),ce(u,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(u,{sx:{minWidth:0},children:le(u,{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(ey,{text:l,curves:f,textStyle:c,rotation:v,letterSpacing:y,fontWeight:w,bevel:k,bevelTheme:B,bevelPreset:k?M:void 0,color:W})})}),le(u,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"CurvedText",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Wx,{label:"Text",value:l,onChange:e=>s(e.target.value),placeholder:"Your headline…",size:"medium"}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CURVES"}),le(m,{direction:"row",spacing:1,children:[1,2].map(e=>le(cy,{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(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"One curve is an arch. Two curves chain end-to-end for a wave."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"PER-CURVE SETTINGS"}),le(m,{spacing:2,children:f.map((e,a)=>ce(u,{"data-surface":"Container",style:{background:"var(--Background)",border:"1px solid var(--Border)",borderRadius:8,padding:12},children:[ce(m,{direction:"row",alignItems:"center",spacing:2,sx:{mb:1},children:[ce(Li,{style:{fontWeight:700},children:["Curve ",a+1]}),le("div",{style:{flex:1}}),ce(m,{direction:"row",spacing:1,children:[le(cy,{label:"⌢ Up",selected:"up"===e.direction,onClick:()=>D(a,{direction:"up"})}),le(cy,{label:"⌣ Down",selected:"down"===e.direction,onClick:()=>D(a,{direction:"down"})})]})]}),ce(m,{spacing:1,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Radius",ce("span",{style:{float:"right"},children:[e.radius,"px"]})]}),le(jx,{min:100,max:600,step:10,value:e.radius,onChange:(e,t)=>D(a,{radius:t})})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Arc sweep",ce("span",{style:{float:"right"},children:[e.arc,"°"]})]}),le(jx,{min:40,max:280,step:5,value:e.arc,onChange:(e,t)=>D(a,{arc:t})})]})]})]},a))})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:oy.map(e=>le(cy,{label:e.label,selected:c===e.value,onClick:()=>d(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Uses the lib's DisplayLarge / DisplaySmall tokens (font-family, size, weight, letter-spacing)."})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["LETTER SPACING",ce("span",{style:{float:"right"},children:[y,"px"]})]}),le(jx,{min:-4,max:40,step:1,value:y,onChange:(e,a)=>z(a)}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Adjusts the gap between characters along the wave."})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["FONT WEIGHT",le("span",{style:{float:"right"},children:w})]}),le(jx,{min:100,max:900,step:100,value:w,onChange:(e,a)=>S(a)}),le(Li,{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."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BEVEL"}),le(zv,{label:"3D bevel effect",checked:k,onChange:e=>C(e.target.checked)}),k&&ce(u,{sx:{mt:1.5},children:[le(Li,{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:Xx.map(e=>le(cy,{label:e,selected:M===e,onClick:()=>A(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:6},children:"Bevel theme"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:sy.map(e=>le(cy,{label:e.label,selected:B===e.value,onClick:()=>T(e.value)},e.value))})]}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Bevel layers use ",ce("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."]})]}),ce(u,{children:[ce(m,{direction:"row",alignItems:"center",sx:{mb:1},children:[ce(Oi,{style:{color:"var(--Text-Quiet)",flex:1},children:["ROTATION",ce("span",{style:{float:"right",marginRight:12},children:[v,"°"]})]}),le(nb,{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 i=a.getTotalLength();if(!i)return;let n=0;try{n=t.getComputedTextLength?.()||0}catch(e){}n||(n=Math.min(i,18*l.length));const r=Math.max(0,(i-n)/2),o=Math.min(i,r+n),s=a.getPointAtLength(r),c=a.getPointAtLength(o),d=180*Math.atan2(c.y-s.y,c.x-s.x)/Math.PI,h=Math.max(-45,Math.min(45,Math.round(-d)));x(h)},children:"Auto-level"})]}),le(jx,{min:-45,max:45,step:1,value:v,onChange:(e,a)=>x(a)}),le(Li,{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.'})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:ly.map(e=>le(cy,{label:e.label,selected:h===e.value,onClick:()=>p(e.value)},e.value))})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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(ry,{targetRef:I,label:"Curved text",deps:[h,c,JSON.stringify(f),v,y]}),ce(xi,{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(Lb,{value:3,children:le(fA,{component:"CurvedText"})})]})})})]})]})}const hy={"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 uy({text:a="DinoDesign",theme:t="Primary",preset:i="Classic",custom:n,textStyle:r="display-large",fontSize:o,fontFamily:l,fontWeight:s,letterSpacing:c,className:d,style:h,...u}){const m=hy[r]||hy["display-large"],p=l??m.fontFamily,f=o??m.fontSize,g=s??m.fontWeight,b=c??m.letterSpacing,v="number"==typeof o?o:m.pxHint,x=Jx(i,n),y="dino-bevel-"+e.useId().replace(/:/g,""),z=y+"-s",w=e.useRef(null),[S,k]=e.useState(v),C=.6*v,B=Math.max(400,a.length*C+80),T=1.9*v,M=B/2,A=.7*T;e.useEffect(()=>{if(!w.current||"undefined"==typeof ResizeObserver)return;const e=w.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=S>=19,I=x.bevel?Kx(x.angle+180,x.depth):{dx:0,dy:0},N=x.bevel?Kx(x.angle,x.depth):{dx:0,dy:0},W=x.shadow?Kx(x.angle,x.shadowDistance??6):{dx:0,dy:0},D=L?Zx(t,"base"):$x(t),R=Zx(t,"highlight"),F=Zx(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 ce("svg",{ref:w,viewBox:"0 0 "+B+" "+T,width:B,height:T,preserveAspectRatio:"xMidYMid meet",xmlns:"http://www.w3.org/2000/svg",style:{display:"block",maxWidth:"100%",height:"auto",overflow:"visible",...h},"aria-label":a,role:"img",className:["dino-bevel-text",d].filter(Boolean).join(" "),...u,children:[ce("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&&ce("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"}),ce("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:M,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:M,y:A,textAnchor:"middle",fill:D,filter:H,style:P,children:a})]})}const my=[...Xx.map(e=>({value:e,label:e,description:Yx[e].description})),{value:"custom",label:"Custom",description:"Tune every knob"}],py=[{value:"light",label:"Light",css:"var(--Surface)"},{value:"warm",label:"Warm",css:"var(--Surface-Dim)"},{value:"dark",label:"Dark",css:"var(--Container-High)"}];function fy({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gy({option:e,active:a,onClick:t}){return ce(u,{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(Li,{style:{fontWeight:600,color:"var(--Text)"},children:e.label}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:e.description})]})}function by(){const[e,t]=a("Default"),[i,n]=a("Surface"),[r,o]=a("DinoDesign"),[l,s]=a("Primary"),[c,d]=a("Classic"),[h,p]=a("light"),[f,g]=a(135),[b,v]=a(5),[x,y]=a(1),[z,w]=a(!0),[S,k]=a(!0),[C,B]=a(6),[T,M]=a(8),[A,L]=a(60),[I,N]=a(96),[W,D]=a(900),[R,F]=a(0),P="custom"===c,H=P?{angle:f,depth:b,softness:x,bevel:z,shadow:S,shadowDistance:C,shadowBlur:T,shadowOpacity:A/100}:void 0;const O=py.find(e=>e.value===h)?.css||py[0].css;return ce(u,{children:[le(xA,{title:"Bevel Display Text",component:"BevelText"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),le(wi,{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."}),ce(u,{sx:{display:"grid",gridTemplateColumns:"repeat(auto-fit, minmax(360px, 1fr))",gap:3,alignItems:"start"},children:[le(u,{sx:{minWidth:0},children:le(u,{"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(uy,{text:r,theme:l,preset:c,custom:H,fontSize:I,fontWeight:W,letterSpacing:R})})}),le(u,{sx:{minWidth:0,alignSelf:"flex-start"},children:le(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"BevelText",theme:e,surface:i})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:720},children:[le(Wx,{label:"Text",value:r,onChange:e=>o(e.target.value),placeholder:"Your headline…",size:"medium"}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Ux.map(e=>le(fy,{label:e,selected:l===e,onClick:()=>s(e)},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:["Resolves to ",ce("code",{children:["--Buttons-","{Theme}","-Button"]})," ","(fill), ",le("code",{children:"-Highlight"})," (light edge), and"," ",le("code",{children:"-Lowlight"})," (shadow edge)."]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PRESETS"}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:my.map(e=>le(gy,{option:e,active:c===e.value,onClick:()=>function(e){if(d(e),"custom"!==e){const a=Jx(e);g(a.angle),v(a.depth??5),y(a.softness??1),w(a.bevel),k(a.shadow),B(a.shadowDistance??6),M(a.shadowBlur??8),L(Math.round(100*(a.shadowOpacity??.6)))}}(e.value)},e.value))})]}),P&&ce(u,{sx:{border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",p:2},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:12},children:"CUSTOM"}),ce(m,{spacing:2,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Light angle",ce("span",{style:{float:"right"},children:[f,"°"]})]}),le(jx,{min:0,max:360,step:5,value:f,onChange:(e,a)=>g(a)})]}),ce(u,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(zv,{label:"Inset bevel",checked:z,onChange:e=>w(e.target.checked)}),z&&ce(m,{spacing:1.5,sx:{mt:1.5},children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Depth",ce("span",{style:{float:"right"},children:[b,"px"]})]}),le(jx,{min:1,max:16,step:1,value:b,onChange:(e,a)=>v(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Softness",ce("span",{style:{float:"right"},children:[x,"px"]})]}),le(jx,{min:0,max:6,step:.5,value:x,onChange:(e,a)=>y(a)})]})]})]}),ce(u,{sx:{border:"1px solid var(--Border-Variant)",borderRadius:1,p:1.5},children:[le(zv,{label:"Drop shadow",checked:S,onChange:e=>k(e.target.checked)}),S&&ce(m,{spacing:1.5,sx:{mt:1.5},children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Distance",ce("span",{style:{float:"right"},children:[C,"px"]})]}),le(jx,{min:1,max:24,step:1,value:C,onChange:(e,a)=>B(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Blur",ce("span",{style:{float:"right"},children:[T,"px"]})]}),le(jx,{min:0,max:24,step:1,value:T,onChange:(e,a)=>M(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Opacity",ce("span",{style:{float:"right"},children:[A,"%"]})]}),le(jx,{min:10,max:100,step:5,value:A,onChange:(e,a)=>L(a)})]})]})]})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPOGRAPHY"}),ce(m,{spacing:2,children:[ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font size",ce("span",{style:{float:"right"},children:[I,"px"]})]}),le(jx,{min:32,max:160,step:4,value:I,onChange:(e,a)=>N(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Font weight",le("span",{style:{float:"right"},children:W})]}),le(jx,{min:400,max:900,step:100,value:W,onChange:(e,a)=>D(a)})]}),ce("div",{children:[ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Letter spacing",ce("span",{style:{float:"right"},children:[R,"px"]})]}),le(jx,{min:-2,max:20,step:1,value:R,onChange:(e,a)=>F(a)})]})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PREVIEW BACKGROUND"}),le(m,{direction:"row",spacing:1,children:py.map(e=>le(fy,{label:e.label,selected:h===e.value,onClick:()=>p(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Showcase-only — doesn't affect the emitted code."})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[ce(Li,{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(xi,{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(Lb,{value:3,children:le(fA,{component:"BevelText"})})]})})})]})]})}const vy={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",black:"BW",white:"BW"};function xy(e,a){return"var(--"+(vy[e]||"Primary")+"-Color-"+a+")"}const yy={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 zy(e,a){const t=yy[e]||yy.primary;return(t[a]||t.linear).map(e=>({...e}))}function wy({variant:e="linear",color:a="primary",angle:t=135,stops:i=null,position:n=null,blobs:r=null,cardProps:o={},minHeight:l=300,children:s,className:c="",sx:d={},...h}){const m="meshCard"===e,p="mesh"===e||m,f="radial"===e,g="linear"===e||f,b=i||zy(a,f?"radial":"linear"),v=r||zy(a,m?"meshCard":"mesh"),x=p?function(e){if(!e||0===e.length)return"none";const a=e.map(e=>{const a=xy(e.family,e.tone),t=e.spread||40;return"radial-gradient(circle at "+e.x+"% "+e.y+"%, "+a+" 0%, transparent "+t+"%)"}),t=xy(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=>xy(e.family,e.tone)+" "+e.position+"%"),i=a||{x:50,y:50};return"radial-gradient(circle at "+i.x+"% "+i.y+"%, "+t.join(", ")+")"}(b,n||{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=>xy(e.family,e.tone)+" "+e.position+"%").join(", ")+")":"none"}(b,t),y=g?b[0]:v[0];var z,w;const S=function(e){return"dark"===e?"var(--BW-Color-1)":"var(--BW-Color-6)"}((z=y?.tone||8,"black"===(w=y?.family||"primary")||"white"===w?z<=5?"light":"dark":z<=5?"dark":"light"));return le(u,m?{className:"gradient gradient-mesh-card "+c,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",display:"flex",alignItems:"center",justifyContent:"center",padding:"var(--Card-Padding)",position:"relative",overflow:"hidden",...d},...h,children:le(Nv,{variant:"solid",...o,children:le(Wv,{children:s})})}:{className:"gradient gradient-"+e+" "+c,sx:{background:x,minHeight:l,borderRadius:"var(--Card-Radius)",color:S,display:"flex",alignItems:"center",justifyContent:"center",position:"relative",overflow:"hidden",...d},...h,children:s})}const Sy=e=>le(wy,{variant:"linear",...e}),ky=e=>le(wy,{variant:"radial",...e}),Cy=e=>le(wy,{variant:"mesh",...e}),By=e=>le(wy,{variant:"meshCard",...e});function Ty({color:e,className:a="",sx:t={},...i}){return le(u,{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},...i})}function My({children:e,container:a=!1,item:t=!1,spacing:i=2,sx:n={},...r}){return le(y,{container:a,item:t,spacing:i,sx:{transition:"all 0.2s ease-in-out",...n},...r,children: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 Ay=["default","primary","secondary","tertiary","neutral","info","success","warning","error"],Ly={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"};function Iy({color:e="primary",width:a="hug",allCaps:t=!1,children:i,className:n="",sx:r={},...o}){const l="fill"===a,s=Ly[e]||"Primary";return le(u,{component:"span",className:"tag tag-"+e+(n?" "+n:""),sx:{display:l?"flex":"inline-flex",alignItems:"center",justifyContent:l?"center":"flex-start",height:"24px",px:"8px",borderRadius:0,backgroundColor:"var(--Tag-"+s+"-BG)",color:"var(--Tag-"+s+"-Text)",width:l?"100%":"auto",flexShrink:0,userSelect:"none",...r},...o,children:le(xi,{component:"span",sx:{color:"inherit",lineHeight:"24px",whiteSpace:"nowrap",fontWeight:600,textTransform:t?"uppercase":"none"},children:i})})}const Ny=e=>le(Iy,{color:"primary",...e}),Wy=e=>le(Iy,{color:"secondary",...e}),Dy=e=>le(Iy,{color:"tertiary",...e}),Ry=e=>le(Iy,{color:"neutral",...e}),Fy=e=>le(Iy,{color:"info",...e}),Py=e=>le(Iy,{color:"success",...e}),Hy=e=>le(Iy,{color:"warning",...e}),Oy=e=>le(Iy,{color:"error",...e}),Ey=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Vy({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function Qy({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(Vy,{ratio:a,threshold:t})]})}function jy({color:e,selected:a,onClick:t}){const i=Ly[e]||((n=e)?n.charAt(0).toUpperCase()+n.slice(1):"");var n;return le(u,{component:"button",onClick:()=>t(e),"aria-label":"Select "+i,"aria-pressed":a,title:i,sx:{width:"var(--Button-Height, 36px)",height:"var(--Button-Height, 36px)",borderRadius:"4px",backgroundColor:"var(--Tag-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Tag-"+i+"-Text)",pointerEvents:"none"}})})}function qy(){const[e,i]=a("primary"),[n,r]=a("New"),[o,l]=a(!1),[s,c]=a("Default"),[d,h]=a("Surface"),[p,f]=a({}),g=Ly[e]||"Primary";return t(()=>{f({tagText:nn("--Tag-"+g+"-Text"),tagBg:nn("--Tag-"+g+"-BG"),pageBg:nn("--Background")})},[e,g]),ce(u,{sx:{pb:8},children:[le(xA,{title:"Tag",component:"Tag"}),le(u,{sx:{mt:1},children:le(ig,{theme:s,onThemeChange:c,surface:d,onSurfaceChange:h})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Tag",theme:s,surface:d})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:s,surface:d,children:ce(u,{sx:{width:"100%",maxWidth:480},children:[le(u,{sx:{display:"flex",alignItems:"center",gap:2,mb:3},children:le(Iy,{color:e,allCaps:o,children:n})}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Ay.map(e=>le(Iy,{color:e,allCaps:o,children:Ly[e]},e))})]})}),le(nv,{code:(()=>{const a=[];"primary"!==e&&a.push('color="'+e+'"'),o&&a.push("allCaps");return"<Tag"+(a.length?" "+a.join(" "):"")+">"+n+"</Tag>"})(),language:"JSX",wrap:!0,sx:{mt:2}})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Ey.map(a=>ce(u,{children:[le(Li,{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(jy,{color:a,selected:e===a,onClick:i},a))})]},a.label))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:["bg: var(--Tag-",g,"-BG) · text: var(--Tag-",g,"-Text)"]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL TEXT"}),le(u,{component:"input",type:"text",value:n,onChange:e=>r(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)"}}})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(xi,{children:"All caps"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"text-transform: uppercase"})]}),le(yv,{checked:o,onChange:e=>l(e.target.checked),size:"small","aria-label":"All caps"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:['color="',e,'" — var(--Tag-',g,"-BG) / var(--Tag-",g,"-Text)"]}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(xi,{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(Qy,{label:"var(--Tag-"+g+"-Text) vs. var(--Tag-"+g+"-BG)",ratio:tn(p.tagText,p.tagBg),threshold:4.5,note:"Tag text on tag background for "+e+" color"}),le(Qy,{label:"var(--Tag-"+g+"-BG) vs. var(--Background)",ratio:tn(p.tagBg,p.pageBg),threshold:3,note:"Tag background against page background (non-text contrast, WCAG 1.4.11)"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Touch Target (WCAG 2.5.8)"}),le(xi,{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."}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{style:{color:"var(--Text)"},children:"Tag height — 24px"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive. No touch target requirement on the Tag itself."})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"All Colors"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"Visual overview of all tag colors in the current theme."}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Ay.map(e=>le(Iy,{color:e,allCaps:o,children:Ly[e]},e))})]})]})]})]}),le(Lb,{value:3,children:le(fA,{component:"Tag"})})]})]})}function Gy({children:e,maxWidth:a="lg",disableGutters:t=!1,sx:i={},...n}){return le(N,{maxWidth:a,disableGutters:t,"data-surface":"Surface",sx:{backgroundColor:"var(--Background)",color:"var(--Text)",transition:"all 0.2s ease-in-out",...i},...n,children:e})}function Uy({theme:e,surface:a="Surface",as:t="section",padding:i,className:n,style:r,children:o,...l}){return le(t,{...e?{"data-theme":e}:{},"data-surface":a,className:n,style:{background:"var(--Background)",color:"var(--Text)",...void 0!==i?{padding:i}:{},...r},...l,children:o})}function Yy(){return ce("div",{children:[le(si,{style:{marginBottom:12},children:"Section"}),ce(wi,{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(si,{style:{marginTop:24,marginBottom:12},children:"Theme + surface"}),le(xi,{color:"quiet",style:{marginBottom:16,display:"block"},children:'Sets data-theme="Primary" + data-surface="Surface", paints --Background.'}),ce(Uy,{theme:"Primary",surface:"Surface",padding:"32px",style:{borderRadius:8},children:[le(xA,{title:"Primary-Light surface",component:"Section"}),le(wi,{children:"Body text picks up --Text automatically."}),le(xi,{color:"quiet",children:"Quiet text picks up --Text-Quiet."}),le("div",{style:{marginTop:12},children:le(nb,{variant:"primary",children:"Primary button"})})]}),le(si,{style:{marginTop:32,marginBottom:12},children:"Container surface"}),ce(Uy,{surface:"Container",padding:"32px",style:{borderRadius:8},children:[le(si,{children:"Container surface (inherits theme)"}),le(wi,{children:"Useful for card-like regions."})]}),le(si,{style:{marginTop:32,marginBottom:12},children:"Different element"}),ce(xi,{color:"quiet",style:{marginBottom:16,display:"block"},children:["Pass ",le("code",{children:'as="article"'}),", ",le("code",{children:'as="footer"'}),", etc."]}),ce(Uy,{as:"article",theme:"Neutral",surface:"Surface-Dimmest",padding:"32px",style:{borderRadius:8},children:[le(si,{children:"Neutral / Surface-Dimmest article"}),le(wi,{children:"Renders as an <article> element."})]})]})}const Xy={small:{fab:32,fabSize:"small",action:32,actionSize:"small",gap:8},medium:{fab:48,fabSize:"medium",action:48,actionSize:"medium",gap:12},large:{fab:56,fabSize:"large",action:56,actionSize:"large",gap:16}};function Jy({actions:e=[],variant:r="solid",color:o="default",direction:l="up",size:s="medium",speed:c=50,openOnHover:d=!0,showTooltips:h=!0,open:m,onOpen:p,onClose:f,icon:g,ariaLabel:b="Speed Dial",className:v="",sx:y={},...z}){"production"!==process.env.NODE_ENV&&"solid"!==r&&console.warn('[SpeedDial] variant="'+r+"\" is not a SpeedDial variant; rendering solid. The design's FAB set has no shape axis — only State, Extended and Animate — so an outline FAB is not in the system.");const w=Xy[s]||Xy.medium,S=w.fab,k=w.action,C=w.gap,[B,T]=a(!1),M=void 0!==m,A=M?m:B,L=i(null),I="solid",N=w.actionSize,W=n(()=>{A?(M||T(!1),f?.()):(M||T(!0),p?.())},[A,M,p,f]),D=i(null),R=()=>"undefined"!=typeof window&&"function"==typeof window.matchMedia&&window.matchMedia("(hover: hover) and (pointer: fine)").matches,F=n(()=>{D.current&&(clearTimeout(D.current),D.current=null)},[]),P=n(()=>{d&&R()&&(F(),A||(M||T(!0),p?.()))},[d,A,M,p,F]),H=n(()=>{d&&R()&&(F(),D.current=setTimeout(()=>{M||T(!1),f?.()},120))},[d,M,f,F]);t(()=>F,[F]);const O=n((e,a)=>{e.onClick?.(a),M||T(!1),f?.()},[M,f]);t(()=>{if(!A)return;const e=e=>{L.current&&!L.current.contains(e.target)&&(M||T(!1),f?.())};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[A,M,f]),t(()=>{if(!A)return;const e=e=>{"Escape"===e.key&&(M||T(!1),f?.())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[A,M,f]);const E="up"===l||"down"===l,V="up"===l||"down"===l?"left":"top",Q=le(u,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",lineHeight:0,transformOrigin:"50% 50%",transition:"transform 0.3s ease",transform:A?"rotate(45deg)":"rotate(0deg)"},children:g||le(Aa,{})});return ce(u,{ref:L,onMouseEnter:P,onMouseLeave:H,className:"speed-dial speed-dial-"+r+" speed-dial-"+o+" speed-dial-"+l+" "+v,sx:{position:"relative",display:"inline-flex",overflow:"visible",width:E?S+"px":"auto",height:E?"auto":S+"px",...y},...z,children:[le(ux,{size:w.fabSize,variant:I,color:o,onClick:W,"aria-label":b,"aria-expanded":A,"aria-haspopup":"menu",sx:{position:"relative",zIndex:2},children:Q}),le(u,{role:"menu",sx:{position:"absolute",inset:0,pointerEvents:"none",overflow:"visible"},children:e.map((e,a)=>{const t=(e=>{const a=S/2+C+k/2+e*(k+C);switch(l){case"up":default:return{bottom:a+"px",left:(S-k)/2+"px"};case"down":return{top:a+"px",left:(S-k)/2+"px"};case"left":return{right:a+"px",top:(S-k)/2+"px"};case"right":return{left:a+"px",top:(S-k)/2+"px"}}})(a),i=a*c,n=le(ux,{size:N,variant:I,color:o,role:"menuitem","aria-label":e.name||"Action "+(a+1),onClick:()=>O(e,a),sx:{position:"absolute",...t,opacity:A?1:0,transform:A?"scale(1)":"scale(0.3)",transition:"opacity 0.2s ease, transform 0.2s ease",transitionDelay:A?i+"ms":"0ms",pointerEvents:A?"auto":"none"},children:e.icon||le(Aa,{})},e.key||a);return h&&e.name?le(x,{title:e.name,placement:V,arrow:!0,open:!!A&&void 0,slotProps:{tooltip:{sx:{backgroundColor:"var(--Container)",color:"var(--Text)",fontSize:"12px",fontWeight:500,border:"1px solid var(--Border)",boxShadow:"0 2px 8px rgba(0,0,0,0.12)"}},arrow:{sx:{color:"var(--Container)"}}},children:n},e.key||a):n})})]})}const Zy=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",$y=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Ky=[{name:"Edit",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(La,{})})},{name:"Share",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Na,{})})},{name:"Delete",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Ae,{})})},{name:"Favorite",icon:le(Ff,{size:"small",sx:{color:"inherit"},children:le(Te,{})})}];function _y({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ez({color:e,selected:a,onClick:t}){const i=Zy(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function az(){const[e,t]=a("default"),[i,n]=a("up"),[r,o]=a(!0),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Speed Dial",component:"SpeedDial"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"SpeedDial",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:l,surface:c,sx:{minHeight:300,alignItems:"flex-end",justifyContent:"center"},children:le(Jy,{color:e,direction:i,showTooltips:r,actions:Ky,ariaLabel:"Quick actions"})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"up"!==i&&a.push('direction="'+i+'"'),r||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:ce(u,{sx:{p:3},children:[ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:$y.map(a=>ce(u,{children:[le(Li,{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(ez,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(_y,{label:Zy(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Tooltips"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show labels beside actions"})]}),le(yv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Show tooltips"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"SpeedDial"})})]})]})}const tz={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 iz({color:e="default",companyName:a="",year:t=(new Date).getFullYear(),rights:i="All rights reserved",children:n,className:r,style:o,...l}){const s=n??`© ${t}${a?" "+a:""}.${i?" "+i+".":""}`,c=tz[e]||tz.default,d=c.theme?{"data-theme":c.theme,"data-surface":c.surface||"Surface-Dim"}:{},h=c.theme?{background:"var(--Background)",color:"var(--Text)"}:{background:c.bg,color:c.fg};return le("div",{...d,className:["dino-copyright",r].filter(Boolean).join(" "),style:{padding:"var(--Sizing-2, 16px) 24px",textAlign:"center",...h,...o},...l,children:le(xi,{style:{color:"inherit",opacity:.85},children:s})})}const nz={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}};function rz({value:e,defaultValue:r=0,onChange:o,min:l,max:s,step:c=1,variant:d="outlined",style:h="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:w={},...S}){const[k,C]=a(r),[B,T]=a(!1),M=i(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"===h&&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=nz[p]||nz.medium,E="small"===p?xi:wi,V=n(e=>{let a="number"==typeof e?e:parseFloat(e);isNaN(a)&&(a=0),void 0!==l&&a<l&&(a=l),void 0!==s&&a>s&&(a=s),A||C(a),o?.(a)},[A,o,l,s]),Q=i(L);Q.current=L;const j=n(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!==s&&e>0&&a>=s||V(a+e*c)},[x,c,l,s,V]),q=void 0!==l&&L<=l,G=void 0!==s&&L>=s,U=i(null),Y=i(null),X=n(()=>{U.current&&(clearTimeout(U.current),U.current=null),Y.current&&(clearInterval(Y.current),Y.current=null)},[]),J=n(e=>{x||(X(),j(e),U.current=setTimeout(()=>{let a=120,t=0;const i=()=>{j(e),t+=1,10===t&&a>60?(clearInterval(Y.current),a=60,Y.current=setInterval(i,a)):30===t&&a>30&&(clearInterval(Y.current),a=30,Y.current=setInterval(i,a))};Y.current=setInterval(i,a)},400))},[x,j,X]);t(()=>X,[X]);const Z=i(!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){}X()},onPointerCancel:X,onPointerLeave:X,onKeyDown:a=>{"Enter"!==a.key&&" "!==a.key||a.repeat||(a.preventDefault(),J(e))},onKeyUp:e=>{"Enter"!==e.key&&" "!==e.key||X()},onBlur:X}),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 ce(u,F?{className:"numberfield numberfield-outlined"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{width:y?"100%":"auto",fontFamily:"inherit",...w},...S,children:[te(),le(u,{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(u,{...ae,children:ce(u,{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(u,{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(--"+(Ax[p]||Ax.medium).shrunk+"-Font-Size)",fontWeight:"var(--"+(Ax[p]||Ax.medium).shrunk+"-Font-Weight)",letterSpacing:"var(--"+(Ax[p]||Ax.medium).shrunk+"-Letter-Spacing)"}:{fontSize:"var(--"+(Ax[p]||Ax.medium).resting+"-Font-Size)",fontWeight:"var(--"+(Ax[p]||Ax.medium).resting+"-Font-Weight)",letterSpacing:"var(--"+(Ax[p]||Ax.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(u,{component:"input",ref:M,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>T(!0),onBlur:()=>T(!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"}}}),ce(u,{sx:{display:"flex",flexDirection:"column",justifyContent:"center",alignItems:"stretch",borderLeft:"1px solid "+D,flexShrink:0},children:[le(u,{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(Ff,{size:"medium",children:le(Wa,{})})}),le(u,{"aria-hidden":"true",sx:{height:"1px",backgroundColor:D,flexShrink:0}}),le(u,{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(Ff,{size:"medium",children:le(Da,{})})})]})]})})}),v&&le(xi,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]}:{className:"numberfield numberfield-spinner"+(x?" numberfield-disabled":"")+(z?" "+z:""),sx:{fontFamily:"inherit",...w},...S,children:[te(),ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:"small"===p?.5:1,opacity:x?"var(--Disabled, 0.38)":1},children:[le(u,{component:"button",type:"button","aria-label":"Decrease",...$(-1),disabled:x||q,sx:{...ee,width:48,height:"100%",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(Ff,{size:"small",children:le(Be,{})})}),le(u,{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(u,{...ae,children:le(u,{component:"input",ref:M,type:"text",inputMode:"numeric",role:"spinbutton","aria-valuenow":"number"==typeof L?L:void 0,"aria-valuemin":l,"aria-valuemax":s,"aria-label":f||"Number",value:L,onChange:K,onKeyDown:_,onFocus:()=>T(!0),onBlur:()=>T(!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(u,{component:"button",type:"button","aria-label":"Increase",...$(1),disabled:x||G,sx:{...ee,width:48,height:"100%",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(Ff,{size:"small",children:le(Aa,{})})})]}),v&&le(xi,{style:{color:"var(--Quiet)",marginTop:"4px",marginLeft:"2px"},children:v})]})}const oz=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function lz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function sz(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a("DinoDesign"),[c,d]=a((new Date).getFullYear()),[h,p]=a("All rights reserved"),[f,g]=a(""),[b,v]=a(!1),[x,y]=a("default"),z=i(null),[w,S]=a(null);return t(()=>{z.current&&S({current:z.current.querySelector(".dino-copyright")})},[x,b,l,c,h,f]),ce(u,{children:[le(xA,{title:"Copyright",component:"Copyright"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),ce(wi,{color:"quiet",style:{marginBottom:24,maxWidth:720},children:["Standalone copyright strip used at the bottom of pages. Defaults to"," ",ce("code",{children:["© ","{year}"," ","{companyName}",". ","{rights}","."]})," Pass"," ",le("code",{children:"children"})," to override the entire text."]}),le(u,{ref:z,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(iz,b?{color:x,children:f||"Type a custom message →"}:{color:x,companyName:l,year:Number(c)||(new Date).getFullYear(),rights:h})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Copyright",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:560},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TEXT MODE"}),ce(m,{direction:"row",spacing:1,children:[le(lz,{label:"Auto-generated",selected:!b,onClick:()=>v(!1)}),le(lz,{label:"Custom",selected:b,onClick:()=>v(!0)})]})]}),!b&&ce(se,{children:[le(Wx,{label:"Company name",value:l,onChange:e=>s(e.target.value),placeholder:"DinoDesign",size:"medium"}),le(rz,{label:"Year",value:Number(c),onChange:e=>d(e),min:1900,max:2100}),le(Wx,{label:"Rights text",value:h,onChange:e=>p(e.target.value),placeholder:"All rights reserved",size:"medium"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:'Leave Rights blank to omit "All rights reserved." entirely.'})]}),b&&ce(se,{children:[le(Wx,{label:"Custom text",value:f,onChange:e=>g(e.target.value),placeholder:"© 2026 DinoDesign · MIT License · Built with love",size:"medium",multiline:!0}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Pass any string (or React node) as children to fully override the auto text."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:oz.map(e=>le(lz,{label:e.label,selected:x===e.value,onClick:()=>y(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"Matches the Footer color presets so the two stack cleanly."})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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."}),w&&le(ry,{targetRef:w,label:"Copyright strip",deps:[x,b,l,c,h,f]})]})]}),le(Lb,{value:3,children:le(fA,{component:"Copyright"})})]})]})}const cz=["Link","Chip","Badge","Caption","Label","Tag","BodySmall","LegalSemibold","Legal","LabelSmall","LabelExtraSmall","EyebrowSmall","ButtonSmall"];function dz(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 i=a.type;if(i){const e=i.displayName||i.name||"";if(cz.some(a=>e.includes(a)))return!0}return!1})(a)&&(t=!0)}),t}function hz({children:e,gap:a,spacing:t,direction:i="column",enforceMinGap:n=!0,minGapToken:r="--min-stack-gap",divider:o,flexWrap:l,useFlexGap:s=!0,alignItems:d,justifyContent:h,sx:u={},className:p="",...f}){const g=void 0!==a?a:t,b=n&&dz(e),v=c(()=>{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}(r,8);return e>=a?g:"var("+r+", "+a+"px)"},[b,g,r]);return le(m,{direction:i,spacing:s?void 0:v,gap:s?v:void 0,divider:o,flexWrap:l,useFlexGap:s,alignItems:d,justifyContent:h,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"}}:{},...u},"data-min-gap-enforced":b?"true":void 0,...f,children:e})}const uz=e=>le(hz,{direction:"row",alignItems:"center",...e}),mz=e=>le(hz,{direction:"column",...e}),pz=e=>le(hz,{direction:"column",alignItems:"center",justifyContent:"center",...e}),fz=e=>le(hz,{direction:"row",alignItems:"center",justifyContent:"space-between",...e}),gz=e=>le(hz,{direction:"row",flexWrap:"wrap",...e}),bz=({breakpoint:e="sm",...a})=>le(hz,{direction:{xs:"column",[e]:"row"},...a}),vz=hz,xz=gz,yz=e=>le(u,{sx:{borderBottom:"1px solid var(--Border)",width:"100%"},...e}),zz=({sx:e,...a})=>le(hz,{sx:{px:2,...e},...a}),wz=({sx:e,...a})=>le(hz,{sx:{overflowY:"auto",...e},...a}),Sz={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 kz({color:e="default",brand:a,address:t,columns:i=[],socialLinks:n=[],copyright:r=!0,children:o,subscribe:l,copyrightName:s,copyrightYear:c,className:d,style:h,...u}){const m=i.slice(0,3),p=Sz[e]||Sz.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 ce("footer",{...f,className:["dino-footer",d].filter(Boolean).join(" "),style:{...g,...h},...u,children:[ce("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||ce(se,{children:[le(Cz,{address:t}),m.map((e,a)=>le(Bz,{...e},a))]})}),(n.length>0||l)&&ce("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:[n.length>0&&le(Tz,{links:n}),l&&le(Mz,{...l})]})]}),r&&le(iz,{color:e,companyName:s,year:c})]})}function Cz({address:e}){if(!e)return le("div",{});const{company:a,lines:t=[],email:i,phone:n}=e,r=[...a?[a]:[],...t,...n?[n]:[]];return ce("div",{children:[r.map((e,a)=>le(xi,{style:{color:"inherit",opacity:.85,display:"block"},children:e},a)),i&&le("div",{style:{marginTop:12},children:le(xi,{style:{color:"inherit",opacity:.85,display:"block"},children:le(mn,{href:"mailto:"+i,color:"standard",style:{color:"inherit"},children:i})})})]})}function Bz({title:e,links:a=[]}){return ce(mz,{gap:"var(--Sizing-1)",children:[e&&le(ci,{style:{color:"inherit"},children:e}),le(mz,{component:"ul",gap:"var(--Sizing-1)",sx:{listStyle:"none",m:0,p:0},children:a.map((e,a)=>le("li",{children:le(mn,{href:e.href,onClick:e.onClick,color:"standard",style:{color:"inherit",opacity:.85},children:e.label})},a))})]})}function Tz({links:e}){return le(uz,{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 Mz({title:e="Stay in the loop",description:t,placeholder:i="your@email.com",buttonLabel:n="Subscribe",onSubscribe:r}){const[o,l]=a(""),[s,c]=a(!1);return ce("form",{onSubmit:async e=>{if(e&&e.preventDefault(),o&&!s){c(!0);try{await(r?.(o)),l("")}finally{c(!1)}}},style:{minWidth:260,maxWidth:360,flex:"1 1 260px"},children:[le(ci,{style:{color:"inherit",marginBottom:6},children:e}),t&&le(xi,{style:{color:"inherit",opacity:.85,marginBottom:12,display:"block"},children:t}),ce("div",{style:{display:"flex",gap:8},children:[le(Wx,{type:"email",value:o,onChange:e=>l(e.target.value),placeholder:i,size:"small",fullWidth:!0,"aria-label":"Email address"}),le(nb,{type:"submit",size:"small",disabled:s||!o,children:n})]})]})}const Az={company:"DinoDesign",lines:["123 Market Street","San Francisco, CA 94103"],email:"hello@dinodesign.dev",phone:"+1 (555) 010-0000"},Lz=[{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:"#"}]}],Iz=[{icon:le(Ra,{fontSize:"small"}),url:"https://twitter.com",label:"Twitter"},{icon:le(Fa,{fontSize:"small"}),url:"https://github.com",label:"GitHub"},{icon:le(Pa,{fontSize:"small"}),url:"https://linkedin.com",label:"LinkedIn"}],Nz=[{value:"default",label:"Default"},{value:"primary",label:"Primary"},{value:"primary-dark",label:"Primary Dark"},{value:"white",label:"White"},{value:"black",label:"Black"}];function Wz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Dz(){const[e,n]=a("Default"),[r,o]=a("Surface"),[l,s]=a(4),[c,d]=a(!0),[h,p]=a(!0),[f,g]=a("default"),b=i(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,c,h]);const w=Lz.slice(0,Math.max(0,l-1)),S=c?Iz:[],k=h?{title:"Stay in the loop",description:"Monthly updates on new components and tips.",onSubscribe:async e=>console.log("subscribed:",e)}:void 0;return ce(u,{children:[le(xA,{title:"Footer",component:"Footer"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:n,surface:r,onSurfaceChange:o})}),ce(wi,{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(u,{ref:b,sx:{borderRadius:1,overflow:"hidden",mb:4},children:le(kz,{color:f,address:Az,columns:w,socialLinks:S,subscribe:k,copyrightName:"DinoDesign"})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Footer",theme:e,surface:r})}),le(Lb,{value:1,children:ce(m,{spacing:3,sx:{p:3,maxWidth:560},children:[ce(u,{children:[le(Oi,{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(Wz,{label:String(e),selected:l===e,onClick:()=>s(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:"First column is always the address / contact. Up to 3 more link columns."})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{direction:"row",spacing:1,sx:{flexWrap:"wrap",rowGap:1},children:Nz.map(e=>le(Wz,{label:e.label,selected:f===e.value,onClick:()=>g(e.value)},e.value))}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:'"Default" hardcodes Primary tone 2 (auto-derived in a future iteration).'})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SOCIAL LINKS"}),le(zv,{label:"Show social media row",checked:c,onChange:e=>d(e.target.checked)}),ce(Li,{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."]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SUBSCRIBE"}),le(zv,{label:"Show email subscribe form",checked:h,onChange:e=>p(e.target.checked)}),ce(Li,{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)"}),"."]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(m,{spacing:2,sx:{p:3,maxWidth:560},children:[le(Li,{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(ry,{targetRef:v,label:"Footer body",deps:[f,l,c,h]}),y&&le(ry,{targetRef:y,label:"Copyright strip",deps:[f,l,c,h]})]})]}),le(Lb,{value:3,children:le(fA,{component:"Footer"})})]})]})}const Rz={none:void 0,small:"var(--Sm-Card-Radius, var(--Card-Radius))",medium:"var(--Card-Radius)",large:"var(--Lg-Card-Radius, var(--Card-Radius))"};function Fz({children:e,theme:a,surface:t,radius:i="none",elevation:n=0,component:r="div",className:o="",sx:l={},style:s,...c}){const d=Math.max(0,Math.min(5,0|n)),h=Rz[i];if(!d)return le(u,{component:r,"data-theme":a||void 0,"data-surface":t||void 0,className:"omni-box"+(o?" "+o:""),sx:{background:"var(--Background)",boxSizing:"border-box",...h?{borderRadius:h}:{},...l},style:s,...c,children:e});const m=s||{},{width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:w,marginRight:S,marginBottom:k,marginLeft:C,...B}=m,T={width:p,height:f,minWidth:g,minHeight:b,maxWidth:v,maxHeight:x,borderRadius:y,margin:z,marginTop:w,marginRight:S,marginBottom:k,marginLeft:C},{width:M,height:A,borderRadius:L,...I}=l;return le(u,{component:r,className:"omni-box-elevation"+(o?" "+o:""),"data-elevation":d,sx:{boxShadow:Uf[d],boxSizing:"border-box",width:M,height:A,borderRadius:void 0!==L?L:h},style:T,...c,children:le(u,{"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 Pz=["Surface","Surface-Dim","Surface-Bright","Container","Container-Low","Container-Lowest","Container-High"],Hz=["Default","Primary","Primary","Secondary","Secondary","Tertiary","Tertiary","Neutral","Neutral","Info","Success","Warning","Error"];function Oz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Ez(){const[e,t]=a(""),[i,n]=a(""),[r,o]=a("Default"),[l,s]=a("Surface");return ce(Fz,{sx:{pb:8},children:[le(xA,{title:"Box",component:"Box"}),le(Fz,{sx:{mt:1},children:le(ig,{theme:r,onThemeChange:o,surface:l,onSurfaceChange:s})}),ce(wi,{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."]}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"When to use"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Box",theme:r,surface:l})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:r,surface:l,children:le(Fz,{sx:{width:"100%",maxWidth:400},children:le(Fz,{theme:e||void 0,surface:i||void 0,children:ce(Fz,{sx:{padding:3,backgroundColor:"var(--Background)",color:"var(--Text)",borderRadius:"var(--Style-Border-Radius)",border:"1px dashed var(--Border-Variant)"},children:[le(di,{children:"Box content"}),le(wi,{style:{color:"var(--Text-Quiet)",marginTop:6},children:"Anything dropped inside resolves tokens against the Box's theme / surface, if you set them."})]})})})}),le(nv,{code:(()=>{const a=[];e&&a.push('theme="'+e+'"'),i&&a.push('surface="'+i+'"');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:ce(Fz,{sx:{p:3},children:[le(Fz,{sx:{mb:3}}),ce(Fz,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"THEME (optional)"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(Oz,{label:"None",selected:!e,onClick:()=>t("")}),Hz.map(a=>le(Oz,{label:a,selected:e===a,onClick:()=>t(a)},a))]})]}),ce(Fz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE (optional)"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(Oz,{label:"None",selected:!i,onClick:()=>n("")}),Pz.map(e=>le(Oz,{label:e,selected:i===e,onClick:()=>n(e)},e))]}),ce(Li,{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(Lb,{value:2,children:le(Fz,{sx:{p:3},children:ce(m,{spacing:2,children:[ce(Fz,{children:[le(xi,{style:{fontWeight:700},children:"Reach for Box when…"}),le(Li,{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."})]}),ce(Fz,{children:[le(xi,{style:{fontWeight:700},children:"Use Ratio when…"}),le(Li,{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."})]}),ce(Fz,{children:[le(xi,{style:{fontWeight:700},children:"Use Card when…"}),le(Li,{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(Lb,{value:3,children:le(fA,{component:"Box"})})]})]})}const Vz={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Qz={small:{height:"4px",borderRadius:"2px"},medium:{height:"6px",borderRadius:"3px"},large:{height:"8px",borderRadius:"4px"}};function jz({value:e,color:a="primary",size:t="medium",className:i="",sx:n={},...r}){const o=Vz[a]||"Primary",l=Qz[t]||Qz.medium,s=null!=e,c=s?Math.min(100,Math.max(0,e)):0,d="var(--Buttons-"+o+"-Border)";return le(u,{role:"progressbar","aria-valuenow":s?Math.round(c):void 0,"aria-valuemin":s?0:void 0,"aria-valuemax":s?100:void 0,"aria-label":s?Math.round(c)+"% progress":"Loading",className:"linear-progress linear-progress-"+t+" linear-progress-"+a+(s?" linear-progress-determinate":" linear-progress-indeterminate")+" "+i,sx:{position:"relative",width:"100%",height:l.height,borderRadius:l.borderRadius,backgroundColor:"var(--Border-Variant)",overflow:"hidden",flexShrink:0,...n},...r,children:le(u,{className:"linear-progress-bar",sx:{position:"absolute",top:0,left:0,height:"100%",borderRadius:"inherit",backgroundColor:d,...s?{width:c+"%",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 qz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Gz=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Uz({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Yz({color:e,selected:a,onClick:t}){const i=qz(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Xz(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(65),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Linear Progress",component:"LinearProgress"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"LinearProgress",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:400},children:le(jz,{color:e,size:i,value:r?l:void 0})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:Gz.map(a=>ce(u,{children:[le(Li,{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(Yz,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Uz,{label:qz(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Determinate"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static bar at a specific value"})]}),le(yv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),r&&le(u,{sx:{mt:2},children:le(jx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>s(a),size:"small",valueLabelDisplay:"auto"})})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"LinearProgress"})})]})]})}const Jz={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",white:"Neutral",black:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},Zz={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 $z({value:e,color:a="primary",size:t="medium",thickness:i,showValue:n=!1,children:r,className:l="",sx:s={},...c}){const d=Jz[a]||"Primary",h="number"==typeof t?{diameter:t,thickness:Math.max(2,Math.round(t/11)),fontSize:Math.max(8,Math.round(t/3.3))+"px"}:Zz[t]||Zz.medium,m=i||h.thickness,p=null!=e,f=p?Math.min(100,Math.max(0,e)):0,g=(h.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 ce(u,{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:h.diameter+"px",height:h.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)"}}},...s},...c,children:[ce("svg",{viewBox:"0 0 "+h.diameter+" "+h.diameter,width:h.diameter,height:h.diameter,style:{position:"absolute",top:0,left:0,transform:"rotate(-90deg)"},children:[le("defs",{children:ce("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:h.diameter/2,cy:h.diameter/2,r:g,fill:"none",stroke:"var(--Border-Variant)",strokeWidth:m,className:"circular-progress-track"}),le("circle",{cx:h.diameter/2,cy:h.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"}})]}),(n||r)&&p&&le(u,{className:"circular-progress-label","aria-hidden":"true",sx:{position:"relative",zIndex:1,fontSize:h.fontSize,fontWeight:700,fontFamily:"inherit",lineHeight:1,color:"var(--Text)",userSelect:"none"},children:r||Math.round(f)+"%"})]})}const Kz=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",_z=[{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(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function aw({color:e,selected:a,onClick:t}){const i=Kz(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function tw(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(65),[c,d]=a(!1),[h,p]=a("Default"),[f,g]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Circular Progress",component:"CircularProgress"}),le(u,{sx:{mt:1},children:le(ig,{theme:h,onThemeChange:p,surface:f,onSurfaceChange:g})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"CircularProgress",theme:h,surface:f})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:h,surface:f,children:le($z,{color:e,size:i,value:r?l:void 0,showValue:r&&c})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),r&&(a.push("value={"+l+"}"),c&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:_z.map(a=>ce(u,{children:[le(Li,{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(aw,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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:Kz(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Determinate"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show a static arc at a specific value"})]}),le(yv,{checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Determinate"})]}),r&&ce(se,{children:[le(u,{sx:{mt:2},children:le(jx,{label:"Value",min:0,max:100,value:l,onChange:(e,a)=>s(a),size:"small",valueLabelDisplay:"auto"})}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Label"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Center percentage text"})]}),le(yv,{checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show label"})]})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Role:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="progressbar"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Determinate:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-valuenow, aria-valuemin="0", aria-valuemax="100"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Indeterminate:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'aria-label="Loading" (no value attributes)'})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Label:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Center percentage label is aria-hidden — screen readers use aria-valuenow."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Token Reference"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Track (back circle):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Border-Variant)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Fill (progress arc):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Buttons-{Color}-Border)"})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Center label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]})]})]})]})})]}),le(Lb,{value:3,children:le(fA,{component:"CircularProgress"})})]})]})}const iw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",nw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function rw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ow({color:e,selected:a,onClick:t}){const i=iw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function lw(){const[e,t]=a("outlined"),[i,n]=a("outline"),[r,o]=a("default"),[l,s]=a("medium"),[c,d]=a("top"),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Number Field",component:"NumberField"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"NumberField",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:"outlined"===e?300:"auto"},children:le(rz,{variant:e,style:i,color:r,size:l,label:h?"Quantity":void 0,labelPosition:c,min:0,max:100,disabled:f,fullWidth:b&&"outlined"===e})})}),le(nv,{code:(()=>{const a=['variant="'+e+'"'];return"outline"!==i&&a.push('style="'+i+'"'),"default"!==r&&a.push('color="'+r+'"'),"medium"!==l&&a.push('size="'+l+'"'),h&&a.push('label="Quantity"'),"top"!==c&&a.push('labelPosition="'+c+'"'),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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",spacing:1,children:["outlined","spinner"].map(a=>le(rw,{label:iw(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(e=>le(rw,{label:iw(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:nw.map(e=>ce(u,{children:[le(Li,{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(ow,{color:e,selected:r===e,onClick:o},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(rw,{label:iw(e),selected:l===e,onClick:()=>s(e)},e))})]}),"outlined"===e&&ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(rw,{label:"none"===e?"None":iw(e),selected:c===e,onClick:()=>d(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Label"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Text label above field"})]}),le(yv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show label"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),"outlined"===e&&ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container"})]}),le(yv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"NumberField"})})]})]})}const sw={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},cw={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 dw({theme:e,surface:t,value:i,defaultValue:n,onChange:r,max:o=5,precision:l=1,color:s="default",size:c="medium",readOnly:d=!1,disabled:h=!1,emptyLabel:m="No rating",className:p="",sx:f={},...g}){const[b,v]=a(n??null),[x,y]=a(null),z=void 0!==i,w=z?i:b,S=null!==x?x:w,k=.5===l,C=!d&&!h,B=sw[s]||sw.default,T=cw[c]||cw.medium,M="var(--Buttons-"+B+"-Button)",A="var(--Buttons-"+B+"-Border)",L=e=>{if(!C)return;const a=e===w?null:e;z||v(a),r?.(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,i=null!==S&&a<=S,n=null!==S&&!i&&k&&t<=S,r=n?Ha:Ne,s=((e,a)=>e||a?{color:M,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}})(i,n);return k&&C?ce(u,{sx:{position:"relative",display:"inline-flex",cursor:"pointer",...s,...N},onMouseLeave:()=>y(null),children:[le(u,{sx:{position:"absolute",left:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!0),onClick:()=>L(t)}),le(u,{sx:{position:"absolute",right:0,top:0,width:"50%",height:"100%",zIndex:1,cursor:"pointer"},onMouseEnter:()=>I(e,!1),onClick:()=>L(a)}),le(r,{sx:{fontSize:T.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})]},e):le(u,{component:C?"button":"span",type:C?"button":void 0,role:C?"radio":void 0,"aria-checked":i,"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((w||0)+l,o))),"ArrowLeft"===e.key||"ArrowDown"===e.key)){e.preventDefault();const a=Math.max((w||0)-l,0);L(a||null)}},sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",border:"none",backgroundColor:"transparent",padding:0,...T.minHit&&{minWidth:T.minHit+"px",minHeight:T.minHit+"px"},cursor:h?"not-allowed":C?"pointer":"default",outline:"none",transition:"transform 0.1s ease",...s,...N,"&:active":C?{transform:"scale(0.95)"}:{},"&:focus-visible":C?{outline:T.focusWidth+"px solid var(--Focus-Visible)",outlineOffset:T.focusInset+"px",borderRadius:"2px"}:{},"&:disabled":{cursor:"not-allowed",opacity:"var(--Disabled, 0.38)"}},children:le(r,{sx:{fontSize:T.iconSize,transition:"color 0.1s ease, filter 0.1s ease"}})},e)};return ce(u,{role:C?"radiogroup":"img","aria-label":"Rating"+(null!==w?": "+w+" of "+o+" stars":": "+m),"data-theme":e||void 0,"data-surface":t||void 0,className:"rating rating-"+s+" rating-"+c+(d?" rating-readonly":"")+(h?" rating-disabled":"")+(null===w?" rating-empty":"")+(p?" "+p:""),sx:{display:"inline-flex",alignItems:"center",gap:T.gap+"px",opacity:h?"var(--Disabled, 0.38)":1,fontFamily:"inherit",...f},...g,children:[Array.from({length:o},(e,a)=>W(a)),null===w&&!x&&le(Li,{style:{color:"var(--Quiet)",marginLeft:4},children:m})]})}const hw={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 uw({children:a,separator:t="/",size:i="medium",condense:n=!1,maxItems:r=4,itemsBeforeCollapse:o=1,itemsAfterCollapse:l=1,backOnlyMobile:s=!1,onExpand:c,className:m="",sx:p={},...f}){const g=hw[i]||hw.medium,b=d.toArray(a).filter(h),v=b.length,x=n&&v>r;let y=b;const[z,w]=e.useState(!1);if(x&&!z){const e=b.slice(0,o),a=b.slice(v-l);y=[...e,le(u,{component:"button",onClick:()=>{w(!0),c?.()},"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 S=[];y.forEach((e,a)=>{const i=x&&!z?a===y.length-1:a===v-1;S.push(le(u,{component:"li",className:"breadcrumb-item"+(i?" breadcrumb-current":""),sx:{display:"inline-flex",alignItems:"center",...i&&{color:"var(--Text)",fontWeight:"var(--Body-Medium-Semibold-Font-Weight, 600)"},...!i&&{color:"var(--Link, var(--Hotlink))"},maxWidth:"200px","& > *":{overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}},...i?{"aria-current":"page"}:{},children:e},"crumb-"+a)),a<y.length-1&&S.push(le(u,{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 ce(u,{component:"nav","aria-label":"Breadcrumb",className:"breadcrumbs breadcrumbs-"+i+" "+m,sx:{fontSize:g.fontSize,fontFamily:"var(--Body-Font-Family)",lineHeight:1.5,...p},...f,children:[le(u,{component:"ol",className:"breadcrumbs-list",sx:{display:"flex",flexWrap:"wrap",alignItems:"center",gap:"var(--Sizing-1)",listStyle:"none",margin:0,padding:0,...s&&{"@media (max-width: 600px)":{display:"none"}}},children:S}),s&&k&&ce(u,{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(u,{component:"span","aria-hidden":"true",sx:{fontSize:"1.1em",lineHeight:1},children:"←"}),e.cloneElement(k,{style:{...k.props?.style||{},textDecoration:"underline",textUnderlineOffset:"3px"}})]})]})}function mw({children:e,href:a,className:t="",sx:i={},...n}){const r=!!a;return le(u,{component:r?"a":"span",href:a||void 0,className:"breadcrumb-link "+t,sx:{color:"inherit",textDecoration:r?"underline":"none",textUnderlineOffset:"3px",textDecorationThickness:"1px",cursor:r?"pointer":"default",transition:"color 0.15s ease",...r&&{"&:hover":{textDecorationThickness:"2px"},"&:active":{textDecorationThickness:"3px"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"2px",borderRadius:"2px"}},...i},...n,children:e})}const pw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"";function fw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function gw(){const[e,t]=a("medium"),[i,n]=a("/"),[r,o]=a(!1),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Breadcrumbs",component:"Breadcrumbs"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Breadcrumbs",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:l,surface:c,children:ce(uw,{size:e,separator:i,condense:r,maxItems:3,children:[le(mw,{href:"#",children:"Home"}),le(mw,{href:"#",children:"Products"}),le(mw,{href:"#",children:"Shoes"}),le(mw,{children:"Running Shoes"})]})}),le(nv,{code:(()=>{const a=[];return"medium"!==e&&a.push('size="'+e+'"'),"/"!==i&&a.push('separator="'+i+'"'),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(a=>le(fw,{label:pw(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEPARATOR"}),le(m,{direction:"row",spacing:1,children:["/","›","→","·","|"].map(e=>le(fw,{label:e,selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Condense"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Collapse middle items into ellipsis"})]}),le(yv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Condense"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Breadcrumbs"})})]})]})}const bw={small:{btnSize:"small",fontSize:"13px",gap:"2px"},medium:{btnSize:"medium",fontSize:"14px",gap:"4px"},large:{btnSize:"large",fontSize:"16px",gap:"4px"}};function vw({theme:e,surface:t,count:i=10,page:r,defaultPage:o=1,onChange:l,color:s="default",size:c="medium",siblingCount:d=1,boundaryCount:h=1,disabled:m=!1,showFirstButton:p=!1,showLastButton:f=!1,className:g="",sx:b={},...v}){const[x,y]=a(o),z=void 0!==r,w=z?r:x;(e=>{e.charAt(0).toUpperCase(),e.slice(1)})("default"===s?"Default":s);const S=bw[c]||bw.medium,k=n(e=>{const a=Math.max(1,Math.min(i,e));z||y(a),l?.(a)},[i,z,l]),C=function({count:e,page:a,siblingCount:t=1,boundaryCount:i=1}){const n=(e,a)=>Array.from({length:a-e+1},(a,t)=>e+t);if(2*t+3+2*i>=e)return n(1,e);const r=Math.max(a-t,i+1),o=Math.min(a+t,e-i),l=r>i+2,s=o<e-i-1;if(!l&&s)return[...n(1,Math.min(3+2*t+i,e)),"ellipsis-right",...n(e-i+1,e)];if(l&&!s){const a=n(Math.max(e-(3+2*t+i)+1,1),e);return[...n(1,i),"ellipsis-left",...a]}return l&&s?[...n(1,i),"ellipsis-left",...n(r,o),"ellipsis-right",...n(e-i+1,e)]:n(1,e)}({count:i,page:w,siblingCount:d,boundaryCount:h}),B="default"===s?"default":s;return le(u,{component:"nav","aria-label":"Pagination","data-theme":e||void 0,"data-surface":t||void 0,className:"pagination pagination-"+s+" pagination-"+c+" "+g,sx:{display:"inline-flex",...b},...v,children:ce(u,{component:"ul",sx:{display:"flex",alignItems:"center",gap:S.gap,listStyle:"none",m:0,p:0,flexWrap:"wrap"},children:[p&&le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||1===w,onClick:()=>k(1),"aria-label":"Go to first page",children:le(Ff,{size:"small",children:le(Va,{})})})}),le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||1===w,onClick:()=>k(w-1),"aria-label":"Go to previous page",children:le(Ff,{size:"small",children:le(Oa,{})})})}),C.map((e,a)=>{if("string"==typeof e)return le(u,{component:"li",children:le(Li,{style:{color:"var(--Quiet)",padding:"0 4px"},"aria-hidden":"true",children:"…"})},e+"-"+a);const t=e===w;return le(u,{component:"li",children:le(nb,{variant:B+"-outline",selected:t,size:S.btnSize,disabled:m,onClick:()=>k(e),"aria-label":"Page "+e,"aria-current":t?"page":void 0,letterNumber:!0,children:e})},e)}),le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||w===i,onClick:()=>k(w+1),"aria-label":"Go to next page",children:le(Ff,{size:"small",children:le(Ea,{})})})}),f&&le(u,{component:"li",children:le(nb,{iconOnly:!0,variant:B+"-outline",size:S.btnSize,disabled:m||w===i,onClick:()=>k(i),"aria-label":"Go to last page",children:le(Ff,{size:"small",children:le(Qa,{})})})})]})})}const xw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",yw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]},{label:"Buttons only",colors:["black-white"]}];function zw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function ww({color:e,selected:a,onClick:t}){const i=xw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Sw(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(10),[l,s]=a(!1),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Pagination",component:"Pagination"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Pagination",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:f,surface:b,children:le(vw,{color:e,size:i,count:r,showFirstButton:l,showLastButton:c,disabled:h})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),10!==r&&a.push("count={"+r+"}"),l&&a.push("showFirstButton"),c&&a.push("showLastButton"),h&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:yw.map(a=>ce(u,{children:[le(Li,{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(ww,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(zw,{label:xw(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(zw,{label:String(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"First/Last Buttons"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show jump to first/last page"})]}),le(yv,{variant:"default-outline",checked:l,onChange:e=>{s(e.target.checked),d(e.target.checked)},size:"small","aria-label":"First/last buttons"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Pagination"})})]})]})}const kw=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Cw=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],Bw=[{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function Tw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Mw({color:e,selected:a,onClick:t}){const i=kw(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function Aw(){const[e,t]=a("standard"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("horizontal"),[c,d]=a("Default"),[h,p]=a("Surface"),[f,g]=a(!1),b="standard"===e?Cw:Bw;return ce(u,{sx:{pb:8},children:[le(xA,{title:"Tabs",component:"Tabs"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(y,{container:!0,sx:{mt:2,alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:"vertical"===l?500:"100%",display:"flex",flexDirection:"vertical"===l?"row":"column"},children:ce(Tb,{defaultValue:0,variant:e,color:i,size:r,orientation:l,children:[ce(Mb,{rounded:f,children:[le(Ab,{children:"Overview"}),le(Ab,{children:"Features"}),le(Ab,{children:"Pricing"})]}),le(Lb,{value:0,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Overview content goes here."})})}),le(Lb,{value:1,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Features content goes here."})})}),le(Lb,{value:2,children:le(u,{sx:{p:2},children:le(wi,{style:{color:"var(--Quiet)"},children:"Pricing content goes here."})})})]})})}),le(nv,{code:(()=>{const a=[];return"standard"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"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(u,{sx:{backgroundColor:"var(--Background)",overflow:"hidden"},children:ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"})]}),le(Lb,{value:0,children:ce(u,{sx:{p:3},children:[le(u,{sx:{mb:3}}),ce(u,{children:[le(Oi,{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(Tw,{label:kw("standard"===a?"default":a),selected:e===a,onClick:()=>(e=>{t(e),"standard"!==e&&"default"===i&&n("primary")})(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:b.map(e=>ce(u,{children:[le(Li,{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(Mw,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Tw,{label:kw(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(Tw,{label:kw(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SHAPE"}),le(yv,{label:"Rounded corners",checked:f,onChange:e=>g(e.target.checked)}),ce(Li,{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)."]})]})]})}),ce(Lb,{value:1,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]})]})})})]})]})}let Lw=!1;let Iw=!1;const Nw=new Set;function Ww({variant:t="outlined",color:i="default",size:n="medium",disabled:r=!1,orientation:o="horizontal",separated:l=!0,spacing:s,fit:c,fullWidth:d=!1,equalWidth:h=!1,multiple:m=!1,allowEmpty:p=!0,__selectionOwner:f=!1,value:g,defaultValue:b,onChange:v,children:x,className:y="",sx:z={},"aria-label":w,...S}){const k=void 0!==g||void 0!==b||void 0!==v||m;!f&&k&&(Iw||"production"===process.env.NODE_ENV||(Iw=!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||(Lw||"production"===process.env.NODE_ENV||(Lw=!0,console.warn("[OmniDesign] ButtonGroup is separated — a row of actions, spaced — and cannot be joined, so `separated={false}` is ignored. Joining makes the row read as one control with one segment chosen, 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>.")),l=!0);const[B,T]=a(b??(m?[]:null)),M=void 0!==g,A=M?g:B,L=m?Array.isArray(A)?A:null==A?[]:[A]:null,I="horizontal"===o,N=void 0!==s?s:l?"var(--Platform-Spacer)":0,W=!l&&0===N,D="light"===t,R="ghost"===t,F=c??(d?"fill":h?"equal":"hug"),P="fill"===F,H="equal"===F&&I,O=(E=i).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"===i?void 0:O,Y=e.Children.toArray(x).filter(Boolean),X=Y.length,J=(e,a)=>t=>{const i=m?L.includes(e)?L.filter(a=>a!==e):[...L,e]:e;!m||p||0!==i.length?(M||T(i),v?.(i,t),a?.(t)):a?.(t)},Z=Y.map((a,t)=>{if(!e.isValidElement(a))return a;const o=0===t,s=t===X-1,c=a.props.value??t,d=(h=c,m?L.includes(h):A===h);var h;let p,f;if(W&&X>1){const e=I?"var(--Button-Radius)":"var(--Vertical-Button-Radius)";p=I?o&&s?e:o?e+" 0 0 "+e:s?"0 "+e+" "+e+" 0":"0":o&&s?e:o?e+" "+e+" 0 0":s?"0 0 "+e+" "+e:"0"}if(W&&X>1){const e=I?"var(--Button-Focus-Radius)":"var(--Vertical-Button-Focus-Radius)";f=I?o&&s?e:o?e+" 0 0 "+e:s?"0 "+e+" "+e+" 0":"0":o&&s?e:o?e+" "+e+" 0 0":s?"0 0 "+e+" "+e:"0"}const g=W&&X>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 i=String(e.variant||"");i&&!/-outline$/.test(i)&&"ghost"!==i&&"text"!==i&&t.push(`a solid segment (variant="${i}") — 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)Nw.has(e)||(Nw.add(e),console.warn("[ButtonGroup] "+e+"."))}(a.props,l);const w=e.cloneElement(a,{variant:a.props.variant??(C?R?d?i+"-outline":"ghost":d?i:i+"-outline":R?"ghost":i),size:a.props.size??n,disabled:a.props.disabled??r,onClick:J(c,a.props.onClick),...C?{"aria-pressed":d}:{},sx:z});return D&&!d?le(u,{"data-theme":U,"data-surface":"Surface-Brightest",sx:{display:"contents"},children:w},t):e.cloneElement(w,{key:t})});return le(u,{role:w?"group":void 0,"aria-label":w,className:"btn-group btn-group-"+t+" btn-group-"+i+" "+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},...S,children:Z})}const Dw={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"}},Rw=l({variant:"solid",color:"default",size:"medium",spacing:0}),Fw=l({expanded:!1,toggle:()=>{},disabled:!1,accordionId:""}),Pw="var(--Accordion-Radius, var(--Button-Radius))";function Hw({children:e,variant:a="solid",surface:t,color:i="default",size:n="medium",spacing:r=0,className:o="",sx:l={},...s}){const c="default"===i?"Default":(d=i).charAt(0).toUpperCase()+d.slice(1);var d;const h=0===r,m="default"===i?"Default":c,p=t||("dark"===a?"Surface-Dimmest":"light"===a?"Surface-Brightest":"Surface");return le(Rw.Provider,h?{value:{variant:a,color:i,size:n,spacing:r,dataTheme:m,dataSurface:p},children:le(u,{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:Pw,borderTopRightRadius:Pw},"& > .accordion-segment:first-of-type .accordion-summary":{borderTopLeftRadius:Pw,borderTopRightRadius:Pw},"& > .accordion-segment:last-of-type":{borderBottomLeftRadius:Pw,borderBottomRightRadius:Pw,marginBottom:0},"& > .accordion-segment:last-of-type .accordion-summary:not(.accordion-summary-expanded)":{borderBottomLeftRadius:Pw,borderBottomRightRadius:Pw},...l},...s,children:e})}:{value:{variant:a,color:i,size:n,spacing:r,dataTheme:m,dataSurface:p},children:le(u,{role:"presentation",className:"accordion-group accordion-group-"+a+" accordion-group-spaced "+o,sx:{display:"flex",flexDirection:"column",gap:.5===r?"var(--Sizing-Half)":1===r?"var(--Sizing-1)":1.5===r?"var(--Sizing-1-and-Half)":2===r?"var(--Sizing-2)":8*r+"px",...l},...s,children:e})})}function Ow({children:e,expanded:t,defaultExpanded:i=!1,onChange:n,disabled:r=!1,className:o="",sx:l={},...c}){const[d,h]=a(i),m=void 0!==t,p=m?t:d,{dataTheme:f,dataSurface:g}=s(Rw),[b]=a(()=>"accordion-"+Math.random().toString(36).substring(2,9));return le(Fw.Provider,{value:{expanded:p,toggle:()=>{if(r)return;const e=!p;m||h(e),n?.(e)},disabled:r,accordionId:b},children:le(u,{className:"accordion-segment accordion"+(p?" accordion-expanded":"")+(r?" accordion-disabled":"")+" "+o,"data-theme":f,"data-surface":g,sx:{border:"1px solid var(--Border-Variant)",borderRadius:Pw,backgroundColor:"var(--Background)",overflow:"hidden",boxShadow:Vf,opacity:r?"var(--Disabled, 0.38)":1,...l},...c,children:e})})}const Ew={small:yi,medium:Si,large:Mi},Vw={small:xi,medium:wi,large:Ti};function Qw({children:e,startDecorator:a,endDecorator:t,eyebrow:i,overline:n,secondary:r,expandIcon:o,className:l="",sx:c={},...d}){const{expanded:h,toggle:m,disabled:p,accordionId:f}=s(Fw),{size:g}=s(Rw),b=Dw[g]||Dw.medium,v=Ew[g]||Ew.medium,x=o||le(Ff,{size:b.iconSize,sx:{color:h?"var(--Text)":"var(--Quiet)",transition:"color 0.15s ease"},children:le(he,{})}),y={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block"};return ce(u,{component:"button",role:"button","aria-expanded":h,"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"+(h?" 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:h?"var(--Text)":"var(--Quiet)",fontFamily:"inherit",cursor:p?"not-allowed":"pointer",textAlign:"left",transition:"color 0.2s ease, background-color 0.15s ease",borderRadius:h?Pw+" "+Pw+" 0 0":Pw,"&: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"},...c},...d,children:[a&&le(u,{className:"accordion-summary-start",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:a}),ce(u,{sx:{flex:1,minWidth:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)"},children:[(i??n)&&le(Oi,{style:{...y,color:"var(--Text-Quiet)"},children:i??n}),null!=e&&le(v,{style:{...y,color:"inherit"},children:e}),r&&le(xi,{style:{...y,color:"var(--Text-Quiet)"},children:r})]}),t&&le(u,{className:"accordion-summary-end",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0},children:t}),le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",transform:h?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.25s ease",flexShrink:0},children:x})]})}function jw({children:e,className:a="",sx:t={},...i}){const{expanded:n,accordionId:r}=s(Fw),{size:o}=s(Rw),l=Dw[o]||Dw.medium,c=Vw[o]||Vw.medium;return n?le(u,{role:"region",id:r+"-content","aria-labelledby":r+"-header",className:"accordion-details "+a,sx:{padding:"0 "+l.detailsPx+" "+l.detailsPy+" "+l.detailsPx,color:"var(--Text)",fontFamily:"inherit",lineHeight:1.6,...t},...i,children:"string"==typeof e||"number"==typeof e?le(c,{children:e}):e}):null}function qw({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"primary":"primary-outline",size:"small",onClick:t,children:e})}function Gw({code:e}){return le(nv,{code:e,language:"JSX",wrap:!0,sx:{mt:1}})}function Uw({passes:e}){return ce(u,{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?Se:ke,{sx:{fontSize:14}}),e?"WCAG Pass":"WCAG Fail"]})}function Yw({leftLabel:e,rightLabel:a,leftContent:t,rightContent:i,leftCode:n,rightCode:r,leftPasses:o,rightPasses:l}){return ce(y,{container:!0,spacing:3,children:[le(y,{item:!0,xs:12,md:6,children:ce(u,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(xi,{style:{fontWeight:600},children:e}),le(Uw,{passes:o})]}),le(u,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:t}),le(Gw,{code:n})]})}),le(y,{item:!0,xs:12,md:6,children:ce(u,{sx:{p:2,border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",backgroundColor:"var(--Background)",height:"100%"},children:[ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",mb:2},children:[le(xi,{style:{fontWeight:600},children:a}),le(Uw,{passes:l})]}),le(u,{sx:{p:2,backgroundColor:"var(--Surface-Dim, var(--Surface))",borderRadius:"var(--Style-Border-Radius)",minHeight:80},children:i}),le(Gw,{code:r})]})})]})}function Xw(){const[e,t]=a("column"),[i,n]=a(.5),[r,o]=a("small"),[l,s]=a(!0),[c,d]=a(!1),[h,m]=a("Default"),[p,f]=a("Surface"),g={small:{label:"Small links ⚡",content:ce(se,{children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{href:"#",size:"small",children:"Cookie Settings"})]})},chips:{label:"Chips ⚡",content:ce(se,{children:[le(fb,{label:"React",size:"small"}),le(fb,{label:"TypeScript",size:"small"}),le(fb,{label:"Design System",size:"small"})]})},normal:{label:"Normal buttons",content:ce(se,{children:[le(nb,{variant:"primary",size:"medium",children:"Primary"}),le(nb,{variant:"secondary",size:"medium",children:"Secondary"})]})},mixed:{label:"Mixed ⚡",content:ce(se,{children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{href:"#",size:"small",children:"Or discard"})]})}},b=["small","chips","mixed"].includes(r),v=l&&b;return ce(y,{container:!0,spacing:3,sx:{mt:1},children:[ce(y,{item:!0,xs:12,md:7,children:[le(wv,{theme:h,surface:p,children:ce(u,{sx:{width:"100%"},children:[v&&ce(u,{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(hz,{direction:e,gap:i,enforceMinGap:l,flexWrap:c?"wrap":void 0,children:g[r].content})]})}),le(Gw,{code:(()=>{const a=["<OmniStack"];return"column"!==e&&a.push(' direction="'+e+'"'),a.push(" gap={"+i+"}"),l||a.push(" enforceMinGap={false}"),c&&a.push(' flexWrap="wrap"'),a.push(">"),a.push(" {children}"),a.push("</OmniStack>"),a.join("\n")})()})]}),le(y,{item:!0,xs:12,md:5,children:ce(u,{sx:{display:"flex",flexDirection:"column",gap:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"CHILDREN"}),le(u,{sx:{display:"flex",flexWrap:"wrap",gap:1},children:Object.entries(g).map(([e,{label:a}])=>le(qw,{label:a,selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DIRECTION"}),le(u,{sx:{display:"flex",gap:1},children:["row","column"].map(a=>{return le(qw,{label:(i=a,i?i.charAt(0).toUpperCase()+i.slice(1):""),selected:e===a,onClick:()=>t(a)},a);var i})})]}),ce(u,{children:[ce(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:["GAP — ",i," unit",v?" → raised to var(--min-stack-gap)":""]}),ce(u,{sx:{display:"flex",alignItems:"center",gap:2},children:[le(u,{component:"input",type:"range",min:0,max:6,step:.5,value:i,onChange:e=>n(Number(e.target.value)),sx:{flex:1,accentColor:"var(--Primary-Color-10)"}}),le(Li,{style:{color:"var(--Text)",minWidth:24,textAlign:"right"},children:i})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",flexDirection:"column",gap:1.5},children:[ce(u,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"space-between"},children:[ce(u,{children:[le(xi,{children:"Enforce min gap"}),le(Li,{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(yv,{checked:l,onChange:e=>s(e.target.checked),size:"small"})]}),ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between"},children:[le(xi,{children:"Flex wrap"}),le(yv,{checked:c,onChange:e=>d(e.target.checked),size:"small"})]})]})]})]})})]})}function Jw(){const[e,t]=a("Default"),[i,n]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Stack",component:"Stack"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),le(wi,{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."}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Why it matters"}),le(Ab,{children:"Playground"}),le(Ab,{children:"API"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Stack",theme:e,surface:i})}),le(Lb,{value:1,children:ce(u,{sx:{pt:3,display:"flex",flexDirection:"column",gap:4},children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"The problem"}),le(wi,{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(Yw,{leftLabel:"Plain MUI Stack — gap too small",rightLabel:"OmniStack — gap auto-enforced",leftPasses:!1,rightPasses:!0,leftContent:ce(u,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{href:"#",size:"small",children:"Cookie Settings"})]}),rightContent:ce(hz,{gap:.5,children:[le(mn,{href:"#",size:"small",children:"Terms of Service"}),le(mn,{href:"#",size:"small",children:"Privacy Policy"}),le(mn,{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'})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Mixed component sizes"}),le(wi,{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(Yw,{leftLabel:"Without enforcement",rightLabel:"With enforcement",leftPasses:!1,rightPasses:!0,leftContent:ce(u,{sx:{display:"flex",flexDirection:"column",gap:"2px"},children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{href:"#",size:"small",children:"Or discard"})]}),rightContent:ce(hz,{gap:.25,children:[le(nb,{variant:"primary",size:"medium",children:"Save changes"}),le(mn,{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'})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"How detection works"}),le(wi,{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(u,{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,i)=>ce(u,{sx:{display:"flex",alignItems:"center",gap:2,py:1.5,borderBottom:t<i.length-1?"1px solid var(--Border)":"none"},children:[le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Primary-Color-10)",flexShrink:0}}),le(xi,{style:{flex:"0 0 200px"},children:e}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Token-driven minimum"}),le(wi,{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(Gw,{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. */"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)"},children:[le(si,{children:"Auditable opt-out"}),ce(wi,{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(Gw,{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(Lb,{value:2,children:le(Xw,{})}),le(Lb,{value:3,children:ce(u,{sx:{pt:3},children:[le(si,{children:"OmniStack props"}),le(wi,{style:{color:"var(--Text-Quiet)",marginTop:4,marginBottom:16},children:"All standard MUI Stack props are supported. These are OmniStack additions:"}),le(u,{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:i},n,r)=>ce(u,{sx:{display:"grid",gridTemplateColumns:"160px 160px 1fr",gap:2,px:2,py:1.5,alignItems:"start",borderBottom:n<r.length-1?"1px solid var(--Border)":"none",backgroundColor:n%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(Li,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a}),ce(u,{children:[le(Li,{style:{color:"var(--Text)"},children:i}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:2},children:["Default: ",t]})]})]},e))}),le(si,{children:"Convenience exports"}),le(u,{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,i)=>ce(u,{sx:{display:"grid",gridTemplateColumns:"200px 1fr",gap:2,px:2,py:1.5,borderBottom:t<i.length-1?"1px solid var(--Border)":"none",backgroundColor:t%2==0?"transparent":"var(--Surface-Dim, var(--Surface))"},children:[le(Li,{style:{fontFamily:"monospace",color:"var(--Primary-Color-10)",fontWeight:600},children:e}),le(Li,{style:{color:"var(--Text-Quiet)"},children:a})]},e))}),le(si,{children:"Debug attributes"}),le(Gw,{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(Lb,{value:4,children:le(fA,{component:"Stack"})})]})]})}const Zw=["primary","secondary","tertiary","neutral","info","success","warning","error"],$w=["small","medium","large"],Kw=({label:e,emphasis:a=!1,width:t,children:i})=>ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"center",width:t,textAlign:"center"},children:[le("div",{children:i}),le(Li,{color:a?"standard":"quiet",children:e})]}),_w=({values:e,render:a,defaultValue:t,width:i})=>{const n=e.filter(e=>e!==t),r=e=>le(Kw,{label:String(e),emphasis:e===t,width:i,children:a(e)},String(e));return ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-end",flexWrap:"wrap"},children:[void 0!==t?r(t):null,void 0!==t&&n.length?le(kx,{orientation:"vertical",style:{alignSelf:"stretch"}}):null,n.map(r)]})},eS=({values:e,render:a,defaultValue:t,width:i="100%"})=>{const n=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return le(mz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:420},children:n.map(e=>ce(mz,{gap:"var(--Sizing-Half)",style:{width:i},children:[le(Li,{color:e===t?"standard":"quiet",children:String(e)}),a(e)]},String(e)))})},aS=({render:e,offLabel:a="false",onLabel:t="true",width:i})=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:a,emphasis:!0,width:i,children:e(!1)}),le(Kw,{label:t,width:i,children:e(!0)})]}),tS=180,iS=(e,a=180)=>le("div",{style:{width:a},children:e}),nS={variant:()=>le(_w,{values:["default",...Zw],defaultValue:"default",width:tS,render:e=>iS(le(jx,{variant:e,defaultValue:60,"aria-label":e}))}),size:()=>le(_w,{values:$w,defaultValue:"medium",width:tS,render:e=>iS(le(jx,{size:e,defaultValue:60,"aria-label":e}))}),"value / defaultValue":()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"a number — one thumb"}),iS(le(jx,{defaultValue:60,"aria-label":"single"}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"an array — two thumbs, a range"}),iS(le(jx,{defaultValue:[25,75],getAriaLabel:()=>"range"}))]})]}),fill:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-1)",children:[le(Li,{color:"standard",children:"one thumb — Figma: single / single-inverted"}),ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"standard",emphasis:!0,width:tS,children:iS(le(jx,{defaultValue:60,"aria-label":"standard"}))}),le(Kw,{label:"inverted",width:tS,children:iS(le(jx,{defaultValue:60,fill:"inverted","aria-label":"inverted"}))}),le(Kw,{label:"false — no fill",width:tS,children:iS(le(jx,{defaultValue:60,fill:!1,"aria-label":"no fill"}))})]})]}),ce(mz,{gap:"var(--Sizing-1)",children:[le(Li,{color:"quiet",children:"two thumbs — Figma: double / double-inverted"}),ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"standard — fills between",width:tS,children:iS(le(jx,{defaultValue:[25,75],getAriaLabel:()=>"between"}))}),le(Kw,{label:"inverted — fills outside",width:tS,children:iS(le(jx,{defaultValue:[25,75],fill:"inverted",getAriaLabel:()=>"outside"}))})]})]})]}),orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:"horizontal",emphasis:!0,width:tS,children:iS(le(jx,{defaultValue:60,"aria-label":"horizontal"}))}),le(Kw,{label:"vertical",width:60,children:le("div",{style:{height:160},children:le(jx,{orientation:"vertical",defaultValue:60,"aria-label":"vertical"})})}),le(Kw,{label:"vertical range",width:60,children:le("div",{style:{height:160},children:le(jx,{orientation:"vertical",defaultValue:[25,75],getAriaLabel:()=>"vertical range"})})}),le(Kw,{label:"vertical, inverted",width:60,children:le("div",{style:{height:160},children:le(jx,{orientation:"vertical",fill:"inverted",defaultValue:60,"aria-label":"vertical inverted"})})})]}),marks:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — no marks"}),iS(le(jx,{defaultValue:60,"aria-label":"none"}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — a dot at every step"}),iS(le(jx,{defaultValue:60,step:10,marks:!0,"aria-label":"every step"}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"an array — dots where you say, with labels"}),iS(le(jx,{defaultValue:60,marks:[{value:0,label:"0"},{value:50,label:"50"},{value:100,label:"100"}],"aria-label":"labelled marks"}),260)]})]}),step:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"1 — every whole number"}),iS(le(jx,{defaultValue:60,"aria-label":"step 1"}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"25 — a fixed increment"}),iS(le(jx,{defaultValue:50,step:25,marks:!0,"aria-label":"step 25"}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"null — restricted to the marks, which need not be even"}),iS(le(jx,{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(_w,{values:["off","auto","on"],defaultValue:"off",width:tS,render:e=>iS(le(jx,{valueLabelDisplay:e,defaultValue:60,"aria-label":e}))}),label:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:420},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"with a visible label"}),iS(le(jx,{label:"Volume",defaultValue:60}))]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"without one it needs aria-label"}),iS(le(jx,{defaultValue:60,"aria-label":"Volume"}))]}),le(xi,{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(aS,{width:tS,offLabel:"enabled",onLabel:"disabled",render:e=>iS(le(jx,{disabled:e,defaultValue:60,"aria-label":"x"}))})},rS={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 oS({value:e,defaultValue:t="",onChange:n,onFocus:r,onBlur:o,onClear:l,onSubmit:s,placeholder:c="Search…",size:d="medium",color:h="default",showClearButton:m=!0,disabled:p=!1,ariaLabel:f="Search",className:g="",sx:b={},...v}){const[x,y]=a(t),[z,w]=a(!1),S=i(null),k=void 0!==e,C=k?e:x,B=C.length>0,T=z||B,M=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===h?"primary":h),A="default"===h?"var(--Text)":"var(--Text-"+M+")",L=rS[d]||rS.medium,I=()=>{k||y(""),n?.(""),l?.(),S.current?.focus()};return le(u,{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(u,{sx:{border:"1px solid "+("var(--Buttons-"+M+"-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-"+M+"-Hover)"},"&:active":{borderColor:"var(--Buttons-"+M+"-Pressed)"}},"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:ce(u,{sx:{display:"flex",alignItems:"center",gap:1,width:"100%",boxSizing:"border-box",minHeight:L.height,px:L.px+"px",backgroundColor:"var(--Hover)"},children:[le(Ff,{size:"small",sx:{color:T?A:"var(--Quiet)",flexShrink:0,transition:"color 0.15s ease"},children:le(Ie,{})}),le(u,{component:"input",ref:S,type:"text",role:"searchbox","aria-label":f,value:C,onChange:e=>{const a=e.target.value;k||y(a),n?.(a,e)},onFocus:e=>{w(!0),r?.(e)},onBlur:e=>{w(!1),o?.(e)},onKeyDown:e=>{"Enter"===e.key&&s?.(C,e),"Escape"===e.key&&B&&I()},placeholder:c,disabled:p,sx:{flex:1,border:"none",outline:"none",backgroundColor:"transparent",color:T?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(u,{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(Ff,{size:"small",children:le(Ua,{})})})]})})})}const lS=l(null),sS=["Default","Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error","App-Bar","Nav-Bar","Status"],cS=["Professional","Modern","Bold","Playful"],dS=["Surface-Dimmest","Surface-Dim","Surface","Surface-Bright","Surface-Brightest","Container","Container-Low","Container-Lowest","Container-High","Container-Highest"],hS={"light-tonal":{theme:"Primary",rootSurface:"Surface-Brightest"},"grey-professional":{theme:"Neutral",rootSurface:"Surface"},"dark-professional":{theme:"Neutral",rootSurface:"Surface-Dimmest"}},uS="omni-foundation",mS="omni-core",pS="omni-typography",fS="omni-mode",gS="omni-base",bS="omni-styles";function vS(e){document.getElementById(e)?.remove()}function xS(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 i=document.getElementById(e);return i?"LINK"===i.tagName&&i.getAttribute("href")!==a?new Promise((e,t)=>{i.onload=()=>e(i),i.onerror=()=>t(new Error(`OmniDesignProvider: failed to load ${a}`)),i.setAttribute("href",a)}):Promise.resolve(i):new Promise((i,n)=>{const r=document.createElement("link");r.id=e,r.rel="stylesheet",r.setAttribute("data-omni","true"),r.onload=()=>i(r),r.onerror=()=>n(new Error(`OmniDesignProvider: failed to load ${a}`)),r.href=a;const o=t?document.getElementById(t):null;o?document.head.insertBefore(r,o):document.head.appendChild(r)})}(e,a,t):function(e,a,t){if(!a)return Promise.resolve(null);const i=document.getElementById(e);if(i)return i.textContent=a,Promise.resolve(i);const n=document.createElement("style");n.id=e,n.setAttribute("data-omni","true"),n.textContent=a;const r=t?document.getElementById(t):null;return r?document.head.insertBefore(n,r):document.head.appendChild(n),Promise.resolve(n)}(e,a,t):Promise.resolve(null)}function yS({themeURL:e,foundationCSS:r,coreCSS:o,typographyCSS:l,lightModeCSS:s,darkModeCSS:d,baseCSS:h,stylesCSS:u,defaultTheme:m="Default",defaultStyle:p="Modern",defaultSurface:f="Surface",surfaceStyle:g,defaultDarkMode:b=!1,darkTheme:v=null,darkMode:x,onDarkModeChange:y,className:z,style:w,fullHeight:S=!0,children:k}){const[C,B]=a(b),T=void 0!==x,M=T?x:C,[A,L]=a({foundation:r??null,core:o??null,typography:l??null,lightMode:s??null,darkMode:d??null,base:h??null,styles:u??null}),[I,N]=a({}),W=i(!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(\?.*)?$/,""),i=await fetch(a);if(!i.ok)throw new Error(`OmniDesignProvider: could not load theme manifest from ${a} (${i.status})`);const n=await i.json(),r=e=>e?/^https?:\/\//i.test(e)?e:`${t}/${e}`:null;return{foundationURL:r(n.foundation),coreURL:r(n.core),typographyURL:r(n.typography),lightModeURL:r(n.lightMode),darkModeURL:r(n.darkMode),baseURL:r(n.base),stylesURL:r(n.styles),defaultTheme:n.defaultTheme??null,defaultStyle:n.defaultStyle??null,defaultSurface:n.defaultSurface??null,darkTheme:n.darkTheme??null,name:n.name??null}}(e).then(e=>{W.current&&(L({foundation:r??e.foundationURL,core:o??e.coreURL,typography:l??e.typographyURL,lightMode:s??e.lightModeURL,darkMode:d??e.darkModeURL,base:h??e.baseURL,styles:u??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),X(e.message),U("error"))}))},[e]);const D=g?hS[g]?.theme??m:"Default"!==m?m:I.defaultTheme??m,R=g?hS[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||r||o||l||s||d||h||u),[G,U]=a(q?"loading":"ready"),[Y,X]=a(null);t(()=>{const{foundation:e,core:a,typography:t,base:i,styles:n}=A;if(e||a||t||i||n)return U("loading"),X(null),Promise.all([xS(uS,e),xS(mS,a),xS(pS,t).catch(e=>{console.warn("OmniDesignProvider: typography CSS did not load —",e.message)}),xS(gS,i),xS(bS,n)]).then(()=>{W.current&&U("ready")}).catch(e=>{W.current&&(console.error("OmniDesignProvider CSS error:",e),X(e.message),U("error"))}),()=>{vS(uS),vS(mS),vS(pS),vS(gS),vS(bS)};U("ready")},[A.foundation,A.core,A.typography,A.base,A.styles]),t(()=>{const e=M?A.darkMode:A.lightMode;e&&xS(fS,e,gS).catch(e=>console.error("OmniDesignProvider mode CSS error:",e))},[M,A.lightMode,A.darkMode]),t(()=>()=>vS(fS),[]);const J=M&&P?P:H,Z=n(()=>{T?y?.(!M):B(e=>!e)},[T,M,y]),$=n(e=>{sS.includes(e)||console.warn(`OmniDesignProvider: unknown theme "${e}"`),O(e)},[]),K=n(e=>{cS.includes(e)||console.warn(`OmniDesignProvider: unknown style "${e}"`),V(e)},[]),_=n(e=>{dS.includes(e)||console.warn(`OmniDesignProvider: unknown surface "${e}"`),j(e)},[]),ee=c(()=>({theme:J,style:E,surface:Q,isDark:M,cssStatus:G,cssError:Y,setTheme:$,setStyle:K,setSurface:_,toggleDarkMode:Z,themes:sS,styles:cS,surfaces:dS,name:I.name??null}),[J,E,Q,M,G,Y,$,K,_,Z,I.name]);return ce(lS.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:{...S?{minHeight:"100vh"}:{},...w},children:k})]})}function zS(){const e=s(lS);if(!e)throw new Error("useOmniDesign must be used inside a <OmniDesignProvider>");return e}function wS({theme:e,surface:a,as:t="div",children:i,className:n,style:r,...o}){return le(t,{"data-theme":e,"data-surface":a,className:n,style:r,...o,children:i})}function SS({surface:e,as:a="div",children:t,className:i,style:n,...r}){return le(a,{"data-surface":e,className:i,style:n,...r,children:t})}const kS={small:{width:"240px",height:"200px"},medium:{width:"320px",height:"280px"},large:{width:"420px",height:"380px"}},CS={left:{borderRight:"1px solid var(--Border)"},right:{borderLeft:"1px solid var(--Border)"},top:{borderBottom:"1px solid var(--Border)"},bottom:{borderTop:"1px solid var(--Border)"}},BS={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}},TS={left:"translateX(-100%)",right:"translateX(100%)",top:"translateY(-100%)",bottom:"translateY(100%)"};function MS({children:e,open:a=!1,onClose:r,size:o="medium",anchor:l="left",hideBackdrop:s=!1,className:c="",sx:d={},...h}){const m=i(null),p=i(null),f="left"===l||"right"===l;let g;try{g=zS()}catch{g=null}const b=g?.theme||"Default",v=g?.style||"Modern",x=kS[o]||kS.medium;t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&r?.()};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,r]),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=n(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],i=a[a.length-1];e.shiftKey?document.activeElement===t&&(e.preventDefault(),i.focus()):document.activeElement===i&&(e.preventDefault(),t.focus())},[]);return a?ce(se,{children:[!s&&le(u,{onClick:()=>r?.(),"aria-hidden":"true",sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0, 0, 0, 0.5)",transition:"opacity 0.3s ease"}}),le(u,{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+" "+c,sx:{position:"fixed",zIndex:10000001,...BS[l],...f?{width:x.width,height:"100%"}:{height:x.height,width:"100%"},backgroundColor:"var(--Background)",color:"var(--Text)",...CS[l],boxShadow:jf,display:"flex",flexDirection:"column",outline:"none",overflow:"hidden",animation:"drawer-slide-in 0.3s ease forwards","@keyframes drawer-slide-in":{from:{transform:TS[l]},to:{transform:"translate(0, 0)"}},...d},...h,children:e})]}):null}function AS({onClick:e,className:a="",sx:t={},...i}){return le(u,{sx:{position:"absolute",top:"12px",right:"12px",zIndex:1,...t},className:a,...i,children:le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:e,"aria-label":"Close drawer",children:le(Ff,{size:"small",children:le(Ua,{})})})})}function LS({children:e,className:a="",sx:t={},...i}){return le(u,{className:"drawer-header "+a,sx:{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"16px",borderBottom:"1px solid var(--Border)",flexShrink:0,...t},...i,children:e})}function IS({children:e,className:a="",sx:t={},...i}){return le(u,{className:"drawer-content "+a,sx:{flex:1,overflowY:"auto",padding:"16px",...t},...i,children:e})}const NS={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 WS({children:e,onClick:a,ariaLabel:t}){return le(nb,{iconOnly:!0,variant:"ghost",size:"medium",onClick:a,"aria-label":t,children:e})}function DS({barColor:t="default",surface:i="Surface",loginType:n="login",menuType:r="hamburger",brandType:o="name",searchPosition:l="right",companyName:s="Company",navLinks:c=["Home","Products","About"],rightButtons:d=[],showRightButtons:h=!1,onMenuClick:m,user:p,onLogin:f,onSignOut:g,brand:b,onBrandClick:v,centerSlot:x,endSlot:y,searchValue:z,onSearchChange:w,searchPlaceholder:S="Search...",children:k,className:C="",sx:B={}}){const[T,M]=a(!1),A=NS[t]||NS.default,L=A.theme,I=A.surface||i,N="expanded"===r&&c.length>3?"hamburger":r,W=le(oS,{placeholder:S,size:"medium",value:z,onChange:w,sx:{flex:"left"===l?"0 1 400px":"0 1 280px",minWidth:0}});return ce(se,{children:[le(u,{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:Qf,fontFamily:"inherit",...B},children:k||ce(se,{children:["hamburger"===N&&le(WS,{ariaLabel:"Open navigation menu",onClick:m||(()=>M(!0)),children:le(ja,{sx:{fontSize:"inherit"}})}),void 0!==b?le(si,v?{component:"button",type:"button",width:"hug",onClick:v,sx:{background:"transparent",border:"none",padding:0,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0},children:b}:{component:"span",width:"hug",sx:{whiteSpace:"nowrap",flexShrink:0},children:b}):"logo"===o?le(u,{sx:{width:32,height:32,borderRadius:"6px",backgroundColor:"var(--Text)",opacity:.8,flexShrink:0},"aria-label":"Company logo"}):le(si,{component:"span",width:"hug",sx:{whiteSpace:"nowrap",flexShrink:0},children:s}),ce(se,void 0!==x?{children:[le(u,{sx:{flex:1}}),le(u,{sx:{display:"flex",alignItems:"center",flexShrink:0},children:x}),le(u,{sx:{flex:1}})]}:{children:["left"===l&&W,"expanded"===N&&le(Tb,{defaultValue:0,variant:"standard",color:"default",sx:{ml:2,minHeight:0},children:le(Mb,{"aria-label":"Main navigation",children:c.map(e=>le(Ab,{children:e},e))})}),le(u,{sx:{flex:1}}),"right"===l&&W]}),void 0!==y?le(u,{sx:{display:"flex",alignItems:"center",gap:1},children:y}):ce(se,{children:[h&&d.length>0&&le(u,{sx:{display:"flex",alignItems:"center",gap:.5},children:d.map((a,t)=>a.raw?le(e.Fragment,{children:a.icon},t):le(WS,{ariaLabel:a.label||"Action "+(t+1),children:a.icon},t))}),p?le(nb,{variant:"ghost",size:"small",onClick:g,"aria-label":"Sign out",startIcon:p.photoURL?le(u,{component:"img",src:p.photoURL,alt:"",sx:{width:24,height:24,borderRadius:"50%"}}):le(Ga,{sx:{fontSize:24}}),children:p.displayName?.split(" ")[0]||"Account"}):f?le(nb,{variant:"default-outline",size:"small",onClick:f,children:"Login"}):"avatar"===n?le(nb,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Ga,{sx:{fontSize:28}})}):null]})]})}),le(MS,{open:T,onClose:()=>M(!1),anchor:"left",size:"small",children:le(u,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:c.map(e=>le(nb,{variant:"ghost",size:"medium",onClick:()=>M(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})})]})}function RS({mobileVariant:e="search",barColor:t="default",surface:i="Surface",title:n="Page Title",subtitle:r="Subtitle text",actionIcon:o,companyName:l="Company",navLinks:s=["Home","Products","About"],className:c="",sx:d={}}){const[h,m]=a(!1),p=NS[t]||NS.default,f=p.theme,g=p.surface||i,b={backgroundColor:"var(--Background)",color:"var(--Text)",boxShadow:Qf,fontFamily:"inherit",width:"100%",maxWidth:420,...d},v={"data-theme":f,"data-surface":g},x=le(MS,{open:h,onClose:()=>m(!1),anchor:"left",size:"small",children:le(u,{component:"nav","aria-label":"Main navigation",sx:{display:"flex",flexDirection:"column",gap:.5,py:1},children:s.map(e=>le(nb,{variant:"ghost",size:"medium",onClick:()=>m(!1),sx:{justifyContent:"flex-start",width:"100%"},children:e},e))})});return"search"===e?ce(se,{children:[ce(u,{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-search appbar-"+t+" "+c,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1.5},children:[le(WS,{ariaLabel:"Open navigation menu",onClick:()=>m(!0),children:le(ja,{sx:{fontSize:"inherit"}})}),le(oS,{placeholder:"Search "+l,size:"small",sx:{flex:1,minWidth:0}}),le(nb,{iconOnly:!0,variant:"ghost",size:"medium","aria-label":"Account",children:le(Ga,{sx:{fontSize:28}})})]}),x]}):ce(u,"small"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-small appbar-"+t+" "+c,...v,sx:{...b,display:"flex",alignItems:"center",height:64,px:1.5,gap:1},children:[le(WS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),ce(u,{sx:{flex:1,minWidth:0},children:[le(u,{sx:{fontWeight:600,fontSize:"16px",lineHeight:1.3,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:n}),r&&le(u,{sx:{fontSize:"12px",opacity:.7,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},children:r})]}),o&&le(WS,{ariaLabel:"Action",children:o})]}:"medium"===e?{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-medium appbar-"+t+" "+c,...v,sx:{...b,px:1.5,pb:2},children:[ce(u,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(WS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),le(u,{sx:{flex:1}}),o&&le(WS,{ariaLabel:"Action",children:o})]}),ce(u,{sx:{px:1.5},children:[le(u,{sx:{fontWeight:600,fontSize:"24px",lineHeight:1.2},children:n}),r&&le(u,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:r})]})]}:{component:"header",role:"banner",className:"appbar appbar-mobile appbar-mobile-large appbar-"+t+" "+c,...v,sx:{...b,px:1.5,pb:3},children:[ce(u,{sx:{display:"flex",alignItems:"center",height:56,gap:1},children:[le(WS,{ariaLabel:"Back",children:le(qa,{sx:{fontSize:"inherit"}})}),le(u,{sx:{flex:1}}),o&&le(WS,{ariaLabel:"Action",children:o})]}),ce(u,{sx:{px:1.5,mt:1},children:[le(u,{sx:{fontWeight:600,fontSize:"36px",lineHeight:1.1},children:n}),r&&le(u,{sx:{fontSize:"14px",opacity:.7,mt:.5},children:r})]})]})}function FS({mode:e="desktop",...a}){return le("mobile"===e?RS:DS,{...a})}const PS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",HS=["default","primary","primary-light","white","black"],OS=["Surface","Surface-Bright","Surface-Dim","Surface-Dimmest"],ES={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 VS({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function QS({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(VS,{ratio:a,threshold:t})]})}function jS({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function qS({color:e,selected:a,onClick:t}){const i=ES[e]||ES.default;return le(u,{component:"button","data-theme":i.theme,"data-surface":i.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(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function GS(){const[e,i]=a("desktop"),[n,r]=a("default"),[o,l]=a("Surface"),[s,c]=a("login"),[d,h]=a("hamburger"),[p,f]=a("name"),[g,b]=a("right"),[v,x]=a("search"),[z,w]=a("Default"),[S,k]=a("Surface"),[C,B]=a({}),T="desktop"===e,M=ES[n]||ES.default,A=M.theme,L=M.surface||o;return t(()=>{const e={};e.text=nn("--Text"),e.textQuiet=nn("--Text-Quiet"),e.background=nn("--Background"),e.border=nn("--Border"),e.focusVisible=nn("--Focus-Visible"),e.hover=nn("--Hover"),e.active=nn("--Pressed"),B(e)},[n,o,e]),ce(u,{sx:{pb:8},children:[le(xA,{title:"App Bar",component:"AppBar"}),le(u,{sx:{mt:1},children:le(ig,{theme:z,onThemeChange:w,surface:S,onSurfaceChange:k})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"AppBar",theme:z,surface:S})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:z,surface:S,children:le(u,{sx:{width:"100%",maxWidth:T?"100%":420,overflow:"hidden"},children:T?le(DS,{barColor:n,surface:o,loginType:s,menuType:d,brandType:p,searchPosition:g,companyName:"My App",navLinks:["Home","Products","About"]}):le(RS,{barColor:n,surface:o,mobileVariant:v,companyName:"My App",title:"Page Title",subtitle:"Subtitle text"})})}),le(nv,{code:(()=>{if(T){const e=[];"default"!==n&&e.push('barColor="'+n+'"'),"Surface"!==o&&e.push('surface="'+o+'"'),"login"!==s&&e.push('loginType="'+s+'"'),"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"!==n&&e.push('barColor="'+n+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MODE"}),le(m,{direction:"row",spacing:1,children:["desktop","mobile"].map(a=>le(jS,{label:PS(a),selected:e===a,onClick:()=>i(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:HS.map(e=>le(qS,{color:e,selected:n===e,onClick:r},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-theme="',A,'"']})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SURFACE"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:OS.map(e=>le(jS,{label:e.replace("Surface-","").replace("Surface","Default"),selected:o===e,onClick:()=>l(e)},e))}),ce(Li,{style:{color:"var(--Text-Quiet)",marginTop:6,display:"block"},children:['data-surface="',o,'"']})]}),T&&ce(se,{children:[ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"MENU TYPE"}),le(m,{direction:"row",spacing:1,children:["hamburger","expanded"].map(e=>le(jS,{label:PS(e),selected:d===e,onClick:()=>h(e)},e))}),le(Li,{style:{color:"var(--Text-Quiet)",marginTop:4,display:"block"},children:"Expanded auto-falls back to hamburger when nav > 3 links"})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BRAND"}),le(m,{direction:"row",spacing:1,children:["name","logo"].map(e=>le(jS,{label:PS(e),selected:p===e,onClick:()=>f(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SEARCH POSITION"}),le(m,{direction:"row",spacing:1,children:["left","right"].map(e=>le(jS,{label:PS(e),selected:g===e,onClick:()=>b(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LOGIN TYPE"}),le(m,{direction:"row",spacing:1,children:["login","avatar"].map(e=>le(jS,{label:PS(e),selected:s===e,onClick:()=>c(e)},e))})]})]}),!T&&ce(u,{sx:{mt:3},children:[le(Oi,{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(jS,{label:PS(e),selected:v===e,onClick:()=>x(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:3},children:[ce(xi,{color:"quiet",style:{marginBottom:24},children:[e," / ",n," / ",o,T?"":" / "+v,' — data-theme="',A,'" data-surface="',L,'"']}),ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(xi,{color:"quiet",style:{marginBottom:16},children:"All text and icons must have 4.5:1 contrast against the AppBar background."}),le(QS,{label:"Resting: var(--Text) vs. var(--Background)",ratio:tn(C.text,C.background),threshold:4.5,note:'data-theme="'+A+'" data-surface="'+L+'"'}),le(QS,{label:"On hover: var(--Text) vs. var(--Hover)",ratio:tn(C.text,C.hover),threshold:4.5,note:"Icon buttons use var(--Hover) on hover"}),le(QS,{label:"On active: var(--Text) vs. var(--Pressed)",ratio:tn(C.text,C.active),threshold:4.5,note:"Icon buttons use var(--Pressed) on press"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(QS,{label:"var(--Focus-Visible) vs. var(--Background)",ratio:tn(C.focusVisible,C.background),threshold:3,note:"outline: 3px solid var(--Focus-Visible); outline-offset: 1px"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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 i=a>=24,n=a>=44,r=a>=48;return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[ce(xi,{style:{color:"var(--Text)"},children:[e," — ",a,"px"]}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:t})]}),ce(u,{sx:{display:"flex",gap:.5,flexWrap:"wrap",justifyContent:"flex-end"},children:[ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:i?"var(--Tags-Success-BG)":"var(--Tags-Error-BG)",color:i?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:["Desktop ",i?"Y":"N"]}),ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:n?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:n?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["iOS ",n?"Y":"~"]}),ce(u,{sx:{px:1,py:.25,borderRadius:"4px",fontSize:"11px",fontWeight:700,backgroundColor:r?"var(--Tags-Success-BG)":"var(--Tags-Warning-BG)",color:r?"var(--Tags-Success-Text)":"var(--Tags-Warning-Text)"},children:["Android ",r?"Y":"~"]})]})]},e)})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Landmark:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<header role="banner">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Navigation (expanded menu):"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav aria-label="Main navigation">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Theme + Surface:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'data-theme="'+A+'" data-surface="'+L+'"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Shadow:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"box-shadow: var(--Effect-Level-1)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Icon buttons:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"All icon buttons have aria-label. Focus visible on keyboard navigation."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Keyboard:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Tab navigates all interactive elements. Enter/Space activates buttons."})]})]})]})]})]})]}),le(Lb,{value:3,children:le(fA,{component:"AppBar"})})]})]})}const US={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}},YS={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 XS({options:e=[],value:r,defaultValue:o=null,onChange:l,inputValue:s,onInputChange:c,label:d,labelPosition:h="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:w=!0,disabled:S=!1,fullWidth:k=!1,className:C="",sx:B={},...T}){const M=(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-"+M+"-Border)",N="default"===b?"var(--Text)":"var(--Text-"+M+")",[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=i(null),q=i(null),G=void 0!==r,U=void 0!==s,Y=G?r:W,X=U?s:R,J="floating"===h,Z="top"===h,$=""!==X,K=J?YS[f]||YS.medium:US[f]||US.medium,_=X?e.filter(e=>("string"==typeof e?e:e.label).toLowerCase().includes(X.toLowerCase())):e,ee=n(e=>{U||F(e),c?.(e)},[U,c]),ae=n(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 ce(u,{ref:j,className:"autocomplete autocomplete-"+f+" autocomplete-variant-"+L+(P?" autocomplete-open":"")+(S?" autocomplete-disabled":"")+(C?" "+C:""),sx:{position:"relative",width:k?"100%":"auto",display:"inline-block",fontFamily:"inherit",...B},...T,children:[Z&&d&&le("small"===f?xi:wi,{component:"label",style:{display:"block",marginBottom:"6px",color:S?"var(--Quiet)":"var(--Text)",fontWeight:500,opacity:S?"var(--Disabled, 0.38)":1},children:d}),le(u,{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:S?"var(--Disabled, 0.38)":1,"&:focus-within":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:le(u,{children:ce(u,{sx:{position:"relative",display:"flex",alignItems:"center",minHeight:K.height,backgroundColor:"var(--Hover)"},children:[J&&d&&le(u,{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(u,{component:"input",ref:q,type:"text",role:"combobox","aria-expanded":P,"aria-haspopup":"listbox","aria-autocomplete":"list","aria-label":d||m,autoComplete:"off",value:X,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:S,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(Ya,{size:16,sx:{mr:1,color:"var(--Quiet)"}}),w&&X&&!S&&le(u,{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(Ua,{sx:{fontSize:14}})}),le(u,{component:"button",type:"button","aria-label":P?"Close":"Open",tabIndex:-1,onClick:()=>{S||H(!P)},sx:{display:"flex",alignItems:"center",justifyContent:"center",width:28,height:"100%",border:"none",backgroundColor:"transparent",color:"var(--Quiet)",cursor:S?"not-allowed":"pointer"},children:le(he,{sx:{fontSize:(K.iconSize||18)+"px",transform:P?"rotate(180deg)":"rotate(0deg)",transition:"transform 0.2s ease"}})})]})})}),p&&le(u,{sx:{fontSize:"12px",color:"var(--Quiet)",mt:"4px",ml:"2px"},children:p}),P&&le(u,{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(u,{sx:{px:1.5,py:2,textAlign:"center",fontSize:K.fontSize,color:"var(--Quiet)"},children:x}):0===_.length?le(u,{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,i="string"==typeof e?e:e.value,n=t===(Y?"string"==typeof Y?Y:Y.label:null),r=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,n);return ce(u,{role:"option","aria-selected":n,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",...r,transition:"background-color 0.1s ease","&:active":{backgroundColor:"var(--Pressed)"}},children:[le(xi,{style:{flex:1,color:"inherit",fontWeight:"inherit"},children:t}),n&&le(Ff,{size:"small",sx:{opacity:.6,flexShrink:0},children:le(ue,{})})]},i||t)})})]})}const JS=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",ZS=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],$S=[{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 KS({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function _S({color:e,selected:a,onClick:t}){const i=JS(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function ek(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("top"),[c,d]=a("Fruit"),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Autocomplete",component:"Autocomplete"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Autocomplete",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(XS,{variant:e,color:i,size:r,label:c,labelPosition:l,options:$S,clearable:h,disabled:f,fullWidth:b})})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),c&&a.push('label="'+c+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),h||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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(KS,{label:JS(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:ZS.map(e=>ce(u,{children:[le(Li,{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(_S,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(KS,{label:JS(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(KS,{label:"none"===e?"None":JS(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clearable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear button when has value"})]}),le(yv,{checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Clearable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(yv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Autocomplete"})})]})]})}let ak=0;const tk={default:"Nav-Bar",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},ik="var(--Sizing-1, 8px)",nk="40px",rk="var(--Icon-Size, 24px)",ok="var(--Sizing-Half, 4px)",lk={horizontal:{px:"var(--Sizing-2, 16px)",py:0},vertical:{px:"var(--Sizing-2, 16px)",py:"var(--Sizing-2, 16px)"}},sk={px:0,py:0};function ck({items:e=[],value:t,defaultValue:r=0,onChange:o,showLabels:l=!0,variant:s="fixed",orientation:c="horizontal",barColor:d="default",fabAction:h,fabPosition:m="end",fixed:p=!0,"aria-label":f="Bottom navigation",className:g="",sx:b={},...v}){const[x,y]=a(r),z=void 0!==t,w=z?t:x,S=n(e=>{z||y(e),o?.(e)},[z,o]),k="vertical"===c,C="floating"===s,B=tk[d]||tk.default,T=C?k?lk.vertical:lk.horizontal:sk,M=i(null);null===M.current&&(M.current="bottom-nav-"+ak++);const A=e=>M.current+"-tab-"+e,L=!!h;return ce(u,{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-"+c+(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?"var(--ToolBar, var(--Nav-Bar-Height, 80px))":0,fontFamily:"inherit",width:k?"fit-content":"100%",px:T.px,py:T.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(u,{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"}}),ce(u,{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(dk,{id:L?A(a):void 0,icon:e.icon,label:e.label,selected:a===w,showLabel:l,onClick:()=>S(a),ariaLabel:e.label||e.ariaLabel,disabled:e.disabled},e.key||a)).flatMap((e,a,t)=>{if(!h)return[e];return a===("center"===m?Math.ceil(t.length/2):t.length)-1?[e,le(uk,{...h,showLabel:l,position:m},"fab")]:[e]}),h&&0===e.length&&le(uk,{...h,showLabel:l,position:m},"fab")]})]})}function dk({id:e,icon:a,label:t,selected:i,showLabel:n,onClick:r,ariaLabel:o,disabled:l}){return ce(u,{component:"button",type:"button",role:"tab",id:e,"aria-selected":i,"aria-label":o,onClick:r,disabled:l,"aria-disabled":l||void 0,className:"bottom-nav-item"+(i?" bottom-nav-item-selected":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:ok,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(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minWidth:32,minHeight:32,padding:ik,borderRadius:nk,backgroundColor:i?"var(--Text)":"transparent",color:i?"var(--Background)":"var(--Quiet)",fontSize:rk,transition:"background-color 0.2s ease, color 0.15s ease","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"},".bottom-nav-item:hover &":i?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Hover)"},".bottom-nav-item:active &":i?{backgroundColor:"var(--Text)"}:{color:"var(--Text)",backgroundColor:"var(--Pressed)"},".bottom-nav-item:disabled:hover &":{backgroundColor:"transparent"}},children:a}),n&&t&&le(Ni,{className:"bottom-nav-label",style:{color:i?"var(--Text)":"var(--Quiet)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:t})]})}const hk=32;function uk({icon:e,label:n,onClick:r,showLabel:o,actions:l,position:s="end"}){const c=Array.isArray(l)&&l.length>0,[d,h]=a(!1),m=i(null);t(()=>{if(!d)return;const e=e=>{m.current&&!m.current.contains(e.target)&&h(!1)},a=e=>{"Escape"===e.key&&h(!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:nk,borderWidth:"var(--Button-Border-Width, 1px)",borderStyle:"solid",borderColor:"var(--Buttons-Default-Border)",color:"var(--Buttons-Default-Border)",backgroundColor:"transparent","& .MuiSvgIcon-root":{fontSize:"inherit",color:"inherit"}}),f="center"!==s;return ce(u,{ref:m,sx:{position:"relative",display:"flex",flexShrink:0},children:[ce(u,{component:"button",type:"button","aria-label":n||"Action",onClick:e=>{c&&h(e=>!e),r?.(e)},...c?{"aria-haspopup":"menu","aria-expanded":d}:{},className:"bottom-nav-fab"+(d?" bottom-nav-fab-open":""),sx:{display:"flex",flexDirection:"column",alignItems:"center",gap:ok,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(u,{sx:{...p(32),padding:ik,fontSize:rk,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&&n&&le(Ni,{className:"bottom-nav-label",style:{color:"var(--Buttons-Default-Border)",whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",maxWidth:"100%"},children:n})]}),c&&d&&le(u,{role:"menu","aria-label":n||"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)=>ce(u,{component:"button",type:"button",role:"menuitem","aria-label":e.label,className:"bottom-nav-dial-item",onClick:a=>{h(!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:nk,"&: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(u,{sx:{width:40,display:"flex",justifyContent:"center",flexShrink:0},children:le(u,{sx:{...p(hk),fontSize:"var(--Icon-Size-Small, 16px)"},children:e.icon||le(Aa,{})})}),le(Di,{style:{color:"inherit"},children:e.label})]},e.key||a))})]})}const mk={Home:le(Me,{sx:{fontSize:"inherit"}}),Explore:le(Xa,{sx:{fontSize:"inherit"}}),Radio:le(Ja,{sx:{fontSize:"inherit"}}),Library:le(Za,{sx:{fontSize:"inherit"}}),Favorite:le(Te,{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($a,{sx:{fontSize:"inherit"}})},pk=Object.keys(mk),fk=[{icon:"Home",label:"Home"},{icon:"Explore",label:"Browse"},{icon:"Radio",label:"Radio"},{icon:"Library",label:"Library"}],gk=[{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 bk({label:e,selected:a,onClick:t,disabled:i}){return le(u,{component:"button",onClick:t,disabled:i,sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:i?"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:i?.4:1,transition:"background-color 0.15s ease, color 0.15s ease","&:hover":{backgroundColor:i?"transparent":a?"var(--Buttons-Primary-Hover)":"var(--Surface-Dim)"},"&:focus-visible":{outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"}},children:e})}function vk({value:e,onChange:a,placeholder:t,sx:i}){return le(u,{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)"},...i}})}function xk({value:e,onChange:a,options:t,label:i}){return le(u,{component:"select",value:e,onChange:e=>a(e.target.value),"aria-label":i,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 yk({value:e,onChange:a,min:t,max:i,label:n}){return ce(u,{sx:{display:"flex",alignItems:"center",gap:1},children:[le(Li,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:90},children:n}),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(u,{sx:{fontWeight:700,fontSize:"14px",minWidth:24,textAlign:"center"},children:e}),le("button",{type:"button",onClick:()=>{e<i&&a(e+1)},disabled:e>=i,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>=i?"not-allowed":"pointer",fontSize:"14px",opacity:e>=i?.4:1,fontFamily:"inherit"},children:"+"})]})}function zk({label:e,checked:a,onChange:t,caption:i,disabled:n}){return ce(u,{sx:{py:.5,opacity:n?.4:1},children:[le(w,{control:le(S,{checked:a,onChange:e=>t(e.target.checked),size:"small",disabled:n,sx:{color:"var(--Text-Quiet)","&.Mui-checked":{color:"var(--Buttons-Primary-Button)"}}}),label:le(Ri,{children:e}),sx:{m:0}}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginLeft:32},children:i})]})}function wk(){const[e,i]=a("Default"),[n,r]=a("Surface"),[o,l]=a(0),[s,c]=a(!0),[d,h]=a(!0),[p,f]=a("fixed"),[g,b]=a("horizontal"),[v,x]=a("default"),[z,w]=a(4),[S,k]=a(fk.map(e=>({icon:e.icon,label:e.label})));t(()=>{k(e=>{const a=[],t=[{icon:"Favorite",label:"Favorites"},{icon:"Person",label:"Profile"}];for(let i=0;i<z;i++)if(e[i])a.push(e[i]);else{const e=t[i-fk.length]||{icon:pk[i%pk.length],label:pk[i%pk.length]};a.push(e)}return a}),l(e=>Math.min(e,z-1))},[z]);const C=(e,a,t)=>{k(i=>{const n=[...i];return n[e]={...n[e],[a]:t},n})},B=S.slice(0,z).map(e=>({icon:mk[e.icon]||mk.Home,label:e.label}));return ce(u,{sx:{pb:8},children:[le(xA,{title:"Bottom Navigation",component:"BottomNavigation"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:i,surface:n,onSurfaceChange:r})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"BottomNavigation",theme:e,surface:n})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{minHeight:400},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"calc((100vw - 432px) / 2)"},flexShrink:0},children:[ce(u,{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(u,{sx:{width:"100%",maxWidth:500,overflow:"hidden",boxShadow:"0 2px 12px rgba(0,0,0,0.08)"},children:le(ck,{items:B,value:o,onChange:l,showLabels:d,variant:p,orientation:g,barColor:v,fixed:!1},"bn-"+z+"-"+p+"-"+g+"-"+d+"-"+v)}),ce(Li,{style:{color:"var(--Text-Quiet)",textAlign:"center"},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(gk.find(e=>e.value===v)||gk[0]).label]})]}),le(nv,{code:(()=>{const e=[];e.push("const items = ["),B.forEach((a,t)=>{const i=S[t];e.push(" { icon: <"+i.icon+"Icon />, label: '"+i.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+'"'),s||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)"}})]}),ce(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(ci,{children:"Playground"}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"BAR COLOR"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:gk.map(e=>le(bk,{label:e.label,selected:v===e.value,onClick:()=>x(e.value)},e.value))}),ce(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:6},children:[(gk.find(e=>e.value===v)||gk[0]).desc,' · data-surface="Surface-Dim" · bg: var(--Background)']})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(m,{spacing:0,children:[le(zk,{label:"Fixed",checked:s,onChange:c,caption:"Position fixed to bottom of viewport."}),le(zk,{label:"Labels",checked:d,onChange:h,caption:"Show text labels with icons."}),le(Li,{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."})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(bk,{label:"Fixed",selected:"fixed"===p,onClick:()=>f("fixed")}),le(bk,{label:"Floating",selected:"floating"===p,onClick:()=>f("floating")})]}),le(Li,{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(Oi,{style:{color:"var(--Text-Quiet)",display:"block",margin:"16px 0 8px"},children:"ORIENTATION"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[le(bk,{label:"Horizontal",selected:"horizontal"===g,onClick:()=>b("horizontal")}),le(bk,{label:"Vertical",selected:"vertical"===g,onClick:()=>b("vertical")})]}),le(Li,{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."})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"NAVIGATION ITEMS"}),le(yk,{label:"Count",value:z,onChange:w,min:3,max:6}),le(m,{spacing:1.5,sx:{mt:2},children:S.slice(0,z).map((e,a)=>ce(u,{sx:{display:"flex",alignItems:"center",gap:1,flexWrap:"nowrap"},children:[le(Li,{style:{color:"var(--Text-Quiet)",flexShrink:0,width:16,textAlign:"right"},children:a+1}),le(xk,{value:e.icon,onChange:e=>C(a,"icon",e),options:pk,label:"Item "+(a+1)+" icon"}),d&&le(vk,{value:e.label,onChange:e=>C(a,"label",e),placeholder:"Label"})]},a))})]})]})]})}),ce(Lb,{value:2,children:[le(on,{}),ce(u,{sx:{p:4},children:[le(ci,{children:"Accessibility Requirements"}),ce(xi,{color:"quiet",style:{marginBottom:32},children:[z," items · ",d?"Labels":"Icons only"," · ","floating"===p?"Floating":"Fixed"," · ","vertical"===g?"Vertical":"Horizontal"," · ",(gk.find(e=>e.value===v)||gk[0]).label]}),ce(m,{spacing:4,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"ARIA and Semantics"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Landmark:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'<nav role="navigation" aria-label="Bottom navigation">'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Tab list:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tablist"'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Tab items:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:'role="tab", aria-selected, aria-label'})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Focus:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3px solid var(--Focus-Visible) on :focus-visible."})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Token Reference"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Bar:"}),le(Li,{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.).'})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Unselected icon/label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text-Quiet)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Selected:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"var(--Text)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Selected pill:"}),le(Li,{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)"})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Backfill + horizontal label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label inside pill: var(--Buttons-Primary-Text)"})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Backfill + vertical label:"}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:"Label below pill: var(--Text)"})]})]})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Container)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Best Practices"}),ce(m,{spacing:0,children:[ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Item count:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"3–5 recommended. 6 maximum."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Horizontal layout:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Only available with 4 or fewer items."})]}),ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:"Labels:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Always recommended for clarity."})]}),ce(u,{sx:{py:1.5},children:[le(xi,{children:"Fixed:"}),le(Li,{style:{color:"var(--Text-Quiet)"},children:"Add bottom padding to main content to avoid overlap."})]})]})]})]})]})]}),le(Lb,{value:3,children:le(fA,{component:"BottomNavigation"})})]})]})}const Sk=e=>r(function(a,t){return le(V,{direction:e,ref:t,...a})}),kk={fade:r(function(e,a){return le(E,{ref:a,...e})}),grow:r(function(e,a){return le(O,{ref:a,...e})}),zoom:r(function(e,a){return le(H,{ref:a,...e})}),"slide-up":Sk("up"),"slide-down":Sk("down"),"slide-left":Sk("left"),"slide-right":Sk("right")},Ck={backgroundColor:"var(--Background)",color:"var(--Text)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Gf},Bk={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},Tk={color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6,py:3,px:3},Mk={borderTop:"1px solid var(--Border)",px:3,py:1.5,gap:1},Ak={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"}},Lk={primary:{...Ak,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:{...Ak,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 Ik({open:e=!1,onClose:a,title:t,children:i,actions:n,maxWidth:r="sm",fullScreen:o=!1,scroll:l="body",alert:s=!1,nonModal:c=!1,transition:d,transitionDuration:h=300,titleId:m="dialog-title",contentId:p="dialog-description",className:f="",sx:g={},PaperProps:b={},...v}){const x=d?kk[d]:void 0;let y;try{y=zS()}catch{y=null}const z=y?.theme||"Default",w=y?.style||"Modern",S=y?.surface||"Surface";return ce(W,{open:e,onClose:(e,t)=>{s&&"backdropClick"===t||s&&"escapeKeyDown"===t||a?.(e,t)},maxWidth:!o&&r,fullScreen:o,fullWidth:!o,scroll:l,hideBackdrop:c,disableEnforceFocus:c,disableEscapeKeyDown:s,TransitionComponent:x,transitionDuration:h,"aria-labelledby":m,"aria-describedby":p,className:"dialog dialog-"+r+(o?" dialog-fullscreen":"")+(s?" dialog-alert":"")+(f?" "+f:""),style:{zIndex:1e7},slotProps:{backdrop:{sx:{backgroundColor:c?"transparent":"rgba(0,0,0,0.5)"}}},PaperProps:{...b,"data-theme":z,"data-style":w,"data-surface":S,sx:{...Ck,...o&&{borderRadius:0,border:"none"},...b.sx},role:s?"alertdialog":"dialog"},...v,children:[t&&ce(D,{id:m,sx:Bk,children:[t,!s&&a&&le(ob,{"aria-label":"Close dialog",onClick:e=>a(e,"closeButton"),size:"small",variant:"ghost",sx:{color:"var(--Text-Quiet)"},children:le(Ua,{fontSize:"small"})})]}),le(R,{dividers:"paper"===l,sx:{...Tk,..."paper"===l&&{maxHeight:o?"none":"400px",overflowY:"auto",borderColor:"var(--Border)"}},children:s?le(F,{id:p,sx:{color:"var(--Text)",fontFamily:"inherit",fontSize:"14px",lineHeight:1.6},children:i}):le(u,{id:p,children:i})}),n&&le(P,{sx:Mk,children:n})]})}function Nk({open:e,onClose:a,title:t,children:i,confirmText:n="Confirm",cancelText:r="Cancel",onConfirm:o,onCancel:l,...s}){return le(Ik,{open:e,onClose:a,title:t,alert:!0,...s,actions:ce(se,{children:[le(u,{component:"button",type:"button",onClick:l||a,sx:Lk.outline,children:r}),le(u,{component:"button",type:"button",onClick:o||a,sx:Lk.primary,children:n})]}),children:i})}function Wk({open:e,onClose:a,title:t,children:i,submitText:n="Submit",cancelText:r="Cancel",onSubmit:o,...l}){return le(Ik,{open:e,onClose:a,title:t,...l,actions:ce(se,{children:[le(u,{component:"button",type:"button",onClick:a,sx:Lk.outline,children:r}),le(u,{component:"button",type:"button",onClick:o,sx:Lk.primary,children:n})]}),children:i})}function Dk({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Rk(){const[e,t]=a(!1),[i,n]=a("sm"),[r,o]=a(!1),[l,s]=a("none"),[c,d]=a(!1),[h,p]=a(!1),[f,g]=a("Default"),[b,v]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Dialog",component:"Dialog"}),le(u,{sx:{mt:1},children:le(ig,{theme:f,onThemeChange:g,surface:b,onSurfaceChange:v})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Dialog",theme:f,surface:b})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:f,surface:b,children:le(nb,{variant:"default",onClick:()=>t(!0),children:"Open Dialog"})}),le(nv,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"sm"!==i&&e.push('maxWidth="'+i+'"'),r&&e.push("fullScreen"),c&&e.push("alert"),h&&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(Ik,{open:e,onClose:(e,a)=>{c&&"backdropClick"===a||t(!1)},maxWidth:i,fullScreen:r,alert:c,nonModal:h,transition:"none"!==l?l:void 0,title:"Dialog Title",actions:ce(se,{children:[le(nb,{variant:"default-outline",size:"small",onClick:()=>t(!1),children:"Cancel"}),le(nb,{variant:"default",size:"small",onClick:()=>t(!1),children:"Confirm"})]}),children:le(wi,{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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),ce(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:[["xs","sm","md","lg","xl"].map(e=>le(Dk,{label:e.toUpperCase(),selected:i===e,onClick:()=>{n(e),o(!1)}},e)),le(Dk,{label:"Full Screen",selected:r,onClick:()=>o(!r)})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(Dk,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:l===e,onClick:()=>s(e)},e);var a})})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Alert"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop dismiss, no Escape"})]}),le(yv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Alert mode"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Non-Modal"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"No backdrop, interact with content behind"})]}),le(yv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Non-modal"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Dialog"})})]})]})}const Fk={compact:{minHeight:"24px",fontSize:"13px",iconSize:16,gap:"6px"},default:{minHeight:"32px",fontSize:"14px",iconSize:18,gap:"8px"}},Pk={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)"},Hk={"@keyframes omni-tree-slide":{from:{opacity:0,transform:"translateY(-4px)"},to:{opacity:1,transform:"none"}}};function Ok(e,a,t=1,i=[]){return e.forEach((n,r)=>{i.push({item:n,level:t,index:r,siblings:e.length}),n.children?.length&&a.includes(n.id)&&Ok(n.children,a,t+1,i)}),i}function Ek(e,a,t=null){for(const i of e){if(i.id===a)return t;if(i.children?.length){const e=Ek(i.children,a,i.id);if(null!=e)return e;if(null===e&&i.children.some(e=>e.id===a))return i.id}}return null}function Vk({node:e,density:a,expanded:t,selected:i,focusedId:n,multiSelect:r,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:s,collapseIcon:c,expandIcon:d,animation:h,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g}){const{item:b,level:v,index:x,siblings:y}=e,z=Fk[a]||Fk.default,w="compact"===a?Li:xi,S=!!b.children?.length,k=S&&t.includes(b.id),C=i.includes(b.id),B=!!b.disabled,T=!B||s;return ce(u,{component:"li",role:"treeitem","aria-expanded":S?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:n===b.id&&T?0:-1,ref:e=>g(b.id,e),onFocus:e=>{e.stopPropagation(),f(b.id)},sx:{outline:"none",listStyle:"none",...b.sx||{}},children:[ce(u,{className:"omni-tree-content",onClick:e=>{B||(e.stopPropagation(),S&&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(u,{"aria-hidden":"true",sx:{width:z.iconSize,height:z.iconSize,flexShrink:0,display:"flex",alignItems:"center",justifyContent:"center",color:"inherit"},children:S&&(k?c:d)}),o&&!l&&le(Uv,{checked:C,disabled:B,size:"small","aria-hidden":"true",tabIndex:-1,onChange:()=>{}}),b.icon&&le(Ff,{size:"small",sx:{color:"inherit",flexShrink:0},children:b.icon}),le(w,{style:{flex:1,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",color:"inherit",fontWeight:"inherit"},children:b.label}),b.badge&&le(u,{sx:{flexShrink:0},children:b.badge})]}),S&&k&&le(u,{component:"ul",role:"group",sx:{margin:0,padding:0,paddingLeft:"9px",marginLeft:"12px",listStyle:"none",animation:Pk[h]},children:b.children.map((e,u)=>le(Vk,{node:{item:e,level:v+1,index:u,siblings:b.children.length},density:a,expanded:t,selected:i,focusedId:n,multiSelect:r,checkboxSelection:o,disableSelection:l,disabledItemsFocusable:s,collapseIcon:c,expandIcon:d,animation:h,onToggle:m,onSelect:p,onFocusItem:f,registerRef:g},e.id))})]})}function Qk({color:e="default",variant:t="solid",surface:r,density:o="default",animation:l="slide",selectionStyle:s,items:d=jk,selectionMode:h="single",checkboxSelection:m=!1,disableSelection:p=!1,disabledItemsFocusable:f=!1,defaultExpandedItems:g,expandedItems:b,onExpandedItemsChange:v,selectedItems:x,onSelectedItemsChange:y,onItemExpansionToggle:z,onItemSelectionToggle:w,slots:S,"aria-label":k="Tree view",className:C="",sx:B={},...T}){const M=s||t,A="multi"===h,[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=c(()=>Ok(d,N),[d,N]),[H,O]=a(null),E=H??P[0]?.item.id??null,V=i({}),Q=n((e,a)=>{a?V.current[e]=a:delete V.current[e]},[]),j=n(e=>{O(e),V.current[e]?.focus()},[]),q=n((e,a)=>{const t=N.includes(a),i=t?N.filter(e=>e!==a):[...N,a];void 0===b&&I(i),v?.(e,i),z?.(e,a,!t)},[N,b,v,z]),G=n((e,a)=>{const t=F.includes(a),i=A?t?F.filter(e=>e!==a):[...F,a]:[a],n=A?i:i[0]??null;void 0===x&&D(n),y?.(e,n),w?.(e,a,!A||!t)},[F,A,x,y,w]),U=n(e=>{const a=P.filter(e=>!e.item.disabled||f),t=a.findIndex(e=>e.item.id===E),i=a[t];if(!i)return;const{item:n}=i,r=!!n.children?.length,o=r&&N.includes(n.id),l=t=>{const i=a[Math.max(0,Math.min(a.length-1,t))];i&&(e.preventDefault(),j(i.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":r&&!o?(e.preventDefault(),q(e,n.id)):o&&l(t+1);break;case"ArrowLeft":if(o)e.preventDefault(),q(e,n.id);else{const a=Ek(d,n.id);a&&(e.preventDefault(),j(a))}break;case"Enter":case" ":e.preventDefault(),p?r&&q(e,n.id):G(e,n.id)}},[P,E,N,d,f,p,j,q,G]),Y=(X=e).charAt(0).toUpperCase()+X.slice(1);var X;const J="default"===M?void 0:Y,Z=r||("light"===M?"Surface-Brightest":"Surface-Dim"),$=S?.collapseIcon?le(S.collapseIcon,{}):le(Ff,{size:"small",sx:{color:"inherit",transform:"rotate(90deg)"},children:le(Ea,{})}),K=S?.expandIcon?le(S.expandIcon,{}):le(Ff,{size:"small",sx:{color:"inherit"},children:le(Ea,{})});return le(u,{"data-theme":J,"data-surface":Z,className:"omni-treeview omni-treeview-"+M+" omni-treeview-"+e+" omni-treeview-"+o+(C?" "+C:""),sx:{backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",overflow:"hidden",...Hk,...B},children:le(u,{component:"ul",role:"tree","aria-label":k,"aria-multiselectable":A||void 0,onKeyDown:U,sx:{margin:0,padding:"8px",listStyle:"none",fontFamily:"inherit"},...T,children:d.map((e,a)=>le(Vk,{node:{item:e,level:1,index:a,siblings:d.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 jk=[{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"}],qk=e=>le(Qk,{variant:"solid",...e}),Gk=e=>le(Qk,{variant:"light",...e}),Uk=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",Yk=[{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 Xk({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function Jk(){const[e,t]=a(!1),[i,n]=a("medium"),[r,o]=a("left"),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Drawer",component:"Drawer"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Drawer",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:l,surface:c,children:le(nb,{variant:"default",onClick:()=>t(!0),children:"Open Drawer"})}),le(nv,{code:(()=>{const e=["open={open}","onClose={handleClose}"];return"medium"!==i&&e.push('size="'+i+'"'),"left"!==r&&e.push('anchor="'+r+'"'),"<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}}),ce(MS,{open:e,onClose:()=>t(!1),size:i,anchor:r,children:[ce(LS,{children:[le(di,{children:"Navigation"}),le(AS,{onClick:()=>t(!1)})]}),le(IS,{children:le(Qk,{items:Yk,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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(Xk,{label:Uk(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(Xk,{label:Uk(e),selected:r===e,onClick:()=>o(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Drawer"})})]})]})}const Zk={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 $k({onFiles:e,accept:t,multiple:r=!1,size:o="medium",disabled:l=!1,icon:s,label:c,sublabel:d,children:h,className:m="",sx:p={},...f}){const[g,b]=a(!1),v=i(null),x=i(0),y=Zk[o]||Zk.medium,z=n(a=>{!l&&a?.length&&e?.(Array.from(a))},[l,e]),w=n(e=>{e.preventDefault(),e.stopPropagation(),x.current=0,b(!1),l||z(e.dataTransfer.files)},[l,z]),S=n(e=>{e.preventDefault(),e.stopPropagation()},[]),k=n(e=>{e.preventDefault(),e.stopPropagation(),x.current++,l||b(!0)},[l]),C=n(e=>{e.preventDefault(),e.stopPropagation(),x.current--,0===x.current&&b(!1)},[]),B=n(()=>{l||v.current?.click()},[l]),T=n(e=>{l||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),v.current?.click())},[l]),M=n(e=>{z(e.target.files),e.target.value=""},[z]),A=s||Ka,L=r?"Drag and drop files here":"Drag and drop file here";return ce(u,{role:"button",tabIndex:l?-1:0,"aria-label":c||L,"aria-disabled":l||void 0,onClick:B,onKeyDown:T,onDrop:w,onDragOver:S,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:r,onChange:M,style:{display:"none"},"aria-hidden":"true",tabIndex:-1}),h||ce(se,{children:[le(A,{sx:{fontSize:y.iconSize,color:"var(--Text-Quiet)"}}),le(xi,{style:{color:"var(--Text)"},children:c||L}),le(Li,{style:{color:"var(--Text-Quiet)"},children:d||"or click to browse"})]})]})}const Kk={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},_k={size:40,iconSize:"24px",borderRadius:"8px"},eC=new Set;function aC({children:e,color:a="primary",variant:t="solid",size:i,className:n="",sx:r={},...o}){!function(e){void 0!==e&&("production"===process.env.NODE_ENV||eC.has(e)||(eC.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.')))}(i);const l=_k,s=Kk[a]||Kk.primary;let c,d;switch(t){case"light":c=s,d="Surface-Brightest";break;case"dark":c=s,d="Surface-Dimmest";break;default:c=s,d="Surface"}return le(u,{"data-theme":c,"data-surface":d,className:"icon-badge icon-badge-"+t+" icon-badge-"+a+" "+n,sx:{width:l.size,height:l.size,borderRadius:l.borderRadius,backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,"& svg":{width:l.iconSize,height:l.iconSize,fontSize:l.iconSize,color:"inherit",stroke:"currentColor"},...r},...o,children:e})}const tC={eyebrow:Oi,title:wi,secondary:yi},iC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},nC={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 rC({children:e,size:a="medium",isButton:t=!1,onAction:i,ariaLabel:n}){return le(u,t?{component:"button",role:"button",tabIndex:0,"aria-label":n||"Action",onClick:e=>{e.stopPropagation(),i?.(e)},onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),e.stopPropagation(),i?.(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 oC({children:e,startDecorator:a,endDecorator:t,startDecoratorIsButton:i=!1,endDecoratorIsButton:n=!1,onStartDecoratorAction:r,onEndDecoratorAction:o,startDecoratorAriaLabel:l,endDecoratorAriaLabel:s,size:c="medium",variant:d="default",color:h,eyebrow:m,overline:p,secondary:f,clickable:g=!1,disabled:b=!1,selected:v=!1,selectionMode:x="none",onSelect:y,onClick:z,bottomBorder:w=!1,rightBorder:k=!1,component:C="li",sx:B={},...T}){const M=nC[c]||nC.medium,A=g||!!z,I="checkbox"===x||"radio"===x,N=(A||I)&&!b,W=e=>{b||(I&&y?.(e),z?.(e))};return ce(u,{component:C,role:I?"option":A?"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":"")+(A?" list-item-clickable":"")+(I?" list-item-selectable":""),sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",width:"100%",boxSizing:"border-box",gap:"var(--Sizing-1-and-Half)",py:M.py,px:M.px,minHeight:"32px",fontSize:M.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",...A?{border:"1px solid var(--Border)",boxShadow:"var(--Effect-Level-1)",padding:"var(--Sizing-1)",borderRadius:"var(--Input-Radius)"}:{},...!A&&w?{borderBottom:"1px solid var(--Border-Variant)"}:{},...!A&&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(S,{checked:v,disabled:b,size:M.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(L,{checked:v,disabled:b,size:M.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(rC,{size:c,isButton:i,onAction:r,ariaLabel:l,children:a}),(()=>{const a=tC,t=m??p,i={display:"block",width:"100%",wordBreak:"break-word",overflowWrap:"anywhere"};return ce(u,{sx:{flex:"1 1 auto",width:"100%",minWidth:0,display:"flex",flexDirection:"column",gap:0},children:[t&&le(a.eyebrow,{style:{...i,color:"var(--Quiet)"},children:t}),null!=e&&le(a.title,{style:{...i,color:"var(--Text)"},children:e}),f&&le(a.secondary,{style:{...i,color:"var(--Quiet)"},children:f})]})})(),t&&le(rC,{size:c,isButton:n,onAction:o,ariaLabel:s,children:t})]})}function lC({children:a,items:t,variant:i="default",color:n="primary",size:r="medium",orientation:o="vertical",dividers:l=!1,selectionMode:s="none",loading:c=!1,skeletonRows:d=3,empty:h,error:m,selectedIndices:p=[],onSelectionChange:f,clickable:g=!1,component:b="ul",className:v="",sx:x={},...y}){const z="horizontal"===o,w="checkbox"===s||"radio"===s,S="light"===i,k="default"===i,C={};("solid"===i||S)&&iC[n]&&(C["data-theme"]=iC[n],S&&(C["data-surface"]="Surface-Brightest"));const B=m?"error":c?"loading":t&&0===t.length&&h?"empty":null;return le(u,{component:b,role:w?"listbox":"list","aria-busy":"loading"===B?"true":void 0,"aria-multiselectable":"checkbox"===s||void 0,...C,className:"list-container list-"+i+" list-"+n+" "+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(u,{component:"li",sx:{listStyle:"none"},children:le(Lt,{label:"Loading",children:Array.from({length:d}).map((e,a)=>le(oC,{component:"div",size:r,variant:i,color:n,children:"        "},"sk-"+a))})});if("error"===B)return le(u,{component:"li",sx:{listStyle:"none"},children:m});if("empty"===B)return le(u,{component:"li",sx:{listStyle:"none"},children:h});if(t&&t.length>0){const e=[];return t.forEach((a,o)=>{e.push(le(oC,{size:r,variant:i,color:n,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:w?p.includes(o):a.selected,selectionMode:s,onSelect:()=>(e=>{if(f)if("radio"===s)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(u,{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 i=[];return t.forEach((e,a)=>{i.push(e),a<t.length-1&&i.push(le(u,{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))}),i}return null})()})}const sC={small:16,medium:24,large:32};function cC({theme:e,surface:a,size:t="medium",color:i="primary",message:n="Loading...",sx:r={},"aria-label":o="Loading","aria-labelledby":l,...s}){return ce(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...r},...s,"data-theme":e||void 0,"data-surface":a||void 0,children:[le($z,{size:"number"==typeof t?t:sC[t]??sC.medium,color:i,"aria-label":l?void 0:o,"aria-labelledby":l}),n&&le(Q,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:n})]})}function dC({value:e,label:a,sx:t={},...i}){return ce(m,{spacing:1,sx:{...t},...i,children:[a&&ce(m,{direction:"row",justifyContent:"space-between",children:[le(Q,{variant:"body2",sx:{color:"var(--Text)",fontWeight:500},children:a}),void 0!==e&&ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:[e,"%"]})]}),le(j,{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 hC({rows:e=3,height:a=100,spacing:t=2,sx:i={},...n}){return le(m,{spacing:t,sx:{...i},...n,children:Array.from({length:e}).map((e,t)=>le(G,{variant:"rectangular",height:a,sx:{backgroundColor:"var(--Container-Low)",borderRadius:"8px"}},t))})}function uC({message:e="Loading",sx:a={},...t}){return ce(m,{alignItems:"center",justifyContent:"center",spacing:2,sx:{py:4,...a},...t,children:[le(u,{sx:{display:"flex",gap:1},children:[0,1,2].map(e=>le(u,{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(Q,{sx:{color:"var(--Text-Secondary)",fontWeight:500},children:e})]})}function mC({message:e="Loading page...",size:a=60,sx:t={},...i}){return le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",minHeight:"100vh",backgroundColor:"var(--Background)",...t},...i,children:le(cC,{size:a,message:e})})}function pC({lines:e=3,showImage:a=!0,sx:t={},...i}){return le(q,{sx:{p:2,backgroundColor:"var(--Container)",...t},...i,children:ce(m,{spacing:2,children:[a&&le(G,{variant:"rectangular",height:200,sx:{backgroundColor:"var(--Container-Low)",borderRadius:1}}),le(m,{spacing:1,children:Array.from({length:e}).map((e,a)=>le(G,{variant:"text",height:0===a?24:16,sx:{backgroundColor:"var(--Container-Low)"}},a))})]})})}function fC({isLoading:e=!1,message:a="Loading...",children:t,sx:i={},...n}){return ce(u,{sx:{position:"relative",...i},...n,children:[t,e&&le(u,{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(cC,{size:40,message:a})})]})}const gC=e=>e.charAt(0).toUpperCase()+e.slice(1),bC={small:xi,medium:wi,large:Ti},vC={small:fi,medium:pi,large:mi},xC={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"}},yC=l({open:!1,setOpen:()=>{},anchorRef:{current:null},menuId:"",buttonId:"",variant:"outline",color:"default",size:"medium"}),zC=()=>s(yC);function wC({children:e,variant:t="outline",color:r="default",size:l="medium",open:s,onOpenChange:c,...d}){const[h,m]=a(!1),p=void 0!==s,f=p?s:h,g=i(null),b=o(),v="menu-"+b,x="menubtn-"+b,y=n(e=>{const a="function"==typeof e?e(f):e;p?c?.(a):m(a)},[p,f,c]);return le(yC.Provider,{value:{open:f,setOpen:y,anchorRef:g,menuId:v,buttonId:x,variant:t,color:r,size:l},children:le(u,{sx:{display:"inline-flex",position:"relative"},...d,children:e})})}function SC({children:a,className:t="",sx:i={},...n}){const{open:r,setOpen:o,anchorRef:l,menuId:s,buttonId:c,size:d,color:h}=zC(),m=xC[d]||xC.medium,p=gC("default"===h?"Default":h);return ce(u,{component:"button",ref:l,id:c,"aria-haspopup":"true","aria-expanded":r,"aria-controls":r?s: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"},...i},onKeyDown:e=>{"ArrowDown"!==e.key&&"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),o(!0))},...n,children:["string"==typeof a?e.createElement(bC[d]||bC.medium,{style:{color:"inherit",fontWeight:600}},a):a,le(Ff,{size:"small",sx:{color:"var(--Quiet)",transition:"transform 0.2s ease",transform:r?"rotate(180deg)":"rotate(0deg)"},children:le(he,{})})]})}function kC({children:e,className:a="",placement:n="bottom-start",sx:r={},...o}){const{open:l,setOpen:s,anchorRef:c,menuId:d,buttonId:h,variant:m,color:p,size:f}=zC(),g=i(null),b=xC[f]||xC.medium,v=gC("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)&&c.current&&!c.current.contains(e.target)&&s(!1)};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[l,s,c]),t(()=>{if(!l)return;const e=e=>{"Escape"===e.key&&(s(!1),c.current?.focus())};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[l,s,c]),l?le(u,{className:"menu menu-"+m+" "+a,sx:{position:"absolute",top:"100%",left:"bottom-end"===n?"auto":0,right:"bottom-end"===n?0:"auto",zIndex:99999,marginTop:"4px",border:"1px solid "+x,borderRadius:"var(--Dropdown-Frame-Radius, var(--Input-Radius, var(--Style-Border-Radius, 4px)))",boxShadow:Qf,overflow:"hidden",...r},children:le(u,{ref:g,id:d,role:"menu","aria-labelledby":h,"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&&s(!1)},...o,children:e})}):null}function CC({children:e,onClick:a,selected:t=!1,disabled:i=!1,className:n="",sx:r={},...o}){const{setOpen:l,size:s}=zC(),c=xC[s]||xC.medium,d=t?vC[s]||vC.medium:bC[s]||bC.medium,h=()=>{i||(a?.(),l(!1))};return le(u,{role:"menuitem",tabIndex:i?-1:0,"aria-disabled":i||void 0,"aria-selected":t||void 0,onClick:h,onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),h())},className:"menu-item"+(t?" menu-item-selected":"")+" "+n,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",padding:c.itemPy+" "+c.itemPx,fontSize:c.fontSize,color:i?"var(--Quiet)":t?"var(--Text)":"var(--Quiet)",backgroundColor:t?"var(--Hover)":"transparent",cursor:i?"not-allowed":"pointer",opacity:i?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.1s ease, color 0.1s ease",userSelect:"none",...!i&&{"&: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"}},...r},...o,children:le(u,{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 BC({className:e="",sx:a={},...t}){return le(u,{component:"hr",role:"separator",className:"menu-divider "+e,sx:{border:"none",borderTop:"1px solid var(--Border)",margin:"4px 0",...a},...t})}const TC=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",MC=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function AC({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function LC({color:e,selected:a,onClick:t}){const i=TC(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function IC(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Menu",component:"Menu"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Menu",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:l,surface:c,sx:{minHeight:250,alignItems:"flex-start",pt:6},children:ce(wC,{variant:e,color:i,size:r,children:[le(SC,{children:"Actions"}),ce(kC,{children:[le(CC,{children:"Edit"}),le(CC,{children:"Duplicate"}),le(CC,{selected:!0,children:"Archive"}),le(BC,{}),le(CC,{disabled:!0,children:"Delete"})]})]})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"<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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","solid","light"].map(a=>le(AC,{label:TC(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:MC.map(e=>ce(u,{children:[le(Li,{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(LC,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(AC,{label:TC(e),selected:r===e,onClick:()=>o(e)},e))})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Menu"})})]})]})}const NC={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},WC={default:"Container-High",solid:"Container-High",soft:"Surface-Brightest"},DC={small:{maxWidth:400,padding:"24px"},medium:{maxWidth:560,padding:"32px"},large:{maxWidth:720,padding:"40px"}},RC={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 FC(e){const a=RC[e];if(!a)return"";const{from:t,to:i}=a.enter,n=Object.entries(t).map(([e,a])=>e+":"+a).join(";"),r=Object.entries(i).map(([e,a])=>e+":"+a).join(";");return"@keyframes "+a.name+" { from {"+n+"} to {"+r+"} }@keyframes "+a.name+"-backdrop { from { opacity: 0 } to { opacity: 1 } }"}function PC({open:e,onClose:n,children:r,title:o,variant:l="default",color:s="primary",size:c="medium",layout:d="center",transition:h="fade",transitionSpeed:m=250,closeOnBackdrop:p=!0,showCloseButton:f=!0,className:g="",sx:b={},...v}){const x=i(null),y=i(null),[z,w]=a(!1);let S;try{S=zS()}catch{S=null}const k=S?.style||"Modern",C="soft"===l,B="solid"===l,T="fullscreen"===d,M=B||C?NC[s]:null,A=WC[l]||WC.default,L=DC[c]||DC.medium,I=RC[h],N=I?I.name:void 0,W=m+"ms";return t(()=>(e?(y.current=document.activeElement,w(!0),requestAnimationFrame(()=>{x.current?.focus()}),document.body.style.overflow="hidden"):(w(!1),document.body.style.overflow="",y.current?.focus()),()=>{document.body.style.overflow=""}),[e]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,n]),e||z?ce(se,{children:["none"!==h&&le("style",{children:FC(h)}),le(u,{"aria-hidden":"true",onClick:p?n:void 0,sx:{position:"fixed",inset:0,zIndex:1e7,backgroundColor:"rgba(0,0,0,0.5)",...N&&{animation:N+"-backdrop "+W+" ease-out forwards"}}}),ce(u,{role:"dialog","aria-modal":"true","aria-label":o||"Modal",ref:x,tabIndex:-1,"data-surface":A,"data-theme":M||void 0,"data-style":k,className:"modal modal-"+l+" modal-"+c+" modal-"+d+(C||B?" modal-"+s:"")+(g?" "+g:""),sx:{position:"fixed",zIndex:10000001,outline:"none",fontFamily:"inherit",...T?{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:Gf,display:"flex",flexDirection:"column",overflow:"hidden",...N&&{animation:N+" "+W+" ease-out forwards"},...b},...v,children:[(o||f)&&ce(u,{sx:{display:"flex",alignItems:"center",justifyContent:"space-between",px:T?4:L.padding,pt:T?3:L.padding,pb:0,flexShrink:0},children:[o&&le(u,{className:"modal-title",sx:{fontSize:"small"===c?"18px":"large"===c?"24px":"20px",fontWeight:"var(--H4-Font-Weight, 700)",fontFamily:"var(--H4-Font-Family, var(--Font-Family-Header, var(--Header-Font-Family, inherit)))",color:"var(--Header, var(--Text))",flex:1},children:o}),f&&le(u,{component:"button",type:"button","aria-label":"Close modal",onClick:n,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(Ua,{sx:{fontSize:20}})})]}),le(u,{sx:{flex:1,overflowY:"auto",px:T?4:L.padding,pt:T?3:"16px",pb:T?3:L.padding,color:"var(--Text)",fontSize:"small"===c?"13px":"14px",lineHeight:1.6},children:r})]})]}):null}function HC({children:e,surface:a="Container",outlined:t=!1,variant:i=(t?"outlined":"elevation"),sx:n={},...r}){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(q,{variant:i,elevation:"outlined"===i||t?0:l,"data-surface":o,sx:{padding:2,borderRadius:"8px",transition:"all 0.2s ease-in-out",...n},...r,children:e})}function OC({open:e=!1,onClose:n,anchorRef:r,placement:o="bottom-end",theme:l="Default",surface:s="Surface-Bright",width:c=320,maxHeight:d=400,children:h,sx:m={}}){const p=i(null),[f,g]=a({top:0,left:0,right:"auto"});return t(()=>{if(!e||!r?.current)return;const a=r.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,r,o]),t(()=>{if(!e)return;const a=e=>{p.current?.contains(e.target)||r?.current?.contains(e.target)||n?.()};return document.addEventListener("pointerdown",a),()=>document.removeEventListener("pointerdown",a)},[e,n,r]),t(()=>{if(!e)return;const a=e=>{"Escape"===e.key&&n?.()};return document.addEventListener("keydown",a),()=>document.removeEventListener("keydown",a)},[e,n]),e?de.createPortal(le(u,{ref:p,"data-theme":l,"data-surface":s,sx:{position:"fixed",top:f.top,left:f.left,right:f.right,zIndex:2e9,width:c,maxHeight:d,overflowY:"auto",backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Style-Border-Radius)",boxShadow:Qf,...m},children:h}),document.body):null}const EC={small:"var(--Sm-Rail-Width, 72px)",medium:"var(--Rail-Width, 80px)",large:"var(--Lg-Rail-Width, 96px)"},VC="var(--Icon-Size, 24px)",QC="var(--Sizing-Half, 4px)",jC="var(--Button-Height, 32px)";function qC({items:e=[],sections:t,value:i,defaultValue:r=0,onChange:o,expandable:l=!1,expandedWidth:s="partial",defaultExpanded:c=!1,fabAction:d,labelStyle:h="contained",variant:m="default",size:p="medium",className:f="",sx:g={},...b}){const[v,x]=a(r),[y,z]=a(c),w=void 0!==i,S=w?i:v,k=n(e=>{w||x(e),o?.(e)},[w,o]),C=l&&y;return ce(u,{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"===h?"outside":"contained")+" rail-"+(EC[p]?p:"medium")+" "+f,sx:{display:"flex",flexDirection:"column",width:C?("full"===s?320:240)+"px":EC[p]||EC.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(u,{sx:{display:"flex",justifyContent:C?"flex-start":"center",px:C?1.5:0,height:56,alignItems:"center"},children:le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>z(e=>!e),"aria-label":C?"Collapse menu":"Expand menu",children:le(Ff,{size:"small",sx:{color:"inherit"},children:le(C?Ua:ja,{})})})}),d&&le(u,{sx:{px:C?2:1,py:1,flexShrink:0},children:le(nb,{variant:"primary-light",size:"medium",onClick:d.onClick,"aria-label":d.label||"Action",startIcon:d.icon?le(Ff,{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(u,{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,i)=>{i>0&&e.push(le(u,{"aria-hidden":"true",sx:{height:"1px",width:"100%",backgroundColor:"var(--Border-Variant)"}},"divider-"+i)),t.items.forEach(t=>{const i=a;e.push(le(GC,{item:t,variant:m,selected:S===i,expanded:C,labelStyle:h,onClick:()=>k(i)},"item-"+i)),a++})}),e}return e.map((e,a)=>le(GC,{item:e,variant:m,selected:S===a,expanded:C,labelStyle:h,onClick:()=>k(a)},a))})()})]})}function GC({item:e,selected:a,expanded:t,labelStyle:i,variant:n="default",onClick:r}){const{icon:o,avatar:l,label:s,badge:c,disabled:d}=e,h=a?"var(--Text)":"transparent",m="outside"!==i,p=m&&!t,f=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 ce(u,{component:"button",type:"button",role:"tab","aria-selected":a,"aria-label":s,"aria-disabled":d||void 0,disabled:d||void 0,onClick:d?void 0:r,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:VC,minHeight:VC,px:t?2.5:0,py:p?QC:0,border:a&&p?"1px solid var(--Border)":"1px solid transparent",borderRadius:t?0:"8px",backgroundColor:p||t?h:"transparent",boxShadow:a&&p?"var(--Shadow-1, none)":"none",color:a?p?"var(--Background)":"var(--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",...p||t?f:{}},children:[ce(u,{sx:{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",...t?{flexShrink:0}:{width:m?"100%":jC,height:m?"auto":jC,py:m?QC:0,borderRadius:m?"8px":jC,backgroundColor:m?"transparent":h,border:!m&&a?"1px solid var(--Border)":void 0,transition:"background-color 0.2s ease",...m?{}:f}},children:[l?le(u,{sx:{display:"flex",width:VC,height:VC},children:l}):le(Ff,{size:"small",sx:{color:"inherit"},children:o}),c&&le(UC,{value:c})]}),s&&le(u,{sx:{display:"flex",alignItems:"flex-start",justifyContent:"center",width:"100%"},children:le(Ni,{className:"rail-item-label",color:"inherit",style:{textAlign:"center",whiteSpace:t?"nowrap":"normal",overflow:"hidden",textOverflow:"ellipsis",...t?{flex:1}:{maxWidth:"100%"}},children:s})})]})}function UC({value:e}){return le(u,{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 YC=[{icon:le(Me,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Te,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}];function XC({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function JC(){const[e,t]=a(!0),[i,n]=a("partial"),[r,o]=a(!1),[l,s]=a("Default"),[c,d]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Rail",component:"Rail"}),le(u,{sx:{mt:1},children:le(ig,{theme:l,onThemeChange:s,surface:c,onSurfaceChange:d})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Rail",theme:l,surface:c})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[ce(wv,{theme:l,surface:c,sx:{minHeight:400,alignItems:"stretch",p:0},children:[le(qC,{items:YC,expandable:e,expandedWidth:i,fabAction:r?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0}),le(u,{sx:{flex:1,p:3},children:le(xi,{style:{color:"var(--Quiet)"},children:"Main content area"})})]}),le(nv,{code:(()=>{const a=["items={items}"];return e&&(a.push("expandable"),"partial"!==i&&a.push('expandedWidth="full"')),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{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(XC,{label:(a=e,a?a.charAt(0).toUpperCase()+a.slice(1):""),selected:i===e,onClick:()=>n(e)},e);var a})})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Expandable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Toggle between collapsed and expanded"})]}),le(yv,{variant:"default-outline",checked:e,onChange:e=>t(e.target.checked),size:"small","aria-label":"Expandable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"FAB Action"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show create button at top"})]}),le(yv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"FAB action"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Rail"})})]})]})}function ZC(e){const a=Math.max(0,Math.floor(Number(e)||0)),t=Math.floor(a/3600),i=Math.floor(a%3600/60),n=a%60,r=e=>String(e).padStart(2,"0");return t>0?`${t}:${r(i)}:${r(n)}`:`${i}:${r(n)}`}function $C({title:e,subtitle:t,avatarSrc:i,avatarInitials:n,position:r,defaultPosition:o=0,duration:l=0,onSeek:s,playing:c,defaultPlaying:d=!1,onPlayPause:h,onPrevious:m,onNext:p,variant:f="default",size:g="medium",disabled:b=!1,showTime:v=!0,className:x="",sx:y={},"aria-label":z="Audio player",...w}){const[S,k]=a(o),[C,B]=a(d),T=void 0!==r,M=void 0!==c,A=T?r:S,L=M?c:C,I=Boolean(e||t||i||n);return ce(uz,{className:"player "+x,gap:"var(--Sizing-2)",role:"group","aria-label":z,style:{alignItems:"center",width:"100%"},sx:y,...w,children:[I&&ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center",minWidth:0},children:[(i||n)&&le(Lg,{src:i,initials:n,size:g,alt:e?`Artwork for ${e}`:void 0}),ce(mz,{gap:"0",style:{minWidth:0},children:[e&&le(wi,{style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:e}),t&&le(Li,{color:"quiet",style:{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"},children:t})]})]}),ce(uz,{gap:"var(--Sizing-Half)",style:{alignItems:"center",flexShrink:0},children:[m&&le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:m,"aria-label":"Previous track",children:le(tt,{})}),le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:()=>{M||B(!L),h?.(!L)},"aria-label":L?"Pause":"Play",children:le(L?at:et,{})}),p&&le(nb,{variant:f,size:g,iconOnly:!0,disabled:b,onClick:p,"aria-label":"Next track",children:le(it,{})})]}),ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flex:1,minWidth:0},children:[v&&le(Li,{color:"quiet",style:{fontVariantNumeric:"tabular-nums",flexShrink:0},children:ZC(A)}),le(u,{sx:{flex:1,minWidth:0},children:le(jx,{variant:f,size:g,disabled:b||!s,min:0,max:Math.max(l,1),value:A,onChange:(e,a)=>{const t=Array.isArray(a)?a[0]:a;T||k(t),s?.(t)},"aria-label":"Seek",getAriaValueText:e=>ZC(e)+" of "+ZC(l)})}),v&&le(Li,{color:"quiet",style:{fontVariantNumeric:"tabular-nums",flexShrink:0},children:ZC(l)})]})]})}const KC=["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"],_C="1.618034",eB={"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":_C+" / 1","Golden-Vertical":"1 / "+_C},aB={none:0,xs:1,sm:2,md:3,lg:4,xl:6};function tB({ratio:a="1:1",children:t,variant:i="default",color:n="default",padding:r="none",fit:o="width",placeholder:l=!0,elevated:s=!1,clickable:c=!1,onClick:d,maxWidth:h,maxHeight:m,component:p="div",className:f="",sx:g={},...b}){const v=eB[a]||eB["1:1"],x=(y="default"===n?"Default":n).charAt(0).toUpperCase()+y.slice(1);var y;const z=l&&0===e.Children.count(t),w="default"===n?void 0:x,S="dark"===i?"Surface-Dimmest":"light"===i?"Surface-Brightest":void 0,k=void 0!==aB[r]?aB[r]:aB.none,C=c||!!d,B="default"===i,T=s?Qf:Vf,M=s?jf:Qf;return le(u,{component:p,onClick:C?d:void 0,role:C?"button":void 0,tabIndex:C?0:void 0,className:"ratio ratio-"+a.toLowerCase()+" ratio-"+i+(C?" ratio-clickable":"")+(s?" 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!==h&&{maxWidth:h},...void 0!==m&&{maxHeight:m},border:B?"none":"1px solid var(--Border-Variant)",borderRadius:B?0:"var(--Style-Border-Radius)",boxShadow:B?"none":T,overflow:"hidden",transition:"box-shadow 0.2s ease, border-color 0.2s ease",...C&&{cursor:"pointer","&:hover":{borderColor:"var(--Buttons-Default-Border)",boxShadow:M},"&:active":{transform:"scale(0.995)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"3px"}},...!C&&!B&&{"&:hover":{boxShadow:M}},...g},...b,children:le(u,{"data-theme":w||void 0,"data-surface":S,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(Ff,{size:"large",sx:{color:"var(--Background)"},children:le(nt,{})}):t})})}const iB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",nB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],rB=["default","solid","light","dark"],oB=["none","xs","sm","md","lg","xl"];function lB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function sB({color:e,selected:a,onClick:t,variant:i}){const n=iB(e);return le(Fz,{component:"button","data-theme":{solid:n,light:n+"-Light",dark:n,default:void 0}[i],"data-surface":{solid:"Surface",light:"Surface",dark:"Surface-Dimmest",default:"Surface"}[i],onClick:()=>t(e),"aria-label":"Select "+n,"aria-pressed":a,title:n,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(ue,{sx:{fontSize:16,color:"var(--Text)",pointerEvents:"none"}})})}function cB(){const[e,t]=a("1:1"),[i,n]=a("solid"),[r,o]=a("primary"),[l,s]=a("none"),[c,d]=a(!1),[h,u]=a(!1),[p,f]=a("Default"),[g,b]=a("Surface");return ce(Fz,{sx:{pb:8},children:[le(xA,{title:"Ratio",component:"Ratio"}),le(Fz,{sx:{mt:1},children:le(ig,{theme:p,onThemeChange:f,surface:g,onSurfaceChange:b})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Reference"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Ratio",theme:p,surface:g})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:p,surface:g,children:le(Fz,{sx:{width:"100%",maxWidth:480},children:le(tB,{ratio:e,variant:i,color:r,padding:l,elevated:c,clickable:h})})}),le(nv,{code:(()=>{const a=['ratio="'+e+'"'];return"default"!==i&&a.push('variant="'+i+'"'),"default"!==r&&a.push('color="'+r+'"'),"none"!==l&&a.push('padding="'+l+'"'),c&&a.push("elevated"),h&&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:ce(Fz,{sx:{p:3},children:[le(Fz,{sx:{mb:3}}),ce(Fz,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"VARIANT"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:rB.map(e=>le(lB,{label:iB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(Fz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:nB.map(e=>ce(Fz,{children:[le(Li,{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(sB,{color:e,selected:r===e,onClick:o,variant:"default"===i?"solid":i},e))})]},e.label))})]}),ce(Fz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"PADDING"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:oB.map(e=>le(lB,{label:"none"===e?"None":e.toUpperCase(),selected:l===e,onClick:()=>s(e)},e))})]}),ce(Fz,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"RATIO"}),le(m,{direction:"row",flexWrap:"wrap",sx:{gap:1},children:KC.map(a=>le(lB,{label:a,selected:e===a,onClick:()=>t(a)},a))})]}),ce(Fz,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(Fz,{children:[le(Ri,{children:"Elevated"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Bumps the shadow up one level"})]}),le(yv,{checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Elevated"})]}),ce(Fz,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(Fz,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Adds hover, press, and focus-visible"})]}),le(yv,{checked:h,onChange:e=>u(e.target.checked),size:"small","aria-label":"Clickable"})]})]})})]})}),le(Lb,{value:2,children:le(Fz,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(Fz,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(Fz,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[le(xi,{children:e}),le(Li,{style:{color:"var(--Text-Quiet)"},children:a})]},e))})]}),ce(wi,{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(Lb,{value:3,children:le(fA,{component:"Ratio"})})]})]})}const dB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",hB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}];function uB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function mB({color:e,selected:a,onClick:t}){const i=dB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function pB(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a(!1),[l,s]=a(!0),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Search Field",component:"SearchField"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"SearchField",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:c,surface:h,children:le(u,{sx:{width:"100%",maxWidth:400},children:le(oS,{color:e,size:i,disabled:r,showClearButton:l,placeholder:"Search..."})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),l||a.push("showClearButton={false}"),r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:hB.map(a=>ce(u,{children:[le(Li,{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(mB,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(uB,{label:dB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clear Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show clear when has value"})]}),le(yv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"Clear button"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{variant:"default-outline",checked:r,onChange:e=>o(e.target.checked),size:"small","aria-label":"Disabled"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"SearchField"})})]})]})}const fB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",gB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],bB=[{value:"apple",label:"Apple"},{value:"banana",label:"Banana"},{value:"cherry",label:"Cherry"},{value:"date",label:"Date"},{value:"elderberry",label:"Elderberry"}],vB=[{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 xB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function yB({color:e,selected:a,onClick:t}){const i=fB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function zB(){const[e,t]=a("outline"),[i,n]=a("default"),[r,o]=a("medium"),[l,s]=a("top"),[c,d]=a("Fruit"),[h,p]=a(!1),[f,g]=a(!1),[b,v]=a(!0),[x,z]=a(!1),[w,S]=a("Search"),[k,C]=a(""),[B,T]=a("Default"),[M,A]=a("Surface"),[L,I]=a(!1),[N,W]=a(!0);return ce(u,{sx:{pb:8},children:[le(xA,{title:"Select",component:"Select"}),le(u,{sx:{mt:1},children:le(ig,{theme:B,onThemeChange:T,surface:M,onSurfaceChange:A})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Select",theme:B,surface:M})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:B,surface:M,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(eg,{variant:e,color:i,size:r,label:c,labelPosition:l,mode:L?"color":void 0,showColorLabels:L?N:void 0,options:L?vB:bB,value:k,onChange:C,showDividers:h,disabled:f,fullWidth:b,startDecoration:x?(()=>{const e=ge[w]||ge.Search;return le(Ff,{size:"small",children:le(e,{})})})():void 0})})}),le(nv,{code:(()=>{const a=[];return"outline"!==e&&a.push('variant="'+e+'"'),"default"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),c&&a.push('label="'+c+'"'),"top"!==l&&a.push('labelPosition="'+l+'"'),L&&a.push('mode="color"'),L&&!N&&a.push("showColorLabels={false}"),h&&a.push("showDividers"),f&&a.push("disabled"),b&&a.push("fullWidth"),x&&a.push("startDecoration={<Icon><"+w+"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["outline","light"].map(a=>le(xB,{label:fB(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:gB.map(e=>ce(u,{children:[le(Li,{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(yB,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(xB,{label:fB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"LABEL"}),le(m,{direction:"row",spacing:1,children:["top","floating","none"].map(e=>le(xB,{label:"none"===e?"None":fB(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Start Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Icon rendered before the value"})]}),le(yv,{checked:x,onChange:e=>z(e.target.checked),size:"small","aria-label":"Start icon"})]}),x&&ce(u,{sx:{mt:2},children:[le(Wx,{label:"Icon Name",value:w,onChange:e=>S(e.target.value),placeholder:"Search",variant:"primary-outline",size:"small",fullWidth:!0}),ce(Li,{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)"]})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Dividers"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Lines between options"})]}),le(yv,{checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Show dividers"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disabled"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Non-interactive state"})]}),le(yv,{checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Disabled"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Color Mode"}),le(Li,{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(yv,{checked:L,onChange:e=>I(e.target.checked),size:"small","aria-label":"Color mode"})]}),L&&ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Color Labels"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Hide to render a swatch-only trigger (no text). Useful for compact color pickers."})]}),le(yv,{checked:N,onChange:e=>W(e.target.checked),size:"small","aria-label":"Show color labels"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Full Width"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Stretch to container width"})]}),le(yv,{checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Full width"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Select"})})]})]})}const wB={outline:"2px solid var(--Focus-Visible)",outlineOffset:"2px"},SB={opacity:"var(--Disabled, 0.38)",cursor:"not-allowed"};function kB(e={}){const{selectedBg:a,selectedText:t,selectedHover:i,selectedPressed:n,muiPrefix:r}=e,o=r?"&.Mui-disabled":"&:disabled",l=r?"&.Mui-focusVisible":"&:focus-visible",s={"&:hover":{backgroundColor:"var(--Hover)"},"&:active":{backgroundColor:"var(--Pressed)"},[l]:wB,[o]:{...SB,color:"var(--Quiet)"}};return a?{...s,"&.Mui-selected":{backgroundColor:a,...t?{color:t}:{},"&:hover":{backgroundColor:i||"var(--Hover)"},"&:active":{backgroundColor:n||"var(--Pressed)"}}}:s}function CB({open:e,onClose:t,items:i=[],onItemClick:n,width:r=280,variant:o="temporary",header:l,footer:s,sx:c={},...d}){const[h,m]=a(null),[f,g]=a({}),b=(e,a)=>{m(a),n?.(e),"temporary"===o&&t?.()},v="permanent"===o?"permanent":"standard"===o?"standard":"temporary",y=ce(u,{sx:{display:"flex",flexDirection:"column",height:"100%",backgroundColor:"var(--Container)",color:"var(--Text)"},children:[l&&le(u,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:"string"==typeof l?le(Q,{variant:"h6",sx:{fontWeight:700},children:l}):l}),le(U,{sx:{flex:1,overflow:"auto",py:1},children:i.map((e,a)=>{const t=h===a,i=e.submenu&&e.submenu.length>0,n=f[a];return ce(u,{children:[le(x,{title:e.tooltip||"",placement:"right",children:le(Y,{disablePadding:!0,children:ce(X,{onClick:()=>{i?(e=>{g(a=>({...a,[e]:!a[e]}))})(a):b(e,a)},selected:t&&!i,sx:{backgroundColor:t&&!i?"var(--Buttons-Primary-Button)":"transparent",color:t&&!i?"var(--Buttons-Primary-Text)":"var(--Text)",...kB({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(J,{sx:{color:t&&!i?"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(Z,{primary:e.label,primaryTypographyProps:{variant:"body2",fontWeight:t&&!i?600:500}}),i&&le(u,{sx:{ml:1},children:le(n?fe:he,{})})]})})}),i&&le($,{in:n,timeout:"auto",unmountOnExit:!0,children:le(U,{component:"div",disablePadding:!0,children:e.submenu.map((e,a)=>le(Y,{disablePadding:!0,children:ce(X,{onClick:()=>b(e,a),sx:{pl:4,backgroundColor:"transparent",color:"var(--Text)",...kB({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(J,{sx:{color:"var(--Icons-Primary)",minWidth:40},children:e.icon}),le(Z,{primary:e.label})]})},a))})}),e.divider&&le(K,{sx:{my:1,borderColor:"var(--Border-Variant)"}})]},a)})}),s&&le(u,{sx:{borderTop:"1px solid var(--Border-Variant)",p:2},children:"string"==typeof s?le(Q,{variant:"caption",sx:{color:"var(--Text-Quiet)"},children:s}):s})]});return"permanent"===o?le(u,{sx:{width:r,flexShrink:0,...c},children:y}):le(_,{variant:v,open:e,onClose:t,PaperProps:{sx:{width:r,backgroundColor:"var(--Container)",color:"var(--Text)",...c}},...d,children:y})}const BB={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 TB=!1;function MB({children:e,open:a=!1,onClose:r,variant:o="light",surface:l,color:s="info",size:c="medium",anchor:d="bottom",autoHideDuration:h,startDecorator:m,endDecorator:p,action:f,className:g="",sx:b={},...v}){const x=i(null),y=(e=>e.charAt(0).toUpperCase()+e.slice(1))("default"===s?"Default":s),z=BB[c]||BB.medium,w="small"===c?xi:wi,S="default"===s?"Default":y;"production"===process.env.NODE_ENV||"solid"!==o||TB||(TB=!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&&h&&h>0)return x.current=setTimeout(()=>{r?.({},"timeout")},h),()=>clearTimeout(x.current)},[a,h,r]),t(()=>{if(!a)return;const e=e=>{"Escape"===e.key&&r?.(e,"escapeKeyDown")};return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a,r]);const B=n(()=>{x.current&&clearTimeout(x.current)},[]),T=n(()=>{a&&h&&h>0&&(x.current=setTimeout(()=>{r?.({},"timeout")},h))},[a,h,r]),M="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(u,{role:"alert","aria-live":"polite","aria-atomic":"true",onMouseEnter:B,onMouseLeave:T,className:"snackbar snackbar-"+o+" snackbar-"+c+" snackbar-"+d+" snackbar-"+s+" "+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:jf,overflow:"hidden",animation:"snackbar-slide-in 0.3s ease forwards","@keyframes snackbar-slide-in":M,...b},...v,children:ce(u,{"data-theme":S,"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(u,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:m}),le(u,{sx:{flex:1,minWidth:0},children:"string"==typeof e?le(w,{children:e}):e}),f&&le(u,{sx:{display:"inline-flex",flexShrink:0},children:f}),p&&le(u,{sx:{display:"inline-flex",flexShrink:0,lineHeight:1},children:p}),r&&le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:e=>r(e,"closeClick"),"aria-label":"Close notification",sx:{flexShrink:0,ml:"4px"},children:le(Ff,{size:"small",children:le(Ua,{})})})]})}):null}const AB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",LB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],IB={info:le(we,{}),success:le(Se,{}),warning:le(ke,{}),error:le(Ce,{})};function NB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function WB({color:e,selected:a,onClick:t}){const i=AB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function DB(){const[e,t]=a("light"),[i,n]=a("info"),[r,o]=a("medium"),[l,s]=a("bottom"),[c,d]=a(!0),[h,p]=a(!0),[f,g]=a(!1),[b,v]=a("Default"),[x,z]=a("Surface"),w=c&&IB[i]?le(Ff,{size:"small",sx:{color:"inherit"},children:IB[i]}):void 0;return ce(u,{sx:{pb:8},children:[le(xA,{title:"Snackbar",component:"Snackbar"}),le(u,{sx:{mt:1},children:le(ig,{theme:b,onThemeChange:v,surface:x,onSurfaceChange:z})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Snackbar",theme:b,surface:x})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:b,surface:x,children:le(nb,{variant:"default",onClick:()=>g(!0),children:"Show Snackbar"})}),le(nv,{code:(()=>{const a=["open={open}"];return a.push('variant="'+e+'"'),"info"!==i&&a.push('color="'+i+'"'),"medium"!==r&&a.push('size="'+r+'"'),"bottom"!==l&&a.push('anchor="top"'),h&&a.push("onClose={handleClose}"),c&&IB[i]&&a.push("startDecorator={<Icon><"+AB(i)+"Icon /></Icon>}"),"<Snackbar\n "+a.join("\n ")+"\n>\n Operation completed successfully.\n</Snackbar>"})(),language:"JSX",wrap:!0,sx:{mt:2}}),le(MB,{open:f,onClose:h?()=>g(!1):void 0,variant:e,color:i,size:r,anchor:l,autoHideDuration:4e3,startDecorator:w,children:"Operation completed successfully."})]}),le(y,{item:!0,sx:{width:{xs:"100%",md:"45%"},flexShrink:0,minWidth:0},children:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["solid","light"].map(a=>le(NB,{label:AB(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:LB.map(e=>ce(u,{children:[le(Li,{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(WB,{color:e,selected:i===e,onClick:n},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(NB,{label:AB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANCHOR"}),le(m,{direction:"row",spacing:1,children:["top","bottom"].map(e=>le(NB,{label:AB(e),selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icon"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Start decorator icon"})]}),le(yv,{variant:"default-outline",checked:c,onChange:e=>d(e.target.checked),size:"small","aria-label":"Show icon"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Close Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show dismiss button"})]}),le(yv,{variant:"default-outline",checked:h,onChange:e=>p(e.target.checked),size:"small","aria-label":"Close button"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Snackbar"})})]})]})}const RB={empty:{icon:le(rt,{}),iconColor:"quiet",titleColor:"header",role:void 0},"no-results":{icon:le(ot,{}),iconColor:"quiet",titleColor:"header",role:void 0},error:{icon:le(lt,{}),iconColor:"error",titleColor:"error",role:"alert"}},FB={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 PB({type:e="empty",icon:a,title:t,body:i,action:n,size:r="medium",className:l="",sx:s={},...c}){const d=RB[e]||RB.empty,h=FB[r]||FB.medium,m="small"===r?xi:wi,p=o(),f=t?p+"-title":void 0,g=i?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."),ce(u,{className:"state-message state-message-"+e+" state-message-"+r+" "+l,role:d.role||"group","aria-labelledby":f,"aria-describedby":g,sx:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",textAlign:"center",gap:h.gap,padding:h.pad,width:"100%",boxSizing:"border-box",...s},...c,children:[le(Ff,{size:h.icon,color:d.iconColor,"aria-hidden":"true",children:a||d.icon}),t&&le(pi,{id:f,color:d.titleColor,children:t}),i&&le(m,{id:g,color:"quiet",sx:{maxWidth:h.maxWidth},children:i}),n&&le(u,{sx:{marginTop:"4px"},children:n})]})}const HB={default:"Default",primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},OB={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:56,fontSize:"var(--Lg-Button-Numbers, 16px)",dot:"var(--Lg-No-Count-Step, 16px)",connectorThickness:"var(--Lg-Step-Bar, 4px)",gap:0}},EB=l({orientation:"horizontal",size:"medium",color:"default",activeStep:0,clickable:!1,onStepClick:null,dashedIncomplete:!1,totalSteps:0,variant:"count"}),VB=()=>s(EB);function QB({theme:a,surface:t,children:i,orientation:n="horizontal",size:r="medium",color:o="default",activeStep:l=0,clickable:s=!1,onStepClick:c,dashedIncomplete:d=!1,variant:h="count",className:m="",sx:p={},...f}){const g=e.Children.toArray(i).filter(e.isValidElement),b=g.length,v="horizontal"===n;return le(EB.Provider,{value:{orientation:n,size:r,color:o,activeStep:l,clickable:s,onStepClick:c,dashedIncomplete:d,totalSteps:b,variant:h},children:le(u,{component:"ol",role:"list","aria-label":"Progress","data-theme":a||void 0,"data-surface":t||void 0,className:"stepper stepper-"+n+" stepper-"+r+" 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 jB({children:e,icon:a,label:t,disabled:i=!1,_index:n=0,className:r="",sx:o={},...l}){const{orientation:s,size:c,color:d,activeStep:h,clickable:m,onStepClick:p,dashedIncomplete:f,totalSteps:g,variant:b}=VB(),v=m&&!i,x=OB[c]||OB.medium,y=HB[d]||"Default",z="horizontal"===s,w=n===h,S=n<h,k=n>h,C=n===g-1,B=a||n+1,T=t||e,M=k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",A=w?"var(--Buttons-"+y+"-Button)":"var(--Background)",L=w?"var(--Buttons-"+y+"-Text)":k?"var(--Quiet)":"var(--Buttons-"+y+"-Outline-Text)",I="var(--Buttons-"+y+"-Hover)",N="var(--Buttons-"+y+"-Pressed)",W="noCount"===b,D=le(u,{component:v?"button":"div",onClick:v?()=>p?.(n):void 0,onKeyDown:v?e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),p?.(n))}:void 0,tabIndex:v?0:void 0,role:v?"button":void 0,"aria-label":v?"Go to step "+(n+1):void 0,"aria-current":w?"step":void 0,"aria-disabled":i||void 0,className:"step-indicator step-indicator-"+c+(w?" step-indicator-active":"")+(S?" 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:(S?"2px":"var(--Button-Border-Width, 1px)")+" solid "+M,backgroundColor:A,color:L,fontSize:x.fontSize,fontFamily:"var(--Font-Family-Button, var(--Font-Family-Body, inherit))",fontWeight:"var(--Button-Font-Weight, 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:i?"not-allowed":v?"pointer":"default",outline:"none",padding:0,...i&&{opacity:"var(--Disabled, 0.38)"},..."small"===c&&{"&::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=le(u,{sx:{display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0,width:z&&W?x.dot:x.indicator+"px",height:z?x.indicator+"px":W?x.dot:x.indicator+"px"},children:D}),F=n<h,P=C?null:le(u,{className:"step-connector"+(F?" step-connector-completed":" step-connector-incomplete")+(f&&!F?" 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)`}:{width:x.connectorThickness,minHeight:"24px",marginLeft:`calc(${x.indicator/2}px - ${x.connectorThickness} / 2)`},backgroundColor:F?"var(--Buttons-"+y+"-Border)":"var(--Quiet)",...f&&!F&&{backgroundColor:"transparent",backgroundImage:z?"repeating-linear-gradient(90deg, var(--Quiet) 0px, var(--Quiet) 2px, transparent 2px, transparent 4px)":"repeating-linear-gradient(180deg, var(--Quiet) 0px, var(--Quiet) 4px, transparent 4px, transparent 8px)",backgroundSize:z?"4px 100%":"100% 8px"},transition:"background-color 0.15s ease"}}),H=T?le(Ri,{style:{fontWeight:w?600:400,color:w?"var(--Text)":k?"var(--Quiet)":"var(--Buttons-"+y+"-Border)",textAlign:z?"center":"left",whiteSpace:"nowrap",flexShrink:0},children:T}):null;return ce(u,z?{component:"li",className:"step step-"+c+" step-horizontal"+(w?" step-active":"")+(S?" step-completed":"")+(k?" step-incomplete":"")+" "+r,sx:{display:"flex",alignItems:"flex-start",flex:C?"none":1,...o},...l,children:[ce(u,{sx:{display:"flex",flexDirection:"column",alignItems:"center",flexShrink:0,width:W?x.dot:x.indicator+"px"},children:[R,H&&le(u,{sx:{mt:"var(--Sizing-Half)",width:"100%",display:"flex",justifyContent:"center"},children:H})]}),P]}:{component:"li",className:"step step-"+c+" step-vertical"+(w?" step-active":"")+(S?" step-completed":"")+(k?" step-incomplete":"")+" "+r,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",...o},...l,children:[ce(u,{sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-1)"},children:[R,H]}),P]})}const qB=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",GB=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],UB=["Account","Details","Review","Confirm","Complete","Done"];function YB({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function XB({color:e,selected:a,onClick:t}){const i=qB(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function JB(){const[e,t]=a("default"),[i,n]=a("medium"),[r,o]=a("horizontal"),[l,s]=a("count"),[c,d]=a(4),[h,p]=a(1),[f,g]=a(!1),[b,v]=a(!1),[x,z]=a("Default"),[w,S]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Stepper",component:"Stepper"}),le(u,{sx:{mt:1},children:le(ig,{theme:x,onThemeChange:z,surface:w,onSurfaceChange:S})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Stepper",theme:x,surface:w})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:x,surface:w,children:le(u,{sx:{width:"100%",maxWidth:"vertical"===r?300:"100%"},children:le(QB,{color:e,size:i,orientation:r,variant:l,activeStep:h,clickable:f,onStepClick:f?p:void 0,dashedIncomplete:b,children:UB.slice(0,c).map(e=>le(jB,{label:e},e))})})}),le(nv,{code:(()=>{const a=[];return"default"!==e&&a.push('color="'+e+'"'),"medium"!==i&&a.push('size="'+i+'"'),"horizontal"!==r&&a.push('orientation="vertical"'),"count"!==l&&a.push('variant="noCount"'),a.push("activeStep={"+h+"}"),f&&a.push("clickable onStepClick={setActiveStep}"),b&&a.push("dashedIncomplete"),"<Stepper "+a.join(" ")+">\n"+UB.slice(0,c).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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{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(YB,{label:String(e),selected:c===e,onClick:()=>{d(e),h>=e&&p(e-1)}},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ACTIVE STEP"}),le(m,{direction:"row",spacing:1,children:UB.slice(0,c).map((e,a)=>le(YB,{label:String(a+1),selected:h===a,onClick:()=>p(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:GB.map(a=>ce(u,{children:[le(Li,{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(XB,{color:a,selected:e===a,onClick:t},a))})]},a.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SIZE"}),le(m,{direction:"row",spacing:1,children:["small","medium","large"].map(e=>le(YB,{label:qB(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),le(m,{direction:"row",spacing:1,children:["count","noCount"].map(e=>le(YB,{label:e,selected:l===e,onClick:()=>s(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(YB,{label:qB(e),selected:r===e,onClick:()=>o(e)},e))})]}),ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Clickable"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Steps are interactive buttons"})]}),le(yv,{variant:"default-outline",checked:f,onChange:e=>g(e.target.checked),size:"small","aria-label":"Clickable"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Dashed Incomplete"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Dashed connector for future steps"})]}),le(yv,{variant:"default-outline",checked:b,onChange:e=>v(e.target.checked),size:"small","aria-label":"Dashed incomplete"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Stepper"})})]})]})}const ZB={small:"var(--Small-Button-Height, 24px)",medium:"var(--Button-Height, 32px)",large:"var(--Large-Button-Height, 56px)"},$B={position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"var(--Checkbox-Icon, 14px)",height:"var(--Checkbox-Icon, 14px)",borderRadius:"50%",backgroundColor:"var(--Background)",display:"flex",alignItems:"center",justifyContent:"center",pointerEvents:"none"},KB={content:'""',position:"absolute",inset:"calc(-3px - var(--Button-Border-Width, 1px))",borderRadius:"var(--Button-Focus-Radius, 5px)",border:"2px solid var(--Focus-Visible)",pointerEvents:"none"};function _B({color:e,label:a,size:t="medium",fit:i="fixed",selected:n=!1,disabled:r=!1,radio:o=!1,onClick:l,className:s="",sx:c={},"aria-label":d,...h}){const m=Boolean(l)&&!r,p=Boolean(l),f=ZB[t]||ZB.medium,g=d||a||e,b=le(u,{className:"swatch-chip",sx:{position:"relative",width:"fill"===i?"100%":f,height:f,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",...m&&{cursor:"pointer","&:hover":{backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05))"},"&:active":{backgroundImage:"linear-gradient(rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.08))"}}},children:n&&!o&&p?le(u,{className:"swatch-check",sx:$B,children:le(ue,{"aria-hidden":"true",sx:{width:"80%",height:"80%",color:"var(--Icon, var(--Text))"}})}):null});return ce(u,{component:m?"button":"div",type:m?"button":void 0,onClick:m?l:void 0,disabled:!(!m||!r)||void 0,"aria-pressed":m?n:void 0,"aria-label":g,className:`swatch ${n?"swatch-selected":""} ${s}`.trim(),sx:{position:"relative",display:"inline-flex",flexDirection:"column",alignItems:"center",gap:"var(--Sizing-Half, 4px)",width:"fill"===i?"100%":"var(--Sizing-7, 56px)",padding:0,background:"none",border:"none",font:"inherit",color:"var(--Text)",...r&&{opacity:.38,pointerEvents:"none"},"&:focus":{outline:"none"},...m&&{"&:focus-visible":{outline:"none","& .swatch-chip::before":KB}},...c},...h,children:[b,o&&p?le(Hx,{checked:n,disabled:r,tabIndex:-1,"aria-hidden":"true",onChange:()=>{},sx:{pointerEvents:"none"}}):null,a?le(u,{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 eT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},aT={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 tT({children:e,columns:a,rows:t,footerRows:i,variant:n="default",color:r="primary",loading:o=!1,skeletonRows:l=3,empty:s,error:c,size:d="medium",stripe:h="none",stickyHeader:m=!1,stickyFooter:p=!1,className:f="",sx:g={},...b}){const v=aT[d]||aT.medium,x="solid"===n,y="outlined"===n,z="light"===n,w=(e=>e.charAt(0).toUpperCase()+e.slice(1))(r),S=y?"1px solid var(--Buttons-"+w+"-Border)":"none",k={};x&&eT[r]&&(k["data-theme"]=eT[r]);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-"+w+"-Button)",e.color="var(--Buttons-"+w+"-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-"+w+"-Button)",e.color="var(--Buttons-"+w+"-Text)"):e.backgroundColor=x?"var(--Hover)":"var(--Background)",p&&(e.position="sticky",e.bottom=0,e.zIndex=2),e},T=e=>"none"===h?"Surface":"odd"===h?e%2==0?"Surface":"Surface-Dim":"even"===h&&e%2==0?"Surface-Dim":"Surface",M=()=>({padding:v.py+" "+v.px,fontSize:v.fontSize,color:"var(--Text)",borderBottom:"1px solid var(--Border)",textAlign:"left"}),A=c?"error":o?"loading":t&&0===t.length&&s?"empty":null,L=Boolean(i&&i.length>0)&&"error"!==A,I=e=>le(u,{component:"tbody",children:le(u,{component:"tr",children:le(u,{component:"td",colSpan:a?a.length:1,sx:{padding:0,border:"none"},children:e})})});return le(u,{className:"table-wrapper table-"+n+(x||z||y?" table-"+r:"")+" "+f,...k,"aria-busy":"loading"===A?"true":void 0,sx:{width:"100%",overflow:"auto",border:S,borderRadius:y||z?"var(--Style-Border-Radius)":0,...g},children:le(u,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed",fontFamily:"inherit","& thead th":C(),"& tbody td":M(),"& 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)?ce(se,{children:[le(u,{component:"thead",children:le(u,{component:"tr",children:a.map((e,a)=>le(u,{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(Lt,{label:"Loading",children:le(u,{component:"table",sx:{width:"100%",borderCollapse:"collapse",tableLayout:"fixed"},children:le(u,{component:"tbody",children:Array.from({length:l}).map((e,t)=>le(u,{component:"tr","data-surface":T(t),children:a.map((e,a)=>le(u,{component:"td",sx:M(),children:"        "},"skc-"+t+"-"+a))},"sk-"+t))})})})),"error"===A&&I(c),"empty"===A&&I(s),!A&&t&&le(u,{component:"tbody",children:t.map((e,t)=>le(u,{component:"tr","data-surface":T(t),sx:{backgroundColor:"var(--"+T(t)+")"},children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,i)=>le(u,{component:"td",sx:{...M(),...a[i]&&a[i].align?{textAlign:a[i].align}:{}},children:e},"c-"+t+"-"+i))},"r-"+t))}),L&&le(u,{component:"tfoot",children:i.map((e,t)=>le(u,{component:"tr",children:(Array.isArray(e)?e:a.map(a=>e[a.field||a.key])).map((e,i)=>le(u,{component:"td",sx:{...B(),...a[i]&&a[i].align?{textAlign:a[i].align}:{},..."loading"===A?At():{}},children:e},"fc-"+t+"-"+i))},"f-"+t))})]}):null:e})})}function iT({label:e,value:t="",onChange:i,placeholder:n,error:r=!1,errorMessage:o="",disabled:l=!1,helperText:s="",variant:c="outlined",size:d="medium",type:h="text",required:m=!1,fullWidth:p=!0,startAdornment:f,endAdornment:g,sx:b={},"aria-label":v,"aria-labelledby":x,onFocus:y,onBlur:w,...S}){const[k,T]=a(!1),M=r?"var(--Buttons-Error-Border)":k?"var(--Buttons-Primary-Border)":"var(--Border)",A=r||k?"var(--Text)":"var(--Text-Quiet)",L="var(--Text)";return ce(u,{sx:{width:p?"100%":"auto"},children:[le(z,{label:e,value:t,onChange:i,placeholder:n,disabled:l,variant:c,size:d,type:h,required:m,onFocus:e=>{T(!0),y?.(e)},onBlur:e=>{T(!1),w?.(e)},error:r,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:M,transition:"border-color 0.2s ease-in-out"},"&:hover fieldset":{borderColor:r?"var(--Buttons-Error-Border)":"var(--Buttons-Primary-Border)"},"&.Mui-focused fieldset":{borderColor:r?"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:r?"var(--Buttons-Error-Border)":"var(--Text-Secondary)",marginTop:"4px",fontSize:"12px"},...b},...S}),r&&o&&le(B,{error:!0,sx:{color:"var(--Buttons-Error-Border)",marginTop:"4px",fontSize:"12px",fontWeight:500},children:o})]})}function nT({label:e="Email",...a}){return le(iT,{label:e,type:"email",placeholder:"user@example.com",...a})}function rT({label:e="Password",...a}){return le(iT,{label:e,type:"password",...a})}function oT({label:e="Search",placeholder:a="Type to search...",...t}){return le(iT,{label:e,type:"search",placeholder:a,...t})}function lT({label:e="Number",...a}){return le(iT,{label:e,type:"number",...a})}function sT({label:e="Phone",placeholder:a="(555) 123-4567",...t}){return le(iT,{label:e,type:"tel",placeholder:a,...t})}function cT({label:e="Website",placeholder:a="https://example.com",...t}){return le(iT,{label:e,type:"url",placeholder:a,...t})}function dT({error:e=!1,errorMessage:a="",rows:t=4,fullWidth:i=!0,...n}){return le(Wx,{multiline:!0,rows:t,fullWidth:i,...e&&{validation:"error",validationMessage:a},...n})}function hT({fields:e=[],spacing:a=2,sx:t={},...i}){return le(u,{sx:{display:"flex",flexDirection:"column",gap:`var(--Spacing-${a})`,width:"100%",...t},...i,children:e.map(e=>le(iT,{...e},e.id))})}const uT=Object.fromEntries(["Default","Primary","Secondary","Tertiary","Neutral"].map(e=>[e.toLowerCase(),{theme:e}])),mT={"primary-light":{theme:"Primary",surface:"Surface-Brightest"},white:{theme:"Neutral",surface:"Surface-Brightest"},black:{theme:"Neutral",surface:"Surface-Dimmest"}};function pT({items:e=[],value:t,defaultValue:i,onChange:r,type:o="floating",orientation:l="horizontal",color:s="default",surface:c,fab:d,className:h="",sx:m={},...p}){const[f,g]=a(i??null),b=void 0!==t,v=b?t:f,x=n(e=>{const a=v===e?null:e;b||g(a),r?.(a)},[b,v,r]),y=uT[s]||mT[s]||uT.default,z=y.theme,w=c||y.surface,S="vertical"===l,k="floating"===o,C=le(u,{role:"toolbar","aria-orientation":l,"aria-label":"Toolbar","data-theme":z,"data-surface":w||"Surface",className:"toolbar toolbar-"+o+" toolbar-"+l+" toolbar-"+s+" "+h,sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:"4px",width:"fit-content",backgroundColor:"var(--Background)",border:"1px solid var(--Border-Variant)",borderRadius:k?"56px":"var(--Style-Border-Radius)",padding:k?S?"16px 8px":"8px 16px":"8px",fontFamily:"inherit",flexShrink:0,...k&&{boxShadow:Qf},...m},...p,children:e.map((e,a)=>{const t=v===a;return le(nb,{iconOnly:!0,variant:t?"default":"ghost",size:"small",onClick:()=>x(a),"aria-label":e.label,"aria-checked":t,role:"radio",children:le(Ff,{size:"small",sx:{color:"inherit"},children:e.icon})},e.key||a)})});return d&&k?ce(u,{sx:{display:"inline-flex",flexDirection:S?"column":"row",alignItems:"center",gap:1},children:[C,le(ux,{color:d.color||s,size:d.size||"medium",onClick:d.onClick,"aria-label":d.label||"Action",children:d.icon})]}):C}const fT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",gT=[{icon:le(st,{}),label:"Bold"},{icon:le(ct,{}),label:"Italic"},{icon:le(dt,{}),label:"Underline"},{icon:le(ht,{}),label:"Align left"},{icon:le(ut,{}),label:"Align center"}];function bT({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function vT(){const[e,t]=a("floating"),[i,n]=a("default"),[r,o]=a("horizontal"),[l,s]=a(!1),[c,d]=a("Default"),[h,p]=a("Surface");return ce(u,{sx:{pb:8},children:[le(xA,{title:"Toolbar",component:"Toolbar"}),le(u,{sx:{mt:1},children:le(ig,{theme:c,onThemeChange:d,surface:h,onSurfaceChange:p})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"Toolbar",theme:c,surface:h})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{theme:c,surface:h,sx:{minHeight:200},children:le(pT,{items:gT,type:e,color:i,orientation:r,fab:l&&"floating"===e?{icon:le(Aa,{}),label:"Create",onClick:()=>{}}:void 0})}),le(nv,{code:(()=>{const a=["items={items}"];return"floating"!==e&&a.push('type="contextual"'),"default"!==i&&a.push('color="'+i+'"'),"horizontal"!==r&&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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"TYPE"}),le(m,{direction:"row",spacing:1,children:["floating","contextual"].map(a=>le(bT,{label:fT(a),selected:e===a,onClick:()=>t(a)},a))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{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(bT,{label:fT(e),selected:i===e,onClick:()=>n(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ORIENTATION"}),le(m,{direction:"row",spacing:1,children:["horizontal","vertical"].map(e=>le(bT,{label:fT(e),selected:r===e,onClick:()=>o(e)},e))})]}),"floating"===e&&ce(u,{sx:{mt:3,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"FAB Button"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Add FAB to the right of toolbar"})]}),le(yv,{variant:"default-outline",checked:l,onChange:e=>s(e.target.checked),size:"small","aria-label":"FAB button"})]})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:le(m,{spacing:3,children:ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})})})]}),le(Lb,{value:3,children:le(fA,{component:"Toolbar"})})]})]})}const xT=Xf,yT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},zT={primary:"Primary",secondary:"Secondary",tertiary:"Tertiary",neutral:"Neutral",info:"Info",success:"Success",warning:"Warning",error:"Error"},wT={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 ST({children:e,title:a,variant:t="solid",color:i="black-white",size:n="medium",placement:r="bottom",arrow:o=!0,open:l,enterDelay:s=100,leaveDelay:c=0,describeChild:d=!1,className:h="",sx:m={},...p}){const f=wT[n]||wT.medium,g="solid"===t,b="light"===t,v="outline"===t,y=xT(i),z=(e=>String(e).startsWith("left")||String(e).startsWith("right"))(r),w="var(--Buttons-"+y+"-Button)",S=w,k=void 0===l?{}:{open:l};return le(x,{title:a?le(u,{"data-theme":(g?yT[i]:b?zT[i]:null)||void 0,"data-surface":b?"Surface-Brightest":g?"Surface":void 0,className:"tooltip-content tooltip-"+t+" tooltip-"+i+" tooltip-"+n+" "+h,sx:{backgroundColor:w,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:r,arrow:o,enterDelay:s,leaveDelay:c,describeChild:d,...k,componentsProps:{tooltip:{sx:{backgroundColor:"transparent",padding:0,maxWidth:"none",boxShadow:"none"}},arrow:{sx:{color:S,width:z?f.arrowVisible:f.arrowW,height:z?f.arrowW:f.arrowVisible,"&::before":{border:v?"1px solid var(--Buttons-"+y+"-Border)":"none",backgroundColor:S,boxSizing:"border-box",width:"100%",height:"100%"}}}},...p,children:e})}const kT={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}},CT={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 BT({label:e,icon:a,level:t=0,toggle:i="none",onToggle:n,disabled:r=!1,size:o="small",className:l="",sx:s={},children:c,...d}){const h=6===t&&"none"!==i?"none":i,m="on"===h,p="none"!==h,f=p?kT[t]||{padLeft:0,togglePadLeft:0}:CT[t]||CT[0],g={paddingTop:"8px",paddingRight:"8px",paddingBottom:"8px",paddingLeft:(f.padLeft??8)+"px"};return ce(u,{className:"tree-branch tree-branch-"+o+" tree-branch-level-"+t+" tree-branch-toggle-"+h+(r?" tree-branch-disabled":"")+(l?" "+l:""),sx:{width:"100%",...s},...d,children:[ce(u,{component:"button",type:"button",role:"treeitem","aria-expanded":p?m:void 0,"aria-disabled":r||void 0,tabIndex:r?-1:0,onClick:e=>{r||p&&(e.stopPropagation(),n?.(m?"off":"on"))},disabled:r,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:r?"not-allowed":"pointer",opacity:r?"var(--Disabled, 0.38)":1,outline:"none",transition:"background-color 0.15s ease, color 0.15s ease","&:hover":r?{}:{backgroundColor:"var(--Hover)"},"&:active":r?{}:{backgroundColor:"var(--Pressed)"},"&:focus-visible":{outline:"3px solid var(--Focus-Visible)",outlineOffset:"-2px"}},children:[p&&le(u,{className:"tree-branch-toggle",sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",flexShrink:0,paddingLeft:(f.togglePadLeft??0)+"px"},children:le(u,{sx:{display:"inline-flex",alignItems:"center",justifyContent:"center",transition:"transform 0.2s ease",transform:m?"rotate(-90deg)":"rotate(0deg)"},children:le(Ff,{size:"small",children:le(Ea,{})})})}),ce(u,{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(u,{sx:{display:"inline-flex",alignItems:"center",flexShrink:0},children:le(Ff,{size:"small",children:a})}),null!=e&&le(yi,{style:{color:"inherit",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",display:"block",flex:1,minWidth:0},children:e})]})]}),m&&c&&le(u,{role:"group",sx:{display:"flex",flexDirection:"column"},children:c})]})}const TT=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",MT=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary","neutral"]},{label:"State",colors:["info","success","warning","error"]}],AT=e=>le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:e,flexShrink:0}}),LT=[{id:"1",label:"Documents",icon:le(_a,{}),badge:AT("var(--Warning-Text, orange)"),children:[{id:"1-1",label:"Company",icon:le(mt,{}),badge:AT("var(--Warning-Text, orange)"),children:[{id:"1-1-1",label:"Invoice",icon:le(ft,{})},{id:"1-1-2",label:"Meeting notes",icon:le(pt,{})},{id:"1-1-3",label:"Tasks list",icon:le(pt,{})},{id:"1-1-4",label:"Equipment",icon:le(ft,{})},{id:"1-1-5",label:"Video conference",icon:le(gt,{})}]},{id:"1-2",label:"Personal",icon:le(_a,{})},{id:"1-3",label:"Group photo",icon:le(nt,{})}]},{id:"2",label:"Bookmarked",icon:le($a,{}),children:[{id:"2-1",label:"Favourites",icon:le(pt,{})}]},{id:"3",label:"History",icon:le(_a,{})},{id:"4",label:"Trash",icon:le(Ae,{}),disabled:!0}],IT=JSON.stringify(jk,null,2);function NT({ratio:e,threshold:a}){if(!e)return le(Li,{style:{color:"var(--Text-Quiet)"},children:"--"});const t=parseFloat(e)>=a;return ce(u,{sx:{display:"inline-flex",alignItems:"center",gap:.5},children:[ce(u,{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(Li,{style:{color:t?"var(--Tags-Success-Text)":"var(--Tags-Error-Text)"},children:t?"Pass":"Fail"})]})}function WT({label:e,ratio:a,threshold:t,note:i}){return ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"flex-start",py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(u,{sx:{flex:1},children:[le(xi,{style:{color:"var(--Text)"},children:e}),i&&le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:i})]}),le(NT,{ratio:a,threshold:t})]})}function DT({label:e,selected:a,onClick:t}){return le(nb,{selected:a,variant:a?"default":"default-outline",size:"small",onClick:t,children:e})}function RT({color:e,selected:a,onClick:t}){const i=TT(e);return le(u,{component:"button",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(--Buttons-"+i+"-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(ue,{sx:{fontSize:16,color:"var(--Buttons-"+i+"-Text)",pointerEvents:"none"}})})}function FT({value:e,onChange:t}){const[i,n]=a(e),[r,o]=a(null);return ce(u,{children:[ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:1},children:[le(Oi,{style:{color:"var(--Text-Quiet)"},children:"TREE DATA (JSON)"}),le(nb,{variant:"ghost",size:"small",onClick:()=>{n(IT),o(null),t(jk)},children:"Reset"})]}),le(u,{component:"textarea",value:i,onChange:e=>{n(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:r?"#f87171":"#e5e7eb",border:"1px solid "+(r?"#f87171":"#333"),borderRadius:"6px",padding:"10px",resize:"vertical",outline:"none",boxSizing:"border-box",lineHeight:1.5,"&:focus":{borderColor:"var(--Focus-Visible)"}}}),r&&ce(Li,{style:{color:"#f87171",display:"block",marginTop:4},children:["JSON error: ",r]})]})}function PT(){const[e,r]=a("solid"),[o,l]=a("primary"),[s,c]=a("default"),[d,h]=a("slide"),[p,f]=a("single"),[g,b]=a(!1),[v,x]=a(!1),[z,w]=a(!1),[S,k]=a(jk),[C,B]=a("Default"),[T,M]=a("Surface"),[A,L]=a({}),I=i(null),N=TT(o),W=z?LT:S,D=n((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 ce(u,{sx:{pb:8},children:[le(xA,{title:"Tree View",component:"TreeView"}),le(u,{sx:{mt:1},children:le(ig,{theme:C,onThemeChange:B,surface:T,onSurfaceChange:M})}),ce(Tb,{defaultValue:0,variant:"standard",color:"primary",children:[ce(Mb,{children:[le(Ab,{children:"Summary"}),le(Ab,{children:"Playground"}),le(Ab,{children:"Accessibility"}),le(Ab,{children:"Change Log"})]}),le(Lb,{value:0,children:le(pA,{component:"TreeView",theme:C,surface:T})}),le(Lb,{value:1,children:ce(y,{container:!0,sx:{alignItems:"flex-start",flexWrap:"wrap"},children:[ce(y,{item:!0,sx:{width:{xs:"100%",md:"55%"},flexShrink:0,pr:{md:3}},children:[le(wv,{ref:I,theme:C,children:le(u,{sx:{width:"100%",maxWidth:360},children:le(Qk,{color:o,variant:e,density:s,animation:d,selectionMode:p,checkboxSelection:g,disableSelection:v,items:W,defaultExpandedItems:["1","1-1","2"]})})}),le(nv,{code:(()=>{const a=["<OmniTreeView"];return"default"!==o&&a.push(' color="'+o+'"'),"default"!==e&&a.push(' variant="'+e+'"'),"default"!==s&&a.push(' density="'+s+'"'),"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:ce(u,{sx:{p:3},children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"STYLE"}),ce(m,{direction:"row",spacing:1,children:[le(DT,{label:"Solid",selected:"solid"===e,onClick:()=>r("solid")}),le(DT,{label:"Light",selected:"light"===e,onClick:()=>r("light")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"COLOR"}),le(m,{spacing:1.5,children:MT.map(e=>ce(u,{children:[le(Li,{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(RT,{color:e,selected:o===e,onClick:l},e))})]},e.label))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"DENSITY"}),ce(m,{direction:"row",spacing:1,children:[le(DT,{label:"Compact",selected:"compact"===s,onClick:()=>c("compact")}),le(DT,{label:"Default",selected:"default"===s,onClick:()=>c("default")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"ANIMATION"}),le(m,{direction:"row",spacing:1,children:["none","slide","spring"].map(e=>le(DT,{label:TT(e),selected:d===e,onClick:()=>h(e)},e))})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"SELECTION MODE"}),ce(m,{direction:"row",spacing:1,children:[le(DT,{label:"Single",selected:"single"===p,onClick:()=>f("single")}),le(DT,{label:"Multi",selected:"multi"===p,onClick:()=>f("multi")})]})]}),ce(u,{sx:{mt:3},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:"OPTIONS"}),ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Show Icons"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Load sample data with icons and badges"})]}),le(yv,{checked:z,onChange:e=>w(e.target.checked),size:"small","aria-label":"Show icons"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Checkbox Selection"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Show checkboxes for each item"})]}),le(yv,{checked:g,onChange:e=>b(e.target.checked),size:"small","aria-label":"Checkbox selection"})]}),ce(u,{sx:{mt:2,display:"flex",justifyContent:"space-between",alignItems:"center"},children:[ce(u,{children:[le(Ri,{children:"Disable Selection"}),le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:"Items are not selectable"})]}),le(yv,{checked:v,onChange:e=>x(e.target.checked),size:"small","aria-label":"Disable selection"})]})]}),!z&&le(u,{sx:{mt:3},children:le(FT,{value:IT,onChange:k})})]})})]})}),ce(Lb,{value:2,children:[le(on,{}),le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Text Contrast (WCAG 1.4.3 — 4.5:1)"}),le(WT,{label:"Resting: var(--Text-Quiet) vs. background",ratio:tn(A.textQuiet,A.background),threshold:4.5,note:"Unselected items use Text-Quiet"}),le(WT,{label:"Hover: var(--Text) vs. background",ratio:tn(A.text,A.background),threshold:4.5,note:"Hovered items use var(--Text)"}),le(WT,{label:"Active (solid): var(--Text) vs. var(--Buttons-"+N+"-Button)",ratio:tn(A.text,A.activeBtn),threshold:4.5,note:"Selected item with solid fill"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{children:"Focus Indicator (WCAG 2.4.11 — 3:1)"}),le(WT,{label:"var(--Focus-Visible) vs. background",ratio:tn(A.focusVisible,A.background),threshold:3,note:"outline: 2px solid var(--Focus-Visible); outline-offset: -2px"})]}),ce(u,{sx:{p:3,backgroundColor:"var(--Background)",borderRadius:"var(--Style-Border-Radius)",border:"1px solid var(--Border)"},children:[le(di,{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})=>ce(u,{sx:{py:1.5,borderBottom:"1px solid var(--Border)"},children:[ce(xi,{children:[e,":"]}),le(Li,{style:{color:"var(--Text-Quiet)",fontFamily:"monospace"},children:a})]},e))})]})]})})]}),le(Lb,{value:3,children:le(fA,{component:"TreeView"})})]})]})}const HT=["outlined","light","ghost"];let OT=!1;function ET(e){OT||"production"===process.env.NODE_ENV||(OT=!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 VT({variant:e,color:a,exclusive:t,multiple:i,onChange:n,allowEmpty:r=!1,separated:o=!1,...l}){const s=void 0===e||HT.includes(e);s||ET(`variant="${e}" names a COLOR.`),void 0!==t&&ET("`exclusive` is `multiple` inverted.");return le(Ww,{__selectionOwner:!0,variant:s&&e||"outlined",color:void 0!==a?a:s?void 0:e,multiple:void 0!==i?i:void 0!==t&&!t,allowEmpty:r,separated:o,onChange:n?!s||void 0!==t?(e,a)=>n(a,e):n:void 0,...l})}const QT=e=>{const a=a=>le(VT,{color:e,...a});return a.displayName=`${e}ToggleButtonGroup`,a},jT=QT("default"),qT=QT("primary"),GT=QT("secondary"),UT=QT("tertiary"),YT=QT("neutral"),XT=QT("black-white"),JT=QT("info"),ZT=QT("success"),$T=QT("warning"),KT=QT("error"),_T={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 eM({children:e,selected:a=!1,onChange:t,value:i,sx:n={},...r}){return le(ee,{value:i,selected:a,onChange:t,sx:{border:"1px solid var(--Border)",..._T,...n},...r,children:e})}const aM=new Set;function tM({children:e,surface:a="Surface",variant:t,color:i="default",elevated:n=!1,component:r="div",className:o="",sx:l={},...s}){const c=(d="default"===i?"Default":i).charAt(0).toUpperCase()+d.slice(1);var d;const h="default"===i?"Default":c;!function(e){void 0!==e&&("production"===process.env.NODE_ENV||aM.has(e)||(aM.add(e),console.warn('[Sheet] variant="'+e+'" — Sheet has no variants. Set `surface` directly: light was surface="Surface-Brightest", dark was surface="Surface-Dimmest", solid was the default surface="Surface".')))}(t);return le(u,{component:r,className:"sheet sheet-"+i+(n?" sheet-elevated":"")+(o?" "+o:""),sx:{border:"1px solid var(--Border-Variant)",borderRadius:"var(--Style-Border-Radius)",boxShadow:n?jf:Qf,overflow:"hidden",transition:"box-shadow 0.2s ease","&:hover":{boxShadow:n?qf:jf},...l},...s,children:le(u,{"data-theme":h,"data-surface":a,sx:{backgroundColor:"var(--Background)",color:"var(--Text)",padding:"var(--Card-Padding)",borderRadius:"calc(var(--Style-Border-Radius) - 1px)",fontFamily:"inherit"},children:e})})}function iM(e,a){return e.filter(e=>!a.includes(e))}function nM(e,a){return e.filter(e=>a.includes(e))}function rM({theme:e,surface:t,leftItems:i,rightItems:r,defaultLeftItems:o=[],defaultRightItems:l=[],onChange:s,leftTitle:c="Available",rightTitle:d="Chosen",mode:h="basic",disabled:m=!1,className:p="",sx:f={},...g}){const b=void 0!==i&&void 0!==r,[v,x]=a(o),[y,z]=a(l),[w,S]=a([]),k=b?i:v,C=b?r:y,B=nM(w,k),T=nM(w,C),M="enhanced"===h,A=n((e,a)=>{b||(x(e),z(a)),s?.({left:e,right:a})},[b,s]),L=e=>{m||S(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},I=(e,a,t)=>{const i=a.length>0&&a.every(e=>w.includes(e)),n=a.some(e=>w.includes(e))&&!i,r=M?t.length+"/"+a.length:a.length+" items";return le(u,{sx:{flex:1,minWidth:0},children:le(u,{sx:{borderRadius:"var(--Card-Radius)",boxShadow:"none"},children:ce(u,{"data-surface":"Container",sx:{backgroundColor:"var(--Background)",border:"1px solid var(--Border)",borderRadius:"var(--Card-Radius)",overflow:"hidden",display:"flex",flexDirection:"column",gap:0,opacity:m?"var(--Disabled, 0.38)":1},children:[ce(u,{sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",gap:1,boxSizing:"border-box",minHeight:"40px",padding:"12px 16px"},children:[M&&le(Uv,{size:"small",variant:"default-outline",checked:i,indeterminate:n,onChange:()=>(e=>{if(m)return;const a=e.every(e=>w.includes(e));S(a?a=>iM(a,e):a=>[...new Set([...a,...e])])})(a),disabled:m||0===a.length,"aria-label":i?"Deselect all":"Select all"}),le(xi,{style:{flex:1,fontWeight:700,color:"var(--Text)"},children:e}),le(Li,{style:{color:"var(--Quiet)"},children:r})]}),le(kx,{orientation:"horizontal",color:"default",size:"small"}),ce(u,{component:"ul",role:"list",sx:{m:0,listStyle:"none",padding:"12px 16px",display:"flex",flexDirection:"column",gap:"16px",overflowY:"auto",maxHeight:240},children:[a.map(e=>{const a=w.includes(e);return ce(u,{component:"li",role:"listitem",onClick:()=>L(e),sx:{display:"flex",alignItems:"center",gap:1,cursor:m?"not-allowed":"pointer"},children:[le(Uv,{size:"small",variant:"default-outline",checked:a,onChange:()=>L(e),disabled:m,"aria-label":"Select "+e,sx:{pointerEvents:"none"}}),le(xi,{style:{color:"var(--Text)",flex:1},children:e})]},e)}),0===a.length&&le(u,{component:"li",sx:{p:2,textAlign:"center"},children:le(Li,{style:{color:"var(--Quiet)"},children:"No items"})})]})]})})})};return ce(u,{className:"transfer-list transfer-list-"+h+(m?" transfer-list-disabled":"")+(p?" "+p:""),"data-theme":e||void 0,"data-surface":t||void 0,role:"group","aria-label":"Transfer list",sx:{display:"flex",flexDirection:"row",alignItems:"flex-start",justifyContent:"center",gap:"4px",fontFamily:"inherit",...f},...g,children:[I(c,k,B),ce(u,{sx:{display:"flex",flexDirection:"column",gap:"8px",padding:"8px",flexShrink:0,alignSelf:"center"},children:[M&&le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([],[...C,...k]),S([])},disabled:m||0===k.length,"aria-label":"Move all right",children:le(Ff,{size:"small",children:le(xt,{})})}),le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A(iM(k,B),[...C,...B]),S(iM(w,B))},disabled:m||0===B.length,"aria-label":"Move selected right",children:le(Ff,{size:"small",children:le(Ea,{})})}),le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([...k,...T],iM(C,T)),S(iM(w,T))},disabled:m||0===T.length,"aria-label":"Move selected left",children:le(Ff,{size:"small",children:le(Oa,{})})}),M&&le(nb,{iconOnly:!0,variant:"default-outline",size:"small",onClick:()=>{A([...k,...C],[]),S([])},disabled:m||0===C.length,"aria-label":"Move all left",children:le(Ff,{size:"small",children:le(yt,{})})})]}),I(d,C,T)]})}const oM=[{icon:le(Me,{}),label:"Home"},{icon:le(Ie,{}),label:"Search"},{icon:le(Te,{}),label:"Favorites",badge:3},{icon:le(We,{}),label:"Profile"},{icon:le(Le,{}),label:"Settings"}],lM=[{label:"Home"},{label:"Inbox"},{label:"Projects"},{label:"Settings"}],sM=[{label:"Dessert",field:"name",width:"50%"},{label:"Calories",field:"calories",align:"right"},{label:"Fat (g)",field:"fat",align:"right"}],cM=[{name:"Frozen yoghurt",calories:159,fat:6},{name:"Ice cream sandwich",calories:237,fat:9},{name:"Eclair",calories:262,fat:16}],dM=[{value:"light",label:"Light"},{value:"dark",label:"Dark"},{value:"system",label:"System"}],hM=[{icon:le(st,{}),label:"Bold"},{icon:le(ct,{}),label:"Italic"},{icon:le(dt,{}),label:"Underline"}],uM=[{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"}],mM=({w:e=320,h:a,pad:t=0,children:i})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden",padding:t?`0 ${t}px`:void 0,boxSizing:"border-box"},children:i}),pM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open modal"}),le(PC,{open:e,onClose:()=>t(!1),title:"Rename project",children:ce(mz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"Modals take the whole screen's attention, so they owe the reader a way out."}),le(nb,{onClick:()=>t(!1),children:"Done"})]})})]})},fM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open dialog"}),le(Ik,{open:e,onClose:()=>t(!1),title:"Discard changes?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:()=>t(!1),children:"Keep editing"}),le(nb,{variant:"error",onClick:()=>t(!1),children:"Discard"})]}),children:le(wi,{children:"This cannot be undone."})})]})},gM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Open drawer"}),le(MS,{open:e,onClose:()=>t(!1),children:ce(mz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(lC,{items:lM,clickable:!0}),le(nb,{onClick:()=>t(!1),children:"Close"})]})})]})},bM=()=>{const[e,t]=a(!1);return ce(se,{children:[le(nb,{onClick:()=>t(!0),children:"Show snackbar"}),le(MB,{open:e,onClose:()=>t(!1),color:"success",autoHideDuration:4e3,children:"Project saved."})]})},vM=()=>{const[e,t]=a(!1),n=i(null);return ce(se,{children:[le(nb,{ref:n,onClick:()=>t(e=>!e),children:"Open popover"}),le(OC,{open:e,onClose:()=>t(!1),anchorRef:n,width:260,children:le(mz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(wi,{children:"A panel anchored to the thing that opened it, rendered through a portal so no ancestor can clip it."})})})]})};function xM(){const[e,t]=a("left"),[i,n]=a("day");return ce(mz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"joined — one control, shared edges"}),ce(VT,{value:e,onChange:t,"aria-label":"Alignment",children:[le(nb,{value:"left",children:"Left"}),le(nb,{value:"center",children:"Center"}),le(nb,{value:"right",children:"Right"})]})]}),ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"separated — the same choice, gapped"}),ce(VT,{value:i,onChange:n,separated:!0,"aria-label":"View",children:[le(nb,{value:"day",children:"Day"}),le(nb,{value:"week",children:"Week"}),le(nb,{value:"month",children:"Month"})]})]})]})}function yM(){return ce(mz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"ButtonGroup — three things you can do"}),ce(Ww,{"aria-label":"Actions",children:[le(nb,{onClick:()=>{},children:"Save"}),le(nb,{onClick:()=>{},children:"Duplicate"}),le(nb,{onClick:()=>{},children:"Delete"})]})]}),ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"ToggleButtonGroup — one answer, and never none"}),le(xM,{})]})]})}function zM(){const[e,t]=a(!1),[i,n]=a(42);return le($C,{title:"Weather Report",subtitle:"The Mercury Lamps",avatarInitials:"ML",playing:e,onPlayPause:t,position:i,onSeek:n,duration:195,onPrevious:()=>n(0),onNext:()=>n(0)})}function wM(){const[e,t]=a(!0);return le(eM,{selected:e,onChange:()=>t(!e),"aria-label":"Bold",children:le(st,{})})}const SM={ToggleButton:()=>le(wM,{}),Player:()=>le(zM,{}),ButtonGroup:()=>le(yM,{}),ToggleButtonGroup:()=>le(xM,{}),AppBar:()=>le(mM,{w:"100%",children:le(FS,{navLinks:[{label:"Work"},{label:"Studio"},{label:"Contact"}]})}),Autocomplete:()=>le(mM,{children:le(XS,{label:"Theme",options:["Light","Dark","System","High contrast"],placeholder:"Type to search"})}),BottomNavigation:()=>le(mM,{w:360,children:le(ck,{items:oM.slice(0,4),defaultValue:0})}),CodeBlock:()=>le(mM,{w:"100%",children:le(nv,{code:"npm install @omni-design/components",language:"bash"})}),Dialog:()=>le(fM,{}),Drawer:()=>le(gM,{}),DropZone:()=>le(mM,{w:360,children:le($k,{label:"Drop a file here",sublabel:"PNG or SVG, up to 2 MB"})}),IconBadge:()=>le(aC,{color:"primary",children:le(ye,{})}),List:()=>le(mM,{children:le(lC,{items:lM,clickable:!0})}),Loader:()=>le(cC,{message:"Loading projects…"}),Menu:()=>ce(wC,{children:[le(SC,{children:"Actions"}),ce(kC,{children:[le(CC,{children:"Rename"}),le(CC,{children:"Duplicate"}),le(BC,{}),le(CC,{disabled:!0,children:"Delete"})]})]}),Modal:()=>le(pM,{}),Paper:()=>le(HC,{surface:"Container",children:ce(mz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-3)",minWidth:220},children:[le(si,{children:"Paper"}),le(wi,{children:"A surface at one container level, with the elevation that level implies."})]})}),Popover:()=>le(vM,{}),Sheet:()=>le(mM,{w:320,children:le(tM,{surface:"Surface-Bright",elevated:!0,sx:{padding:"var(--Sizing-3)"},children:ce(mz,{gap:"var(--Sizing-1)",children:[le(pi,{color:"standard",children:"Export settings"}),le(xi,{color:"quiet",children:"A panel that carries its own surface, for content that should read as sitting above the page rather than on it."})]})})}),TransferList:()=>le(rM,{leftTitle:"Available",rightTitle:"Chosen",defaultLeftItems:["Colors","Typography","Spacing"],defaultRightItems:["Elevation"]}),Rail:()=>le(mM,{w:88,h:320,children:le(qC,{items:oM,defaultValue:0})}),Ratio:()=>le(mM,{w:240,children:le(tB,{ratio:"16:9"})}),SearchField:()=>le(mM,{children:le(oS,{placeholder:"Search projects…"})}),Select:()=>le(mM,{children:le(eg,{label:"Appearance",options:dM,defaultValue:"system"})}),Sidebar:()=>le(mM,{w:280,h:320,children:le(CB,{variant:"permanent",open:!0,items:lM,width:280})}),Snackbar:()=>le(bM,{}),StateMessage:()=>le(mM,{w:360,children:le(PB,{type:"empty",title:"No projects yet",body:"Create one to get started.",action:le(nb,{size:"small",children:"New project"})})}),Stepper:()=>le(mM,{w:440,pad:48,children:ce(QB,{activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})}),Swatch:()=>le(_B,{color:"#70947b",label:"Primary"}),Table:()=>le(mM,{w:"100%",children:le(tT,{columns:sM,rows:cM})}),Tag:()=>le(Iy,{color:"primary",children:"Beta"}),TextField:()=>le(mM,{children:le(iT,{label:"Project name",placeholder:"Untitled"})}),Toolbar:()=>le(pT,{items:hM,defaultValue:0}),Tooltip:()=>le(ST,{title:"Rename this project",children:le(nb,{variant:"outline",children:"Hover me"})}),TreeView:()=>le(mM,{children:le(Qk,{items:uM,defaultExpandedItems:["src","components"]})})},kM="npm install @omni-design/components",CM={Typography:{textStyle:()=>le(mz,{gap:"var(--Sizing-1)",style:{alignItems:"flex-start"},children:[["h2","A heading"],["subtitle","A subtitle"],["body","Body copy"],["caption","A caption"]].map(([e,a])=>le(Kw,{label:e,emphasis:"body"===e,children:le(Kt,{textStyle:e,children:a})},e))}),color:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:["standard","quiet","primary","success","error"].map(e=>le(Kw,{label:e,emphasis:"standard"===e,children:le(wi,{color:e,children:"Body"})},e))}),noWrap:()=>le(mz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le(Kw,{label:String(e),emphasis:!e,children:le("div",{style:{width:180},children:le(wi,{noWrap:e,children:"A line long enough to need wrapping or an ellipsis."})})},String(e)))}),altMode:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:["default","colored","gradient"].map(e=>le(Kw,{label:e,emphasis:"default"===e,children:le(Kt,{textStyle:"alt-display-small",altMode:e,children:"Alt"})},e))}),width:()=>le(mz,{gap:"var(--Sizing-2)",children:["hug","fill"].map(e=>le(Kw,{label:e,emphasis:"hug"===e,children:le(Fz,{surface:"Container",style:{width:240},children:le(wi,{width:e,children:"Text"})})},e))}),gutterBottom:()=>le(mz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le(Kw,{label:String(e),emphasis:!e,children:ce("div",{children:[le(wi,{gutterBottom:e,children:"First line."}),le(wi,{children:"Second line."})]})},String(e)))})},ToggleButton:{selected:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"false",emphasis:!0,children:le(eM,{"aria-label":"Bold",children:le(st,{})})}),le(Kw,{label:"true",children:le(eM,{selected:!0,"aria-label":"Bold",children:le(st,{})})})]})},CircularProgress:{size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le($z,{size:e,value:68})}),showValue:()=>le(aS,{offLabel:"false",onLabel:"true",render:e=>le($z,{value:68,showValue:e})})},LinearProgress:{size:()=>le(mz,{gap:"var(--Sizing-2)",children:["small","medium","large"].map(e=>le(Kw,{label:e,emphasis:"medium"===e,children:le("div",{style:{width:280},children:le(jz,{size:e,value:68})})},e))})},Player:{size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le("div",{style:{width:420},children:le($C,{size:e,title:"Weather Report",subtitle:"The Mercury Lamps",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),"playing / defaultPlaying":()=>ce(mz,{gap:"var(--Sizing-2)",children:[le(Kw,{label:"paused",emphasis:!0,children:le("div",{style:{width:420},children:le($C,{title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),le(Kw,{label:"playing",children:le("div",{style:{width:420},children:le($C,{playing:!0,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})})]}),showTime:()=>le(aS,{offLabel:"true",onLabel:"false",render:e=>le("div",{style:{width:420},children:le($C,{showTime:!e,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})}),disabled:()=>le(aS,{render:e=>le("div",{style:{width:420},children:le($C,{disabled:e,title:"Weather Report",avatarInitials:"ML",defaultPosition:42,duration:195,onSeek:()=>{},onPlayPause:()=>{}})})})},Button:{selected:()=>le(aS,{offLabel:"unselected",onLabel:"selected",render:e=>le(nb,{variant:"outline",selected:e,children:"Bold"})}),avatar:()=>le(aS,{offLabel:"text button",onLabel:"avatar",render:e=>le(nb,e?{avatar:!0,"aria-label":"Jane Doe",children:le(Lg,{})}:{children:"Jane Doe"})}),letterNumber:()=>le(aS,{offLabel:"text button",onLabel:"letterNumber",render:e=>le(nb,e?{letterNumber:!0,"aria-label":"3 unread",children:"3"}:{children:"3 unread"})})},Chip:{variant:()=>le(_w,{values:Zw,defaultValue:"primary",render:e=>le(fb,{variant:e,label:"Label"})}),selected:()=>le(aS,{render:e=>le(fb,{label:"Design",selected:e,clickable:!0}),offLabel:"unselected",onLabel:"selected"}),clickable:()=>le(aS,{render:e=>le(fb,{label:"Design",clickable:e}),offLabel:"static",onLabel:"clickable"}),disabled:()=>le(aS,{render:e=>le(fb,{label:"Design",clickable:!0,disabled:e}),offLabel:"enabled",onLabel:"disabled"})},Badge:{variant:()=>le(_w,{values:Zw,defaultValue:"primary",render:e=>le(Og,{variant:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})})}),dot:()=>le(aS,{render:e=>le(Og,{dot:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})}),offLabel:"count",onLabel:"dot"}),showZero:()=>le(aS,{render:e=>le(Og,{showZero:e,badgeContent:0,children:le(Ff,{children:le(xe,{})})}),offLabel:"0 hidden",onLabel:"0 shown"}),invisible:()=>le(aS,{render:e=>le(Og,{invisible:e,badgeContent:4,children:le(Ff,{children:le(xe,{})})}),offLabel:"visible",onLabel:"invisible"}),overlap:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"rectangular",emphasis:!0,children:le(Og,{badgeContent:4,overlap:"rectangular",children:le(Lg,{initials:"JD"})})}),le(Kw,{label:"circular",children:le(Og,{badgeContent:4,overlap:"circular",children:le(Lg,{initials:"JD"})})})]})},Alert:{color:()=>le(eS,{values:["info","success","warning","error"],defaultValue:"info",render:e=>ce(pv,{color:e,children:[e," — something worth saying."]})}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>ce(pv,{color:"info",size:e,children:["Size ",e,"."]})})},Avatar:{defaultPhoto:()=>le(aS,{render:e=>le(Lg,{defaultPhoto:e}),offLabel:"no photo",onLabel:"default photo"}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(Lg,{size:e,initials:"JD"})}),clickable:()=>le(aS,{render:e=>le(Lg,{initials:"JD",clickable:e,"aria-label":e?"Jane Doe, open menu":void 0}),offLabel:"static",onLabel:"clickable"})},Icon:{color:()=>le(_w,{values:["default",...Zw,"quiet"],defaultValue:"default",render:e=>le(Ff,{color:e,children:le(Te,{})})}),size:()=>le(_w,{values:["xxs","xs","small","medium","large","xl","xxl"],defaultValue:"medium",render:e=>le(Ff,{size:e,color:"primary",children:le(Te,{})})}),twoTone:()=>le(aS,{render:e=>le(Ff,{color:"primary",twoTone:e,size:"large",children:le(Te,{})}),offLabel:"solid",onLabel:"twoTone"}),disabled:()=>le(aS,{render:e=>le(Ff,{color:"primary",disabled:e,children:le(Te,{})}),offLabel:"enabled",onLabel:"disabled"})},Swatch:{fit:()=>ce(mz,{gap:"var(--Sizing-3)",children:[le(Kw,{label:"fixed",emphasis:!0,width:300,children:le(uz,{gap:"var(--Sizing-1)",children:["#505b45","#8a9a7b","#c9d4bd"].map(e=>le(_B,{color:e},e))})}),le(Kw,{label:"fill",width:300,children:le(uz,{gap:"var(--Sizing-1)",style:{width:300},children:["#505b45","#8a9a7b","#c9d4bd"].map(e=>le("div",{style:{flex:1},children:le(_B,{color:e,fit:"fill"})},e))})})]}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(_B,{color:"#70947b",size:e})}),selected:()=>le(aS,{render:e=>le(_B,{color:"#70947b",label:"Primary",selected:e}),offLabel:"unselected",onLabel:"selected"}),disabled:()=>le(aS,{render:e=>le(_B,{color:"#70947b",label:"Primary",disabled:e}),offLabel:"enabled",onLabel:"disabled"}),radio:()=>le(aS,{render:e=>le(_B,{color:"#70947b",label:"Primary",radio:e,selected:!0}),offLabel:"chip carries it",onLabel:"radio carries it"})},Tag:{color:()=>le(_w,{values:["default",...Zw],defaultValue:"primary",render:e=>le(Iy,{color:e,children:e})}),width:()=>ce(mz,{gap:"var(--Sizing-2)",style:{width:200},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"hug"}),le(Iy,{color:"primary",children:"Beta"})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"fill"}),le(Iy,{color:"primary",width:"fill",children:"Beta"})]})]}),allCaps:()=>le(aS,{render:e=>le(Iy,{color:"primary",allCaps:e,children:"Beta"}),offLabel:"as written",onLabel:"allCaps"})},IconBadge:{color:()=>le(_w,{values:["default",...Zw],defaultValue:"primary",render:e=>le(aC,{color:e,children:le(xe,{})})}),size:()=>ce(mz,{gap:"var(--Sizing-1)",children:[le(aC,{color:"primary",children:le(xe,{})}),le(wi,{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(aS,{render:e=>le(mn,{href:"#",disabled:e,children:"Read the guide"}),offLabel:"enabled",onLabel:"disabled"})},Divider:{color:()=>le(eS,{values:["border","border-variant",...Zw],defaultValue:"border-variant",render:e=>le(kx,{color:e})}),orientation:()=>ce(uz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[le(Kw,{label:"horizontal",emphasis:!0,width:160,children:le("div",{style:{width:160},children:le(kx,{})})}),le(Kw,{label:"vertical",width:60,children:le("div",{style:{height:60,display:"flex"},children:le(kx,{orientation:"vertical",style:{alignSelf:"stretch"}})})})]}),size:()=>le(eS,{values:$w,defaultValue:"small",render:e=>le(kx,{size:e,color:"primary"})}),indicatorStyle:()=>le(eS,{values:["outline","solid"],defaultValue:"outline",render:e=>le(kx,{indicatorText:"OR",indicatorStyle:e,color:"primary"})}),textAlign:()=>le(eS,{values:["left","center","right"],defaultValue:"center",render:e=>le(kx,{indicatorText:"OR",textAlign:e})})},Loader:{color:()=>le(_w,{values:["default",...Zw],defaultValue:"primary",render:e=>le(cC,{color:e,size:"small",message:""})}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(cC,{size:e,message:""})})},StateMessage:{type:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:360},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"empty"}),le(PB,{type:"empty",title:"No projects yet",body:"Create one to get started."})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"error"}),le(PB,{type:"error",title:"Could not load",body:"Check your connection and try again."})]}),le(wi,{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(eS,{values:$w,defaultValue:"medium",render:e=>le(PB,{type:"empty",size:e,title:"No projects yet",body:"Create one to get started."})})},Fab:{variant:()=>le(_w,{values:["solid","outline","ghost"],defaultValue:"solid",render:e=>le(ux,{variant:e,icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, "+e})})},Rating:{color:()=>le(_w,{values:["default",...Zw],defaultValue:"default",render:e=>le(dw,{color:e,defaultValue:3,readOnly:!0})}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(dw,{size:e,defaultValue:3,readOnly:!0})}),readOnly:()=>le(aS,{render:e=>le(dw,{defaultValue:3,readOnly:e}),offLabel:"interactive",onLabel:"readOnly"})},CodeBlock:{showCopy:()=>le(eS,{values:[!0,!1],defaultValue:!0,render:e=>le(nv,{code:kM,language:"bash",showCopy:e})}),showHeader:()=>le(eS,{values:[!0,!1],defaultValue:!0,render:e=>le(nv,{code:kM,language:"bash",showHeader:e})}),wrap:()=>le(eS,{values:[!1,!0],defaultValue:!1,render:e=>le(nv,{language:"bash",wrap:e,code:"npx @omni-design/cli generate --theme primary --surface Surface-Bright --out ./tokens"})})}},BM=220,TM=(e,a=BM)=>le("div",{style:{width:a},children:e}),MM=["default",...Zw,"black-white"],AM=["default",...Zw],LM={Checkbox:{variant:()=>le(_w,{values:MM,defaultValue:"primary",render:e=>le(Uv,{variant:e,defaultChecked:!0})}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(Uv,{size:e,defaultChecked:!0})}),"checked / defaultChecked":()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"unchecked",emphasis:!0,children:le(Uv,{label:"Unchecked"})}),le(Kw,{label:"checked",children:le(Uv,{defaultChecked:!0,label:"Checked"})})]}),indeterminate:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"false",emphasis:!0,children:le(Uv,{defaultChecked:!0,label:"All"})}),le(Kw,{label:"indeterminate",children:le(Uv,{indeterminate:!0,label:"Some"})})]}),disabled:()=>le(aS,{render:e=>le(Uv,{defaultChecked:!0,disabled:e,label:"Email me"}),offLabel:"enabled",onLabel:"disabled"})},Radio:{color:()=>le(_w,{values:MM,defaultValue:"primary",render:e=>le(Hx,{color:e,checked:!0,name:"c-"+e})}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(Hx,{size:e,checked:!0,name:"s-"+e})}),labelPlacement:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["end","start","top","bottom"].map(e=>le(Kw,{label:e,emphasis:"end"===e,children:le(Hx,{checked:!0,labelPlacement:e,label:"Option",name:"p-"+e})},e))}),checked:()=>ce(Ox,{defaultValue:"b",name:"demo",children:[le(Hx,{value:"a",label:"Light"}),le(Hx,{value:"b",label:"Dark"}),le(Hx,{value:"c",label:"System"})]}),disabled:()=>le(aS,{render:e=>le(Hx,{checked:!0,disabled:e,label:"Dark",name:"d-"+e}),offLabel:"enabled",onLabel:"disabled"})},NumberField:{variant:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"outlined",emphasis:!0,children:le(rz,{label:"Quantity",defaultValue:2,min:1,max:10})}),le(Kw,{label:"spinner",children:le(rz,{variant:"spinner",label:"Quantity",defaultValue:2,min:1,max:10})})]}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(rz,{size:e,label:"Quantity",defaultValue:2,min:1,max:10})}),labelPosition:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"top",emphasis:!0,children:le(rz,{label:"Quantity",defaultValue:2})}),le(Kw,{label:"floating",children:le(rz,{labelPosition:"floating",label:"Quantity",defaultValue:2})})]}),fullWidth:()=>le(aS,{render:e=>le("div",{style:{width:320},children:le(rz,{fullWidth:e,label:"Quantity",defaultValue:2})})}),disabled:()=>le(aS,{render:e=>le(rz,{disabled:e,label:"Quantity",defaultValue:2,min:1,max:10})})},RadioGroup:{orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"vertical",emphasis:!0,children:le(Ox,{label:"Delivery",name:"o-v",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"},{value:"pick",label:"Collect in store"}]})}),le(Kw,{label:"horizontal",children:le(Ox,{label:"Delivery",name:"o-h",orientation:"horizontal",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"}]})})]}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(Ox,{size:e,name:"s-"+e,defaultValue:"a",options:[{value:"a",label:"One"},{value:"b",label:"Two"}]})}),labelPlacement:()=>le(_w,{values:["end","start","top","bottom"],defaultValue:"end",render:e=>le(Ox,{labelPlacement:e,name:"lp-"+e,defaultValue:"a",orientation:"top"===e||"bottom"===e?"horizontal":"vertical",options:[{value:"a",label:"One"},{value:"b",label:"Two"}]})}),disabled:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"the whole group",emphasis:!0,children:le(Ox,{label:"Delivery",name:"d-all",defaultValue:"std",disabled:!0,options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"}]})}),le(Kw,{label:"one option",children:le(Ox,{label:"Delivery",name:"d-one",defaultValue:"std",options:[{value:"std",label:"Standard"},{value:"exp",label:"Express"},{value:"pick",label:"Collect in store",disabled:!0}]})})]})},SwitchInput:{variant:()=>le(_w,{values:AM,defaultValue:"default",render:e=>le(zv,{variant:e,defaultChecked:!0})}),size:()=>le(_w,{values:$w,defaultValue:"medium",render:e=>le(zv,{size:e,defaultChecked:!0})}),"checked / defaultChecked":()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"off",emphasis:!0,children:le(zv,{label:"Notifications"})}),le(Kw,{label:"on",children:le(zv,{defaultChecked:!0,label:"Notifications"})})]}),icon:()=>ce(mz,{gap:"var(--Sizing-2)",children:[le(_w,{values:["default","primary","secondary","tertiary"],defaultValue:"default",render:e=>le(zv,{variant:e,defaultChecked:!0,iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"off",children:le(zv,{label:"Sync",iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),le(Kw,{label:"on",emphasis:!0,children:le(zv,{defaultChecked:!0,label:"Sync",iconOn:le(ue,{fontSize:"inherit"}),iconOff:le(Ua,{fontSize:"inherit"})})}),le(Kw,{label:"same glyph both ways",children:le(zv,{defaultChecked:!0,label:"Sync",icon:le(ue,{fontSize:"inherit"})})})]})]}),labelPlacement:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"end",emphasis:!0,children:le(zv,{defaultChecked:!0,label:"Auto-save"})}),le(Kw,{label:"start",children:le(zv,{defaultChecked:!0,labelPlacement:"start",label:"Auto-save"})})]}),disabled:()=>le(aS,{render:e=>le(zv,{defaultChecked:!0,disabled:e,label:"Auto-save"}),offLabel:"enabled",onLabel:"disabled"})},Input:{variant:()=>le(eS,{values:Zw.map(e=>e+"-outline"),defaultValue:"primary-outline",render:e=>TM(le(Wx,{variant:e,label:"Name",placeholder:"Value"}))}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>TM(le(Wx,{size:e,label:"Name",placeholder:"Value"}))}),labelPosition:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"standard",emphasis:!0,width:BM,children:TM(le(Wx,{label:"Project name",placeholder:"Untitled"}))}),le(Kw,{label:"floating",width:BM,children:TM(le(Wx,{labelPosition:"floating",label:"Project name"}))})]}),validation:()=>le(eS,{values:["none","error"],defaultValue:"none",render:e=>TM(le(Wx,{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(aS,{width:BM,offLabel:"enabled",onLabel:"disabled",render:e=>TM(le(Wx,{disabled:e,label:"Project name",defaultValue:"Untitled"}))})},TextField:{error:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false",emphasis:!0,width:BM,children:TM(le(iT,{label:"Email",value:"jane@example.com"}))}),le(Kw,{label:"true",width:BM,children:TM(le(iT,{label:"Email",value:"not-an-email",error:!0,errorMessage:"Enter a valid email address."}))})]}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>TM(le(iT,{size:e,label:"Name",placeholder:"Value"}))})},SearchField:{color:()=>le(eS,{values:AM,defaultValue:"default",render:e=>TM(le(oS,{color:e,defaultValue:"dinosaur"}))}),showClearButton:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"true",emphasis:!0,width:BM,children:TM(le(oS,{defaultValue:"dinosaur"}))}),le(Kw,{label:"false",width:BM,children:TM(le(oS,{defaultValue:"dinosaur",showClearButton:!1}))})]}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>TM(le(oS,{size:e,placeholder:"Search — "+e}))})},Select:{labelPosition:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"top",emphasis:!0,width:BM,children:TM(le(eg,{label:"Appearance",options:dM,defaultValue:"system"}))}),le(Kw,{label:"floating",width:BM,children:TM(le(eg,{labelPosition:"floating",label:"Appearance",options:dM,defaultValue:"system"}))})]}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>TM(le(eg,{size:e,label:"Option",options:dM,defaultValue:"system"}))}),mode:()=>le(eS,{values:["standard","multiselect","searchable"],defaultValue:"standard",render:e=>TM(le(eg,{mode:e,label:"Option",options:dM,defaultValue:"multiselect"===e?["system"]:"system"}))})},Autocomplete:{labelPosition:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"top",emphasis:!0,width:BM,children:TM(le(XS,{label:"Theme",options:["Light","Dark","System"]}))}),le(Kw,{label:"floating",width:BM,children:TM(le(XS,{labelPosition:"floating",label:"Theme",options:["Light","Dark","System"]}))})]}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>TM(le(XS,{size:e,label:"Option",options:["Light","Dark","System"]}))})},DropZone:{multiple:()=>ce(mz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one file"}),le($k,{label:"Drop a file here",sublabel:"PNG or SVG"})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — several"}),le($k,{multiple:!0,label:"Drop files here",sublabel:"PNG or SVG"})]})]}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>le($k,{size:e,label:"Drop a file — "+e})}),disabled:()=>ce(mz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le($k,{label:"Drop a file here"})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled"}),le($k,{disabled:!0,label:"Drop a file here"})]})]})},Avatar:{color:()=>le(_w,{values:["default","primary","secondary","tertiary","neutral"],defaultValue:"default",render:e=>le(Lg,{color:e,initials:"JD"})})}},IM=({w:e=320,h:a,pad:t=0,children:i})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden",padding:t?`0 ${t}px`:void 0,boxSizing:"border-box"},children:i}),NM=(e={})=>ce(uw,{...e,children:[le(mw,{href:"/",children:"Home"}),le(mw,{href:"/projects",children:"Projects"}),le(mw,{href:"/projects/omni",children:"Omni"}),le(mw,{children:"Tokens"})]}),WM=(e={})=>ce(Tb,{defaultValue:0,...e,children:[ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"})]}),le(Lb,{value:0,children:le(wi,{children:"The first panel."})}),le(Lb,{value:1,children:le(wi,{children:"The second panel."})}),le(Lb,{value:2,children:le(wi,{children:"The third panel."})})]}),DM={Tabs:{orientation:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"horizontal"}),le(IM,{w:320,children:WM()})]}),ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"vertical-left",width:260,children:le(IM,{w:260,children:WM({orientation:"vertical-left"})})}),le(Kw,{label:"vertical-right",width:260,children:le(IM,{w:260,children:WM({orientation:"vertical-right"})})})]})]}),baseline:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true"}),le(IM,{w:320,children:WM()})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false"}),le(IM,{w:320,children:WM({baseline:!1})})]})]}),variant:()=>le(mz,{gap:"var(--Sizing-3)",children:["standard","solid","light","dark"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard"===e?"standard":"quiet",children:e}),le(IM,{w:320,children:WM({variant:e})})]},e))}),size:()=>le(mz,{gap:"var(--Sizing-3)",children:$w.map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(IM,{w:320,children:WM({size:e})})]},e))}),scrollable:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — the strip wraps or clips"}),le(IM,{w:200,children:le(Tb,{defaultValue:0,children:ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"}),le(Ab,{value:3,children:"Settings"})]})})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the strip scrolls"}),le(IM,{w:200,children:le(Tb,{defaultValue:0,scrollable:!0,children:ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"}),le(Ab,{value:2,children:"History"}),le(Ab,{value:3,children:"Settings"})]})})})]})]})},Breadcrumbs:{size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>NM({size:e})}),condense:()=>ce(mz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:360},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),NM()]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the middle collapses behind an ellipsis"}),NM({condense:!0,maxItems:3})]})]}),backOnlyMobile:()=>ce(mz,{gap:"var(--Sizing-2)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"wide — the full trail, either way"}),le(IM,{w:360,children:NM({backOnlyMobile:!0})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"narrow — collapses to a single back link"}),le(IM,{w:180,children:NM({backOnlyMobile:!0})})]})]})},Pagination:{color:()=>le(mz,{gap:"var(--Sizing-3)",children:["default",...Zw,"black-white"].map(e=>le(Kw,{label:e,emphasis:"default"===e,width:360,children:le(vw,{count:6,defaultPage:3,color:e})},e))}),size:()=>le(eS,{values:$w,defaultValue:"medium",render:e=>le(vw,{count:8,defaultPage:3,size:e})}),"showFirstButton / showLastButton":()=>ce(mz,{gap:"var(--Sizing-2)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),le(vw,{count:20,defaultPage:9})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — first and last"}),le(vw,{count:20,defaultPage:9,showFirstButton:!0,showLastButton:!0})]})]})},Stepper:{variant:()=>ce(mz,{gap:"var(--Sizing-3)",children:[le(Kw,{label:"count",emphasis:!0,width:300,children:le(IM,{w:300,pad:24,children:ce(QB,{activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})}),le(Kw,{label:"noCount",width:300,children:le(IM,{w:300,pad:24,children:ce(QB,{variant:"noCount",activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})})]}),orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"horizontal",emphasis:!0,width:300,children:le(IM,{w:300,pad:24,children:ce(QB,{activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})}),le(Kw,{label:"vertical",width:160,children:ce(QB,{orientation:"vertical",activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]}),size:()=>le(mz,{gap:"var(--Sizing-3)",children:$w.map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(IM,{w:320,pad:24,children:ce(QB,{size:e,activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]},e))}),color:()=>ce(mz,{gap:"var(--Sizing-3)",children:[le(Kw,{label:"default",emphasis:!0,width:320,children:le(IM,{w:320,pad:24,children:ce(QB,{activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})}),Zw.map(e=>le(Kw,{label:e,width:320,children:le(IM,{w:320,pad:24,children:ce(QB,{color:e,activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})},e))]}),clickable:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — display only"}),le(IM,{w:320,pad:24,children:ce(QB,{activeStep:2,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — completed steps go back"}),le(IM,{w:320,pad:24,children:ce(QB,{activeStep:2,clickable:!0,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]})]}),dashedIncomplete:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one solid connector"}),le(IM,{w:320,pad:24,children:ce(QB,{activeStep:1,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — remaining steps dashed"}),le(IM,{w:320,pad:24,children:ce(QB,{activeStep:1,dashedIncomplete:!0,children:[le(jB,{label:"Colors"}),le(jB,{label:"Type"}),le(jB,{label:"Export"})]})})]})]})},List:{orientation:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"vertical"}),le(IM,{w:240,children:le(lC,{items:lM})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"horizontal"}),le(IM,{w:360,children:le(lC,{items:lM,orientation:"horizontal"})})]})]}),dividers:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false",emphasis:!0,width:200,children:le(IM,{w:200,children:le(lC,{items:lM})})}),le(Kw,{label:"true",width:200,children:le(IM,{w:200,children:le(lC,{items:lM,dividers:!0})})})]}),clickable:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false — static",emphasis:!0,width:200,children:le(IM,{w:200,children:le(lC,{items:lM})})}),le(Kw,{label:"true — rows are buttons",width:200,children:le(IM,{w:200,children:le(lC,{items:lM,clickable:!0})})})]}),selectionMode:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Kw,{label:e,emphasis:"none"===e,width:190,children:le(IM,{w:190,children:le(lC,{items:lM,selectionMode:e,selectedIndices:"none"===e?[]:[1]})})},e))}),loading:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false",emphasis:!0,width:200,children:le(IM,{w:200,children:le(lC,{items:lM})})}),le(Kw,{label:"true",width:200,children:le(IM,{w:200,children:le(lC,{loading:!0,skeletonRows:4})})})]})},TreeView:{selectionMode:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["none","single","multiple"].map(e=>le(Kw,{label:e,emphasis:"none"===e,width:190,children:le(IM,{w:190,children:le(Qk,{items:uM,selectionMode:e,defaultExpandedItems:["src"]})})},e))})},AppBar:{mode:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"desktop"}),le(IM,{w:"100%",children:le(FS,{navLinks:[{label:"Work"},{label:"Studio"}]})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"mobile"}),le(IM,{w:360,children:le(FS,{mode:"mobile",navLinks:[{label:"Work"},{label:"Studio"}]})})]})]}),brandType:()=>le(mz,{gap:"var(--Sizing-3)",children:["name","logo","both"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"name"===e?"standard":"quiet",children:e}),le(IM,{w:"100%",children:le(FS,{brandType:e,navLinks:[{label:"Work"}]})})]},e))}),menuType:()=>le(mz,{gap:"var(--Sizing-3)",children:["hamburger","none"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"hamburger"===e?"standard":"quiet",children:e}),le(IM,{w:360,children:le(FS,{mode:"mobile",menuType:e,navLinks:[{label:"Work"}]})})]},e))})},Rail:{variant:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["default","primary","secondary","tertiary"].map(e=>le(Kw,{label:e,emphasis:"default"===e,width:88,children:le(IM,{w:88,h:260,children:le(qC,{items:oM.slice(0,4),variant:e,defaultValue:0})})},e))}),expandable:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false",emphasis:!0,width:88,children:le(IM,{w:88,h:260,children:le(qC,{items:oM.slice(0,4),defaultValue:0})})}),le(Kw,{label:"true — gains a toggle",width:88,children:le(IM,{w:88,h:260,children:le(qC,{items:oM.slice(0,4),expandable:!0,defaultValue:0})})})]}),expandedWidth:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"partial",emphasis:!0,width:240,children:le(IM,{w:240,h:260,children:le(qC,{items:oM.slice(0,4),expandable:!0,defaultExpanded:!0,defaultValue:0})})}),le(Kw,{label:"full",width:300,children:le(IM,{w:300,h:260,children:le(qC,{items:oM.slice(0,4),expandable:!0,defaultExpanded:!0,expandedWidth:"full",defaultValue:0})})})]}),labelStyle:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"contained",emphasis:!0,width:88,children:le(IM,{w:88,h:260,children:le(qC,{items:oM.slice(0,4),defaultValue:0})})}),le(Kw,{label:"outside",width:88,children:le(IM,{w:88,h:260,children:le(qC,{items:oM.slice(0,4),labelStyle:"outside",defaultValue:0})})})]})},BottomNavigation:{showLabels:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true"}),le(IM,{w:360,children:le(ck,{items:oM.slice(0,4),defaultValue:0})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false — icons only, so each needs a name"}),le(IM,{w:360,children:le(ck,{items:oM.slice(0,4),showLabels:!1,defaultValue:0})})]})]}),variant:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"fixed — edge to edge"}),le(IM,{w:360,children:le(ck,{items:oM.slice(0,4),defaultValue:0})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"floating — inset, with its own elevation"}),le(IM,{w:360,children:le(ck,{items:oM.slice(0,4),variant:"floating",defaultValue:0})})]})]})},Sidebar:{variant:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"permanent",width:240,children:le(IM,{w:240,h:260,children:le(CB,{variant:"permanent",open:!0,items:lM,width:240})})}),le(Kw,{label:"temporary — an overlay, shown open",emphasis:!0,width:240,children:le(IM,{w:240,h:260,children:le(CB,{variant:"permanent",open:!0,items:lM,width:240})})})]})},Toolbar:{type:()=>ce(mz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:[ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"standard",children:"floating — its own surface and elevation"}),le(pT,{items:hM,defaultValue:0})]}),ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(Li,{color:"quiet",children:"docked — sits flush in the layout"}),le(pT,{items:hM,type:"docked",defaultValue:0})]})]}),color:()=>le(mz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:["default","primary","secondary","tertiary","neutral"].map(e=>le(Kw,{label:e,emphasis:"default"===e,children:le(pT,{items:hM,color:e,defaultValue:0})},e))}),surface:()=>le(mz,{gap:"var(--Sizing-3)",style:{alignItems:"flex-start"},children:["Surface","Surface-Dim","Surface-Dimmest","Surface-Bright","Surface-Brightest"].map(e=>le(Kw,{label:e,emphasis:"Surface"===e,children:le(pT,{items:hM,surface:e,defaultValue:0})},e))}),orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"horizontal",emphasis:!0,children:le(pT,{items:hM,defaultValue:0})}),le(Kw,{label:"vertical",children:le(pT,{items:hM,orientation:"vertical",defaultValue:0})})]})},Menu:{size:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:$w.map(e=>le(Kw,{label:e,emphasis:"medium"===e,children:ce(wC,{children:[le(SC,{children:e}),ce(kC,{size:e,children:[le(CC,{children:"Rename"}),le(CC,{children:"Duplicate"})]})]})},e))})}},RM=({w:e=320,h:a,children:t})=>le("div",{style:{width:e,height:a,position:"relative",overflow:"hidden"},children:t}),FM=ce(mz,{gap:"var(--Sizing-1)",children:[le(si,{children:"Card title"}),le(wi,{children:"What a card looks like in this design system."})]});function PM({values:e,defaultValue:t,render:i,label:n=e=>String(e)}){const[r,o]=a(null),l=void 0!==t?[t,...e.filter(e=>e!==t)]:e;return ce(se,{children:[le(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:l.map(e=>le(nb,{size:"small",variant:e===t?"default":"outline",onClick:()=>o(e),children:n(e)},String(e)))}),null!==r?i(r,()=>o(null)):null]})}function HM(){const[e,t]=a(!1),n=i(null);return ce(se,{children:[ce(nb,{ref:n,variant:"outline",onClick:()=>t(e=>!e),children:[e?"Close":"Open"," popover"]}),le(OC,{open:e,onClose:()=>t(!1),anchorRef:n,width:240,children:le(mz,{gap:"var(--Sizing-1)",style:{padding:"var(--Sizing-2)"},children:le(wi,{children:"Anchored to the button, portalled to the body so no ancestor can clip it."})})})]})}const OM=[{icon:le(Aa,{}),name:"New document",onClick:()=>{}},{icon:le(We,{}),name:"Invite someone",onClick:()=>{}},{icon:le(Le,{}),name:"Settings",onClick:()=>{}}],EM=360;function VM({labels:e=["Save","Cancel","Delete"],variant:a="default",...t}){return le(Ww,{"aria-label":"Actions",...t,children:e.map(e=>le(nb,{variant:a,onClick:()=>{},children:e},e))})}function QM(e){return ce(Ww,{"aria-label":"Alignment",...e,children:[le(nb,{iconOnly:!0,"aria-label":"Align left",onClick:()=>{},children:le(Ff,{children:le(ht,{})})}),le(nb,{iconOnly:!0,"aria-label":"Align center",onClick:()=>{},children:le(Ff,{children:le(ut,{})})}),le(nb,{iconOnly:!0,"aria-label":"Align right",onClick:()=>{},children:le(Ff,{children:le(bt,{})})})]})}function jM({options:e=["Left","Center","Right"],initial:t="Left",...i}){const[n,r]=a(t);return le(VT,{value:n,onChange:r,"aria-label":"Align",...i,children:e.map(e=>le(nb,{value:e,children:e},e))})}function qM({allowEmpty:e,...t}){const[i,n]=a(["Left"]);return ce(VT,{multiple:!0,allowEmpty:e,value:i,onChange:n,"aria-label":"Align",...t,children:[le(nb,{value:"Left",children:"Left"}),le(nb,{value:"Center",children:"Center"}),le(nb,{value:"Right",children:"Right"})]})}function GM(){const[a,t]=e.useState("left");return ce(VT,{value:a,onChange:t,"aria-label":"Alignment",children:[le(nb,{value:"left",children:"Left"}),le(nb,{value:"center",children:"Center"}),le(nb,{value:"right",disabled:!0,children:"Right"})]})}function UM(){const[e,t]=a(!0),[i,n]=a(!1);return ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center"},children:[le(fb,{label:"Unselected"}),le(fb,{label:"Selected",clickable:!0,selected:e,onClick:()=>t(e=>!e)}),i?le(Li,{color:"quiet",children:"dismissed"}):le(fb,{label:"Dismissible",onDelete:()=>n(!0)})]})}const YM={...SM,Button:()=>le(nb,{children:"Button"}),BrandIcon:()=>le(uz,{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(ux,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),Chip:()=>le(UM,{}),Badge:()=>ce(uz,{gap:"var(--Sizing-3)",children:[le(Og,{badgeContent:3,children:le(Ff,{children:le("span",{children:"✉"})})}),le(Og,{dot:!0,children:le(Ff,{children:le("span",{children:"🔔"})})})]}),Alert:()=>ce(mz,{gap:"var(--Sizing-1)",children:[le(pv,{color:"info",children:"Something worth knowing."}),le(pv,{color:"error",children:"Something went wrong."})]}),Card:()=>le(Nv,{padding:"medium",children:ce(mz,{gap:"var(--Sizing-1)",children:[le(si,{children:"Card title"}),le(wi,{children:"What a card looks like in this design system."})]})}),Avatar:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(Lg,{initials:"LN"}),le(Lg,{})]}),Icon:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(Ff,{color:"primary",children:le("span",{children:"★"})}),le(Ff,{color:"success",children:le("span",{children:"✓"})}),le(Ff,{color:"error",children:le("span",{children:"✕"})})]}),Link:()=>le(mn,{href:"#example",children:"A link, which thickens rather than recolors on hover"}),Divider:()=>le(kx,{indicatorText:"OR"}),Checkbox:()=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Uv,{label:"Unchecked"}),le(Uv,{label:"Checked",defaultChecked:!0}),le(Uv,{label:"Indeterminate",indeterminate:!0})]}),Radio:()=>le(Ox,{name:"docs-radio",defaultValue:"a",options:[{value:"a",label:"First"},{value:"b",label:"Second"}]}),Input:()=>le(Wx,{label:"Email",placeholder:"you@example.com"}),SwitchInput:()=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(zv,{label:"Off"}),le(zv,{label:"On",defaultChecked:!0})]}),Slider:()=>le(jx,{defaultValue:40}),Box:()=>ce(Fz,{surface:"Container",radius:"medium",elevation:2,style:{padding:"var(--Sizing-3)",width:280},children:[le(wi,{children:"Container, medium radius, elevation 2."}),le(Li,{color:"quiet",children:"Nothing here names a color."})]}),Copyright:()=>le(iz,{companyName:"Acme"}),Grid:()=>le(My,{container:!0,spacing:1,children:[1,2,3,4].map(e=>le(My,{item:!0,xs:6,children:le(Fz,{surface:"Container",radius:"small",style:{padding:"var(--Sizing-1)"},children:le(wi,{children:"Cell "+e})})},e))}),MiniSwatch:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(Ty,{color:"var(--Primary-Color-6)"}),le(wi,{children:"Primary"})]}),Gradient:()=>le(wy,{minHeight:120,style:{width:280},children:le(Fz,{style:{padding:"var(--Sizing-2)"},children:le(si,{children:"On brand color"})})}),BevelText:()=>le(uy,{text:"Bevel",textStyle:"display-small"}),CurvedText:()=>le(ey,{text:"CURVED AROUND",arc:180,radius:60}),Typography:()=>ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"flex-start"},children:[le(li,{children:"A heading"}),le(pi,{color:"standard",children:"A subtitle, which is Body at 700"}),le(wi,{children:"Body copy, the style everything else is measured against."}),le(Li,{color:"quiet",children:"A caption, quiet by default."})]}),Section:()=>ce("div",{style:{width:300},children:[ce(Uy,{surface:"Surface",padding:"var(--Sizing-2)",children:[le(wi,{children:"Surface"}),le(Li,{color:"quiet",children:"Text and border arrive with it."})]}),ce(Uy,{surface:"Container",padding:"var(--Sizing-2)",children:[le(wi,{children:"Container"}),le(Li,{color:"quiet",children:"Same markup, one level down."})]})]}),Stack:()=>ce(mz,{gap:"var(--Sizing-2)",children:[ce(uz,{gap:"var(--Sizing-1)",children:[le(Iy,{children:"row"}),le(Iy,{children:"with"}),le(Iy,{children:"a gap"})]}),ce(mz,{gap:"var(--Sizing-1)",children:[le(Iy,{children:"column"}),le(Iy,{children:"with the same gap"})]})]}),Container:()=>le(Gy,{maxWidth:"sm",children:le(wi,{children:"Capped and centred, with gutters that keep text off the edge."})}),Footer:()=>le(kz,{brand:"Acme",columns:[{title:"Product",links:[{label:"Overview",href:"#"},{label:"Pricing",href:"#"}]},{title:"Company",links:[{label:"About",href:"#"},{label:"Careers",href:"#"}]}],copyright:"Acme"}),SpeedDial:()=>le("div",{style:{height:220,position:"relative",width:180},children:le(Jy,{open:!0,showTooltips:!0,ariaLabel:"Create",actions:[{icon:le(Aa,{}),name:"New document",onClick:()=>{}},{icon:le(We,{}),name:"Invite someone",onClick:()=>{}},{icon:le(Le,{}),name:"Settings",onClick:()=>{}}]})}),CircularProgress:()=>le($z,{value:68,showValue:!0}),LinearProgress:()=>le("div",{style:{width:280},children:le(jz,{value:68})}),NumberField:()=>le(rz,{label:"Quantity",defaultValue:2,min:1,max:10}),RadioGroup:()=>le(Ox,{label:"Delivery",name:"lead",defaultValue:"std",options:[{value:"std",label:"Standard — 3 to 5 days"},{value:"exp",label:"Express — next day"},{value:"pick",label:"Collect in store"}]}),Rating:()=>le(dw,{defaultValue:3}),Breadcrumbs:()=>ce(uw,{children:[le(mn,{href:"#a",children:"Home"}),le(mn,{href:"#b",children:"Products"}),le(wi,{children:"Current"})]}),Pagination:()=>le(vw,{count:8,defaultPage:3}),Accordion:()=>le(Ow,{children:le(wi,{children:"An accordion segment, open."})}),Tabs:()=>ce(Tb,{defaultValue:0,children:[ce(Mb,{children:[le(Ab,{value:0,children:"Overview"}),le(Ab,{value:1,children:"Details"})]}),le(Lb,{value:0,children:le(wi,{children:"The first panel."})}),le(Lb,{value:1,children:le(wi,{children:"The second panel."})})]})};function XM(e){return e in YM}const JM={Fab:{size:()=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ux,{size:"small",icon:le(Ff,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, small"}),le(ux,{size:"medium",icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add, medium"}),le(ux,{size:"large",icon:le(Ff,{size:"large",children:le(Aa,{})}),ariaLabel:"Add, large"})]}),color:()=>{const e=(e,a)=>ce(mz,{gap:"var(--Sizing-Half)",style:{alignItems:"center"},children:[le(ux,{color:e,size:"small",icon:le(Ff,{size:"small",children:le(Aa,{})}),ariaLabel:"Add, "+e}),le(Li,{color:a?"standard":"quiet",children:e})]},e);return ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[e("default",!0),le(kx,{orientation:"vertical",style:{alignSelf:"stretch"}}),["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"].map(a=>e(a,!1))]})},extended:()=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ux,{icon:le(Ff,{size:"medium",children:le(La,{})}),ariaLabel:"Edit"}),le(ux,{icon:le(Ff,{size:"medium",children:le(La,{})}),extended:!0,label:"Edit"})]}),animate:()=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ux,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ux,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),animate:!0,ariaLabel:"Add, animated"})]}),disabled:()=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le(ux,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),ariaLabel:"Add"}),le(ux,{icon:le(Ff,{size:"medium",children:le(Aa,{})}),disabled:!0,ariaLabel:"Add, disabled"})]})},Button:{variant:()=>ce(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap"},children:[le(nb,{children:"solid"}),le(nb,{variant:"outline",children:"outline"}),le(nb,{variant:"ghost",children:"ghost"})]}),size:()=>ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(nb,{size:"small",children:"small"}),le(nb,{size:"medium",children:"medium"}),le(nb,{size:"large",children:"large"})]}),variantColor:()=>{const e=["primary","secondary","tertiary","neutral","info","success","warning","error","black-white"],a=a=>ce(uz,{gap:"var(--Sizing-1)",style:{alignItems:"center",flexWrap:"wrap"},children:[le(nb,{variant:a?"default"+a:"default",size:"small",children:"default"}),le(kx,{orientation:"vertical",style:{alignSelf:"stretch"}}),e.map(e=>le(nb,{variant:a?e+a:e,size:"small",children:e},e))]});return ce(mz,{gap:"var(--Sizing-2)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"solid"}),a("")]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"outline"}),a("-outline")]})]})},disabled:()=>ce(uz,{gap:"var(--Sizing-1)",children:[le(nb,{children:"enabled"}),le(nb,{disabled:!0,children:"disabled"})]}),"startDecorator / endDecorator":()=>ce(mz,{gap:"var(--Sizing-1)",children:[ce(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{startDecorator:le(Ff,{children:le(Aa,{})}),children:"start icon"}),le(nb,{endDecorator:le(Ff,{children:le(Ia,{})}),children:"end icon"})]}),ce(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{startDecorator:le(Lg,{}),children:"start avatar"}),le(nb,{endDecorator:le(Lg,{}),children:"end avatar"})]})]}),iconOnly:()=>ce(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{children:"text"}),le(nb,{iconOnly:!0,"aria-label":"Delete item",children:le(Ae,{})}),le(nb,{letterNumber:!0,"aria-label":"3 unread",children:"3"}),le(nb,{avatar:!0,"aria-label":"Jane Doe",children:le(Lg,{})})]}),elevated:()=>ce(uz,{gap:"var(--Sizing-1)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(nb,{children:"standard"}),le(nb,{elevated:!0,children:"raised"})]}),fullWidth:()=>ce(mz,{gap:"var(--Sizing-1)",style:{width:"100%",maxWidth:320},children:[le(nb,{children:"default fit"}),le(nb,{fullWidth:!0,children:"full width"})]})}};const ZM=[{Slider:nS},CM,LM,DM,{Container:{disableGutters:()=>le(mz,{gap:"var(--Sizing-2)",children:[!1,!0].map(e=>le(Kw,{label:e?"true":"false",emphasis:!e,children:le(Fz,{surface:"Container",style:{width:320},children:le(Gy,{maxWidth:!1,disableGutters:e,children:le(wi,{children:"Text against the edge, or not."})})})},String(e)))})},Stack:{direction:()=>ce(uz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:"column",emphasis:!0,children:ce(mz,{gap:"var(--Sizing-1)",children:[le(Iy,{children:"one"}),le(Iy,{children:"two"}),le(Iy,{children:"three"})]})}),le(Kw,{label:"row",children:ce(uz,{gap:"var(--Sizing-1)",children:[le(Iy,{children:"one"}),le(Iy,{children:"two"}),le(Iy,{children:"three"})]})})]}),enforceMinGap:()=>ce(uz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:"true",emphasis:!0,children:ce(mz,{gap:"var(--Sizing-Half)",children:[le(Ri,{children:"Display name"}),le(Li,{color:"quiet",children:"Shown beside your comments."})]})}),le(Kw,{label:"false",children:ce(mz,{gap:"var(--Sizing-Half)",enforceMinGap:!1,children:[le(Ri,{children:"Display name"}),le(Li,{color:"quiet",children:"Shown beside your comments."})]})})]})},Box:{radius:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap"},children:["none","small","medium","large"].map(e=>le(Kw,{label:e,emphasis:"none"===e,children:le(Fz,{surface:"Container",radius:e,style:{width:96,height:64}})},e))})},SpeedDial:{direction:()=>le(uz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[["up","flex-end","center"],["down","flex-start","center"],["left","center","flex-end"],["right","center","flex-start"]].map(([e,a,t])=>le(Kw,{label:e,emphasis:"up"===e,children:le("div",{style:{height:260,width:260,position:"relative",display:"flex",alignItems:a,justifyContent:t,overflow:"hidden"},children:le(Jy,{open:!0,direction:e,ariaLabel:"Create "+e,actions:OM})})},e))}),size:()=>le(uz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap",alignItems:"flex-end"},children:["small","medium","large"].map(e=>le(Kw,{label:e,emphasis:"medium"===e,children:le(Jy,{size:e,ariaLabel:"Create "+e,actions:OM})},e))}),openOnHover:()=>ce(uz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[le(Kw,{label:"true — hover this one",emphasis:!0,children:le("div",{style:{height:240,width:140,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Jy,{ariaLabel:"Create by hover",actions:OM})})}),le(Kw,{label:"false — this one needs a click",children:le("div",{style:{height:240,width:140,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Jy,{openOnHover:!1,ariaLabel:"Create by click",actions:OM})})})]}),showTooltips:()=>le(uz,{gap:"var(--Sizing-6)",style:{flexWrap:"wrap"},children:[!1,!0].map(e=>le(Kw,{label:String(e),emphasis:!e,children:le("div",{style:{height:260,width:220,position:"relative",display:"flex",alignItems:"flex-end",justifyContent:"center"},children:le(Jy,{open:!0,showTooltips:e,ariaLabel:"Create "+e,actions:OM})})},String(e)))})},Card:{variant:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["solid","outlined","ghost"].map(e=>le(Kw,{label:e,emphasis:"solid"===e,width:200,children:le(Nv,{variant:e,padding:"medium",children:FM})},e))}),size:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:$w.map(e=>le(Kw,{label:e,emphasis:"medium"===e,width:200,children:le(Nv,{size:e,padding:"medium",children:FM})},e))}),orientation:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"vertical"}),le(RM,{w:200,children:le(Nv,{padding:"medium",children:FM})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"horizontal"}),le(RM,{w:360,children:le(Nv,{orientation:"horizontal",padding:"medium",children:FM})})]})]}),clickable:()=>ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false — static",emphasis:!0,width:200,children:le(Nv,{padding:"medium",children:FM})}),le(Kw,{label:"true — one control",width:200,children:le(Nv,{padding:"medium",clickable:!0,children:FM})})]}),elevated:()=>ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"standard — level 1",emphasis:!0,width:200,children:le(Nv,{padding:"medium",children:FM})}),le(Kw,{label:"elevated — level 2",width:200,children:le(Nv,{padding:"medium",elevated:!0,children:FM})})]}),selected:()=>ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false",emphasis:!0,width:200,children:le(Nv,{padding:"medium",clickable:!0,children:FM})}),le(Kw,{label:"true",width:200,children:le(Nv,{padding:"medium",clickable:!0,selected:!0,children:FM})})]})},Accordion:{variant:()=>le(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:["solid","outlined","ghost"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"solid"===e?"standard":"quiet",children:e}),le(Ow,{variant:e,title:"What is a design system?",defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]},e))}),size:()=>le(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:$w.map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(Ow,{size:e,title:"Size "+e,defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]},e))}),defaultExpanded:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:380},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — starts closed"}),le(Ow,{title:"What is a design system?",children:le(wi,{children:"A set of decisions, written down once."})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — starts open"}),le(Ow,{title:"What is a design system?",defaultExpanded:!0,children:le(wi,{children:"A set of decisions, written down once."})})]})]}),disabled:()=>ce(mz,{gap:"var(--Sizing-2)",style:{width:"100%",maxWidth:380},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(Ow,{title:"What is a design system?",children:le(wi,{children:"A set of decisions, written down once."})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled"}),le(Ow,{title:"What is a design system?",disabled:!0,children:le(wi,{children:"A set of decisions, written down once."})})]})]})},Paper:{outlined:()=>ce(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:[le(Kw,{label:"false — elevation",emphasis:!0,width:180,children:le(HC,{surface:"Container",children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:"Elevated"})})})}),le(Kw,{label:"true — a border, no shadow",width:180,children:le(HC,{surface:"Container",outlined:!0,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:"Outlined"})})})})]}),variant:()=>le(uz,{gap:"var(--Sizing-2)",style:{flexWrap:"wrap",alignItems:"flex-start"},children:["elevation","outlined"].map(e=>le(Kw,{label:e,emphasis:"elevation"===e,width:180,children:le(HC,{surface:"Container",variant:e,children:le("div",{style:{padding:"var(--Sizing-3)"},children:le(wi,{children:e})})})},e))})},Ratio:{fit:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"width — height follows the column"}),le("div",{style:{width:240},children:le(tB,{ratio:"16:9"})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"height — width follows the row"}),le("div",{style:{height:120},children:le(tB,{ratio:"16:9",fit:"height"})})]})]})},Table:{loading:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%"},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false"}),le(tT,{columns:sM,rows:cM})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — the shape is kept"}),le(tT,{columns:sM,rows:[],loading:!0,skeletonRows:3})]})]})},Modal:{open:()=>le(PM,{values:[!0],label:()=>"Open modal",render:(e,a)=>le(PC,{open:!0,onClose:a,title:"Rename project",children:ce(mz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"A modal takes the whole screen`s attention, so it owes the reader a way out."}),le(nb,{onClick:a,children:"Done"})]})})}),size:()=>le(PM,{values:$w,defaultValue:"medium",render:(e,a)=>le(PC,{open:!0,onClose:a,size:e,title:"Size "+e,children:le(wi,{children:"The modal`s width. Its height always follows its content."})})}),layout:()=>le(PM,{values:["center","top"],defaultValue:"center",render:(e,a)=>le(PC,{open:!0,onClose:a,layout:e,title:"Layout "+e,children:le(wi,{children:"Where the modal sits in the viewport."})})}),closeOnBackdrop:()=>le(PM,{values:[!0,!1],defaultValue:!0,label:e=>e?"true — click outside closes":"false — click outside does nothing",render:(e,a)=>le(PC,{open:!0,onClose:a,closeOnBackdrop:e,title:"Rename project",children:ce(mz,{gap:"var(--Sizing-2)",children:[le(wi,{children:e?"Click the backdrop to close.":"The backdrop will not close this."}),le(nb,{onClick:a,children:"Close"})]})})}),showCloseButton:()=>le(PM,{values:[!0,!1],defaultValue:!0,label:e=>e?"true":"false — needs its own way out",render:(e,a)=>le(PC,{open:!0,onClose:a,showCloseButton:e,title:"Rename project",children:ce(mz,{gap:"var(--Sizing-2)",children:[le(wi,{children:"A modal with no close button must give one in its content."}),le(nb,{onClick:a,children:"Done"})]})})})},Dialog:{open:()=>le(PM,{values:[!0],label:()=>"Open dialog",render:(e,a)=>le(Ik,{open:!0,onClose:a,title:"Discard changes?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:a,children:"Keep editing"}),le(nb,{variant:"error",onClick:a,children:"Discard"})]}),children:le(wi,{children:"This cannot be undone."})})}),maxWidth:()=>le(PM,{values:["xs","sm","md","lg"],defaultValue:"sm",render:(e,a)=>le(Ik,{open:!0,onClose:a,maxWidth:e,title:"maxWidth "+e,actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:"A ceiling, not a width — a short dialog stays narrow."})})}),fullScreen:()=>le(PM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true":"false",render:(e,a)=>le(Ik,{open:!0,onClose:a,fullScreen:e,title:"Edit tokens",actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:"Full screen is for a dialog carrying a whole task on a small screen."})})}),alert:()=>le(PM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — role=alertdialog":"false — role=dialog",render:(e,a)=>le(Ik,{open:!0,onClose:a,alert:e,title:"Delete project?",actions:ce(se,{children:[le(nb,{variant:"outline",onClick:a,children:"Cancel"}),le(nb,{variant:"error",onClick:a,children:"Delete"})]}),children:le(wi,{children:"Every file in it goes too. This cannot be undone."})})}),nonModal:()=>le(PM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — the page stays usable":"false — modal",render:(e,a)=>le(Ik,{open:!0,onClose:a,nonModal:e,title:"Find in page",actions:le(nb,{onClick:a,children:"Close"}),children:le(wi,{children:e?"The page behind this is still interactive.":"The page behind this is blocked."})})})},Drawer:{open:()=>le(PM,{values:[!0],label:()=>"Open drawer",render:(e,a)=>le(MS,{open:!0,onClose:a,children:ce(mz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(lC,{items:lM,clickable:!0}),le(nb,{onClick:a,children:"Close"})]})})}),anchor:()=>le(PM,{values:["left","right","top","bottom"],defaultValue:"left",render:(e,a)=>le(MS,{open:!0,onClose:a,anchor:e,children:ce(mz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[ce(si,{children:["anchor=",e]}),le(nb,{onClick:a,children:"Close"})]})})}),size:()=>le(PM,{values:$w,defaultValue:"medium",render:(e,a)=>le(MS,{open:!0,onClose:a,size:e,children:ce(mz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)"},children:[ce(si,{children:["size=",e]}),le(nb,{onClick:a,children:"Close"})]})})}),hideBackdrop:()=>le(PM,{values:[!1,!0],defaultValue:!1,label:e=>e?"true — no scrim":"false — scrim",render:(e,a)=>le(MS,{open:!0,onClose:a,hideBackdrop:e,children:ce(mz,{gap:"var(--Sizing-2)",style:{padding:"var(--Sizing-3)",minWidth:240},children:[le(si,{children:"Filters"}),le(nb,{onClick:a,children:"Close"})]})})})},Sheet:{surface:()=>le(mz,{gap:"var(--Sizing-2)",children:["Surface","Surface-Dim","Surface-Dimmest","Surface-Bright","Surface-Brightest"].map(e=>le(Kw,{label:e,emphasis:"Surface"===e,width:260,children:le(tM,{surface:e,sx:{padding:"var(--Sizing-2)",width:220},children:ce(xi,{children:["On ",e]})})},e))}),elevated:()=>le(uz,{gap:"var(--Sizing-4)",style:{flexWrap:"wrap"},children:[!1,!0].map(e=>le(Kw,{label:String(e),emphasis:!e,children:le(tM,{elevated:e,sx:{padding:"var(--Sizing-2)",width:180},children:le(xi,{children:e?"Lifted off the page":"Flat on it"})})},String(e)))})},TransferList:{mode:()=>le(mz,{gap:"var(--Sizing-3)",children:["basic","enhanced"].map(e=>le(Kw,{label:e,emphasis:"basic"===e,children:le(rM,{mode:e,defaultLeftItems:["Colors","Typography","Spacing"],defaultRightItems:["Elevation"]})},e))}),disabled:()=>le(mz,{gap:"var(--Sizing-3)",children:[!1,!0].map(e=>le(Kw,{label:String(e),emphasis:!e,children:le(rM,{disabled:e,defaultLeftItems:["Colors","Typography"],defaultRightItems:["Elevation"]})},String(e)))})},Snackbar:{open:()=>le(PM,{values:[!0],label:()=>"Show snackbar",render:(e,a)=>le(MB,{open:!0,onClose:a,color:"success",autoHideDuration:4e3,children:"Project saved."})}),color:()=>le(PM,{values:["info","success","warning","error"],defaultValue:"info",render:(e,a)=>ce(MB,{open:!0,onClose:a,color:e,autoHideDuration:4e3,children:[e," — something happened."]})}),anchor:()=>le(PM,{values:["bottom","top"],defaultValue:"bottom",render:(e,a)=>ce(MB,{open:!0,onClose:a,anchor:e,color:"info",autoHideDuration:4e3,children:["anchor=",e]})})},Tooltip:{placement:()=>le(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:["bottom","top","left","right"].map(e=>le(Kw,{label:e,emphasis:"bottom"===e,children:le(ST,{title:"placement="+e,placement:e,children:le(nb,{variant:"outline",size:"small",children:e})})},e))}),arrow:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Kw,{label:"true",emphasis:!0,children:le(ST,{title:"With an arrow",children:le(nb,{variant:"outline",size:"small",children:"arrow"})})}),le(Kw,{label:"false",children:le(ST,{title:"No arrow",arrow:!1,children:le(nb,{variant:"outline",size:"small",children:"no arrow"})})})]}),describeChild:()=>ce(uz,{gap:"var(--Sizing-3)",style:{flexWrap:"wrap",alignItems:"center"},children:[le(Kw,{label:"false — the tooltip is the name",emphasis:!0,children:le(ST,{title:"Delete item",children:le(nb,{variant:"outline",size:"small",iconOnly:!0,"aria-label":"Delete item",children:"x"})})}),le(Kw,{label:"true — the tooltip describes it",children:le(ST,{title:"Removes it permanently",describeChild:!0,children:le(nb,{variant:"outline",size:"small",children:"Delete"})})})]})},Popover:{open:()=>le(HM,{})}},{ButtonGroup:{separated:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"true — the default, and what Figma draws"}),le(VM,{})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"false — joins them, and warns"}),le(VM,{separated:!1})]}),le(wi,{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:()=>ce(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:EM},children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"hug — each button sizes to its label"}),le("div",{style:{width:EM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(VM,{labels:["S","Medium","Extra large"]})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"fill — the group fills, buttons share it equally"}),le("div",{style:{width:EM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(VM,{labels:["S","Medium","Extra large"],fit:"fill"})})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"equal — hugs, but every button matches the widest (code only)"}),le("div",{style:{width:EM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(VM,{labels:["S","Medium","Extra large"],fit:"equal"})})]})]}),orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:"horizontal",emphasis:!0,children:le(VM,{})}),le(Kw,{label:"vertical",children:le(VM,{orientation:"vertical"})})]}),size:()=>le(mz,{gap:"var(--Sizing-3)",children:$w.map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(VM,{size:e})]},e))}),variant:()=>ce(mz,{gap:"var(--Sizing-3)",children:[["default","primary","secondary"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"default"===e?"standard":"quiet",children:`<Button variant="${e}">`}),le(VM,{variant:e})]},e)),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"outline, for a row of secondary actions"}),le(VM,{variant:"default-outline"})]})]}),disabled:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(VM,{})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled — the whole group"}),le(VM,{disabled:!0})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"a single button takes its own `disabled`"}),ce(Ww,{"aria-label":"Actions",children:[le(nb,{onClick:()=>{},children:"Save"}),le(nb,{disabled:!0,onClick:()=>{},children:"Cancel"}),le(nb,{onClick:()=>{},children:"Delete"})]})]})]}),"aria-label":()=>ce(mz,{gap:"var(--Sizing-2)",children:[le(QM,{}),le(wi,{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:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — a toggle group. The last one stays on."}),le(qM,{allowEmpty:!1})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — clearable, with toggle styling"}),le(qM,{allowEmpty:!0})]}),le(wi,{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:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — one answer, and it cannot be cleared"}),le(jM,{})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — any number, never none"}),le(qM,{allowEmpty:!1})]})]}),separated:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"false — joined (Figma: Style=Default)"}),le(jM,{})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"true — separated (Figma: Style=Separated)"}),le(jM,{separated:!0})]})]}),variant:()=>le(mz,{gap:"var(--Sizing-3)",children:["outlined","light","ghost"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"outlined"===e?"standard":"quiet",children:e}),le(jM,{variant:e,color:"primary"})]},e))}),color:()=>le(mz,{gap:"var(--Sizing-2)",children:["default",...Zw].map(e=>ce(uz,{gap:"var(--Sizing-2)",style:{alignItems:"center"},children:[le("div",{style:{width:84},children:le(Li,{color:"default"===e?"standard":"quiet",children:e})}),le(jM,{color:e})]},e))}),size:()=>le(mz,{gap:"var(--Sizing-3)",children:$w.map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"medium"===e?"standard":"quiet",children:e}),le(jM,{size:e})]},e))}),fit:()=>le(mz,{gap:"var(--Sizing-3)",style:{width:"100%",maxWidth:EM},children:["hug","fill","equal"].map(e=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"hug"===e?"standard":"quiet",children:e}),le("div",{style:{width:EM,border:"1px dashed var(--Border-Variant)",padding:4},children:le(jM,{options:["S","Medium","Extra large"],initial:"S",fit:e})})]},e))}),orientation:()=>ce(uz,{gap:"var(--Sizing-4)",style:{alignItems:"flex-start",flexWrap:"wrap"},children:[le(Kw,{label:"horizontal",emphasis:!0,children:le(jM,{})}),le(Kw,{label:"vertical",children:le(jM,{orientation:"vertical"})})]}),"value / defaultValue":()=>ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"each child needs a `value`; the group matches against it"}),le(jM,{})]}),onChange:()=>ce(mz,{gap:"var(--Sizing-2)",children:[le(jM,{}),le(wi,{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:()=>ce(mz,{gap:"var(--Sizing-3)",children:[ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"standard",children:"enabled"}),le(jM,{})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"disabled — the whole group"}),le(jM,{disabled:!0})]}),ce(mz,{gap:"var(--Sizing-Half)",children:[le(Li,{color:"quiet",children:"one choice unavailable"}),le(GM,{})]})]})}}].reduce(function(e,a){for(const[t,i]of Object.entries(a))e[t]={...e[t]||{},...i};return e},JM);const $M={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."}},KM=e=>$M[e]||null,_M=/\.(mp4|mov|webm)$/i;function eA({src:e,title:a,shows:t,aspect:i="4 / 3",maxWidth:n=560}){const r={width:"100%",maxWidth:n,display:"block",borderRadius:"var(--Card-Radius, var(--Style-Border-Radius))",border:"1px solid var(--Border-Variant)"};return e&&_M.test(e)?le(u,{component:"video",src:e,controls:!0,preload:"metadata",playsInline:!0,sx:r}):le(u,e?{component:"img",src:e,alt:a||"",loading:"lazy",sx:r}:{"data-surface":"Container",sx:{width:"100%",maxWidth:n,aspectRatio:i,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:ce(mz,{gap:"var(--Sizing-1)",style:{alignItems:"center",maxWidth:440},children:[le(Oi,{children:"Screenshot to capture"}),le(xi,{children:a}),t&&le(Li,{color:"quiet",children:t})]})})}const aA="https://omni-design.netlify.app";function tA(e){return e.trim().replace(/\s+/g,"-")}function iA(e,a,t=aA){return`${t.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}/${tA(a)}`}function nA(e,a=aA){return`${a.replace(/\/+$/,"")}/docs/${encodeURIComponent(e)}`}const rA="https://github.com/lwnoble/DinoDesign/issues/new";function oA(e){const a=tA(String(e||"")).toLowerCase();return Sg.find(e=>tA(e.name).toLowerCase()===a)||null}const lA=({component:e,what:a})=>le(u,{sx:{p:3},children:ce(wi,{color:"quiet",children:["No ",a," written for ",e," yet."]})}),sA=({title:e,children:a})=>ce(u,{sx:{pt:3,mt:3,borderTop:"1px solid var(--Border-Variant)","&:first-of-type":{borderTop:"none",pt:0,mt:0}},children:[le(Oi,{style:{color:"var(--Text-Quiet)",display:"block",marginBottom:8},children:e.toUpperCase()}),a]}),cA=({items:e})=>le(m,{spacing:0,children:e.map((e,a)=>ce(u,{sx:{py:.75},children:[le(xi,{children:e.head}),e.sub?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:e.sub}):null]},a))}),dA=["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"],hA=e=>e.sample||e.name,uA=e=>{const a=dA.indexOf(hA(e));return-1===a?dA.length:a},mA=e=>e.map((e,a)=>({pr:e,i:a})).sort((e,a)=>uA(e.pr)-uA(a.pr)||e.i-a.i).map(({pr:e})=>e);function pA({component:e,theme:a=null,surface:t="Surface"}){const i=oA(e);if(!i)return le(lA,{component:e,what:"reference"});const n=XM(i.name)?YM[i.name]:null,r=KM(i.name);return le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[n?le(wv,{theme:a,surface:t,minHeight:120,children:le(u,{sx:{width:"100%",p:3,display:"flex",justifyContent:"center"},children:le(u,{sx:{width:"100%",maxWidth:420,textAlign:"center"},children:n({theme:a,surface:t})})})}):null,le(wi,{children:i.summary}),i.links&&i.links.length?le(u,{sx:{display:"flex",gap:"var(--Sizing-3)",flexWrap:"wrap"},children:i.links.map((e,a)=>le(mn,{href:e.href,target:"_blank",rel:"noopener noreferrer",children:e.label},a))}):null,(i.insteadUse||[]).length>0&&le(sA,{title:"Reach for something else when",children:le(cA,{items:i.insteadUse.map(e=>({head:e.when,sub:`Use ${e.use}`}))})}),(i.props||[]).length>0&&le(sA,{title:"Props",children:le(m,{spacing:0,children:mA(i.props).map((e,n)=>{const o=hA(e),l=function(e,a){return Boolean(ZM[e]&&ZM[e][a])}(i.name,o)?ZM[i.name][o]:null,s=r&&r.after===o?r:null,c=[e.values&&e.values.length?e.values.join(" | "):null,e.default?`default: ${e.default}`:null,e.note].filter(Boolean).join(" · ");return ce(u,{sx:{py:1},children:[ce(xi,{children:[e.label||e.name," — ",e.type]}),c?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:c}):null,l?le(u,{sx:{mt:1.5},children:le(wv,{theme:a,surface:t,minHeight:0,children:le(u,{sx:{p:2},children:l({theme:a,surface:t})})})}):null,s?le(u,{sx:{mt:2},children:ce(m,{spacing:1.5,children:[le(Oi,{children:s.title}),le(xi,{children:s.body}),le(eA,{title:s.shot}),s.caveat?le(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:s.caveat}):null]})}):null]},n)})})}),(i.states||[]).length>0&&le(sA,{title:"States",children:le(cA,{items:i.states.map(e=>({head:e.state,sub:[`set by ${e.setBy}`,e.note].filter(Boolean).join(" · ")}))})}),(i.theming||[]).length>0&&ce(sA,{title:"Theming",children:[le(cA,{items:i.theming.map(e=>({head:e.collection,sub:`In code: ${e.inCode}\nIn Figma: ${e.inFigma}`}))}),(i.themingNotes||[]).map((e,a)=>le(Li,{style:{color:"var(--Text-Quiet)",display:"block",marginTop:8},children:e},a))]}),(i.tokens||[]).length>0&&le(sA,{title:"Tokens",children:le(cA,{items:i.tokens.map(e=>({head:e.name,sub:[e.sets,e.variesWith?`varies with ${e.variesWith}`:null,e.figma].filter(Boolean).join(" · ")}))})}),(i.composition||[]).length>0&&le(sA,{title:"Composition",children:le(cA,{items:i.composition.map(e=>({head:e}))})}),(i.gotchas||[]).length>0&&le(sA,{title:"Gotchas",children:le(cA,{items:i.gotchas.map(e=>({head:e}))})})]})})}function fA({component:e}){const a=oA(e),t=a&&a.changes||[],i=encodeURIComponent(`[${e}] `);return le(u,{sx:{p:3},children:ce(m,{spacing:3,children:[0===t.length?ce(wi,{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)=>ce(u,{sx:{py:1},children:[ce(m,{direction:"row",spacing:1,useFlexGap:!0,sx:{alignItems:"center",flexWrap:"wrap"},children:[le(xi,{style:{fontWeight:700},children:e.version}),e.silent?le(Li,{style:{color:"var(--Text-Warning)",fontWeight:600},children:"SILENT — old code still renders"}):null]}),le(wi,{children:e.change}),e.migrate?ce(Li,{style:{color:"var(--Text-Quiet)",display:"block"},children:["Instead: ",e.migrate]}):null]},a))}),ce(u,{children:[le(di,{children:"Something wrong or missing?"}),le(xi,{color:"quiet",children:"Report it against this component and it arrives with the name already filled in."}),le(u,{sx:{mt:1},children:ce(mn,{href:`${rA}?title=${i}`,target:"_blank",rel:"noreferrer",children:["Report an issue with ",e]})})]})]})})}const gA="Qv2dqF7mYoAGY77EkdrwTv",bA="Omni-Designs-Aug12",vA={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 xA({title:e,component:a}){const t=a?function(e){const a=vA[e];return a?`https://www.figma.com/design/${gA}/${bA}?node-id=${a.replace(":","-")}`:null}(a):null;return ce(u,{sx:{display:"flex",alignItems:"baseline",gap:2,flexWrap:"nowrap"},children:[le(u,{sx:{flex:"0 1 auto",minWidth:0},children:le(si,{children:e})}),t&&ce(mn,{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 yA=[{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 zA(){const e=["# Foundations",""];for(const a of yA)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 wA={"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 SA(){const e=({color:e})=>ce(u,{sx:{textAlign:"center"},children:[le(u,{sx:{width:"80px",height:"80px",backgroundColor:`var(${e.var})`,borderRadius:"8px",border:"1px solid var(--Border)",mb:1,mx:"auto"}}),le(Q,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",mb:.5,wordBreak:"break-word"},children:e.name}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",fontSize:"10px",fontFamily:"monospace",wordBreak:"break-all"},children:e.var})]});return ce(m,{spacing:6,children:[ce(u,{children:[le(Q,{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))})]}),ce(u,{children:[le(Q,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Background Colors (Dynamic)"}),le(Q,{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:ce(u,{sx:{textAlign:"center"},children:[le(u,{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(Q,{variant:"body2",sx:{fontWeight:600,fontSize:"12px",color:"var(--Text)",wordBreak:"break-word"},children:e.name})]})},e.name))})]}),ce(u,{children:[le(Q,{variant:"h5",sx:{mb:3,fontWeight:700},children:"Dynamic Colors (Update with Mode, Background & Surface)"}),le(ae,{severity:"info",sx:{backgroundColor:"var(--Container-Low)",mb:3,border:"1px solid var(--Border)"},children:ce(Q,{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(Q,{variant:"body2",sx:{mb:3,color:"var(--Text-Secondary)"},children:"These colors automatically adapt based on:"}),ce(m,{spacing:1,sx:{mb:4},children:[ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Mode:"}),le(Q,{variant:"body2",children:"Light or Dark theme"})]}),ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Background:"}),le(Q,{variant:"body2",children:"Default, Primary, Secondary, Tertiary, Neutral, or Neutral-Variant"})]}),ce(u,{sx:{display:"flex",gap:2},children:[le(Q,{variant:"body2",sx:{fontWeight:600,minWidth:80},children:"Surface:"}),le(Q,{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=>ce(u,{children:[le(Q,{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))})]}),ce(u,{sx:{pt:4,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",sx:{mb:2,fontWeight:700},children:"How to Use"}),ce(m,{spacing:2,children:[ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Static Colors"}),ce(Q,{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."]})]}),ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Dynamic Colors"}),le(Q,{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."})]}),ce(u,{children:[le(Q,{variant:"h6",sx:{fontWeight:600,mb:1},children:"Example Usage"}),le(u,{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 kA(){const e=({name:e,varName:a,baseValue:t})=>le(u,{sx:{mb:2},children:ce(u,{sx:{display:"flex",alignItems:"center",gap:2,mb:1},children:[le(u,{"aria-hidden":"true",sx:{width:`var(${a})`,minWidth:20,height:24,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:.5,border:"1px solid var(--Border)"}}),ce(m,{spacing:.5,children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:a}),ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Base: ",t," (with cognitive multiplier)"]})]})]})}),a=({name:e,varName:a,value:t})=>ce(u,{sx:{mb:2},children:[le(u,{"aria-hidden":"true",sx:{width:100,height:t,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,border:"1px solid var(--Border)",mb:1}}),le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:a}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:t})]});return ce(m,{spacing:3,sx:{p:2},children:[ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Spacing Scale"}),le(Q,{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))})]}),ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Sizing Scale"}),le(Q,{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))})]}),ce("section",{children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Negative Sizing"}),le(Q,{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:ce(u,{children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600},children:e.name}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block"},children:e.var}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:e.value})]})},e.var))})]}),ce("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",component:"h2",sx:{mb:2,fontWeight:700},children:"Container Padding"}),ce(u,{sx:{p:"var(--Spacing-3)",backgroundColor:"var(--Container-Low)",border:"2px dashed var(--Buttons-Primary-Button)",borderRadius:1},children:[ce(Q,{variant:"body2",children:["Default container padding: ",le("strong",{children:"var(--Spacing-3)"})," = 24px"]}),le(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)",display:"block",mt:1},children:"Use this variable for consistent padding around main content areas."})]})]}),ce("section",{style:{paddingTop:24,borderTop:"1px solid var(--Border)"},children:[le(Q,{variant:"h5",component:"h2",sx:{mb:3,fontWeight:700},children:"Practical Examples"}),ce("article",{children:[le(Q,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Padding Examples"}),le(Q,{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:ce(u,{sx:{p:e,backgroundColor:"var(--Container)",border:"1px solid var(--Border)",borderRadius:1},children:[ce(Q,{variant:"subtitle2",children:["Padding: ",e]}),le(Q,{variant:"caption",sx:{display:"block",mt:1,color:"var(--Text-Secondary)"},children:"Content with spacing applied"})]})},e))})]}),ce("article",{children:[le(Q,{variant:"h6",component:"h3",sx:{mb:2,fontWeight:600},children:"Gap Examples"}),le(Q,{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=>ce(u,{children:[le(m,{direction:"row",spacing:e,sx:{mb:1},children:[1,2,3].map(e=>le(u,{"aria-hidden":"true",sx:{width:60,height:60,backgroundColor:"var(--Buttons-Primary-Button)",borderRadius:1,flexShrink:0}},e))}),ce(Q,{variant:"caption",sx:{color:"var(--Text-Secondary)"},children:["Gap: ",e]})]},e))})]})]}),ce(u,{role:"note",sx:{p:2,backgroundColor:"var(--Container-Low)",borderRadius:1,borderLeft:"4px solid var(--Buttons-Primary-Button)",mt:3},children:[le(Q,{variant:"subtitle2",sx:{fontWeight:600,mb:1},children:"✓ Accessibility Best Practices Used"}),ce("ul",{style:{margin:"0.5rem 0",paddingLeft:"1.5rem"},children:[le("li",{children:ce(Q,{variant:"caption",children:[le("strong",{children:'aria-hidden="true"'})," on purely decorative visual elements"]})}),le("li",{children:le(Q,{variant:"caption",children:"All spacing information conveyed through text labels and values"})}),le("li",{children:ce(Q,{variant:"caption",children:["No empty decorative ",le("code",{children:"<div>"})," elements in DOM"]})}),le("li",{children:ce(Q,{variant:"caption",children:["Semantic HTML: ",le("code",{children:"<section>"})," and ",le("code",{children:"<article>"})," for structure"]})}),le("li",{children:le(Q,{variant:"caption",children:"CSS-based spacing (padding/margin) for actual layout, not decorative divs"})}),le("li",{children:le(Q,{variant:"caption",children:"Full keyboard navigation and screen reader support"})})]})]})]})}Object.entries({Display:["display-large","display-medium","display-small"],Headings:["h1","h2","h3","h4","h5","h6"],Subtitle:["subtitle-small","subtitle","subtitle-large"],Body:["body-small","body-small-semibold","body","body-semibold","body-large","body-large-semibold"],Label:["label","label-small","label-large"],Caption:["caption","caption-bold"],Legal:["legal","legal-semibold"],Eyebrow:["eyebrow-small","eyebrow","eyebrow-large"],Button:["button-extra-small","button-small","button"],Number:["number-large","number-medium","number-small"]}).map(([e,a])=>({label:e,options:a.map(e=>({value:e,label:wA[e]}))}));const CA=e=>e?e.charAt(0).toUpperCase()+e.slice(1):"",BA=[{label:"Default",colors:["default"]},{label:"Theme",colors:["primary","secondary","tertiary"]},{label:"State",colors:["info","success","warning","error"]}],TA=[Me,zt,Se,Ne,vt,wt];function MA(){const[e,t]=a("Default"),[i,n]=a("Surface"),[r,o]=a("primary"),[l,s]=a("solid"),[c,d]=a("medium"),h=TA[0];return ce(mz,{spacing:4,style:{paddingBottom:64},children:[le(xA,{title:"Icon Badge",component:"IconBadge"}),le(u,{sx:{mt:1},children:le(ig,{theme:e,onThemeChange:t,surface:i,onSurfaceChange:n})}),ce("div",{style:{display:"grid",gridTemplateColumns:"1fr 1fr",gap:24},children:[le(Nv,{padding:"medium",children:ce(mz,{spacing:4,alignItems:"center",children:[le("div",{style:{padding:40},children:le(aC,{color:r,variant:l,size:c,children:le(h,{})})}),le(uz,{spacing:4,alignItems:"flex-end",children:["small","medium","large"].map(e=>ce(mz,{spacing:1,alignItems:"center",children:[le(aC,{color:r,variant:l,size:e,children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)"},children:CA(e)})]},e))}),ce(mz,{spacing:1,alignItems:"center",children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"Variants"}),le(uz,{spacing:3,children:["solid","light","dark"].map(e=>ce(mz,{spacing:1,alignItems:"center",children:[le(aC,{color:r,variant:e,size:"medium",children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)",fontSize:"0.65rem"},children:CA(e)})]},e))})]}),ce(mz,{spacing:1,alignItems:"center",children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:"All Colors"}),le(uz,{spacing:2,style:{flexWrap:"wrap",justifyContent:"center"},children:BA.flatMap(e=>e.colors).map(e=>ce(mz,{spacing:0,alignItems:"center",children:[le(aC,{color:e,variant:l,size:"small",children:le(h,{})}),le(xi,{style:{color:"var(--Quiet)",fontSize:"0.55rem"},children:CA(e)})]},e))})]})]})}),le(Nv,{padding:"medium",children:ce(mz,{spacing:4,children:[le(si,{style:{fontSize:"1rem"},children:"Playground"}),ce(mz,{spacing:2,children:[le(Ri,{children:"Color"}),BA.map(e=>ce(mz,{spacing:1,children:[le(xi,{style:{color:"var(--Quiet)",fontWeight:600,fontSize:"0.7rem"},children:e.label}),le(uz,{spacing:1,children:e.colors.map(e=>le(nb,{variant:r===e?"default":"outline",size:"small",onClick:()=>o(e),children:CA(e)},e))})]},e.label))]}),ce(mz,{spacing:1,children:[le(Ri,{children:"Variant"}),le(Ww,{size:"small",children:["solid","light","dark"].map(e=>le(nb,{variant:l===e?"default":"outline",size:"small",onClick:()=>s(e),children:CA(e)},e))})]}),ce(mz,{spacing:1,children:[le(Ri,{children:"Size"}),le(Ww,{size:"small",children:["small","medium","large"].map(e=>le(nb,{variant:c===e?"default":"outline",size:"small",onClick:()=>d(e),children:CA(e)},e))})]}),ce(mz,{spacing:0,children:[ce(xi,{style:{color:"var(--Quiet)"},children:["data-theme: ",CA(r),"light"===l?"-Light":""]}),ce(xi,{style:{color:"var(--Quiet)"},children:["data-surface: ","dark"===l?"Surface-Dimmest":"Surface"]}),le(xi,{style:{color:"var(--Quiet)"},children:"bg: var(--Background)"}),le(xi,{style:{color:"var(--Quiet)"},children:"icon: var(--Text)"})]})]})})]})]})}const AA={required:" * Required",optional:"Optional"};function LA({children:e,htmlFor:a,type:t="default",as:i="label",moreInfo:n,disabled:r=!1,className:o="",sx:l={},...s}){const c=AA[t],d="legend"===i;"production"===process.env.NODE_ENV||d||a||console.warn('[FormLabel] no `htmlFor`. A <label> whose control is a sibling has no association — the field announces as unlabelled while looking right. Pass the control\'s id, or use as="legend" inside a <fieldset>.'),"production"!==process.env.NODE_ENV&&n&&!n.label&&console.warn('[FormLabel] `moreInfo` needs a `label`. Name the FIELD it belongs to ("More about your email address"), not the icon.');const h=ce(Ri,{component:d?"legend":"label",htmlFor:d?void 0:a,className:"form-label",style:{color:r?"var(--Quiet)":"var(--Text)"},children:[e,c&&le("span",{className:"form-label-marker form-label-marker-"+t,"aria-hidden":"required"===t?"true":void 0,children:"required"===t?c:" "+c})]}),m=n?ce(mn,{className:"form-label-more-info",href:n.href,onClick:n.onClick,"aria-label":n.label,sx:{display:"inline-flex",alignItems:"center",gap:"var(--Sizing-Half)"},children:[n.text,le(Ff,{size:"small",children:le(we,{})})]}):null;return d?ce(se,{children:[h,m]}):ce(u,{className:"form-label-row "+o,sx:{display:"flex",alignItems:"center",gap:"var(--Sizing-Half)",...l},...s,children:[h,m]})}const IA={error:St,warning:kt,success:Ct,info:Fe},NA={error:"Error",warning:"Warning",success:"Success",info:"Info"},WA=Object.keys(NA);function DA({children:e,type:a="error",withIcon:t=!0,className:i="",sx:n={},...r}){return ce(u,{className:"input-message input-message-"+a+" "+i,"data-theme":NA[a]||NA.error,"data-surface":"Surface-Brightest",sx:{display:"inline-flex",alignItems:"center",gap:"var(--Sizing-Half)",padding:"0 var(--Sizing-Half)",borderRadius:"var(--Sizing-Half)",backgroundColor:"var(--Background)",...n},...r,children:[t&&le(Ff,{size:"xxs",color:a,children:le(IA[a]||IA.error,{})}),le(Pi,{className:"input-message-text",color:a,children:e})]})}const RA=["none","warning","info","success","error"];function FA({showHelper:e=!0,validation:a="none"}={}){const t=o(),i=e?t+"-helper":void 0,n=a&&"none"!==a?t+"-message":void 0,r=[i,n].filter(Boolean).join(" ")||void 0;return{helperId:i,messageId:n,describedBy:r}}function PA({helperText:e,showHelper:a=!0,validation:t="none",validationMessage:i,withIcon:n=!0,helperId:r,messageId:o,className:l="",sx:s={},...c}){const d=a&&!!e,h="none"!==t&&!!i;return d||h?ce(u,{className:"form-helper "+l,sx:{display:"flex",flexDirection:"column",alignItems:"flex-start",gap:"var(--Sizing-Half)",...s},...c,children:[d&&le(Pi,{id:r,className:"form-helper-text",children:e}),h&&le(DA,{id:o,type:t,withIcon:n,children:i})]}):null}function HA({children:e,label:a,type:t="default",moreInfo:i,helperText:n,showHelper:r=!0,validation:o="none",validationMessage:l,orientation:s="vertical",disabled:c=!1,className:d="",sx:h={},...m}){const{helperId:p,messageId:f,describedBy:g}=FA({showHelper:r,validation:o});return ce(u,{component:"fieldset",disabled:c||void 0,className:"field-group field-group-"+s+" "+d,"aria-invalid":"error"===o||void 0,"aria-describedby":g,sx:{border:0,margin:0,padding:0,minInlineSize:0,display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)",...h},...m,children:[a&&le(LA,{as:"legend",type:t,moreInfo:i,disabled:c,children:a}),le(PA,{helperText:n,showHelper:r,validation:o,validationMessage:l,helperId:p,messageId:f}),le(u,{className:"field-group-options",sx:{display:"flex",flexDirection:"horizontal"===s?"row":"column",flexWrap:"horizontal"===s?"wrap":"nowrap",alignItems:"horizontal"===s?"center":"flex-start",gap:"var(--Sizing-1)"},children:e})]})}function OA({label:e,type:a="default",moreInfo:t,id:i,disabled:n=!1,className:r="",sx:l={},...s}){const c=o(),d=i||c;return ce(u,{className:"textarea-field "+r,sx:{display:"flex",flexDirection:"column",gap:"var(--Sizing-Half)",...l},children:[le(LA,{htmlFor:d,type:a,moreInfo:t,disabled:n,children:e}),le(dT,{id:d,disabled:n,"aria-required":"required"===a||void 0,...s})]})}function EA({layout:e="side",navItems:t=[{label:"Home",icon:le(Me,{}),path:"/"},{label:"About",icon:le(Fe,{}),path:"/about"},{label:"Settings",icon:le(Le,{}),path:"/settings"},{label:"Help",icon:le(Bt,{}),path:"/help"}],title:i="My App",children:n,onLayoutChange:r,onNavigate:o,sx:l={},...s}){const c=te(),d=ie(c.breakpoints.down("md"));ie(c.breakpoints.down("lg"));const[h,m]=a(!1),[p,f]=a(!1),g=d?"top":e,b=({compact:e=!1})=>le(U,{sx:{py:1},children:t.map((a,t)=>le(x,{title:e?a.label:"",placement:"right",children:ce(X,{onClick:()=>{o?.(a),m(!1)},sx:{color:"var(--Text)",...kB({muiPrefix:!0}),transition:"all 0.2s ease-in-out",justifyContent:e?"center":"flex-start",px:e?1:2},children:[le(J,{sx:{color:"var(--Icons-Primary)",minWidth:e?"auto":40,mr:e?0:1},children:a.icon}),!e&&le(Z,{primary:a.label})]})},t))});return ce(u,{sx:{minHeight:"100vh",backgroundColor:"var(--Background)",color:"var(--Text)",display:"flex",flexDirection:"column",...l},...s,children:[le(ne,{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:ce(re,{children:[d&&"rail"!==g&&le(ob,{variant:"ghost",onClick:()=>m(!h),"aria-label":h?"Close navigation":"Open navigation",sx:{mr:2},children:le(h?Ua:ja,{})}),le(Q,{variant:"h6",sx:{flex:1,fontWeight:700},children:i}),!d&&r&&ce(oe,{value:e,exclusive:!0,onChange:(e,a)=>{a&&r(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"})]})]})}),ce(u,{sx:{display:"flex",flex:1},children:[("rail"===g||"side-rail"===g)&&!d&&le(u,{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&&ce(u,{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:[ce(u,{sx:{p:2,display:"flex",alignItems:"center",justifyContent:"space-between",borderBottom:"1px solid var(--Border-Variant)",minHeight:64},children:[!p&&le(Q,{variant:"h6",sx:{fontWeight:700,color:"var(--Text)"},children:"Menu"}),le(ob,{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&&ce(_,{anchor:"left",open:h,onClose:()=>m(!1),sx:{"& .MuiDrawer-paper":{backgroundColor:"var(--Container)",width:280}},children:[le(u,{sx:{p:2,borderBottom:"1px solid var(--Border-Variant)"},children:le(Q,{variant:"h6",sx:{fontWeight:700},children:"Menu"})}),le(b,{compact:!1})]}),le(u,{sx:{flex:1,overflow:"auto",backgroundColor:"var(--Background)"},children:le(N,{maxWidth:"lg",sx:{py:4},children:n})})]})]})}const VA=[{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)"}],QA={desktop:"Desktop","ios-mobile":"IOS-Mobile","ios-tablet":"IOS-Tablet",android:"Android"};function jA(e){const a=QA[e]||"Desktop";document.documentElement.setAttribute("data-device",a),document.documentElement.setAttribute("data-platform",a)}function qA(){const{isDark:e,toggleDarkMode:i}=zS(),n=e?"dark":"light",r=a=>{"dark"===a!==e&&i();try{localStorage.setItem("themeMode",a)}catch{}},[o,l]=a(!1),[s,c]=a("desktop");t(()=>{const e=localStorage.getItem("dino-platform")||"desktop";c(e),jA(e)},[]);const d=e=>{c(e),localStorage.setItem("dino-platform",e),jA(e)};return ce(se,{children:[le(u,{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(MS,{anchor:"right",open:o,onClose:()=>l(!1),hideBackdrop:!0,size:"small",sx:{width:320,zIndex:99999999},children:ce(u,{sx:{p:3,height:"100%",display:"flex",flexDirection:"column"},children:[ce(u,{sx:{display:"flex",justifyContent:"space-between",alignItems:"center",mb:2},children:[le(di,{children:"Settings"}),le(nb,{iconOnly:!0,variant:"ghost",size:"small",onClick:()=>l(!1),"aria-label":"Close settings",children:le(ve,{fontSize:"small"})})]}),le(K,{sx:{mb:3,borderColor:"var(--Border)"}}),le(u,{sx:{flex:1,overflowY:"auto"},children:ce(m,{spacing:4,children:[ce(u,{children:[le(Oi,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"MODE"}),ce(m,{direction:"row",spacing:1,children:[le(nb,{variant:"light"===n?"primary":"primary-outline",size:"small",onClick:()=>r("light"),sx:{flex:1},children:"Light"}),le(nb,{variant:"dark"===n?"primary":"primary-outline",size:"small",onClick:()=>r("dark"),sx:{flex:1},children:"Dark"})]})]}),ce(u,{children:[le(Oi,{style:{color:"var(--Text)",opacity:.85,display:"block",marginBottom:12,fontWeight:600},children:"PLATFORM"}),le(m,{spacing:1,children:VA.map(({value:e,label:a,note:t})=>{const i=s===e;return ce(u,{onClick:()=>d(e),sx:{p:1.5,borderRadius:"var(--Style-Border-Radius)",cursor:"pointer",border:i?"2px solid var(--Buttons-Primary-Button)":"1px solid var(--Border)",backgroundColor:i?"var(--Background)":"transparent",display:"flex",justifyContent:"space-between",alignItems:"center",transition:"all 0.15s ease","&:hover":{backgroundColor:"var(--Hover)"}},children:[ce(u,{children:[le(xi,{style:{color:i?"var(--Buttons-Primary-Button)":"var(--Text)",fontWeight:i?600:400},children:a}),le(Li,{style:{color:"var(--Text)",opacity:.7},children:t})]}),i&&le(u,{sx:{width:8,height:8,borderRadius:"50%",backgroundColor:"var(--Buttons-Primary-Button)",flexShrink:0}})]},e)})})]})]})}),le(K,{sx:{my:3,borderColor:"var(--Border)"}}),le(nb,{variant:"primary-outline",size:"small",onClick:()=>{d("desktop"),r("light")},sx:{width:"100%"},children:"Reset to Defaults"})]})})]})}const GA=e=>(e||[]).map(e=>{const a="number"==typeof e?e:Number(e?.value);return Number.isFinite(a)?a:0}),UA=e=>(e||[]).map((e,a)=>"number"==typeof e?String(a+1):e?.label??String(a+1));function YA(e,{fromZero:a=!0}={}){if(!e.length)return{min:0,max:1};let t=Math.min(...e),i=Math.max(...e);return a&&(t=Math.min(0,t)),i===t&&(i=t+1),{min:t,max:i}}const XA=(e,{min:a,max:t},i,n)=>i+n-(e-a)/(t-a)*n;function JA(e,a,t,{inset:i=0}={}){if(e<=0)return[];if(1===e)return[a+t/2];const n=(t-2*i)/(e-1);return Array.from({length:e},(e,t)=>a+i+t*n)}function ZA(e,a,t,{gapRatio:i=.4}={}){if(e<=0)return{centres:[],bandWidth:0};const n=t/e,r=n*(1-i);return{centres:Array.from({length:e},(e,t)=>a+n*t+n/2),bandWidth:r}}const $A=e=>e.length?e.map((e,a)=>`${a?"L":"M"}${e.x} ${e.y}`).join(" "):"";function KA(e,{tension:a=0}={}){if(e.length<2)return $A(e);const t=(1-a)/6;let i=`M${e[0].x} ${e[0].y}`;for(let a=0;a<e.length-1;a++){const n=e[a-1]||e[a],r=e[a],o=e[a+1],l=e[a+2]||o,s={x:r.x+(o.x-n.x)*t,y:r.y+(o.y-n.y)*t},c={x:o.x-(l.x-r.x)*t,y:o.y-(l.y-r.y)*t};i+=` C${s.x} ${s.y} ${c.x} ${c.y} ${o.x} ${o.y}`}return i}const _A=(e,a,t)=>e&&a.length?`${e} L${a[a.length-1].x} ${t} L${a[0].x} ${t} Z`:"";function eL(e,a,t,i,n,r){const o=r-n;if(o>=2*Math.PI-1e-9){const r=n+Math.PI;return eL(e,a,t,i,n,r)+" "+eL(e,a,t,i,r,n+2*Math.PI)}const l=(t,i)=>({x:e+t*Math.sin(i),y:a-t*Math.cos(i)}),s=o>Math.PI?1:0,c=l(i,n),d=l(i,r);if(t<=0)return`M${e} ${a} L${c.x} ${c.y} A${i} ${i} 0 ${s} 1 ${d.x} ${d.y} Z`;const h=l(t,r),u=l(t,n);return`M${c.x} ${c.y} A${i} ${i} 0 ${s} 1 ${d.x} ${d.y} L${h.x} ${h.y} A${t} ${t} 0 ${s} 0 ${u.x} ${u.y} Z`}function aL(e,{startAngle:a=0}={}){const t=e.map(e=>e>0?e:0),i=t.reduce((e,a)=>e+a,0),n=e.filter(e=>e<=0).length;if(i<=0)return{slices:[],total:0,dropped:n};let r=a;return{slices:t.map(e=>{const a=e/i*Math.PI*2,t={start:r,end:r+a,value:e,fraction:e/i};return r+=a,t}),total:i,dropped:n}}function tL({min:e,max:a},t=4){if(t<1)return[];const i=(a-e)/t,n=Math.pow(10,Math.floor(Math.log10(Math.abs(i)||1))),r=[1,2,2.5,5,10].map(e=>e*n).find(e=>e>=i)??10*n,o=[];for(let t=Math.ceil(e/r)*r;t<=a+1e-9;t+=r)o.push(Number(t.toFixed(10)));return o}var iL=Object.freeze({__proto__:null,arcPath:eL,areaPath:_A,bands:JA,extent:YA,linePath:$A,scaleY:XA,sliceAngles:aL,slots:ZA,smoothPath:KA,ticks:tL,toLabels:UA,toNumbers:GA});const nL={fill:"var(--Icons-Primary)",track:"var(--Border-Variant)",line:"var(--Border-Variant)",quietLabel:"var(--Quiet)",label:"var(--Text)",gradient:"var(--Icons-Primary-Variant)"},rL=["Primary","Secondary","Tertiary","Neutral","Info","Success","Warning","Error"],oL={fontFamily:"var(--Label-Small-Font-Family)",fontSize:"var(--Label-Small-Font-Size)",fontWeight:"var(--Label-Small-Font-Weight)",letterSpacing:"var(--Label-Small-Letter-Spacing)"},lL={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 sL({caption:e,labels:a,values:t,valueHeader:i="Value"}){return ce(u,{component:"table",sx:lL,children:[le("caption",{children:e}),le("thead",{children:ce("tr",{children:[le("th",{scope:"col",children:"Category"}),le("th",{scope:"col",children:i})]})}),le("tbody",{children:t.map((e,t)=>ce("tr",{children:[le("th",{scope:"row",children:a[t]}),le("td",{children:e})]},t))})]})}const cL="var(--Motion-Duration-Slow, 300ms) var(--Motion-Easing-Enter, cubic-bezier(0, 0, 0, 1))",dL="var(--Motion-Duration-Fast, 150ms) var(--Motion-Easing-Standard, cubic-bezier(0.2, 0, 0, 1))";function hL(a){const[t,i]=e.useState(-1),n=e.useCallback(e=>({onMouseEnter:()=>i(e),onMouseLeave:()=>i(a=>a===e?-1:a),onFocus:()=>i(e),onBlur:()=>i(a=>a===e?-1:a)}),[]);return e.useEffect(()=>{i(e=>e>=a?-1:e)},[a]),{active:t,setActive:i,handlers:n}}function uL({count:e,width:a,centres:t,bandWidth:i,labels:n,values:r,handlers:o}){return e?le(u,{sx:{position:"absolute",inset:0,display:"block",pointerEvents:"none"},children:Array.from({length:e},(e,l)=>le(u,{component:"button",type:"button","aria-label":`${n[l]}: ${r[l]}`,...o(l),sx:{position:"absolute",top:0,height:"100%",left:(t[l]-i/2)/a*100+"%",width:i/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 mL({x:e,y:a,text:t,width:i,tokens:n}){if(null==t)return null;const r=Math.max(28,8*String(t).length+14),o=Math.min(Math.max(e,r/2+2),i-r/2-2),l=a-26>=2?a-26:a+6;return ce("g",{pointerEvents:"none",children:[le("rect",{x:o-r/2,y:l,width:r,height:20,rx:6,fill:n.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 pL({data:e=[],showTrack:i=!0,rounded:n=!0,showValues:r=!1,showLabels:o=!0,animate:l=!0,interactive:s=!0,height:c=200,gapRatio:d=.4,label:h,className:m="",sx:p={},...f}){const g=GA(e),b=UA(e),{active:v,handlers:x}=hL(g.length),[y,z]=a(!l);t(()=>{if(!l)return;const e=requestAnimationFrame(()=>z(!0));return()=>cancelAnimationFrame(e)},[l]);const w=320,S=r?20:8,k=o?22:8,C=Math.max(0,c-S-k),B=YA(g,{fromZero:!0}),{centres:T,bandWidth:M}=ZA(g.length,0,w,{gapRatio:d}),A=S+C,L=n?M/2:0,I=g.length?w/g.length:0;return ce(u,{component:"figure",className:"bar-chart "+m,sx:{display:"block",width:"100%",m:0,position:"relative",...p},...f,children:[ce("svg",{viewBox:`0 0 320 ${c}`,width:"100%",height:c,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[s&&v>=0&&le("rect",{x:T[v]-I/2,y:0,width:I,height:c,fill:"var(--Hover)",rx:6}),g.map((e,a)=>{const t=T[a]-M/2,n=XA(e,B,S,C),r=Math.max(0,A-n);return ce("g",{children:[i&&le("rect",{x:t,y:S,width:M,height:C,rx:L,ry:L,fill:nL.track}),r>0&&le("rect",{x:t,y:n,width:M,height:r,rx:Math.min(L,r/2),ry:Math.min(L,r/2),fill:nL.fill,style:{transformBox:"fill-box",transformOrigin:"bottom",transform:y?"scaleY(1)":"scaleY(0)",transition:`transform ${cL}`}})]},a)}),r&&g.map((e,a)=>le("text",{x:T[a],y:XA(e,B,S,C)-6,textAnchor:"middle",fill:nL.label,...oL,children:e},"v"+a)),o&&b.map((e,a)=>le("text",{x:T[a],y:c-6,textAnchor:"middle",fill:nL.quietLabel,...oL,children:e},"l"+a)),s&&v>=0&&!r&&le(mL,{x:T[v],y:XA(g[v],B,S,C),text:g[v],width:w,tokens:nL})]}),s&&le(uL,{count:g.length,width:w,centres:T,bandWidth:I,labels:b,values:g,handlers:x}),le(sL,{caption:h||`Bar chart, ${g.length} values`,labels:b,values:g})]})}function fL({data:e=[],curve:i="smooth",gradient:n=!0,fromZero:r=!1,showGrid:l=!1,showLabels:s=!1,animate:c=!0,interactive:d=!0,height:h=200,strokeWidth:m=3,tension:p=0,label:f,className:g="",sx:b={},...v}){const x="lc-"+o().replace(/:/g,""),y=GA(e),z=UA(e),{active:w,handlers:S}=hL(y.length),[k,C]=a(!c);t(()=>{if(!c)return;const e=requestAnimationFrame(()=>C(!0));return()=>cancelAnimationFrame(e)},[c]);const B=320,T=s?22:8,M=Math.max(0,h-8-T),A=YA(y,{fromZero:r}),L=JA(y.length,0,B,{inset:m}),I=y.map((e,a)=>({x:L[a],y:XA(e,A,8,M)})),N="straight"===i?$A(I):KA(I,{tension:p}),W=8+M;return ce(u,{component:"figure",className:"line-chart "+g,sx:{display:"block",width:"100%",m:0,position:"relative",...b},...v,children:[ce("svg",{viewBox:`0 0 320 ${h}`,width:"100%",height:h,preserveAspectRatio:"none",focusable:"false","aria-hidden":"true",children:[n&&le("defs",{children:ce("linearGradient",{id:x,x1:"0",y1:"0",x2:"0",y2:"1",children:[le("stop",{offset:"0%",stopColor:nL.gradient,stopOpacity:"1"}),le("stop",{offset:"100%",stopColor:nL.gradient,stopOpacity:"0"})]})}),l&&tL(A,4).map(e=>le("line",{x1:0,x2:B,y1:XA(e,A,8,M),y2:XA(e,A,8,M),stroke:nL.line,strokeWidth:"1"},e)),n&&I.length>1&&le("path",{d:_A(N,I,W),fill:`url(#${x})`,style:{opacity:k?1:0,transition:`opacity ${cL}`}}),I.length>1&&le("path",{d:N,fill:"none",stroke:nL.fill,strokeWidth:m,strokeLinecap:"round",strokeLinejoin:"round",pathLength:"1",style:{strokeDasharray:1,strokeDashoffset:k?0:1,transition:`stroke-dashoffset ${cL}`}}),1===I.length&&le("circle",{cx:I[0].x,cy:I[0].y,r:m,fill:nL.fill}),d&&w>=0&&ce(se,{children:[le("line",{x1:L[w],x2:L[w],y1:8,y2:W,stroke:nL.line,strokeWidth:"1"}),le("circle",{cx:I[w].x,cy:I[w].y,r:m+1,fill:nL.fill,stroke:"var(--Background)",strokeWidth:"2"}),le(mL,{x:I[w].x,y:I[w].y,text:y[w],width:B,tokens:nL})]}),s&&z.map((e,a)=>le("text",{x:L[a],y:h-6,textAnchor:"middle",fill:nL.quietLabel,...oL,children:e},a))]}),d&&le(uL,{count:y.length,width:B,centres:L,bandWidth:y.length?B/y.length:0,labels:z,values:y,handlers:S}),le(sL,{caption:f||`Line chart, ${y.length} points`,labels:z,values:y})]})}function gL({data:e=[],donut:i=!1,donutRatio:n=.6,colors:r=rL,separatorWidth:o=2,size:l=200,showLabels:s=!1,animate:c=!0,interactive:d=!0,label:h,className:m="",sx:p={},...f}){const g=GA(e),b=UA(e),{slices:v,total:x,dropped:y}=aL(g),{active:z,handlers:w}=hL(g.length),[S,k]=a(!c);t(()=>{if(!c)return;const e=requestAnimationFrame(()=>k(!0));return()=>cancelAnimationFrame(e)},[c]);const C=l/2,B=l/2,T=l/2-1,M=i?T*n:0,A=e=>{return{fill:`var(--Icons-${a=r[e%r.length]})`,onFill:`var(--Icons-On-${a})`};var a};return ce(u,{component:"figure",className:"pie-chart "+m,sx:{display:"block",m:0,position:"relative",...p},...f,children:[ce("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,i=d&&z===a?4:0;return le("path",{d:eL(C,B,M,T,e.start,e.end),fill:A(a).fill,stroke:"var(--Background)",strokeWidth:o,strokeLinejoin:"round",...d?w(a):{},style:{transform:`translate(${i*Math.sin(t)}px, ${-i*Math.cos(t)}px) scale(${S?1:0})`,transformOrigin:`${C}px ${B}px`,transformBox:"view-box",transition:`transform ${S?dL:cL}`}},a)}),s&&v.map((e,a)=>{const t=(e.start+e.end)/2,i=M+.62*(T-M);return e.fraction<.07?null:le("text",{x:C+i*Math.sin(t),y:B-i*Math.cos(t),textAnchor:"middle",dominantBaseline:"middle",fill:A(a).onFill,...oL,children:b[a]},a)})]}),le(sL,{caption:(h||`${i?"Donut":"Pie"} chart, ${v.length} segments`)+(y?`, ${y} non-positive values omitted`:""),labels:b,values:g})]})}const bL=[{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 vL(){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 bL)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 xL=e=>e.replace(/\|/g,"\\|"),yL=(e,a)=>[`| ${e.join(" | ")} |`,`| ${e.map(()=>"---").join(" | ")} |`,...a.map(e=>`| ${e.map(xL).join(" | ")} |`)],zL=(e,a)=>a.length?[`### ${e}`,"",...a.map(e=>`- ${e}`),""]:[];function wL(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(...yL(["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(...yL(["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(...yL(["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(...yL(["Token","Sets","Varies with","Figma variable"],e.tokens.map(e=>[`\`${e.name}\``,e.sets,e.variesWith,"—"===e.figma?"—":`\`${e.figma}\``]))),t.push("")),t.push(...zL("Composition",e.composition)),t.push(...zL("Accessibility",e.accessibility)),t.push(...zL("Gotchas",e.gotchas));const i=a;return i.length&&t.push(...i,""),t.join("\n").replace(/\n{3,}/g,"\n\n").trimEnd()+"\n"}var SL={};export{Ow as Accordion,jw as AccordionDetails,Hw as AccordionGroup,Qw as AccordionSummary,pv as Alert,Nk as AlertDialog,Mv as AlertShowcase,ii as AltDisplayLarge,ni as AltDisplayMedium,ri as AltDisplaySmall,FS as AppBar,GS as AppBarShowcase,XS as Autocomplete,ek as AutocompleteShowcase,Lg as Avatar,Ig as AvatarGroup,ex as AvatarShowcase,Og as Badge,hv as BadgeShowcase,pL as BarChart,uy as BevelText,by as BevelTextShowcase,XT as BlackWhiteToggleButtonGroup,wi as Body,Ci as Body1,Bi as Body2,ki as BodyBold,Ti as BodyLarge,Ai as BodyLargeBold,Mi as BodyLargeSemibold,Si as BodySemibold,xi as BodySmall,zi as BodySmallBold,yi as BodySmallSemibold,ck as BottomNavigation,wk as BottomNavigationShowcase,Fz as Box,Ez as BoxShowcase,Wf as BrandIcon,mw as BreadcrumbItem,uw as Breadcrumbs,gw as BreadcrumbsShowcase,nb as Button,Ww as ButtonGroup,$i as ButtonSmall,Ki as ButtonText,_t as CAP_HEIGHT_TRIM,oL as CHART_LABEL_TYPE,nL as CHART_TOKENS,bL as COLOR_COLLECTIONS,bL as COLOUR_COLLECTIONS,Sg as COMPONENT_DOCS,Li as Caption,Ii as CaptionBold,Nv as Card,pz as CenteredStack,Uv as Checkbox,fb as Chip,$z as CircularProgress,tw as CircularProgressShowcase,nv as CodeBlock,SA as Colors,Gy as Container,iv as CopyButton,iz as Copyright,sz as CopyrightShowcase,ey as CurvedText,dy as CurvedTextShowcase,Cg as DEFAULT_AVATAR_SRC,jk as DEFAULT_ITEMS,aA as DOCS_ORIGIN,jT as DefaultToggleButtonGroup,DS as DesktopAppBar,Ik as Dialog,Rk as DialogShowcase,ei as DisplayLarge,ai as DisplayMedium,ti as DisplaySmall,kx as Divider,uC as DotsLoader,MS as Drawer,AS as DrawerClose,IS as DrawerContent,LS as DrawerHeader,Jk as DrawerShowcase,$k as DropZone,wC as Dropdown,hz as DynoStack,Qk as DynoTreeView,YM as EXAMPLES,nT as EmailTextField,Oy as ErrorTag,KT as ErrorToggleButtonGroup,Ei as Eyebrow,Qi as EyebrowLarge,Vi as EyebrowMedium,Oi as EyebrowSmall,RA as FORM_HELPER_VALIDATIONS,AA as FORM_LABEL_MARKERS,yA as FOUNDATIONS,ux as Fab,xx as FabShowcase,HA as FieldGroup,kz as Footer,Dz as FooterShowcase,Wk as FormDialog,PA as FormHelper,LA as FormLabel,Lt as Ghost,wy as Gradient,My as Grid,xz as GridStack,oi as H1,li as H2,si as H3,ci as H4,di as H5,hi as H6,uz as HStack,ui as Heading,WA as INPUT_MESSAGE_TYPES,Ff as Icon,aC as IconBadge,MA as IconBadgeShowcase,dx as IconShowcase,Fy as InfoTag,JT as InfoToggleButtonGroup,DA as InputMessage,zz as InsetStack,Ri as Label,Wi as LabelExtraSmall,Fi as LabelLarge,Di as LabelSmall,Pi as Legal,Hi as LegalSemibold,Gk as LightTreeView,fL as LineChart,Sy as LinearGradient,dC as LinearLoader,jz as LinearProgress,Xz as LinearProgressShowcase,mn as Link,lC as List,oC as ListItem,rC as ListItemDecorator,cC as Loader,IA as MESSAGE_ICONS,EA as MainLayout,kC as Menu,SC as MenuButton,BC as MenuDivider,CC as MenuItem,IC as MenuShowcase,By as MeshCardGradient,Cy as MeshGradient,Ty as MiniSwatch,RS as MobileAppBar,Ni as MobileNavLabel,PC as Modal,Ry as NeutralTag,YT as NeutralToggleButtonGroup,rz as NumberField,lw as NumberFieldShowcase,Ji as NumberLarge,Xi as NumberMedium,Yi as NumberSmall,lT as NumberTextField,yS as OmniDesignProvider,hz as OmniStack,Qk as OmniTreeView,fC as OverlayLoader,qi as Overline,Ui as OverlineLarge,Gi as OverlineMedium,ji as OverlineSmall,mC as PageLoader,vw as Pagination,Sw as PaginationShowcase,HC as Paper,rT as PasswordTextField,sT as PhoneTextField,gL as PieChart,$C as Player,OC as Popover,Ny as PrimaryTag,qT as PrimaryToggleButtonGroup,KC as RATIO_NAMES,ky as RadialGradient,Hx as Radio,Ox as RadioGroup,Ex as RadioInput,qC as Rail,JC as RailShowcase,Gx as RangeSlider,dw as Rating,dw as RatingInput,tB as Ratio,cB as RatioShowcase,bz as ResponsiveStack,wz as ScrollStack,oS as SearchField,pB as SearchFieldShowcase,oT as SearchTextField,Wy as SecondaryTag,GT as SecondaryToggleButtonGroup,Uy as Section,Yy as SectionShowcase,eg as Select,zB as SelectShowcase,Dv as SelectableCard,qA as SettingsPanel,CB as Sidebar,pC as SkeletonCard,hC as SkeletonLoader,qx as Slider,qx as SliderInput,MB as Snackbar,DB as SnackbarShowcase,qk as SolidTreeView,fz as SpaceBetweenStack,kA as Spacing,Jy as SpeedDial,az as SpeedDialShowcase,vz as Stack,yz as StackDivider,Jw as StackShowcase,PB as StateMessage,jB as Step,QB as Stepper,JB as StepperShowcase,pi as Subtitle,bi as Subtitle1,vi as Subtitle2,mi as SubtitleLarge,gi as SubtitleMedium,fi as SubtitleSmall,Py as SuccessTag,ZT as SuccessToggleButtonGroup,SS as Surfaced,_B as Swatch,zv as Switch,zv as SwitchInput,Ay as TAG_COLORS,Ly as TAG_COLOR_TOKEN_MAP,Ab as Tab,Mb as TabList,Lb as TabPanel,tT as Table,Tb as Tabs,Aw as TabsShowcase,Iy as Tag,qy as TagShowcase,Dy as TertiaryTag,UT as TertiaryToggleButtonGroup,dT as TextArea,OA as TextAreaField,iT as TextField,hT as TextFieldGroup,Wx as TextInput,wS as ThemedZone,eM as ToggleButton,VT as ToggleButtonGroup,pT as Toolbar,vT as ToolbarShowcase,ST as Tooltip,BT as TreeBranch,PT as TreeViewShowcase,Kt as Typography,cT as URLTextField,mz as VStack,Hy as WarningTag,$T as WarningToggleButtonGroup,gz as WrapStack,iL as chartGeometry,nA as componentDocsIndexUrl,iA as componentDocsUrl,SL as default,tA as docsSlug,ZC as formatTime,At as ghostBlockSx,XM as hasExample,vL as renderColorSystem,vL as renderColourSystem,wL as renderComponentDoc,zA as renderFoundations,FA as useFormHelperIds,Mt as useGhost,zS as useOmniDesign,VB as useStepperContext,Bb as useTabsContext};
20
20
  //# sourceMappingURL=index.esm.js.map