npm - fufa-comlib - Versions diffs - 0.0.2 → 0.0.4 - Mend

fufa-comlib 0.0.2 → 0.0.4

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 (4) hide show

package/dist/fufa-comlib.umd.js CHANGED Viewed

	@@ -1 +1 @@
1	- !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e\|\|self).FufaComlib={},e.jsxRuntime,e.React)}(this,function(e,t,l){"use strict";const s={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},a={circle:"rounded-full",rounded:"rounded-lg"};const n={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function r({text:e,tone:l="neutral",className:s,...a}){return t.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",n[l],s].filter(Boolean).join(" "),...a,children:e})}const i={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},o={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function c({label:e,variant:l="secondary",size:s="medium",className:a,type:n="button",...r}){return t.jsx("button",{type:n,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",i[l],o[s],a].filter(Boolean).join(" "),...r,children:e})}const d={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const m={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const u={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const x={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const f={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const h={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const b={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const p={small:"h-5 w-9",medium:"h-6 w-11"},g={small:"h-4 w-4",medium:"h-5 w-5"},j={small:"translate-x-4",medium:"translate-x-5"};const N={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},v={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function w({label:e,id:l,className:s,...a}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[e?t.jsx("label",{htmlFor:l,className:"text-sm font-medium text-slate-700",children:e}):null,t.jsx("input",{id:l,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",s].filter(Boolean).join(" "),...a})]})}const y={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function B({value:e,onValueChange:l,onSearch:s,placeholder:a="Search components…"}){return t.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[t.jsx(w,{id:"search",label:"Search",placeholder:a,value:e,onChange:e=>l(e.target.value)}),t.jsx(c,{label:"Search",variant:"primary",onClick:s})]})}function k({productName:e,userName:l,onLogin:s,onLogout:a}){return t.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:t.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[t.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:e}),l?t.jsxs("div",{className:"flex items-center gap-3",children:[t.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",l]}),t.jsx(c,{size:"small",label:"Log out",onClick:a})]}):t.jsx(c,{size:"small",variant:"primary",label:"Log in",onClick:s})]})})}function C({productName:e,userName:l,onLogin:s,onLogout:a,children:n}){return t.jsxs("div",{className:"min-h-screen bg-slate-50",children:[t.jsx(k,{productName:e,userName:l,onLogin:s,onLogout:a}),t.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:n})]})}const L=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];e.AppHeader=k,e.Avatar=function({name:e,src:l,alt:n,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[t,l]=e.trim().split(/\s+/,2);return`${t?.[0]??""}${l?.[0]??""}`.toUpperCase()}(e);return l?t.jsx("img",{src:l,alt:n??e,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",s[r],a[i],o].filter(Boolean).join(" "),...c}):t.jsx("span",{"aria-label":e,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",s[r],a[i],o].filter(Boolean).join(" "),children:d})},e.Badge=r,e.Button=c,e.Card=function({title:e,description:l,footer:s,children:a,variant:n="outlined",className:r,...i}){return t.jsxs("article",{className:["w-full rounded-xl p-5",d[n],r].filter(Boolean).join(" "),...i,children:[t.jsxs("header",{className:"mb-3 space-y-1",children:[t.jsx("h3",{className:"text-base font-semibold text-slate-900",children:e}),l?t.jsx("p",{className:"text-sm text-slate-600",children:l}):null]}),a?t.jsx("div",{className:"text-sm text-slate-700",children:a}):null,s?t.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:s}):null]})},e.Checkbox=function({label:e,description:l,size:s="medium",className:a,id:n,...r}){return t.jsxs("label",{htmlFor:n,className:"inline-flex cursor-pointer items-start gap-3",children:[t.jsx("input",{id:n,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",m[s],a].filter(Boolean).join(" "),...r}),t.jsxs("span",{className:"space-y-0.5",children:[t.jsx("span",{className:"block text-sm font-medium text-slate-800",children:e}),l?t.jsx("span",{className:"block text-xs text-slate-500",children:l}):null]})]})},e.Chip=function({label:e,variant:l="soft",tone:s="neutral",onRemove:a,className:n,...r}){return t.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",u[s][l],n].filter(Boolean).join(" "),...r,children:[t.jsx("span",{children:e}),a?t.jsx("button",{type:"button",onClick:a,"aria-label":`Remove ${e}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},e.DashboardTemplate=C,e.Divider=function({label:e,orientation:l="horizontal",className:s,...a}){return"vertical"===l?t.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",s].filter(Boolean).join(" "),...a}):e?t.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",s].filter(Boolean).join(" "),...a,children:[t.jsx("span",{className:"h-px flex-1 bg-slate-200"}),t.jsx("span",{children:e}),t.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):t.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",s].filter(Boolean).join(" "),...a})},e.HomePage=function(){const[e,s]=l.useState(""),[a,n]=l.useState("Jane Doe"),i=l.useMemo(()=>L.filter(t=>`${t.name} ${t.level}`.toLowerCase().includes(e.trim().toLowerCase())),[e]);return t.jsxs(C,{productName:"FutureFace Design System",userName:a,onLogin:()=>n("Jane Doe"),onLogout:()=>n(void 0),children:[t.jsxs("section",{className:"space-y-5",children:[t.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),t.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),t.jsx(B,{value:e,onValueChange:s})]}),t.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:i.map(e=>t.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[t.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[t.jsx("h3",{className:"font-medium text-slate-800",children:e.name}),t.jsx(r,{text:e.ready?"Ready":"Planned",tone:e.ready?"success":"warning"})]}),t.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",e.level]})]},e.name))})]})},e.List=function({items:e,variant:l="unordered",dense:s=!1,className:a,...n}){const r=s?"space-y-1":"space-y-2";return"ordered"===l?t.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsx("li",{children:e},e))}):"check"===l?t.jsx("ul",{className:["text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsxs("li",{className:"flex items-start gap-2",children:[t.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),t.jsx("span",{children:e})]},e))}):t.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:e.map(e=>t.jsx("li",{children:e},e))})},e.Rating=function({value:e,max:l=5,size:s="medium",readOnly:a=!1,onValueChange:n}){return t.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:l},(l,r)=>{const i=r+1,o=i<=e;return t.jsx("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:a,onClick:()=>n?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",x[s],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})},e.SearchBar=B,e.Select=function({id:e,label:l,options:s,placeholder:a,variant:n="default",className:r,...i}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?t.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:l}):null,t.jsxs("select",{id:e,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",f[n],r].filter(Boolean).join(" "),...i,children:[a?t.jsx("option",{value:"",children:a}):null,s.map(e=>t.jsx("option",{value:e.value,children:e.label},e.value))]})]})},e.Skeleton=function({variant:e="text",width:l,height:s,animated:a=!0,className:n,style:r,...i}){return t.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",a?"animate-pulse":"",h[e],n].filter(Boolean).join(" "),style:{...r,width:l,height:s},...i})},e.Slider=function({id:e,label:l,variant:s="neutral",className:a,...n}){return t.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?t.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:l}):null,t.jsx("input",{id:e,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",b[s],a].filter(Boolean).join(" "),...n})]})},e.Switch=function({checked:e,label:l,onCheckedChange:s,size:a="medium",className:n,...r}){return t.jsxs("div",{className:"inline-flex items-center gap-3",children:[t.jsx("button",{type:"button",role:"switch","aria-checked":e,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",p[a],e?"bg-slate-900":"bg-slate-300",n].filter(Boolean).join(" "),onClick:()=>s?.(!e),...r,children:t.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",g[a],e?j[a]:"translate-x-0.5"].filter(Boolean).join(" ")})}),l?t.jsx("span",{className:"text-sm text-slate-700",children:l}):null]})},e.Table=function({columns:e,rows:l,variant:s="default",className:a,...n}){return t.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",a].filter(Boolean).join(" "),...n,children:t.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[t.jsx("thead",{className:"bg-slate-50 text-slate-600",children:t.jsx("tr",{children:e.map(e=>t.jsx("th",{className:`${v[s]} font-semibold`,children:e.title},e.key))})}),t.jsx("tbody",{className:"text-slate-700",children:l.map(l=>t.jsx("tr",{className:N[s],children:e.map(e=>t.jsx("td",{className:v[s],children:l[e.key]},`${l.id}-${e.key}`))},l.id))})]})})},e.TextInput=w,e.Tooltip=function({content:e,children:l,placement:s="top",className:a,...n}){return t.jsxs("div",{className:["group relative inline-flex",a].filter(Boolean).join(" "),...n,children:[l,t.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",y[s]].join(" "),children:e})]})}});
1	+ !function(n,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],e):e((n="undefined"!=typeof globalThis?globalThis:n\|\|self).FufaComlib={},n.jsxRuntime,n.React)}(this,function(n,e,t){"use strict";!function(n,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var a=document.head\|\|document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}('/! tailwindcss v4.1.18 \| MIT License \| https://tailwindcss.com /\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-xl: 36rem;\n --container-2xl: 42rem;\n --container-4xl: 56rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --leading-tight: 1.25;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-brand-900: #06462d;\n --color-gold-400: #d2a436;\n --color-gold-500: #bb8f2c;\n --color-surface-50: #f5f7f8;\n }\n}\n@layer base {\n , ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: calc(var(--spacing) 0);\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-full {\n right: 100%;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-full {\n left: 100%;\n }\n .isolate {\n isolation: isolate;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .float-left {\n float: left;\n }\n .float-right {\n float: right;\n }\n .\\!container {\n width: 100% !important;\n @media (width >= 40rem) {\n max-width: 40rem !important;\n }\n @media (width >= 48rem) {\n max-width: 48rem !important;\n }\n @media (width >= 64rem) {\n max-width: 64rem !important;\n }\n @media (width >= 80rem) {\n max-width: 80rem !important;\n }\n @media (width >= 96rem) {\n max-width: 96rem !important;\n }\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .\\!hidden {\n display: none !important;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .inline-grid {\n display: inline-grid;\n }\n .list-item {\n display: list-item;\n }\n .table {\n display: table;\n }\n .table-cell {\n display: table-cell;\n }\n .table-row {\n display: table-row;\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-24 {\n height: calc(var(--spacing) * 24);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-52 {\n height: calc(var(--spacing) * 52);\n }\n .h-80 {\n height: calc(var(--spacing) * 80);\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .min-h-72 {\n min-height: calc(var(--spacing) * 72);\n }\n .min-h-\\[22rem\\] {\n min-height: 22rem;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-11 {\n width: calc(var(--spacing) * 11);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-14 {\n width: calc(var(--spacing) * 14);\n }\n .w-56 {\n width: calc(var(--spacing) * 56);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[460px\\] {\n width: 460px;\n }\n .w-\\[520px\\] {\n width: 520px;\n }\n .w-\\[560px\\] {\n width: 560px;\n }\n .w-\\[640px\\] {\n width: 640px;\n }\n .w-\\[760px\\] {\n width: 760px;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-4xl {\n max-width: var(--container-4xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-xl {\n max-width: var(--container-xl);\n }\n .min-w-\\[460px\\] {\n min-width: 460px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-full {\n --tw-translate-x: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0\\.5 {\n --tw-translate-x: calc(var(--spacing) * 0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-4 {\n --tw-translate-x: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-5 {\n --tw-translate-x: calc(var(--spacing) * 5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-full {\n --tw-translate-x: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-full {\n --tw-translate-y: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .transform\\! {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-12 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .divide-y {\n :where(& > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n }\n .divide-slate-200 {\n :where(& > :not(:last-child)) {\n border-color: var(--color-slate-200);\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-amber-300 {\n border-color: var(--color-amber-300);\n }\n .border-emerald-300 {\n border-color: var(--color-emerald-300);\n }\n .border-gold-500\\/60 {\n border-color: color-mix(in srgb, #bb8f2c 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-gold-500) 60%, transparent);\n }\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-white\\/70 {\n border-color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n .bg-amber-100 {\n background-color: var(--color-amber-100);\n }\n .bg-amber-500 {\n background-color: var(--color-amber-500);\n }\n .bg-brand-900\\/60 {\n background-color: color-mix(in srgb, #06462d 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-brand-900) 60%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-600 {\n background-color: var(--color-emerald-600);\n }\n .bg-gold-400\\/15 {\n background-color: color-mix(in srgb, #d2a436 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-gold-400) 15%, transparent);\n }\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-slate-200 {\n background-color: var(--color-slate-200);\n }\n .bg-slate-300 {\n background-color: var(--color-slate-300);\n }\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-slate-950\\/25 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 25%, transparent);\n }\n }\n .bg-slate-950\\/45 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 45%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 45%, transparent);\n }\n }\n .bg-surface-50 {\n background-color: var(--color-surface-50);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/15 {\n background-color: color-mix(in srgb, #fff 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n }\n }\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-slate-950\\/35 {\n --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 35%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-slate-950\\/10 {\n --tw-gradient-to: color-mix(in srgb, oklch(12.9% 0.042 264.695) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-to: color-mix(in oklab, var(--color-slate-950) 10%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-5 {\n padding-block: calc(var(--spacing) * 5);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-10 {\n padding-block: calc(var(--spacing) * 10);\n }\n .py-14 {\n padding-block: calc(var(--spacing) * 14);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .leading-6 {\n --tw-leading: calc(var(--spacing) * 6);\n line-height: calc(var(--spacing) * 6);\n }\n .leading-7 {\n --tw-leading: calc(var(--spacing) * 7);\n line-height: calc(var(--spacing) * 7);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-wrap {\n text-wrap: wrap;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-amber-400 {\n color: var(--color-amber-400);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-current\\/80 {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 80%, transparent);\n }\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-slate-100 {\n color: var(--color-slate-100);\n }\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .lowercase {\n text-transform: lowercase;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .ordinal {\n --tw-ordinal: ordinal;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .overline {\n text-decoration-line: overline;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-2 {\n text-underline-offset: 2px;\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .accent-amber-500 {\n accent-color: var(--color-amber-500);\n }\n .accent-emerald-600 {\n accent-color: var(--color-emerald-600);\n }\n .accent-slate-800 {\n accent-color: var(--color-slate-800);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-slate-200 {\n --tw-ring-color: var(--color-slate-200);\n }\n .ring-slate-300 {\n --tw-ring-color: var(--color-slate-300);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter\\! {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n }\n .group-focus-within\\:opacity-100 {\n &:is(:where(.group):focus-within ) {\n opacity: 100%;\n }\n }\n .group-hover\\:scale-105 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-slate-400 {\n &::-moz-placeholder {\n color: var(--color-slate-400);\n }\n &::placeholder {\n color: var(--color-slate-400);\n }\n }\n .odd\\:bg-slate-50 {\n &:nth-child(odd) {\n background-color: var(--color-slate-50);\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-current {\n &:hover {\n @media (hover: hover) {\n color: currentcolor;\n }\n }\n }\n .hover\\:text-slate-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-slate-800 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-800);\n }\n }\n }\n .focus\\:border-slate-400 {\n &:focus {\n border-color: var(--color-slate-400);\n }\n }\n .focus\\:border-slate-500 {\n &:focus {\n border-color: var(--color-slate-500);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-slate-200 {\n &:focus {\n --tw-ring-color: var(--color-slate-200);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-slate-300 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-300);\n }\n }\n .focus-visible\\:ring-slate-400 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-400);\n }\n }\n .focus-visible\\:ring-slate-600 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-600);\n }\n }\n .focus-visible\\:ring-offset-2 {\n &:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:cursor-default {\n &:disabled {\n cursor: default;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-3 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n}\n@layer base {\n html,\n body,\n #root {\n min-height: 100vh;\n }\n body {\n margin: calc(var(--spacing) 0);\n background-color: var(--color-slate-50);\n color: var(--color-slate-900);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n }\n}\n@property --tw-translate-x {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: "";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "";\n inherits: false;\n}\n@property --tw-scale-x {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n , ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');const a={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},r={circle:"rounded-full",rounded:"rounded-lg"};const i={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function o({text:n,tone:t="neutral",className:a,...r}){return e.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",i[t],a].filter(Boolean).join(" "),...r,children:n})}const l={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},s={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function c({label:n,variant:t="secondary",size:a="medium",className:r,type:i="button",...o}){return e.jsx("button",{type:i,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",l[t],s[a],r].filter(Boolean).join(" "),...o,children:n})}const d={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const p={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const h={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const m={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const w={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const g={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const u={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const x={small:"h-5 w-9",medium:"h-6 w-11"},v={small:"h-4 w-4",medium:"h-5 w-5"},b={small:"translate-x-4",medium:"translate-x-5"};const f={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},y={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function k({label:n,id:t,className:a,...r}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[n?e.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:n}):null,e.jsx("input",{id:t,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",a].filter(Boolean).join(" "),...r})]})}const j={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function N({imageSrc:n,imageAlt:t,title:a,description:r,meta:i,primaryActionLabel:o="تقدم الآن",secondaryActionLabel:l="لمعرفة المزيد",onPrimaryAction:s,onSecondaryAction:d}){return e.jsxs("article",{className:"overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[e.jsx("img",{src:n,alt:t,className:"h-52 w-full object-cover"}),e.jsxs("div",{className:"space-y-3 p-4",children:[e.jsx("h3",{className:"text-lg font-semibold text-slate-900",children:a}),e.jsx("p",{className:"text-sm leading-6 text-slate-600",children:r}),i?e.jsx("p",{className:"text-xs text-slate-500",children:i}):null,e.jsxs("div",{className:"flex items-center justify-end gap-2 pt-2",children:[l?e.jsx(c,{label:l,variant:"secondary",size:"small",onClick:d}):null,o?e.jsx(c,{label:o,variant:"primary",size:"small",onClick:s}):null]})]})]})}function z({title:n,description:t,actionLabel:a,onAction:r}){return e.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-4",dir:"rtl",children:[e.jsxs("div",{className:"space-y-2",children:[e.jsxs("h2",{className:"inline-flex items-center gap-2 text-3xl font-semibold text-slate-900",children:[e.jsx("span",{className:"inline-block h-6 w-6 rounded-md border border-gold-500/60 bg-gold-400/15","aria-hidden":"true"}),n]}),t?e.jsx("p",{className:"max-w-4xl text-sm leading-6 text-slate-600",children:t}):null]}),a?e.jsx(c,{label:a,variant:"secondary",onClick:r}):null]})}function C({value:n,onValueChange:t,onSearch:a,placeholder:r="Search components…"}){return e.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[e.jsx(k,{id:"search",label:"Search",placeholder:r,value:n,onChange:n=>t(n.target.value)}),e.jsx(c,{label:"Search",variant:"primary",onClick:a})]})}function S({imageSrc:n,imageAlt:t,title:a}){return e.jsxs("article",{className:"group overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[e.jsxs("div",{className:"relative",children:[e.jsx("img",{src:n,alt:t,className:"h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"}),e.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-slate-950/35 to-slate-950/10"}),e.jsx("button",{type:"button","aria-label":"Play video",className:"absolute left-1/2 top-1/2 inline-flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/70 bg-white/15 text-white backdrop-blur-sm",children:"▶"})]}),a?e.jsx("p",{className:"px-4 py-3 text-sm font-medium text-slate-700",children:a}):null]})}function B({productName:n,userName:t,onLogin:a,onLogout:r}){return e.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:e.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[e.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:n}),t?e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",t]}),e.jsx(c,{size:"small",label:"Log out",onClick:r})]}):e.jsx(c,{size:"small",variant:"primary",label:"Log in",onClick:a})]})})}function L({imageSrc:n,title:t,subtitle:a,ctaLabel:r="إجراء رئيسي",onCtaClick:i}){return e.jsxs("section",{className:"relative min-h-[22rem] overflow-hidden",dir:"rtl",children:[e.jsx("img",{src:n,alt:"Hero",className:"absolute inset-0 h-full w-full object-cover"}),e.jsx("div",{className:"absolute inset-0 bg-brand-900/60"}),e.jsx("div",{className:"relative mx-auto flex h-full max-w-6xl items-center px-6 py-14",children:e.jsxs("div",{className:"max-w-2xl space-y-4 text-white",children:[e.jsx("h1",{className:"text-5xl font-semibold leading-tight",children:t}),e.jsx("p",{className:"text-base leading-7 text-slate-100",children:a}),e.jsx(c,{label:r,variant:"secondary",onClick:i})]})})]})}function A({productName:n,userName:t,onLogin:a,onLogout:r,children:i}){return e.jsxs("div",{className:"min-h-screen bg-slate-50",children:[e.jsx(B,{productName:n,userName:t,onLogin:a,onLogout:r}),e.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:i})]})}const T=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];const M=[{title:"برنامج كفالة",description:"برنامج لدعم المنشآت الناشئة والصغيرة عبر أدوات تمويل متنوعة تسهم في رفع الجاهزية.",imageSrc:"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج التمويل المشترك",description:"يقدم فرصًا تمويلية بالشراكة مع الجهات المصرفية لتمكين المشاريع السياحية المؤهلة.",imageSrc:"https://images.unsplash.com/photo-1621761191319-c6fb62004040?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج شركات التمويل",description:"حلول تمويل مرنة مصممة لتناسب دورة حياة المشاريع وتحديات التشغيل والتوسع.",imageSrc:"https://images.unsplash.com/photo-1518183214770-9cffbec72538?auto=format&fit=crop&w=1200&q=80"}],R=[{imageSrc:"https://images.unsplash.com/photo-1470337458703-46ad1756a187?auto=format&fit=crop&w=1200&q=80",title:"نجاح منشأة ضيافة محلية"},{imageSrc:"https://images.unsplash.com/photo-1573496529574-be85d6a60704?auto=format&fit=crop&w=1200&q=80",title:"تمكين رواد الأعمال"},{imageSrc:"https://images.unsplash.com/photo-1464047736619-9d26d4f6cf44?auto=format&fit=crop&w=1200&q=80",title:"تجربة تطوير الحرف"}];n.AppHeader=B,n.Avatar=function({name:n,src:t,alt:i,size:o="medium",shape:l="circle",className:s,...c}){const d=function(n){const[e,t]=n.trim().split(/\s+/,2);return`${e?.[0]??""}${t?.[0]??""}`.toUpperCase()}(n);return t?e.jsx("img",{src:t,alt:i??n,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",a[o],r[l],s].filter(Boolean).join(" "),...c}):e.jsx("span",{"aria-label":n,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",a[o],r[l],s].filter(Boolean).join(" "),children:d})},n.Badge=o,n.Button=c,n.Card=function({title:n,description:t,footer:a,children:r,variant:i="outlined",className:o,...l}){return e.jsxs("article",{className:["w-full rounded-xl p-5",d[i],o].filter(Boolean).join(" "),...l,children:[e.jsxs("header",{className:"mb-3 space-y-1",children:[e.jsx("h3",{className:"text-base font-semibold text-slate-900",children:n}),t?e.jsx("p",{className:"text-sm text-slate-600",children:t}):null]}),r?e.jsx("div",{className:"text-sm text-slate-700",children:r}):null,a?e.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:a}):null]})},n.Checkbox=function({label:n,description:t,size:a="medium",className:r,id:i,...o}){return e.jsxs("label",{htmlFor:i,className:"inline-flex cursor-pointer items-start gap-3",children:[e.jsx("input",{id:i,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",p[a],r].filter(Boolean).join(" "),...o}),e.jsxs("span",{className:"space-y-0.5",children:[e.jsx("span",{className:"block text-sm font-medium text-slate-800",children:n}),t?e.jsx("span",{className:"block text-xs text-slate-500",children:t}):null]})]})},n.Chip=function({label:n,variant:t="soft",tone:a="neutral",onRemove:r,className:i,...o}){return e.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",h[a][t],i].filter(Boolean).join(" "),...o,children:[e.jsx("span",{children:n}),r?e.jsx("button",{type:"button",onClick:r,"aria-label":`Remove ${n}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},n.DashboardTemplate=A,n.Divider=function({label:n,orientation:t="horizontal",className:a,...r}){return"vertical"===t?e.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",a].filter(Boolean).join(" "),...r}):n?e.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",a].filter(Boolean).join(" "),...r,children:[e.jsx("span",{className:"h-px flex-1 bg-slate-200"}),e.jsx("span",{children:n}),e.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):e.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",a].filter(Boolean).join(" "),...r})},n.HighlightCard=N,n.HomeHero=L,n.HomePage=function(){const[n,a]=t.useState(""),[r,i]=t.useState("Jane Doe"),l=t.useMemo(()=>T.filter(e=>`${e.name} ${e.level}`.toLowerCase().includes(n.trim().toLowerCase())),[n]);return e.jsxs(A,{productName:"FutureFace Design System",userName:r,onLogin:()=>i("Jane Doe"),onLogout:()=>i(void 0),children:[e.jsxs("section",{className:"space-y-5",children:[e.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),e.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),e.jsx(C,{value:n,onValueChange:a})]}),e.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:l.map(n=>e.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e.jsx("h3",{className:"font-medium text-slate-800",children:n.name}),e.jsx(o,{text:n.ready?"Ready":"Planned",tone:n.ready?"success":"warning"})]}),e.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",n.level]})]},n.name))})]})},n.List=function({items:n,variant:t="unordered",dense:a=!1,className:r,...i}){const o=a?"space-y-1":"space-y-2";return"ordered"===t?e.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:n.map(n=>e.jsx("li",{children:n},n))}):"check"===t?e.jsx("ul",{className:["text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:n.map(n=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),e.jsx("span",{children:n})]},n))}):e.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:n.map(n=>e.jsx("li",{children:n},n))})},n.Rating=function({value:n,max:t=5,size:a="medium",readOnly:r=!1,onValueChange:i}){return e.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:t},(t,o)=>{const l=o+1,s=l<=n;return e.jsx("button",{type:"button",role:"radio","aria-checked":s,"aria-label":`Rate ${l}`,disabled:r,onClick:()=>i?.(l),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",m[a],s?"text-amber-400":"text-slate-300"].join(" "),children:"★"},l)})})},n.SearchBar=C,n.SectionHeader=z,n.Select=function({id:n,label:t,options:a,placeholder:r,variant:i="default",className:o,...l}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?e.jsx("label",{htmlFor:n,className:"text-sm font-medium text-slate-700",children:t}):null,e.jsxs("select",{id:n,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",w[i],o].filter(Boolean).join(" "),...l,children:[r?e.jsx("option",{value:"",children:r}):null,a.map(n=>e.jsx("option",{value:n.value,children:n.label},n.value))]})]})},n.Skeleton=function({variant:n="text",width:t,height:a,animated:r=!0,className:i,style:o,...l}){return e.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",r?"animate-pulse":"",g[n],i].filter(Boolean).join(" "),style:{...o,width:t,height:a},...l})},n.Slider=function({id:n,label:t,variant:a="neutral",className:r,...i}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?e.jsx("label",{htmlFor:n,className:"text-sm font-medium text-slate-700",children:t}):null,e.jsx("input",{id:n,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",u[a],r].filter(Boolean).join(" "),...i})]})},n.Switch=function({checked:n,label:t,onCheckedChange:a,size:r="medium",className:i,...o}){return e.jsxs("div",{className:"inline-flex items-center gap-3",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":n,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",x[r],n?"bg-slate-900":"bg-slate-300",i].filter(Boolean).join(" "),onClick:()=>a?.(!n),...o,children:e.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",v[r],n?b[r]:"translate-x-0.5"].filter(Boolean).join(" ")})}),t?e.jsx("span",{className:"text-sm text-slate-700",children:t}):null]})},n.Table=function({columns:n,rows:t,variant:a="default",className:r,...i}){return e.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",r].filter(Boolean).join(" "),...i,children:e.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[e.jsx("thead",{className:"bg-slate-50 text-slate-600",children:e.jsx("tr",{children:n.map(n=>e.jsx("th",{className:`${y[a]} font-semibold`,children:n.title},n.key))})}),e.jsx("tbody",{className:"text-slate-700",children:t.map(t=>e.jsx("tr",{className:f[a],children:n.map(n=>e.jsx("td",{className:y[a],children:t[n.key]},`${t.id}-${n.key}`))},t.id))})]})})},n.TextInput=k,n.Tooltip=function({content:n,children:t,placement:a="top",className:r,...i}){return e.jsxs("div",{className:["group relative inline-flex",r].filter(Boolean).join(" "),...i,children:[t,e.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",j[a]].join(" "),children:n})]})},n.TourismLandingPage=function(){return e.jsxs("div",{className:"bg-surface-50",dir:"rtl",children:[e.jsx(L,{imageSrc:"https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=80",title:"القسم الرئيسي",subtitle:"بوابة متكاملة لدعم الاستثمار والنمو السياحي عبر برامج تمويل ومبادرات تطويرية."}),e.jsxs("main",{className:"mx-auto max-w-6xl space-y-12 px-4 py-10",children:[e.jsxs("section",{className:"space-y-5",children:[e.jsx(z,{title:"برامج تمكين السياحة",description:"برامج متنوعة تستهدف مختلف شرائح المنشآت السياحية مع أدوات تمويل تتوافق مع احتياجات السوق.",actionLabel:"عرض الكل"}),e.jsx("div",{className:"grid gap-4 md:grid-cols-3",children:M.map(n=>e.jsx(N,{imageSrc:n.imageSrc,imageAlt:n.title,title:n.title,description:n.description,primaryActionLabel:"تقدم الآن",secondaryActionLabel:"لمعرفة المزيد"},n.title))})]}),e.jsxs("section",{className:"space-y-5",children:[e.jsx(z,{title:"قصص النجاح",description:"قصص واقعية تُبرز أثر المبادرات على تنمية المشاريع السياحية ورفع كفاءتها التشغيلية.",actionLabel:"عرض الكل"}),e.jsx("div",{className:"grid gap-4 md:grid-cols-3",children:R.map(n=>e.jsx(S,{imageSrc:n.imageSrc,imageAlt:n.title,title:n.title},n.title))})]})]})]})},n.VideoThumbnailCard=S});

package/dist/index.cjs CHANGED Viewed

	@@ -1 +1 @@
1	- "use strict";var e=require("react/jsx-runtime"),t=require("react");const l={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},s={circle:"rounded-full",rounded:"rounded-lg"};const a={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function n({text:t,tone:l="neutral",className:s,...n}){return e.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",a[l],s].filter(Boolean).join(" "),...n,children:t})}const r={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},i={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function o({label:t,variant:l="secondary",size:s="medium",className:a,type:n="button",...o}){return e.jsx("button",{type:n,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",r[l],i[s],a].filter(Boolean).join(" "),...o,children:t})}const c={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const d={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const m={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const x={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const u={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const h={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const p={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const b={small:"h-5 w-9",medium:"h-6 w-11"},f={small:"h-4 w-4",medium:"h-5 w-5"},g={small:"translate-x-4",medium:"translate-x-5"};const j={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},N={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function v({label:t,id:l,className:s,...a}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?e.jsx("label",{htmlFor:l,className:"text-sm font-medium text-slate-700",children:t}):null,e.jsx("input",{id:l,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",s].filter(Boolean).join(" "),...a})]})}const w={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function y({value:t,onValueChange:l,onSearch:s,placeholder:a="Search components…"}){return e.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[e.jsx(v,{id:"search",label:"Search",placeholder:a,value:t,onChange:e=>l(e.target.value)}),e.jsx(o,{label:"Search",variant:"primary",onClick:s})]})}function B({productName:t,userName:l,onLogin:s,onLogout:a}){return e.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:e.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[e.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:t}),l?e.jsxs("div",{className:"flex items-center gap-3",children:[e.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",l]}),e.jsx(o,{size:"small",label:"Log out",onClick:a})]}):e.jsx(o,{size:"small",variant:"primary",label:"Log in",onClick:s})]})})}function k({productName:t,userName:l,onLogin:s,onLogout:a,children:n}){return e.jsxs("div",{className:"min-h-screen bg-slate-50",children:[e.jsx(B,{productName:t,userName:l,onLogin:s,onLogout:a}),e.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:n})]})}const C=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];exports.AppHeader=B,exports.Avatar=function({name:t,src:a,alt:n,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[t,l]=e.trim().split(/\s+/,2);return`${t?.[0]??""}${l?.[0]??""}`.toUpperCase()}(t);return a?e.jsx("img",{src:a,alt:n??t,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",l[r],s[i],o].filter(Boolean).join(" "),...c}):e.jsx("span",{"aria-label":t,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",l[r],s[i],o].filter(Boolean).join(" "),children:d})},exports.Badge=n,exports.Button=o,exports.Card=function({title:t,description:l,footer:s,children:a,variant:n="outlined",className:r,...i}){return e.jsxs("article",{className:["w-full rounded-xl p-5",c[n],r].filter(Boolean).join(" "),...i,children:[e.jsxs("header",{className:"mb-3 space-y-1",children:[e.jsx("h3",{className:"text-base font-semibold text-slate-900",children:t}),l?e.jsx("p",{className:"text-sm text-slate-600",children:l}):null]}),a?e.jsx("div",{className:"text-sm text-slate-700",children:a}):null,s?e.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:s}):null]})},exports.Checkbox=function({label:t,description:l,size:s="medium",className:a,id:n,...r}){return e.jsxs("label",{htmlFor:n,className:"inline-flex cursor-pointer items-start gap-3",children:[e.jsx("input",{id:n,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",d[s],a].filter(Boolean).join(" "),...r}),e.jsxs("span",{className:"space-y-0.5",children:[e.jsx("span",{className:"block text-sm font-medium text-slate-800",children:t}),l?e.jsx("span",{className:"block text-xs text-slate-500",children:l}):null]})]})},exports.Chip=function({label:t,variant:l="soft",tone:s="neutral",onRemove:a,className:n,...r}){return e.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",m[s][l],n].filter(Boolean).join(" "),...r,children:[e.jsx("span",{children:t}),a?e.jsx("button",{type:"button",onClick:a,"aria-label":`Remove ${t}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},exports.DashboardTemplate=k,exports.Divider=function({label:t,orientation:l="horizontal",className:s,...a}){return"vertical"===l?e.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",s].filter(Boolean).join(" "),...a}):t?e.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",s].filter(Boolean).join(" "),...a,children:[e.jsx("span",{className:"h-px flex-1 bg-slate-200"}),e.jsx("span",{children:t}),e.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):e.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",s].filter(Boolean).join(" "),...a})},exports.HomePage=function(){const[l,s]=t.useState(""),[a,r]=t.useState("Jane Doe"),i=t.useMemo(()=>C.filter(e=>`${e.name} ${e.level}`.toLowerCase().includes(l.trim().toLowerCase())),[l]);return e.jsxs(k,{productName:"FutureFace Design System",userName:a,onLogin:()=>r("Jane Doe"),onLogout:()=>r(void 0),children:[e.jsxs("section",{className:"space-y-5",children:[e.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),e.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),e.jsx(y,{value:l,onValueChange:s})]}),e.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:i.map(t=>e.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[e.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e.jsx("h3",{className:"font-medium text-slate-800",children:t.name}),e.jsx(n,{text:t.ready?"Ready":"Planned",tone:t.ready?"success":"warning"})]}),e.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",t.level]})]},t.name))})]})},exports.List=function({items:t,variant:l="unordered",dense:s=!1,className:a,...n}){const r=s?"space-y-1":"space-y-2";return"ordered"===l?e.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsx("li",{children:t},t))}):"check"===l?e.jsx("ul",{className:["text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsxs("li",{className:"flex items-start gap-2",children:[e.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),e.jsx("span",{children:t})]},t))}):e.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",r,a].filter(Boolean).join(" "),...n,children:t.map(t=>e.jsx("li",{children:t},t))})},exports.Rating=function({value:t,max:l=5,size:s="medium",readOnly:a=!1,onValueChange:n}){return e.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:l},(l,r)=>{const i=r+1,o=i<=t;return e.jsx("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:a,onClick:()=>n?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",x[s],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})},exports.SearchBar=y,exports.Select=function({id:t,label:l,options:s,placeholder:a,variant:n="default",className:r,...i}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?e.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:l}):null,e.jsxs("select",{id:t,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",u[n],r].filter(Boolean).join(" "),...i,children:[a?e.jsx("option",{value:"",children:a}):null,s.map(t=>e.jsx("option",{value:t.value,children:t.label},t.value))]})]})},exports.Skeleton=function({variant:t="text",width:l,height:s,animated:a=!0,className:n,style:r,...i}){return e.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",a?"animate-pulse":"",h[t],n].filter(Boolean).join(" "),style:{...r,width:l,height:s},...i})},exports.Slider=function({id:t,label:l,variant:s="neutral",className:a,...n}){return e.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[l?e.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:l}):null,e.jsx("input",{id:t,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",p[s],a].filter(Boolean).join(" "),...n})]})},exports.Switch=function({checked:t,label:l,onCheckedChange:s,size:a="medium",className:n,...r}){return e.jsxs("div",{className:"inline-flex items-center gap-3",children:[e.jsx("button",{type:"button",role:"switch","aria-checked":t,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",b[a],t?"bg-slate-900":"bg-slate-300",n].filter(Boolean).join(" "),onClick:()=>s?.(!t),...r,children:e.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",f[a],t?g[a]:"translate-x-0.5"].filter(Boolean).join(" ")})}),l?e.jsx("span",{className:"text-sm text-slate-700",children:l}):null]})},exports.Table=function({columns:t,rows:l,variant:s="default",className:a,...n}){return e.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",a].filter(Boolean).join(" "),...n,children:e.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[e.jsx("thead",{className:"bg-slate-50 text-slate-600",children:e.jsx("tr",{children:t.map(t=>e.jsx("th",{className:`${N[s]} font-semibold`,children:t.title},t.key))})}),e.jsx("tbody",{className:"text-slate-700",children:l.map(l=>e.jsx("tr",{className:j[s],children:t.map(t=>e.jsx("td",{className:N[s],children:l[t.key]},`${l.id}-${t.key}`))},l.id))})]})})},exports.TextInput=v,exports.Tooltip=function({content:t,children:l,placement:s="top",className:a,...n}){return e.jsxs("div",{className:["group relative inline-flex",a].filter(Boolean).join(" "),...n,children:[l,e.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",w[s]].join(" "),children:t})]})};
1	+ "use strict";var n=require("react/jsx-runtime"),e=require("react");!function(n,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var a=document.head\|\|document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}('/! tailwindcss v4.1.18 \| MIT License \| https://tailwindcss.com /\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-xl: 36rem;\n --container-2xl: 42rem;\n --container-4xl: 56rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --leading-tight: 1.25;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-brand-900: #06462d;\n --color-gold-400: #d2a436;\n --color-gold-500: #bb8f2c;\n --color-surface-50: #f5f7f8;\n }\n}\n@layer base {\n , ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: calc(var(--spacing) 0);\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-full {\n right: 100%;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-full {\n left: 100%;\n }\n .isolate {\n isolation: isolate;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .float-left {\n float: left;\n }\n .float-right {\n float: right;\n }\n .\\!container {\n width: 100% !important;\n @media (width >= 40rem) {\n max-width: 40rem !important;\n }\n @media (width >= 48rem) {\n max-width: 48rem !important;\n }\n @media (width >= 64rem) {\n max-width: 64rem !important;\n }\n @media (width >= 80rem) {\n max-width: 80rem !important;\n }\n @media (width >= 96rem) {\n max-width: 96rem !important;\n }\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .\\!hidden {\n display: none !important;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .inline-grid {\n display: inline-grid;\n }\n .list-item {\n display: list-item;\n }\n .table {\n display: table;\n }\n .table-cell {\n display: table-cell;\n }\n .table-row {\n display: table-row;\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-24 {\n height: calc(var(--spacing) * 24);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-52 {\n height: calc(var(--spacing) * 52);\n }\n .h-80 {\n height: calc(var(--spacing) * 80);\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .min-h-72 {\n min-height: calc(var(--spacing) * 72);\n }\n .min-h-\\[22rem\\] {\n min-height: 22rem;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-11 {\n width: calc(var(--spacing) * 11);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-14 {\n width: calc(var(--spacing) * 14);\n }\n .w-56 {\n width: calc(var(--spacing) * 56);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[460px\\] {\n width: 460px;\n }\n .w-\\[520px\\] {\n width: 520px;\n }\n .w-\\[560px\\] {\n width: 560px;\n }\n .w-\\[640px\\] {\n width: 640px;\n }\n .w-\\[760px\\] {\n width: 760px;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-4xl {\n max-width: var(--container-4xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-xl {\n max-width: var(--container-xl);\n }\n .min-w-\\[460px\\] {\n min-width: 460px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-full {\n --tw-translate-x: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0\\.5 {\n --tw-translate-x: calc(var(--spacing) * 0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-4 {\n --tw-translate-x: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-5 {\n --tw-translate-x: calc(var(--spacing) * 5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-full {\n --tw-translate-x: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-full {\n --tw-translate-y: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .transform\\! {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-12 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .divide-y {\n :where(& > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n }\n .divide-slate-200 {\n :where(& > :not(:last-child)) {\n border-color: var(--color-slate-200);\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-amber-300 {\n border-color: var(--color-amber-300);\n }\n .border-emerald-300 {\n border-color: var(--color-emerald-300);\n }\n .border-gold-500\\/60 {\n border-color: color-mix(in srgb, #bb8f2c 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-gold-500) 60%, transparent);\n }\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-white\\/70 {\n border-color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n .bg-amber-100 {\n background-color: var(--color-amber-100);\n }\n .bg-amber-500 {\n background-color: var(--color-amber-500);\n }\n .bg-brand-900\\/60 {\n background-color: color-mix(in srgb, #06462d 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-brand-900) 60%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-600 {\n background-color: var(--color-emerald-600);\n }\n .bg-gold-400\\/15 {\n background-color: color-mix(in srgb, #d2a436 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-gold-400) 15%, transparent);\n }\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-slate-200 {\n background-color: var(--color-slate-200);\n }\n .bg-slate-300 {\n background-color: var(--color-slate-300);\n }\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-slate-950\\/25 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 25%, transparent);\n }\n }\n .bg-slate-950\\/45 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 45%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 45%, transparent);\n }\n }\n .bg-surface-50 {\n background-color: var(--color-surface-50);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/15 {\n background-color: color-mix(in srgb, #fff 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n }\n }\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-slate-950\\/35 {\n --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 35%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-slate-950\\/10 {\n --tw-gradient-to: color-mix(in srgb, oklch(12.9% 0.042 264.695) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-to: color-mix(in oklab, var(--color-slate-950) 10%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-5 {\n padding-block: calc(var(--spacing) * 5);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-10 {\n padding-block: calc(var(--spacing) * 10);\n }\n .py-14 {\n padding-block: calc(var(--spacing) * 14);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .leading-6 {\n --tw-leading: calc(var(--spacing) * 6);\n line-height: calc(var(--spacing) * 6);\n }\n .leading-7 {\n --tw-leading: calc(var(--spacing) * 7);\n line-height: calc(var(--spacing) * 7);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-wrap {\n text-wrap: wrap;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-amber-400 {\n color: var(--color-amber-400);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-current\\/80 {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 80%, transparent);\n }\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-slate-100 {\n color: var(--color-slate-100);\n }\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .lowercase {\n text-transform: lowercase;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .ordinal {\n --tw-ordinal: ordinal;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .overline {\n text-decoration-line: overline;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-2 {\n text-underline-offset: 2px;\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .accent-amber-500 {\n accent-color: var(--color-amber-500);\n }\n .accent-emerald-600 {\n accent-color: var(--color-emerald-600);\n }\n .accent-slate-800 {\n accent-color: var(--color-slate-800);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-slate-200 {\n --tw-ring-color: var(--color-slate-200);\n }\n .ring-slate-300 {\n --tw-ring-color: var(--color-slate-300);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter\\! {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n }\n .group-focus-within\\:opacity-100 {\n &:is(:where(.group):focus-within ) {\n opacity: 100%;\n }\n }\n .group-hover\\:scale-105 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-slate-400 {\n &::-moz-placeholder {\n color: var(--color-slate-400);\n }\n &::placeholder {\n color: var(--color-slate-400);\n }\n }\n .odd\\:bg-slate-50 {\n &:nth-child(odd) {\n background-color: var(--color-slate-50);\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-current {\n &:hover {\n @media (hover: hover) {\n color: currentcolor;\n }\n }\n }\n .hover\\:text-slate-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-slate-800 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-800);\n }\n }\n }\n .focus\\:border-slate-400 {\n &:focus {\n border-color: var(--color-slate-400);\n }\n }\n .focus\\:border-slate-500 {\n &:focus {\n border-color: var(--color-slate-500);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-slate-200 {\n &:focus {\n --tw-ring-color: var(--color-slate-200);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-slate-300 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-300);\n }\n }\n .focus-visible\\:ring-slate-400 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-400);\n }\n }\n .focus-visible\\:ring-slate-600 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-600);\n }\n }\n .focus-visible\\:ring-offset-2 {\n &:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:cursor-default {\n &:disabled {\n cursor: default;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-3 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n}\n@layer base {\n html,\n body,\n #root {\n min-height: 100vh;\n }\n body {\n margin: calc(var(--spacing) 0);\n background-color: var(--color-slate-50);\n color: var(--color-slate-900);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n }\n}\n@property --tw-translate-x {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: "";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "";\n inherits: false;\n}\n@property --tw-scale-x {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n , ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');const t={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},a={circle:"rounded-full",rounded:"rounded-lg"};const r={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function i({text:e,tone:t="neutral",className:a,...i}){return n.jsx("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",r[t],a].filter(Boolean).join(" "),...i,children:e})}const o={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},l={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function s({label:e,variant:t="secondary",size:a="medium",className:r,type:i="button",...s}){return n.jsx("button",{type:i,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",o[t],l[a],r].filter(Boolean).join(" "),...s,children:e})}const c={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};const d={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};const p={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};const h={small:"text-lg",medium:"text-2xl",large:"text-3xl"};const m={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};const w={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};const g={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};const x={small:"h-5 w-9",medium:"h-6 w-11"},u={small:"h-4 w-4",medium:"h-5 w-5"},v={small:"translate-x-4",medium:"translate-x-5"};const b={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},f={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function y({label:e,id:t,className:a,...r}){return n.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[e?n.jsx("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:e}):null,n.jsx("input",{id:t,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",a].filter(Boolean).join(" "),...r})]})}const k={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function j({imageSrc:e,imageAlt:t,title:a,description:r,meta:i,primaryActionLabel:o="تقدم الآن",secondaryActionLabel:l="لمعرفة المزيد",onPrimaryAction:c,onSecondaryAction:d}){return n.jsxs("article",{className:"overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[n.jsx("img",{src:e,alt:t,className:"h-52 w-full object-cover"}),n.jsxs("div",{className:"space-y-3 p-4",children:[n.jsx("h3",{className:"text-lg font-semibold text-slate-900",children:a}),n.jsx("p",{className:"text-sm leading-6 text-slate-600",children:r}),i?n.jsx("p",{className:"text-xs text-slate-500",children:i}):null,n.jsxs("div",{className:"flex items-center justify-end gap-2 pt-2",children:[l?n.jsx(s,{label:l,variant:"secondary",size:"small",onClick:d}):null,o?n.jsx(s,{label:o,variant:"primary",size:"small",onClick:c}):null]})]})]})}function N({title:e,description:t,actionLabel:a,onAction:r}){return n.jsxs("div",{className:"flex flex-wrap items-start justify-between gap-4",dir:"rtl",children:[n.jsxs("div",{className:"space-y-2",children:[n.jsxs("h2",{className:"inline-flex items-center gap-2 text-3xl font-semibold text-slate-900",children:[n.jsx("span",{className:"inline-block h-6 w-6 rounded-md border border-gold-500/60 bg-gold-400/15","aria-hidden":"true"}),e]}),t?n.jsx("p",{className:"max-w-4xl text-sm leading-6 text-slate-600",children:t}):null]}),a?n.jsx(s,{label:a,variant:"secondary",onClick:r}):null]})}function z({value:e,onValueChange:t,onSearch:a,placeholder:r="Search components…"}){return n.jsxs("div",{className:"flex w-full max-w-xl items-end gap-3",children:[n.jsx(y,{id:"search",label:"Search",placeholder:r,value:e,onChange:n=>t(n.target.value)}),n.jsx(s,{label:"Search",variant:"primary",onClick:a})]})}function S({imageSrc:e,imageAlt:t,title:a}){return n.jsxs("article",{className:"group overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[n.jsxs("div",{className:"relative",children:[n.jsx("img",{src:e,alt:t,className:"h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"}),n.jsx("div",{className:"absolute inset-0 bg-gradient-to-t from-slate-950/35 to-slate-950/10"}),n.jsx("button",{type:"button","aria-label":"Play video",className:"absolute left-1/2 top-1/2 inline-flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/70 bg-white/15 text-white backdrop-blur-sm",children:"▶"})]}),a?n.jsx("p",{className:"px-4 py-3 text-sm font-medium text-slate-700",children:a}):null]})}function C({productName:e,userName:t,onLogin:a,onLogout:r}){return n.jsx("header",{className:"w-full border-b border-slate-200 bg-white",children:n.jsxs("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[n.jsx("h1",{className:"text-lg font-semibold text-slate-900",children:e}),t?n.jsxs("div",{className:"flex items-center gap-3",children:[n.jsxs("span",{className:"text-sm text-slate-600",children:["Welcome, ",t]}),n.jsx(s,{size:"small",label:"Log out",onClick:r})]}):n.jsx(s,{size:"small",variant:"primary",label:"Log in",onClick:a})]})})}function B({imageSrc:e,title:t,subtitle:a,ctaLabel:r="إجراء رئيسي",onCtaClick:i}){return n.jsxs("section",{className:"relative min-h-[22rem] overflow-hidden",dir:"rtl",children:[n.jsx("img",{src:e,alt:"Hero",className:"absolute inset-0 h-full w-full object-cover"}),n.jsx("div",{className:"absolute inset-0 bg-brand-900/60"}),n.jsx("div",{className:"relative mx-auto flex h-full max-w-6xl items-center px-6 py-14",children:n.jsxs("div",{className:"max-w-2xl space-y-4 text-white",children:[n.jsx("h1",{className:"text-5xl font-semibold leading-tight",children:t}),n.jsx("p",{className:"text-base leading-7 text-slate-100",children:a}),n.jsx(s,{label:r,variant:"secondary",onClick:i})]})})]})}function L({productName:e,userName:t,onLogin:a,onLogout:r,children:i}){return n.jsxs("div",{className:"min-h-screen bg-slate-50",children:[n.jsx(C,{productName:e,userName:t,onLogin:a,onLogout:r}),n.jsx("main",{className:"mx-auto max-w-6xl px-4 py-8",children:i})]})}const A=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];const T=[{title:"برنامج كفالة",description:"برنامج لدعم المنشآت الناشئة والصغيرة عبر أدوات تمويل متنوعة تسهم في رفع الجاهزية.",imageSrc:"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج التمويل المشترك",description:"يقدم فرصًا تمويلية بالشراكة مع الجهات المصرفية لتمكين المشاريع السياحية المؤهلة.",imageSrc:"https://images.unsplash.com/photo-1621761191319-c6fb62004040?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج شركات التمويل",description:"حلول تمويل مرنة مصممة لتناسب دورة حياة المشاريع وتحديات التشغيل والتوسع.",imageSrc:"https://images.unsplash.com/photo-1518183214770-9cffbec72538?auto=format&fit=crop&w=1200&q=80"}],M=[{imageSrc:"https://images.unsplash.com/photo-1470337458703-46ad1756a187?auto=format&fit=crop&w=1200&q=80",title:"نجاح منشأة ضيافة محلية"},{imageSrc:"https://images.unsplash.com/photo-1573496529574-be85d6a60704?auto=format&fit=crop&w=1200&q=80",title:"تمكين رواد الأعمال"},{imageSrc:"https://images.unsplash.com/photo-1464047736619-9d26d4f6cf44?auto=format&fit=crop&w=1200&q=80",title:"تجربة تطوير الحرف"}];exports.AppHeader=C,exports.Avatar=function({name:e,src:r,alt:i,size:o="medium",shape:l="circle",className:s,...c}){const d=function(n){const[e,t]=n.trim().split(/\s+/,2);return`${e?.[0]??""}${t?.[0]??""}`.toUpperCase()}(e);return r?n.jsx("img",{src:r,alt:i??e,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",t[o],a[l],s].filter(Boolean).join(" "),...c}):n.jsx("span",{"aria-label":e,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",t[o],a[l],s].filter(Boolean).join(" "),children:d})},exports.Badge=i,exports.Button=s,exports.Card=function({title:e,description:t,footer:a,children:r,variant:i="outlined",className:o,...l}){return n.jsxs("article",{className:["w-full rounded-xl p-5",c[i],o].filter(Boolean).join(" "),...l,children:[n.jsxs("header",{className:"mb-3 space-y-1",children:[n.jsx("h3",{className:"text-base font-semibold text-slate-900",children:e}),t?n.jsx("p",{className:"text-sm text-slate-600",children:t}):null]}),r?n.jsx("div",{className:"text-sm text-slate-700",children:r}):null,a?n.jsx("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:a}):null]})},exports.Checkbox=function({label:e,description:t,size:a="medium",className:r,id:i,...o}){return n.jsxs("label",{htmlFor:i,className:"inline-flex cursor-pointer items-start gap-3",children:[n.jsx("input",{id:i,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",d[a],r].filter(Boolean).join(" "),...o}),n.jsxs("span",{className:"space-y-0.5",children:[n.jsx("span",{className:"block text-sm font-medium text-slate-800",children:e}),t?n.jsx("span",{className:"block text-xs text-slate-500",children:t}):null]})]})},exports.Chip=function({label:e,variant:t="soft",tone:a="neutral",onRemove:r,className:i,...o}){return n.jsxs("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",p[a][t],i].filter(Boolean).join(" "),...o,children:[n.jsx("span",{children:e}),r?n.jsx("button",{type:"button",onClick:r,"aria-label":`Remove ${e}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})},exports.DashboardTemplate=L,exports.Divider=function({label:e,orientation:t="horizontal",className:a,...r}){return"vertical"===t?n.jsx("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",a].filter(Boolean).join(" "),...r}):e?n.jsxs("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",a].filter(Boolean).join(" "),...r,children:[n.jsx("span",{className:"h-px flex-1 bg-slate-200"}),n.jsx("span",{children:e}),n.jsx("span",{className:"h-px flex-1 bg-slate-200"})]}):n.jsx("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",a].filter(Boolean).join(" "),...r})},exports.HighlightCard=j,exports.HomeHero=B,exports.HomePage=function(){const[t,a]=e.useState(""),[r,o]=e.useState("Jane Doe"),l=e.useMemo(()=>A.filter(n=>`${n.name} ${n.level}`.toLowerCase().includes(t.trim().toLowerCase())),[t]);return n.jsxs(L,{productName:"FutureFace Design System",userName:r,onLogin:()=>o("Jane Doe"),onLogout:()=>o(void 0),children:[n.jsxs("section",{className:"space-y-5",children:[n.jsx("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),n.jsx("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),n.jsx(z,{value:t,onValueChange:a})]}),n.jsx("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:l.map(e=>n.jsxs("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[n.jsxs("div",{className:"mb-2 flex items-center justify-between gap-3",children:[n.jsx("h3",{className:"font-medium text-slate-800",children:e.name}),n.jsx(i,{text:e.ready?"Ready":"Planned",tone:e.ready?"success":"warning"})]}),n.jsxs("p",{className:"text-sm text-slate-600",children:["Level: ",e.level]})]},e.name))})]})},exports.List=function({items:e,variant:t="unordered",dense:a=!1,className:r,...i}){const o=a?"space-y-1":"space-y-2";return"ordered"===t?n.jsx("ol",{className:["list-decimal pl-5 text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:e.map(e=>n.jsx("li",{children:e},e))}):"check"===t?n.jsx("ul",{className:["text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:e.map(e=>n.jsxs("li",{className:"flex items-start gap-2",children:[n.jsx("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),n.jsx("span",{children:e})]},e))}):n.jsx("ul",{className:["list-disc pl-5 text-sm text-slate-700",o,r].filter(Boolean).join(" "),...i,children:e.map(e=>n.jsx("li",{children:e},e))})},exports.Rating=function({value:e,max:t=5,size:a="medium",readOnly:r=!1,onValueChange:i}){return n.jsx("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:t},(t,o)=>{const l=o+1,s=l<=e;return n.jsx("button",{type:"button",role:"radio","aria-checked":s,"aria-label":`Rate ${l}`,disabled:r,onClick:()=>i?.(l),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",h[a],s?"text-amber-400":"text-slate-300"].join(" "),children:"★"},l)})})},exports.SearchBar=z,exports.SectionHeader=N,exports.Select=function({id:e,label:t,options:a,placeholder:r,variant:i="default",className:o,...l}){return n.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?n.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:t}):null,n.jsxs("select",{id:e,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",m[i],o].filter(Boolean).join(" "),...l,children:[r?n.jsx("option",{value:"",children:r}):null,a.map(e=>n.jsx("option",{value:e.value,children:e.label},e.value))]})]})},exports.Skeleton=function({variant:e="text",width:t,height:a,animated:r=!0,className:i,style:o,...l}){return n.jsx("div",{"aria-hidden":!0,className:["bg-slate-200",r?"animate-pulse":"",w[e],i].filter(Boolean).join(" "),style:{...o,width:t,height:a},...l})},exports.Slider=function({id:e,label:t,variant:a="neutral",className:r,...i}){return n.jsxs("div",{className:"flex w-full flex-col gap-1.5",children:[t?n.jsx("label",{htmlFor:e,className:"text-sm font-medium text-slate-700",children:t}):null,n.jsx("input",{id:e,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",g[a],r].filter(Boolean).join(" "),...i})]})},exports.Switch=function({checked:e,label:t,onCheckedChange:a,size:r="medium",className:i,...o}){return n.jsxs("div",{className:"inline-flex items-center gap-3",children:[n.jsx("button",{type:"button",role:"switch","aria-checked":e,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",x[r],e?"bg-slate-900":"bg-slate-300",i].filter(Boolean).join(" "),onClick:()=>a?.(!e),...o,children:n.jsx("span",{className:["inline-block rounded-full bg-white transition-transform",u[r],e?v[r]:"translate-x-0.5"].filter(Boolean).join(" ")})}),t?n.jsx("span",{className:"text-sm text-slate-700",children:t}):null]})},exports.Table=function({columns:e,rows:t,variant:a="default",className:r,...i}){return n.jsx("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",r].filter(Boolean).join(" "),...i,children:n.jsxs("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[n.jsx("thead",{className:"bg-slate-50 text-slate-600",children:n.jsx("tr",{children:e.map(e=>n.jsx("th",{className:`${f[a]} font-semibold`,children:e.title},e.key))})}),n.jsx("tbody",{className:"text-slate-700",children:t.map(t=>n.jsx("tr",{className:b[a],children:e.map(e=>n.jsx("td",{className:f[a],children:t[e.key]},`${t.id}-${e.key}`))},t.id))})]})})},exports.TextInput=y,exports.Tooltip=function({content:e,children:t,placement:a="top",className:r,...i}){return n.jsxs("div",{className:["group relative inline-flex",r].filter(Boolean).join(" "),...i,children:[t,n.jsx("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",k[a]].join(" "),children:e})]})},exports.TourismLandingPage=function(){return n.jsxs("div",{className:"bg-surface-50",dir:"rtl",children:[n.jsx(B,{imageSrc:"https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=80",title:"القسم الرئيسي",subtitle:"بوابة متكاملة لدعم الاستثمار والنمو السياحي عبر برامج تمويل ومبادرات تطويرية."}),n.jsxs("main",{className:"mx-auto max-w-6xl space-y-12 px-4 py-10",children:[n.jsxs("section",{className:"space-y-5",children:[n.jsx(N,{title:"برامج تمكين السياحة",description:"برامج متنوعة تستهدف مختلف شرائح المنشآت السياحية مع أدوات تمويل تتوافق مع احتياجات السوق.",actionLabel:"عرض الكل"}),n.jsx("div",{className:"grid gap-4 md:grid-cols-3",children:T.map(e=>n.jsx(j,{imageSrc:e.imageSrc,imageAlt:e.title,title:e.title,description:e.description,primaryActionLabel:"تقدم الآن",secondaryActionLabel:"لمعرفة المزيد"},e.title))})]}),n.jsxs("section",{className:"space-y-5",children:[n.jsx(N,{title:"قصص النجاح",description:"قصص واقعية تُبرز أثر المبادرات على تنمية المشاريع السياحية ورفع كفاءتها التشغيلية.",actionLabel:"عرض الكل"}),n.jsx("div",{className:"grid gap-4 md:grid-cols-3",children:M.map(e=>n.jsx(S,{imageSrc:e.imageSrc,imageAlt:e.title,title:e.title},e.title))})]})]})]})},exports.VideoThumbnailCard=S;

package/dist/index.mjs CHANGED Viewed

	@@ -1 +1 @@
1	- import{jsx as e,jsxs as l}from"react/jsx-runtime";import{useState as t,useMemo as a}from"react";const n={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},s={circle:"rounded-full",rounded:"rounded-lg"};function r({name:l,src:t,alt:a,size:r="medium",shape:i="circle",className:o,...c}){const d=function(e){const[l,t]=e.trim().split(/\s+/,2);return`${l?.[0]??""}${t?.[0]??""}`.toUpperCase()}(l);return t?e("img",{src:t,alt:a??l,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",n[r],s[i],o].filter(Boolean).join(" "),...c}):e("span",{"aria-label":l,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",n[r],s[i],o].filter(Boolean).join(" "),children:d})}const i={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function o({text:l,tone:t="neutral",className:a,...n}){return e("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",i[t],a].filter(Boolean).join(" "),...n,children:l})}const c={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},d={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function m({label:l,variant:t="secondary",size:a="medium",className:n,type:s="button",...r}){return e("button",{type:s,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",c[t],d[a],n].filter(Boolean).join(" "),...r,children:l})}const u={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};function h({title:t,description:a,footer:n,children:s,variant:r="outlined",className:i,...o}){return l("article",{className:["w-full rounded-xl p-5",u[r],i].filter(Boolean).join(" "),...o,children:[l("header",{className:"mb-3 space-y-1",children:[e("h3",{className:"text-base font-semibold text-slate-900",children:t}),a?e("p",{className:"text-sm text-slate-600",children:a}):null]}),s?e("div",{className:"text-sm text-slate-700",children:s}):null,n?e("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:n}):null]})}const f={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};function b({label:t,description:a,size:n="medium",className:s,id:r,...i}){return l("label",{htmlFor:r,className:"inline-flex cursor-pointer items-start gap-3",children:[e("input",{id:r,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",f[n],s].filter(Boolean).join(" "),...i}),l("span",{className:"space-y-0.5",children:[e("span",{className:"block text-sm font-medium text-slate-800",children:t}),a?e("span",{className:"block text-xs text-slate-500",children:a}):null]})]})}const x={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};function p({label:t,variant:a="soft",tone:n="neutral",onRemove:s,className:r,...i}){return l("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",x[n][a],r].filter(Boolean).join(" "),...i,children:[e("span",{children:t}),s?e("button",{type:"button",onClick:s,"aria-label":`Remove ${t}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})}function g({label:t,orientation:a="horizontal",className:n,...s}){return"vertical"===a?e("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",n].filter(Boolean).join(" "),...s}):t?l("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",n].filter(Boolean).join(" "),...s,children:[e("span",{className:"h-px flex-1 bg-slate-200"}),e("span",{children:t}),e("span",{className:"h-px flex-1 bg-slate-200"})]}):e("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",n].filter(Boolean).join(" "),...s})}function N({items:t,variant:a="unordered",dense:n=!1,className:s,...r}){const i=n?"space-y-1":"space-y-2";return"ordered"===a?e("ol",{className:["list-decimal pl-5 text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(l=>e("li",{children:l},l))}):e("ul","check"===a?{className:["text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(t=>l("li",{className:"flex items-start gap-2",children:[e("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),e("span",{children:t})]},t))}:{className:["list-disc pl-5 text-sm text-slate-700",i,s].filter(Boolean).join(" "),...r,children:t.map(l=>e("li",{children:l},l))})}const v={small:"text-lg",medium:"text-2xl",large:"text-3xl"};function w({value:l,max:t=5,size:a="medium",readOnly:n=!1,onValueChange:s}){return e("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:t},(t,r)=>{const i=r+1,o=i<=l;return e("button",{type:"button",role:"radio","aria-checked":o,"aria-label":`Rate ${i}`,disabled:n,onClick:()=>s?.(i),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",v[a],o?"text-amber-400":"text-slate-300"].join(" "),children:"★"},i)})})}const y={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};function j({id:t,label:a,options:n,placeholder:s,variant:r="default",className:i,...o}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[a?e("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,l("select",{id:t,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",y[r],i].filter(Boolean).join(" "),...o,children:[s?e("option",{value:"",children:s}):null,n.map(l=>e("option",{value:l.value,children:l.label},l.value))]})]})}const B={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};function k({variant:l="text",width:t,height:a,animated:n=!0,className:s,style:r,...i}){return e("div",{"aria-hidden":!0,className:["bg-slate-200",n?"animate-pulse":"",B[l],s].filter(Boolean).join(" "),style:{...r,width:t,height:a},...i})}const C={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};function L({id:t,label:a,variant:n="neutral",className:s,...r}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[a?e("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,e("input",{id:t,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",C[n],s].filter(Boolean).join(" "),...r})]})}const z={small:"h-5 w-9",medium:"h-6 w-11"},$={small:"h-4 w-4",medium:"h-5 w-5"},F={small:"translate-x-4",medium:"translate-x-5"};function S({checked:t,label:a,onCheckedChange:n,size:s="medium",className:r,...i}){return l("div",{className:"inline-flex items-center gap-3",children:[e("button",{type:"button",role:"switch","aria-checked":t,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",z[s],t?"bg-slate-900":"bg-slate-300",r].filter(Boolean).join(" "),onClick:()=>n?.(!t),...i,children:e("span",{className:["inline-block rounded-full bg-white transition-transform",$[s],t?F[s]:"translate-x-0.5"].filter(Boolean).join(" ")})}),a?e("span",{className:"text-sm text-slate-700",children:a}):null]})}const D={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},R={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function A({columns:t,rows:a,variant:n="default",className:s,...r}){return e("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",s].filter(Boolean).join(" "),...r,children:l("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[e("thead",{className:"bg-slate-50 text-slate-600",children:e("tr",{children:t.map(l=>e("th",{className:`${R[n]} font-semibold`,children:l.title},l.key))})}),e("tbody",{className:"text-slate-700",children:a.map(l=>e("tr",{className:D[n],children:t.map(t=>e("td",{className:R[n],children:l[t.key]},`${l.id}-${t.key}`))},l.id))})]})})}function P({label:t,id:a,className:n,...s}){return l("div",{className:"flex w-full flex-col gap-1.5",children:[t?e("label",{htmlFor:a,className:"text-sm font-medium text-slate-700",children:t}):null,e("input",{id:a,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",n].filter(Boolean).join(" "),...s})]})}const V={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function J({content:t,children:a,placement:n="top",className:s,...r}){return l("div",{className:["group relative inline-flex",s].filter(Boolean).join(" "),...r,children:[a,e("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",V[n]].join(" "),children:t})]})}function O({value:t,onValueChange:a,onSearch:n,placeholder:s="Search components…"}){return l("div",{className:"flex w-full max-w-xl items-end gap-3",children:[e(P,{id:"search",label:"Search",placeholder:s,value:t,onChange:e=>a(e.target.value)}),e(m,{label:"Search",variant:"primary",onClick:n})]})}function T({productName:t,userName:a,onLogin:n,onLogout:s}){return e("header",{className:"w-full border-b border-slate-200 bg-white",children:l("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[e("h1",{className:"text-lg font-semibold text-slate-900",children:t}),a?l("div",{className:"flex items-center gap-3",children:[l("span",{className:"text-sm text-slate-600",children:["Welcome, ",a]}),e(m,{size:"small",label:"Log out",onClick:s})]}):e(m,{size:"small",variant:"primary",label:"Log in",onClick:n})]})})}function H({productName:t,userName:a,onLogin:n,onLogout:s,children:r}){return l("div",{className:"min-h-screen bg-slate-50",children:[e(T,{productName:t,userName:a,onLogin:n,onLogout:s}),e("main",{className:"mx-auto max-w-6xl px-4 py-8",children:r})]})}const I=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];function M(){const[n,s]=t(""),[r,i]=t("Jane Doe"),c=a(()=>I.filter(e=>`${e.name} ${e.level}`.toLowerCase().includes(n.trim().toLowerCase())),[n]);return l(H,{productName:"FutureFace Design System",userName:r,onLogin:()=>i("Jane Doe"),onLogout:()=>i(void 0),children:[l("section",{className:"space-y-5",children:[e("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),e("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),e(O,{value:n,onValueChange:s})]}),e("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:c.map(t=>l("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[l("div",{className:"mb-2 flex items-center justify-between gap-3",children:[e("h3",{className:"font-medium text-slate-800",children:t.name}),e(o,{text:t.ready?"Ready":"Planned",tone:t.ready?"success":"warning"})]}),l("p",{className:"text-sm text-slate-600",children:["Level: ",t.level]})]},t.name))})]})}export{T as AppHeader,r as Avatar,o as Badge,m as Button,h as Card,b as Checkbox,p as Chip,H as DashboardTemplate,g as Divider,M as HomePage,N as List,w as Rating,O as SearchBar,j as Select,k as Skeleton,L as Slider,S as Switch,A as Table,P as TextInput,J as Tooltip};
1	+ import{jsx as n,jsxs as e}from"react/jsx-runtime";import{useState as t,useMemo as a}from"react";!function(n,e){void 0===e&&(e={});var t=e.insertAt;if("undefined"!=typeof document){var a=document.head\|\|document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===t&&a.firstChild?a.insertBefore(r,a.firstChild):a.appendChild(r),r.styleSheet?r.styleSheet.cssText=n:r.appendChild(document.createTextNode(n))}}('/! tailwindcss v4.1.18 \| MIT License \| https://tailwindcss.com /\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n :root, :host {\n --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",\n "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";\n --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",\n "Courier New", monospace;\n --color-amber-100: oklch(96.2% 0.059 95.617);\n --color-amber-300: oklch(87.9% 0.169 91.605);\n --color-amber-400: oklch(82.8% 0.189 84.429);\n --color-amber-500: oklch(76.9% 0.188 70.08);\n --color-amber-700: oklch(55.5% 0.163 48.998);\n --color-emerald-100: oklch(95% 0.052 163.051);\n --color-emerald-300: oklch(84.5% 0.143 164.978);\n --color-emerald-600: oklch(59.6% 0.145 163.225);\n --color-emerald-700: oklch(50.8% 0.118 165.612);\n --color-slate-50: oklch(98.4% 0.003 247.858);\n --color-slate-100: oklch(96.8% 0.007 247.896);\n --color-slate-200: oklch(92.9% 0.013 255.508);\n --color-slate-300: oklch(86.9% 0.022 252.894);\n --color-slate-400: oklch(70.4% 0.04 256.788);\n --color-slate-500: oklch(55.4% 0.046 257.417);\n --color-slate-600: oklch(44.6% 0.043 257.281);\n --color-slate-700: oklch(37.2% 0.044 257.287);\n --color-slate-800: oklch(27.9% 0.041 260.031);\n --color-slate-900: oklch(20.8% 0.042 265.755);\n --color-slate-950: oklch(12.9% 0.042 264.695);\n --color-white: #fff;\n --spacing: 0.25rem;\n --container-md: 28rem;\n --container-xl: 36rem;\n --container-2xl: 42rem;\n --container-4xl: 56rem;\n --container-6xl: 72rem;\n --text-xs: 0.75rem;\n --text-xs--line-height: calc(1 / 0.75);\n --text-sm: 0.875rem;\n --text-sm--line-height: calc(1.25 / 0.875);\n --text-base: 1rem;\n --text-base--line-height: calc(1.5 / 1);\n --text-lg: 1.125rem;\n --text-lg--line-height: calc(1.75 / 1.125);\n --text-2xl: 1.5rem;\n --text-2xl--line-height: calc(2 / 1.5);\n --text-3xl: 1.875rem;\n --text-3xl--line-height: calc(2.25 / 1.875);\n --text-5xl: 3rem;\n --text-5xl--line-height: 1;\n --font-weight-medium: 500;\n --font-weight-semibold: 600;\n --leading-tight: 1.25;\n --radius-md: 0.375rem;\n --radius-lg: 0.5rem;\n --radius-xl: 0.75rem;\n --ease-out: cubic-bezier(0, 0, 0.2, 1);\n --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n --blur-sm: 8px;\n --default-transition-duration: 150ms;\n --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n --default-font-family: var(--font-sans);\n --default-mono-font-family: var(--font-mono);\n --color-brand-900: #06462d;\n --color-gold-400: #d2a436;\n --color-gold-500: #bb8f2c;\n --color-surface-50: #f5f7f8;\n }\n}\n@layer base {\n , ::after, ::before, ::backdrop, ::file-selector-button {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n border: 0 solid;\n }\n html, :host {\n line-height: 1.5;\n -webkit-text-size-adjust: 100%;\n -moz-tab-size: 4;\n -o-tab-size: 4;\n tab-size: 4;\n font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");\n font-feature-settings: var(--default-font-feature-settings, normal);\n font-variation-settings: var(--default-font-variation-settings, normal);\n -webkit-tap-highlight-color: transparent;\n }\n hr {\n height: 0;\n color: inherit;\n border-top-width: 1px;\n }\n abbr:where([title]) {\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted;\n }\n h1, h2, h3, h4, h5, h6 {\n font-size: inherit;\n font-weight: inherit;\n }\n a {\n color: inherit;\n -webkit-text-decoration: inherit;\n text-decoration: inherit;\n }\n b, strong {\n font-weight: bolder;\n }\n code, kbd, samp, pre {\n font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);\n font-feature-settings: var(--default-mono-font-feature-settings, normal);\n font-variation-settings: var(--default-mono-font-variation-settings, normal);\n font-size: 1em;\n }\n small {\n font-size: 80%;\n }\n sub, sup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n }\n sub {\n bottom: -0.25em;\n }\n sup {\n top: -0.5em;\n }\n table {\n text-indent: 0;\n border-color: inherit;\n border-collapse: collapse;\n }\n :-moz-focusring {\n outline: auto;\n }\n progress {\n vertical-align: baseline;\n }\n summary {\n display: list-item;\n }\n ol, ul, menu {\n list-style: none;\n }\n img, svg, video, canvas, audio, iframe, embed, object {\n display: block;\n vertical-align: middle;\n }\n img, video {\n max-width: 100%;\n height: auto;\n }\n button, input, select, optgroup, textarea, ::file-selector-button {\n font: inherit;\n font-feature-settings: inherit;\n font-variation-settings: inherit;\n letter-spacing: inherit;\n color: inherit;\n border-radius: 0;\n background-color: transparent;\n opacity: 1;\n }\n :where(select:is([multiple], [size])) optgroup {\n font-weight: bolder;\n }\n :where(select:is([multiple], [size])) optgroup option {\n padding-inline-start: 20px;\n }\n ::file-selector-button {\n margin-inline-end: 4px;\n }\n ::-moz-placeholder {\n opacity: 1;\n }\n ::placeholder {\n opacity: 1;\n }\n @supports (not (-webkit-appearance: -apple-pay-button)) or (contain-intrinsic-size: 1px) {\n ::-moz-placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n ::placeholder {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 50%, transparent);\n }\n }\n }\n textarea {\n resize: vertical;\n }\n ::-webkit-search-decoration {\n -webkit-appearance: none;\n }\n ::-webkit-date-and-time-value {\n min-height: 1lh;\n text-align: inherit;\n }\n ::-webkit-datetime-edit {\n display: inline-flex;\n }\n ::-webkit-datetime-edit-fields-wrapper {\n padding: 0;\n }\n ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n padding-block: 0;\n }\n ::-webkit-calendar-picker-indicator {\n line-height: 1;\n }\n :-moz-ui-invalid {\n box-shadow: none;\n }\n button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {\n -webkit-appearance: button;\n -moz-appearance: button;\n appearance: button;\n }\n ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n height: auto;\n }\n [hidden]:where(:not([hidden="until-found"])) {\n display: none !important;\n }\n}\n@layer utilities {\n .\\@container {\n container-type: inline-size;\n }\n .pointer-events-none {\n pointer-events: none;\n }\n .collapse {\n visibility: collapse;\n }\n .invisible {\n visibility: hidden;\n }\n .visible {\n visibility: visible;\n }\n .absolute {\n position: absolute;\n }\n .fixed {\n position: fixed;\n }\n .relative {\n position: relative;\n }\n .static {\n position: static;\n }\n .sticky {\n position: sticky;\n }\n .inset-0 {\n inset: calc(var(--spacing) 0);\n }\n .-top-2 {\n top: calc(var(--spacing) * -2);\n }\n .top-0 {\n top: calc(var(--spacing) * 0);\n }\n .top-1\\/2 {\n top: calc(1/2 * 100%);\n }\n .top-full {\n top: 100%;\n }\n .right-0 {\n right: calc(var(--spacing) * 0);\n }\n .right-full {\n right: 100%;\n }\n .bottom-full {\n bottom: 100%;\n }\n .left-0 {\n left: calc(var(--spacing) * 0);\n }\n .left-1\\/2 {\n left: calc(1/2 * 100%);\n }\n .left-full {\n left: 100%;\n }\n .isolate {\n isolation: isolate;\n }\n .z-10 {\n z-index: 10;\n }\n .z-20 {\n z-index: 20;\n }\n .float-left {\n float: left;\n }\n .float-right {\n float: right;\n }\n .\\!container {\n width: 100% !important;\n @media (width >= 40rem) {\n max-width: 40rem !important;\n }\n @media (width >= 48rem) {\n max-width: 48rem !important;\n }\n @media (width >= 64rem) {\n max-width: 64rem !important;\n }\n @media (width >= 80rem) {\n max-width: 80rem !important;\n }\n @media (width >= 96rem) {\n max-width: 96rem !important;\n }\n }\n .container {\n width: 100%;\n @media (width >= 40rem) {\n max-width: 40rem;\n }\n @media (width >= 48rem) {\n max-width: 48rem;\n }\n @media (width >= 64rem) {\n max-width: 64rem;\n }\n @media (width >= 80rem) {\n max-width: 80rem;\n }\n @media (width >= 96rem) {\n max-width: 96rem;\n }\n }\n .mx-auto {\n margin-inline: auto;\n }\n .mt-0\\.5 {\n margin-top: calc(var(--spacing) * 0.5);\n }\n .mt-2 {\n margin-top: calc(var(--spacing) * 2);\n }\n .mt-4 {\n margin-top: calc(var(--spacing) * 4);\n }\n .mt-5 {\n margin-top: calc(var(--spacing) * 5);\n }\n .mt-8 {\n margin-top: calc(var(--spacing) * 8);\n }\n .mr-2 {\n margin-right: calc(var(--spacing) * 2);\n }\n .mb-2 {\n margin-bottom: calc(var(--spacing) * 2);\n }\n .mb-3 {\n margin-bottom: calc(var(--spacing) * 3);\n }\n .ml-2 {\n margin-left: calc(var(--spacing) * 2);\n }\n .\\!hidden {\n display: none !important;\n }\n .block {\n display: block;\n }\n .contents {\n display: contents;\n }\n .flex {\n display: flex;\n }\n .grid {\n display: grid;\n }\n .hidden {\n display: none;\n }\n .inline {\n display: inline;\n }\n .inline-block {\n display: inline-block;\n }\n .inline-flex {\n display: inline-flex;\n }\n .inline-grid {\n display: inline-grid;\n }\n .list-item {\n display: list-item;\n }\n .table {\n display: table;\n }\n .table-cell {\n display: table-cell;\n }\n .table-row {\n display: table-row;\n }\n .h-2 {\n height: calc(var(--spacing) * 2);\n }\n .h-4 {\n height: calc(var(--spacing) * 4);\n }\n .h-5 {\n height: calc(var(--spacing) * 5);\n }\n .h-6 {\n height: calc(var(--spacing) * 6);\n }\n .h-8 {\n height: calc(var(--spacing) * 8);\n }\n .h-10 {\n height: calc(var(--spacing) * 10);\n }\n .h-12 {\n height: calc(var(--spacing) * 12);\n }\n .h-14 {\n height: calc(var(--spacing) * 14);\n }\n .h-16 {\n height: calc(var(--spacing) * 16);\n }\n .h-24 {\n height: calc(var(--spacing) * 24);\n }\n .h-40 {\n height: calc(var(--spacing) * 40);\n }\n .h-48 {\n height: calc(var(--spacing) * 48);\n }\n .h-52 {\n height: calc(var(--spacing) * 52);\n }\n .h-80 {\n height: calc(var(--spacing) * 80);\n }\n .h-full {\n height: 100%;\n }\n .h-px {\n height: 1px;\n }\n .min-h-72 {\n min-height: calc(var(--spacing) * 72);\n }\n .min-h-\\[22rem\\] {\n min-height: 22rem;\n }\n .min-h-screen {\n min-height: 100vh;\n }\n .w-4 {\n width: calc(var(--spacing) * 4);\n }\n .w-5 {\n width: calc(var(--spacing) * 5);\n }\n .w-6 {\n width: calc(var(--spacing) * 6);\n }\n .w-8 {\n width: calc(var(--spacing) * 8);\n }\n .w-9 {\n width: calc(var(--spacing) * 9);\n }\n .w-10 {\n width: calc(var(--spacing) * 10);\n }\n .w-11 {\n width: calc(var(--spacing) * 11);\n }\n .w-12 {\n width: calc(var(--spacing) * 12);\n }\n .w-14 {\n width: calc(var(--spacing) * 14);\n }\n .w-56 {\n width: calc(var(--spacing) * 56);\n }\n .w-64 {\n width: calc(var(--spacing) * 64);\n }\n .w-72 {\n width: calc(var(--spacing) * 72);\n }\n .w-80 {\n width: calc(var(--spacing) * 80);\n }\n .w-\\[420px\\] {\n width: 420px;\n }\n .w-\\[460px\\] {\n width: 460px;\n }\n .w-\\[520px\\] {\n width: 520px;\n }\n .w-\\[560px\\] {\n width: 560px;\n }\n .w-\\[640px\\] {\n width: 640px;\n }\n .w-\\[760px\\] {\n width: 760px;\n }\n .w-full {\n width: 100%;\n }\n .w-px {\n width: 1px;\n }\n .max-w-2xl {\n max-width: var(--container-2xl);\n }\n .max-w-4xl {\n max-width: var(--container-4xl);\n }\n .max-w-6xl {\n max-width: var(--container-6xl);\n }\n .max-w-md {\n max-width: var(--container-md);\n }\n .max-w-xl {\n max-width: var(--container-xl);\n }\n .min-w-\\[460px\\] {\n min-width: 460px;\n }\n .flex-1 {\n flex: 1;\n }\n .flex-shrink {\n flex-shrink: 1;\n }\n .shrink {\n flex-shrink: 1;\n }\n .shrink-0 {\n flex-shrink: 0;\n }\n .flex-grow {\n flex-grow: 1;\n }\n .grow {\n flex-grow: 1;\n }\n .border-collapse {\n border-collapse: collapse;\n }\n .-translate-x-1\\/2 {\n --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-x-full {\n --tw-translate-x: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0 {\n --tw-translate-x: calc(var(--spacing) * 0);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-0\\.5 {\n --tw-translate-x: calc(var(--spacing) * 0.5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-4 {\n --tw-translate-x: calc(var(--spacing) * 4);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-5 {\n --tw-translate-x: calc(var(--spacing) * 5);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .translate-x-full {\n --tw-translate-x: 100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-1\\/2 {\n --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .-translate-y-full {\n --tw-translate-y: -100%;\n translate: var(--tw-translate-x) var(--tw-translate-y);\n }\n .transform {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n }\n .transform\\! {\n transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,) !important;\n }\n .animate-pulse {\n animation: var(--animate-pulse);\n }\n .cursor-pointer {\n cursor: pointer;\n }\n .resize {\n resize: both;\n }\n .list-decimal {\n list-style-type: decimal;\n }\n .list-disc {\n list-style-type: disc;\n }\n .grid-cols-2 {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .grid-cols-3 {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n .grid-cols-4 {\n grid-template-columns: repeat(4, minmax(0, 1fr));\n }\n .flex-col {\n flex-direction: column;\n }\n .flex-wrap {\n flex-wrap: wrap;\n }\n .items-center {\n align-items: center;\n }\n .items-end {\n align-items: flex-end;\n }\n .items-start {\n align-items: flex-start;\n }\n .justify-between {\n justify-content: space-between;\n }\n .justify-center {\n justify-content: center;\n }\n .justify-end {\n justify-content: flex-end;\n }\n .gap-1 {\n gap: calc(var(--spacing) * 1);\n }\n .gap-1\\.5 {\n gap: calc(var(--spacing) * 1.5);\n }\n .gap-2 {\n gap: calc(var(--spacing) * 2);\n }\n .gap-3 {\n gap: calc(var(--spacing) * 3);\n }\n .gap-4 {\n gap: calc(var(--spacing) * 4);\n }\n .gap-6 {\n gap: calc(var(--spacing) * 6);\n }\n .space-y-0\\.5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 0.5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 0.5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-1 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-2 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 2) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 2) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-3 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-4 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-5 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 5) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 5) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .space-y-12 {\n :where(& > :not(:last-child)) {\n --tw-space-y-reverse: 0;\n margin-block-start: calc(calc(var(--spacing) * 12) * var(--tw-space-y-reverse));\n margin-block-end: calc(calc(var(--spacing) * 12) * calc(1 - var(--tw-space-y-reverse)));\n }\n }\n .divide-y {\n :where(& > :not(:last-child)) {\n --tw-divide-y-reverse: 0;\n border-bottom-style: var(--tw-border-style);\n border-top-style: var(--tw-border-style);\n border-top-width: calc(1px * var(--tw-divide-y-reverse));\n border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));\n }\n }\n .divide-slate-200 {\n :where(& > :not(:last-child)) {\n border-color: var(--color-slate-200);\n }\n }\n .truncate {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .overflow-auto {\n overflow: auto;\n }\n .overflow-hidden {\n overflow: hidden;\n }\n .rounded {\n border-radius: 0.25rem;\n }\n .rounded-full {\n border-radius: calc(infinity * 1px);\n }\n .rounded-lg {\n border-radius: var(--radius-lg);\n }\n .rounded-md {\n border-radius: var(--radius-md);\n }\n .rounded-xl {\n border-radius: var(--radius-xl);\n }\n .border {\n border-style: var(--tw-border-style);\n border-width: 1px;\n }\n .border-t {\n border-top-style: var(--tw-border-style);\n border-top-width: 1px;\n }\n .border-b {\n border-bottom-style: var(--tw-border-style);\n border-bottom-width: 1px;\n }\n .border-dashed {\n --tw-border-style: dashed;\n border-style: dashed;\n }\n .border-amber-300 {\n border-color: var(--color-amber-300);\n }\n .border-emerald-300 {\n border-color: var(--color-emerald-300);\n }\n .border-gold-500\\/60 {\n border-color: color-mix(in srgb, #bb8f2c 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-gold-500) 60%, transparent);\n }\n }\n .border-slate-100 {\n border-color: var(--color-slate-100);\n }\n .border-slate-200 {\n border-color: var(--color-slate-200);\n }\n .border-slate-300 {\n border-color: var(--color-slate-300);\n }\n .border-transparent {\n border-color: transparent;\n }\n .border-white\\/70 {\n border-color: color-mix(in srgb, #fff 70%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n border-color: color-mix(in oklab, var(--color-white) 70%, transparent);\n }\n }\n .bg-amber-100 {\n background-color: var(--color-amber-100);\n }\n .bg-amber-500 {\n background-color: var(--color-amber-500);\n }\n .bg-brand-900\\/60 {\n background-color: color-mix(in srgb, #06462d 60%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-brand-900) 60%, transparent);\n }\n }\n .bg-emerald-100 {\n background-color: var(--color-emerald-100);\n }\n .bg-emerald-600 {\n background-color: var(--color-emerald-600);\n }\n .bg-gold-400\\/15 {\n background-color: color-mix(in srgb, #d2a436 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-gold-400) 15%, transparent);\n }\n }\n .bg-slate-50 {\n background-color: var(--color-slate-50);\n }\n .bg-slate-100 {\n background-color: var(--color-slate-100);\n }\n .bg-slate-200 {\n background-color: var(--color-slate-200);\n }\n .bg-slate-300 {\n background-color: var(--color-slate-300);\n }\n .bg-slate-800 {\n background-color: var(--color-slate-800);\n }\n .bg-slate-900 {\n background-color: var(--color-slate-900);\n }\n .bg-slate-950\\/25 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 25%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 25%, transparent);\n }\n }\n .bg-slate-950\\/45 {\n background-color: color-mix(in srgb, oklch(12.9% 0.042 264.695) 45%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-slate-950) 45%, transparent);\n }\n }\n .bg-surface-50 {\n background-color: var(--color-surface-50);\n }\n .bg-transparent {\n background-color: transparent;\n }\n .bg-white {\n background-color: var(--color-white);\n }\n .bg-white\\/15 {\n background-color: color-mix(in srgb, #fff 15%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n background-color: color-mix(in oklab, var(--color-white) 15%, transparent);\n }\n }\n .bg-gradient-to-t {\n --tw-gradient-position: to top in oklab;\n background-image: linear-gradient(var(--tw-gradient-stops));\n }\n .from-slate-950\\/35 {\n --tw-gradient-from: color-mix(in srgb, oklch(12.9% 0.042 264.695) 35%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-from: color-mix(in oklab, var(--color-slate-950) 35%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .to-slate-950\\/10 {\n --tw-gradient-to: color-mix(in srgb, oklch(12.9% 0.042 264.695) 10%, transparent);\n @supports (color: color-mix(in lab, red, red)) {\n --tw-gradient-to: color-mix(in oklab, var(--color-slate-950) 10%, transparent);\n }\n --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n }\n .object-cover {\n -o-object-fit: cover;\n object-fit: cover;\n }\n .p-2 {\n padding: calc(var(--spacing) * 2);\n }\n .p-3 {\n padding: calc(var(--spacing) * 3);\n }\n .p-4 {\n padding: calc(var(--spacing) * 4);\n }\n .p-5 {\n padding: calc(var(--spacing) * 5);\n }\n .p-6 {\n padding: calc(var(--spacing) * 6);\n }\n .p-8 {\n padding: calc(var(--spacing) * 8);\n }\n .px-1 {\n padding-inline: calc(var(--spacing) * 1);\n }\n .px-2 {\n padding-inline: calc(var(--spacing) * 2);\n }\n .px-2\\.5 {\n padding-inline: calc(var(--spacing) * 2.5);\n }\n .px-3 {\n padding-inline: calc(var(--spacing) * 3);\n }\n .px-4 {\n padding-inline: calc(var(--spacing) * 4);\n }\n .px-5 {\n padding-inline: calc(var(--spacing) * 5);\n }\n .px-6 {\n padding-inline: calc(var(--spacing) * 6);\n }\n .py-1 {\n padding-block: calc(var(--spacing) * 1);\n }\n .py-1\\.5 {\n padding-block: calc(var(--spacing) * 1.5);\n }\n .py-2 {\n padding-block: calc(var(--spacing) * 2);\n }\n .py-3 {\n padding-block: calc(var(--spacing) * 3);\n }\n .py-5 {\n padding-block: calc(var(--spacing) * 5);\n }\n .py-8 {\n padding-block: calc(var(--spacing) * 8);\n }\n .py-10 {\n padding-block: calc(var(--spacing) * 10);\n }\n .py-14 {\n padding-block: calc(var(--spacing) * 14);\n }\n .pt-2 {\n padding-top: calc(var(--spacing) * 2);\n }\n .pt-3 {\n padding-top: calc(var(--spacing) * 3);\n }\n .pt-4 {\n padding-top: calc(var(--spacing) * 4);\n }\n .pb-3 {\n padding-bottom: calc(var(--spacing) * 3);\n }\n .pb-4 {\n padding-bottom: calc(var(--spacing) * 4);\n }\n .pl-5 {\n padding-left: calc(var(--spacing) * 5);\n }\n .text-center {\n text-align: center;\n }\n .text-left {\n text-align: left;\n }\n .text-2xl {\n font-size: var(--text-2xl);\n line-height: var(--tw-leading, var(--text-2xl--line-height));\n }\n .text-3xl {\n font-size: var(--text-3xl);\n line-height: var(--tw-leading, var(--text-3xl--line-height));\n }\n .text-5xl {\n font-size: var(--text-5xl);\n line-height: var(--tw-leading, var(--text-5xl--line-height));\n }\n .text-base {\n font-size: var(--text-base);\n line-height: var(--tw-leading, var(--text-base--line-height));\n }\n .text-lg {\n font-size: var(--text-lg);\n line-height: var(--tw-leading, var(--text-lg--line-height));\n }\n .text-sm {\n font-size: var(--text-sm);\n line-height: var(--tw-leading, var(--text-sm--line-height));\n }\n .text-xs {\n font-size: var(--text-xs);\n line-height: var(--tw-leading, var(--text-xs--line-height));\n }\n .leading-6 {\n --tw-leading: calc(var(--spacing) * 6);\n line-height: calc(var(--spacing) * 6);\n }\n .leading-7 {\n --tw-leading: calc(var(--spacing) * 7);\n line-height: calc(var(--spacing) * 7);\n }\n .leading-none {\n --tw-leading: 1;\n line-height: 1;\n }\n .leading-tight {\n --tw-leading: var(--leading-tight);\n line-height: var(--leading-tight);\n }\n .font-medium {\n --tw-font-weight: var(--font-weight-medium);\n font-weight: var(--font-weight-medium);\n }\n .font-semibold {\n --tw-font-weight: var(--font-weight-semibold);\n font-weight: var(--font-weight-semibold);\n }\n .text-wrap {\n text-wrap: wrap;\n }\n .whitespace-nowrap {\n white-space: nowrap;\n }\n .text-amber-400 {\n color: var(--color-amber-400);\n }\n .text-amber-700 {\n color: var(--color-amber-700);\n }\n .text-current\\/80 {\n color: currentcolor;\n @supports (color: color-mix(in lab, red, red)) {\n color: color-mix(in oklab, currentcolor 80%, transparent);\n }\n }\n .text-emerald-600 {\n color: var(--color-emerald-600);\n }\n .text-emerald-700 {\n color: var(--color-emerald-700);\n }\n .text-slate-100 {\n color: var(--color-slate-100);\n }\n .text-slate-300 {\n color: var(--color-slate-300);\n }\n .text-slate-400 {\n color: var(--color-slate-400);\n }\n .text-slate-500 {\n color: var(--color-slate-500);\n }\n .text-slate-600 {\n color: var(--color-slate-600);\n }\n .text-slate-700 {\n color: var(--color-slate-700);\n }\n .text-slate-800 {\n color: var(--color-slate-800);\n }\n .text-slate-900 {\n color: var(--color-slate-900);\n }\n .text-white {\n color: var(--color-white);\n }\n .lowercase {\n text-transform: lowercase;\n }\n .uppercase {\n text-transform: uppercase;\n }\n .italic {\n font-style: italic;\n }\n .ordinal {\n --tw-ordinal: ordinal;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .tabular-nums {\n --tw-numeric-spacing: tabular-nums;\n font-variant-numeric: var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,);\n }\n .overline {\n text-decoration-line: overline;\n }\n .underline {\n text-decoration-line: underline;\n }\n .underline-offset-2 {\n text-underline-offset: 2px;\n }\n .antialiased {\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n .accent-amber-500 {\n accent-color: var(--color-amber-500);\n }\n .accent-emerald-600 {\n accent-color: var(--color-emerald-600);\n }\n .accent-slate-800 {\n accent-color: var(--color-slate-800);\n }\n .opacity-0 {\n opacity: 0%;\n }\n .shadow {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-md {\n --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-none {\n --tw-shadow: 0 0 #0000;\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .shadow-sm {\n --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-1 {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n .ring-slate-200 {\n --tw-ring-color: var(--color-slate-200);\n }\n .ring-slate-300 {\n --tw-ring-color: var(--color-slate-300);\n }\n .outline {\n outline-style: var(--tw-outline-style);\n outline-width: 1px;\n }\n .blur {\n --tw-blur: blur(8px);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .grayscale {\n --tw-grayscale: grayscale(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .invert {\n --tw-invert: invert(100%);\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);\n }\n .filter\\! {\n filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,) !important;\n }\n .backdrop-blur-sm {\n --tw-backdrop-blur: blur(var(--blur-sm));\n backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n }\n .transition {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, backdrop-filter, display, content-visibility, overlay, pointer-events;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-colors {\n transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-opacity {\n transition-property: opacity;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .transition-transform {\n transition-property: transform, translate, scale, rotate;\n transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n transition-duration: var(--tw-duration, var(--default-transition-duration));\n }\n .duration-300 {\n --tw-duration: 300ms;\n transition-duration: 300ms;\n }\n .ease-in-out {\n --tw-ease: var(--ease-in-out);\n transition-timing-function: var(--ease-in-out);\n }\n .ease-out {\n --tw-ease: var(--ease-out);\n transition-timing-function: var(--ease-out);\n }\n .outline-none {\n --tw-outline-style: none;\n outline-style: none;\n }\n .select-all {\n -webkit-user-select: all;\n -moz-user-select: all;\n user-select: all;\n }\n .group-focus-within\\:opacity-100 {\n &:is(:where(.group):focus-within ) {\n opacity: 100%;\n }\n }\n .group-hover\\:scale-105 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n --tw-scale-x: 105%;\n --tw-scale-y: 105%;\n --tw-scale-z: 105%;\n scale: var(--tw-scale-x) var(--tw-scale-y);\n }\n }\n }\n .group-hover\\:opacity-100 {\n &:is(:where(.group):hover ) {\n @media (hover: hover) {\n opacity: 100%;\n }\n }\n }\n .placeholder\\:text-slate-400 {\n &::-moz-placeholder {\n color: var(--color-slate-400);\n }\n &::placeholder {\n color: var(--color-slate-400);\n }\n }\n .odd\\:bg-slate-50 {\n &:nth-child(odd) {\n background-color: var(--color-slate-50);\n }\n }\n .hover\\:bg-slate-50 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-50);\n }\n }\n }\n .hover\\:bg-slate-100 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-100);\n }\n }\n }\n .hover\\:bg-slate-700 {\n &:hover {\n @media (hover: hover) {\n background-color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-current {\n &:hover {\n @media (hover: hover) {\n color: currentcolor;\n }\n }\n }\n .hover\\:text-slate-700 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-700);\n }\n }\n }\n .hover\\:text-slate-800 {\n &:hover {\n @media (hover: hover) {\n color: var(--color-slate-800);\n }\n }\n }\n .focus\\:border-slate-400 {\n &:focus {\n border-color: var(--color-slate-400);\n }\n }\n .focus\\:border-slate-500 {\n &:focus {\n border-color: var(--color-slate-500);\n }\n }\n .focus\\:ring-2 {\n &:focus {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus\\:ring-slate-200 {\n &:focus {\n --tw-ring-color: var(--color-slate-200);\n }\n }\n .focus\\:outline-none {\n &:focus {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .focus-visible\\:ring-2 {\n &:focus-visible {\n --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n }\n }\n .focus-visible\\:ring-slate-300 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-300);\n }\n }\n .focus-visible\\:ring-slate-400 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-400);\n }\n }\n .focus-visible\\:ring-slate-600 {\n &:focus-visible {\n --tw-ring-color: var(--color-slate-600);\n }\n }\n .focus-visible\\:ring-offset-2 {\n &:focus-visible {\n --tw-ring-offset-width: 2px;\n --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n }\n }\n .focus-visible\\:outline-none {\n &:focus-visible {\n --tw-outline-style: none;\n outline-style: none;\n }\n }\n .disabled\\:cursor-default {\n &:disabled {\n cursor: default;\n }\n }\n .disabled\\:cursor-not-allowed {\n &:disabled {\n cursor: not-allowed;\n }\n }\n .disabled\\:opacity-50 {\n &:disabled {\n opacity: 50%;\n }\n }\n .md\\:grid-cols-2 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n }\n .md\\:grid-cols-3 {\n @media (width >= 48rem) {\n grid-template-columns: repeat(3, minmax(0, 1fr));\n }\n }\n}\n@layer base {\n html,\n body,\n #root {\n min-height: 100vh;\n }\n body {\n margin: calc(var(--spacing) 0);\n background-color: var(--color-slate-50);\n color: var(--color-slate-900);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;\n }\n}\n@property --tw-translate-x {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-y {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-translate-z {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-rotate-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-rotate-z {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-x {\n syntax: "";\n inherits: false;\n}\n@property --tw-skew-y {\n syntax: "";\n inherits: false;\n}\n@property --tw-space-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-divide-y-reverse {\n syntax: "";\n inherits: false;\n initial-value: 0;\n}\n@property --tw-border-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-gradient-position {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-via {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-to {\n syntax: "<color>";\n inherits: false;\n initial-value: #0000;\n}\n@property --tw-gradient-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-via-stops {\n syntax: "";\n inherits: false;\n}\n@property --tw-gradient-from-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n syntax: "<length-percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-leading {\n syntax: "";\n inherits: false;\n}\n@property --tw-font-weight {\n syntax: "";\n inherits: false;\n}\n@property --tw-ordinal {\n syntax: "";\n inherits: false;\n}\n@property --tw-slashed-zero {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-figure {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-spacing {\n syntax: "";\n inherits: false;\n}\n@property --tw-numeric-fraction {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-inset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-inset-ring-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n syntax: "";\n inherits: false;\n}\n@property --tw-ring-offset-width {\n syntax: "<length>";\n inherits: false;\n initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n syntax: "";\n inherits: false;\n initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n syntax: "";\n inherits: false;\n initial-value: 0 0 #0000;\n}\n@property --tw-outline-style {\n syntax: "";\n inherits: false;\n initial-value: solid;\n}\n@property --tw-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-color {\n syntax: "";\n inherits: false;\n}\n@property --tw-drop-shadow-alpha {\n syntax: "<percentage>";\n inherits: false;\n initial-value: 100%;\n}\n@property --tw-drop-shadow-size {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-blur {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-brightness {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-contrast {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-grayscale {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-invert {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-opacity {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-saturate {\n syntax: "";\n inherits: false;\n}\n@property --tw-backdrop-sepia {\n syntax: "";\n inherits: false;\n}\n@property --tw-duration {\n syntax: "";\n inherits: false;\n}\n@property --tw-ease {\n syntax: "";\n inherits: false;\n}\n@property --tw-scale-x {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-y {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@property --tw-scale-z {\n syntax: "";\n inherits: false;\n initial-value: 1;\n}\n@keyframes pulse {\n 50% {\n opacity: 0.5;\n }\n}\n@layer properties {\n @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n , ::before, ::after, ::backdrop {\n --tw-translate-x: 0;\n --tw-translate-y: 0;\n --tw-translate-z: 0;\n --tw-rotate-x: initial;\n --tw-rotate-y: initial;\n --tw-rotate-z: initial;\n --tw-skew-x: initial;\n --tw-skew-y: initial;\n --tw-space-y-reverse: 0;\n --tw-divide-y-reverse: 0;\n --tw-border-style: solid;\n --tw-gradient-position: initial;\n --tw-gradient-from: #0000;\n --tw-gradient-via: #0000;\n --tw-gradient-to: #0000;\n --tw-gradient-stops: initial;\n --tw-gradient-via-stops: initial;\n --tw-gradient-from-position: 0%;\n --tw-gradient-via-position: 50%;\n --tw-gradient-to-position: 100%;\n --tw-leading: initial;\n --tw-font-weight: initial;\n --tw-ordinal: initial;\n --tw-slashed-zero: initial;\n --tw-numeric-figure: initial;\n --tw-numeric-spacing: initial;\n --tw-numeric-fraction: initial;\n --tw-shadow: 0 0 #0000;\n --tw-shadow-color: initial;\n --tw-shadow-alpha: 100%;\n --tw-inset-shadow: 0 0 #0000;\n --tw-inset-shadow-color: initial;\n --tw-inset-shadow-alpha: 100%;\n --tw-ring-color: initial;\n --tw-ring-shadow: 0 0 #0000;\n --tw-inset-ring-color: initial;\n --tw-inset-ring-shadow: 0 0 #0000;\n --tw-ring-inset: initial;\n --tw-ring-offset-width: 0px;\n --tw-ring-offset-color: #fff;\n --tw-ring-offset-shadow: 0 0 #0000;\n --tw-outline-style: solid;\n --tw-blur: initial;\n --tw-brightness: initial;\n --tw-contrast: initial;\n --tw-grayscale: initial;\n --tw-hue-rotate: initial;\n --tw-invert: initial;\n --tw-opacity: initial;\n --tw-saturate: initial;\n --tw-sepia: initial;\n --tw-drop-shadow: initial;\n --tw-drop-shadow-color: initial;\n --tw-drop-shadow-alpha: 100%;\n --tw-drop-shadow-size: initial;\n --tw-backdrop-blur: initial;\n --tw-backdrop-brightness: initial;\n --tw-backdrop-contrast: initial;\n --tw-backdrop-grayscale: initial;\n --tw-backdrop-hue-rotate: initial;\n --tw-backdrop-invert: initial;\n --tw-backdrop-opacity: initial;\n --tw-backdrop-saturate: initial;\n --tw-backdrop-sepia: initial;\n --tw-duration: initial;\n --tw-ease: initial;\n --tw-scale-x: 1;\n --tw-scale-y: 1;\n --tw-scale-z: 1;\n }\n }\n}\n');const r={small:"h-8 w-8 text-xs",medium:"h-10 w-10 text-sm",large:"h-14 w-14 text-lg"},i={circle:"rounded-full",rounded:"rounded-lg"};function o({name:e,src:t,alt:a,size:o="medium",shape:l="circle",className:s,...c}){const d=function(n){const[e,t]=n.trim().split(/\s+/,2);return`${e?.[0]??""}${t?.[0]??""}`.toUpperCase()}(e);return t?n("img",{src:t,alt:a??e,className:["inline-flex shrink-0 object-cover ring-1 ring-slate-200",r[o],i[l],s].filter(Boolean).join(" "),...c}):n("span",{"aria-label":e,className:["inline-flex shrink-0 items-center justify-center bg-slate-200 font-semibold text-slate-700",r[o],i[l],s].filter(Boolean).join(" "),children:d})}const l={neutral:"bg-slate-100 text-slate-700",success:"bg-emerald-100 text-emerald-700",warning:"bg-amber-100 text-amber-700"};function s({text:e,tone:t="neutral",className:a,...r}){return n("span",{className:["inline-flex items-center rounded-full px-2.5 py-1 text-xs font-semibold",l[t],a].filter(Boolean).join(" "),...r,children:e})}const c={primary:"bg-slate-900 text-white hover:bg-slate-700 focus-visible:ring-slate-600",secondary:"bg-white text-slate-900 ring-1 ring-slate-300 hover:bg-slate-50 focus-visible:ring-slate-400",ghost:"bg-transparent text-slate-700 hover:bg-slate-100 focus-visible:ring-slate-300"},d={small:"h-8 px-3 text-sm",medium:"h-10 px-4 text-sm",large:"h-12 px-5 text-base"};function p({label:e,variant:t="secondary",size:a="medium",className:r,type:i="button",...o}){return n("button",{type:i,className:["inline-flex items-center justify-center rounded-md font-medium transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2","disabled:cursor-not-allowed disabled:opacity-50",c[t],d[a],r].filter(Boolean).join(" "),...o,children:e})}const h={outlined:"border border-slate-200 bg-white",elevated:"border border-slate-100 bg-white shadow-sm",subtle:"border border-transparent bg-slate-100"};function m({title:t,description:a,footer:r,children:i,variant:o="outlined",className:l,...s}){return e("article",{className:["w-full rounded-xl p-5",h[o],l].filter(Boolean).join(" "),...s,children:[e("header",{className:"mb-3 space-y-1",children:[n("h3",{className:"text-base font-semibold text-slate-900",children:t}),a?n("p",{className:"text-sm text-slate-600",children:a}):null]}),i?n("div",{className:"text-sm text-slate-700",children:i}):null,r?n("footer",{className:"mt-4 border-t border-slate-200 pt-3 text-sm text-slate-600",children:r}):null]})}const w={small:"h-4 w-4",medium:"h-5 w-5",large:"h-6 w-6"};function g({label:t,description:a,size:r="medium",className:i,id:o,...l}){return e("label",{htmlFor:o,className:"inline-flex cursor-pointer items-start gap-3",children:[n("input",{id:o,type:"checkbox",className:["mt-0.5 rounded border-slate-300 text-slate-900","focus:ring-2 focus:ring-slate-200",w[r],i].filter(Boolean).join(" "),...l}),e("span",{className:"space-y-0.5",children:[n("span",{className:"block text-sm font-medium text-slate-800",children:t}),a?n("span",{className:"block text-xs text-slate-500",children:a}):null]})]})}const u={neutral:{filled:"bg-slate-800 text-white",outline:"border border-slate-300 bg-white text-slate-700",soft:"bg-slate-100 text-slate-700"},success:{filled:"bg-emerald-600 text-white",outline:"border border-emerald-300 bg-white text-emerald-700",soft:"bg-emerald-100 text-emerald-700"},warning:{filled:"bg-amber-500 text-white",outline:"border border-amber-300 bg-white text-amber-700",soft:"bg-amber-100 text-amber-700"}};function v({label:t,variant:a="soft",tone:r="neutral",onRemove:i,className:o,...l}){return e("div",{className:["inline-flex items-center gap-2 rounded-full px-3 py-1.5 text-xs font-medium",u[r][a],o].filter(Boolean).join(" "),...l,children:[n("span",{children:t}),i?n("button",{type:"button",onClick:i,"aria-label":`Remove ${t}`,className:"rounded-full px-1 text-current/80 hover:text-current focus-visible:outline-none",children:"✕"}):null]})}function b({label:t,orientation:a="horizontal",className:r,...i}){return"vertical"===a?n("div",{"aria-hidden":!0,className:["h-8 w-px bg-slate-200",r].filter(Boolean).join(" "),...i}):t?e("div",{className:["flex w-full items-center gap-3 text-xs text-slate-500",r].filter(Boolean).join(" "),...i,children:[n("span",{className:"h-px flex-1 bg-slate-200"}),n("span",{children:t}),n("span",{className:"h-px flex-1 bg-slate-200"})]}):n("div",{"aria-hidden":!0,className:["h-px w-full bg-slate-200",r].filter(Boolean).join(" "),...i})}function f({items:t,variant:a="unordered",dense:r=!1,className:i,...o}){const l=r?"space-y-1":"space-y-2";return"ordered"===a?n("ol",{className:["list-decimal pl-5 text-sm text-slate-700",l,i].filter(Boolean).join(" "),...o,children:t.map(e=>n("li",{children:e},e))}):n("ul","check"===a?{className:["text-sm text-slate-700",l,i].filter(Boolean).join(" "),...o,children:t.map(t=>e("li",{className:"flex items-start gap-2",children:[n("span",{className:"mt-0.5 text-emerald-600",children:"✓"}),n("span",{children:t})]},t))}:{className:["list-disc pl-5 text-sm text-slate-700",l,i].filter(Boolean).join(" "),...o,children:t.map(e=>n("li",{children:e},e))})}const x={small:"text-lg",medium:"text-2xl",large:"text-3xl"};function y({value:e,max:t=5,size:a="medium",readOnly:r=!1,onValueChange:i}){return n("div",{className:"inline-flex items-center gap-1",role:"radiogroup","aria-label":"Rating",children:Array.from({length:t},(t,o)=>{const l=o+1,s=l<=e;return n("button",{type:"button",role:"radio","aria-checked":s,"aria-label":`Rate ${l}`,disabled:r,onClick:()=>i?.(l),className:["leading-none transition-colors","focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300","disabled:cursor-default",x[a],s?"text-amber-400":"text-slate-300"].join(" "),children:"★"},l)})})}const k={default:"border-slate-300 bg-white focus:border-slate-500 focus:ring-slate-200",filled:"border-transparent bg-slate-100 focus:border-slate-400 focus:ring-slate-200",ghost:"border-slate-200 bg-transparent focus:border-slate-500 focus:ring-slate-200"};function N({id:t,label:a,options:r,placeholder:i,variant:o="default",className:l,...s}){return e("div",{className:"flex w-full flex-col gap-1.5",children:[a?n("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,e("select",{id:t,className:["h-10 w-full rounded-md border px-3 text-sm text-slate-900 outline-none","focus:ring-2 disabled:cursor-not-allowed disabled:opacity-50",k[o],l].filter(Boolean).join(" "),...s,children:[i?n("option",{value:"",children:i}):null,r.map(e=>n("option",{value:e.value,children:e.label},e.value))]})]})}const z={text:"h-4 w-full rounded",circular:"h-10 w-10 rounded-full",rectangular:"h-24 w-full rounded-lg"};function j({variant:e="text",width:t,height:a,animated:r=!0,className:i,style:o,...l}){return n("div",{"aria-hidden":!0,className:["bg-slate-200",r?"animate-pulse":"",z[e],i].filter(Boolean).join(" "),style:{...o,width:t,height:a},...l})}const C={neutral:"accent-slate-800",success:"accent-emerald-600",warning:"accent-amber-500"};function S({id:t,label:a,variant:r="neutral",className:i,...o}){return e("div",{className:"flex w-full flex-col gap-1.5",children:[a?n("label",{htmlFor:t,className:"text-sm font-medium text-slate-700",children:a}):null,n("input",{id:t,type:"range",className:["h-2 w-full cursor-pointer rounded-lg bg-slate-200","focus:outline-none focus:ring-2 focus:ring-slate-200",C[r],i].filter(Boolean).join(" "),...o})]})}const B={small:"h-5 w-9",medium:"h-6 w-11"},L={small:"h-4 w-4",medium:"h-5 w-5"},A={small:"translate-x-4",medium:"translate-x-5"};function M({checked:t,label:a,onCheckedChange:r,size:i="medium",className:o,...l}){return e("div",{className:"inline-flex items-center gap-3",children:[n("button",{type:"button",role:"switch","aria-checked":t,className:["relative inline-flex shrink-0 items-center rounded-full border border-transparent transition-colors","focus:outline-none focus-visible:ring-2 focus-visible:ring-slate-400 focus-visible:ring-offset-2",B[i],t?"bg-slate-900":"bg-slate-300",o].filter(Boolean).join(" "),onClick:()=>r?.(!t),...l,children:n("span",{className:["inline-block rounded-full bg-white transition-transform",L[i],t?A[i]:"translate-x-0.5"].filter(Boolean).join(" ")})}),a?n("span",{className:"text-sm text-slate-700",children:a}):null]})}const $={default:"border-b border-slate-100",striped:"odd:bg-slate-50 border-b border-slate-100",compact:"border-b border-slate-100"},E={default:"px-4 py-3",striped:"px-4 py-3",compact:"px-3 py-2"};function F({columns:t,rows:a,variant:r="default",className:i,...o}){return n("div",{className:["w-full overflow-auto rounded-lg border border-slate-200 bg-white",i].filter(Boolean).join(" "),...o,children:e("table",{className:"w-full min-w-[460px] border-collapse text-left text-sm",children:[n("thead",{className:"bg-slate-50 text-slate-600",children:n("tr",{children:t.map(e=>n("th",{className:`${E[r]} font-semibold`,children:e.title},e.key))})}),n("tbody",{className:"text-slate-700",children:a.map(e=>n("tr",{className:$[r],children:t.map(t=>n("td",{className:E[r],children:e[t.key]},`${e.id}-${t.key}`))},e.id))})]})})}function I({label:t,id:a,className:r,...i}){return e("div",{className:"flex w-full flex-col gap-1.5",children:[t?n("label",{htmlFor:a,className:"text-sm font-medium text-slate-700",children:t}):null,n("input",{id:a,className:["h-10 w-full rounded-md border border-slate-300 bg-white px-3 text-sm text-slate-900","placeholder:text-slate-400 focus:border-slate-500 focus:outline-none focus:ring-2 focus:ring-slate-200",r].filter(Boolean).join(" "),...i})]})}const R={top:"bottom-full left-1/2 mb-2 -translate-x-1/2",bottom:"left-1/2 top-full mt-2 -translate-x-1/2",left:"right-full top-1/2 mr-2 -translate-y-1/2",right:"left-full top-1/2 ml-2 -translate-y-1/2"};function q({content:t,children:a,placement:r="top",className:i,...o}){return e("div",{className:["group relative inline-flex",i].filter(Boolean).join(" "),...o,children:[a,n("div",{role:"tooltip",className:["pointer-events-none absolute z-10 whitespace-nowrap rounded-md bg-slate-900 px-2 py-1 text-xs text-white","opacity-0 transition-opacity group-hover:opacity-100 group-focus-within:opacity-100",R[r]].join(" "),children:t})]})}function P({imageSrc:t,imageAlt:a,title:r,description:i,meta:o,primaryActionLabel:l="تقدم الآن",secondaryActionLabel:s="لمعرفة المزيد",onPrimaryAction:c,onSecondaryAction:d}){return e("article",{className:"overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[n("img",{src:t,alt:a,className:"h-52 w-full object-cover"}),e("div",{className:"space-y-3 p-4",children:[n("h3",{className:"text-lg font-semibold text-slate-900",children:r}),n("p",{className:"text-sm leading-6 text-slate-600",children:i}),o?n("p",{className:"text-xs text-slate-500",children:o}):null,e("div",{className:"flex items-center justify-end gap-2 pt-2",children:[s?n(p,{label:s,variant:"secondary",size:"small",onClick:d}):null,l?n(p,{label:l,variant:"primary",size:"small",onClick:c}):null]})]})]})}function T({title:t,description:a,actionLabel:r,onAction:i}){return e("div",{className:"flex flex-wrap items-start justify-between gap-4",dir:"rtl",children:[e("div",{className:"space-y-2",children:[e("h2",{className:"inline-flex items-center gap-2 text-3xl font-semibold text-slate-900",children:[n("span",{className:"inline-block h-6 w-6 rounded-md border border-gold-500/60 bg-gold-400/15","aria-hidden":"true"}),t]}),a?n("p",{className:"max-w-4xl text-sm leading-6 text-slate-600",children:a}):null]}),r?n(p,{label:r,variant:"secondary",onClick:i}):null]})}function U({value:t,onValueChange:a,onSearch:r,placeholder:i="Search components…"}){return e("div",{className:"flex w-full max-w-xl items-end gap-3",children:[n(I,{id:"search",label:"Search",placeholder:i,value:t,onChange:n=>a(n.target.value)}),n(p,{label:"Search",variant:"primary",onClick:r})]})}function D({imageSrc:t,imageAlt:a,title:r}){return e("article",{className:"group overflow-hidden rounded-xl border border-slate-200 bg-white",dir:"rtl",children:[e("div",{className:"relative",children:[n("img",{src:t,alt:a,className:"h-48 w-full object-cover transition-transform duration-300 group-hover:scale-105"}),n("div",{className:"absolute inset-0 bg-gradient-to-t from-slate-950/35 to-slate-950/10"}),n("button",{type:"button","aria-label":"Play video",className:"absolute left-1/2 top-1/2 inline-flex h-12 w-12 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-white/70 bg-white/15 text-white backdrop-blur-sm",children:"▶"})]}),r?n("p",{className:"px-4 py-3 text-sm font-medium text-slate-700",children:r}):null]})}function H({productName:t,userName:a,onLogin:r,onLogout:i}){return n("header",{className:"w-full border-b border-slate-200 bg-white",children:e("div",{className:"mx-auto flex h-16 max-w-6xl items-center justify-between px-4",children:[n("h1",{className:"text-lg font-semibold text-slate-900",children:t}),a?e("div",{className:"flex items-center gap-3",children:[e("span",{className:"text-sm text-slate-600",children:["Welcome, ",a]}),n(p,{size:"small",label:"Log out",onClick:i})]}):n(p,{size:"small",variant:"primary",label:"Log in",onClick:r})]})})}function V({imageSrc:t,title:a,subtitle:r,ctaLabel:i="إجراء رئيسي",onCtaClick:o}){return e("section",{className:"relative min-h-[22rem] overflow-hidden",dir:"rtl",children:[n("img",{src:t,alt:"Hero",className:"absolute inset-0 h-full w-full object-cover"}),n("div",{className:"absolute inset-0 bg-brand-900/60"}),n("div",{className:"relative mx-auto flex h-full max-w-6xl items-center px-6 py-14",children:e("div",{className:"max-w-2xl space-y-4 text-white",children:[n("h1",{className:"text-5xl font-semibold leading-tight",children:a}),n("p",{className:"text-base leading-7 text-slate-100",children:r}),n(p,{label:i,variant:"secondary",onClick:o})]})})]})}function J({productName:t,userName:a,onLogin:r,onLogout:i,children:o}){return e("div",{className:"min-h-screen bg-slate-50",children:[n(H,{productName:t,userName:a,onLogin:r,onLogout:i}),n("main",{className:"mx-auto max-w-6xl px-4 py-8",children:o})]})}const O=[{name:"Button",level:"Atom",ready:!0},{name:"SearchBar",level:"Molecule",ready:!0},{name:"AppHeader",level:"Organism",ready:!0},{name:"DashboardTemplate",level:"Template",ready:!0},{name:"ProfilePage",level:"Page",ready:!1}];function W(){const[r,i]=t(""),[o,l]=t("Jane Doe"),c=a(()=>O.filter(n=>`${n.name} ${n.level}`.toLowerCase().includes(r.trim().toLowerCase())),[r]);return e(J,{productName:"FutureFace Design System",userName:o,onLogin:()=>l("Jane Doe"),onLogout:()=>l(void 0),children:[e("section",{className:"space-y-5",children:[n("h2",{className:"text-2xl font-semibold text-slate-900",children:"Atomic Design Inventory"}),n("p",{className:"text-sm text-slate-600",children:"Components are grouped as atoms, molecules, organisms, templates, and pages."}),n(U,{value:r,onValueChange:i})]}),n("section",{className:"mt-8 grid gap-3 md:grid-cols-2",children:c.map(t=>e("article",{className:"rounded-lg border border-slate-200 bg-white p-4",children:[e("div",{className:"mb-2 flex items-center justify-between gap-3",children:[n("h3",{className:"font-medium text-slate-800",children:t.name}),n(s,{text:t.ready?"Ready":"Planned",tone:t.ready?"success":"warning"})]}),e("p",{className:"text-sm text-slate-600",children:["Level: ",t.level]})]},t.name))})]})}const G=[{title:"برنامج كفالة",description:"برنامج لدعم المنشآت الناشئة والصغيرة عبر أدوات تمويل متنوعة تسهم في رفع الجاهزية.",imageSrc:"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج التمويل المشترك",description:"يقدم فرصًا تمويلية بالشراكة مع الجهات المصرفية لتمكين المشاريع السياحية المؤهلة.",imageSrc:"https://images.unsplash.com/photo-1621761191319-c6fb62004040?auto=format&fit=crop&w=1200&q=80"},{title:"برنامج شركات التمويل",description:"حلول تمويل مرنة مصممة لتناسب دورة حياة المشاريع وتحديات التشغيل والتوسع.",imageSrc:"https://images.unsplash.com/photo-1518183214770-9cffbec72538?auto=format&fit=crop&w=1200&q=80"}],K=[{imageSrc:"https://images.unsplash.com/photo-1470337458703-46ad1756a187?auto=format&fit=crop&w=1200&q=80",title:"نجاح منشأة ضيافة محلية"},{imageSrc:"https://images.unsplash.com/photo-1573496529574-be85d6a60704?auto=format&fit=crop&w=1200&q=80",title:"تمكين رواد الأعمال"},{imageSrc:"https://images.unsplash.com/photo-1464047736619-9d26d4f6cf44?auto=format&fit=crop&w=1200&q=80",title:"تجربة تطوير الحرف"}];function Q(){return e("div",{className:"bg-surface-50",dir:"rtl",children:[n(V,{imageSrc:"https://images.unsplash.com/photo-1566073771259-6a8506099945?auto=format&fit=crop&w=1800&q=80",title:"القسم الرئيسي",subtitle:"بوابة متكاملة لدعم الاستثمار والنمو السياحي عبر برامج تمويل ومبادرات تطويرية."}),e("main",{className:"mx-auto max-w-6xl space-y-12 px-4 py-10",children:[e("section",{className:"space-y-5",children:[n(T,{title:"برامج تمكين السياحة",description:"برامج متنوعة تستهدف مختلف شرائح المنشآت السياحية مع أدوات تمويل تتوافق مع احتياجات السوق.",actionLabel:"عرض الكل"}),n("div",{className:"grid gap-4 md:grid-cols-3",children:G.map(e=>n(P,{imageSrc:e.imageSrc,imageAlt:e.title,title:e.title,description:e.description,primaryActionLabel:"تقدم الآن",secondaryActionLabel:"لمعرفة المزيد"},e.title))})]}),e("section",{className:"space-y-5",children:[n(T,{title:"قصص النجاح",description:"قصص واقعية تُبرز أثر المبادرات على تنمية المشاريع السياحية ورفع كفاءتها التشغيلية.",actionLabel:"عرض الكل"}),n("div",{className:"grid gap-4 md:grid-cols-3",children:K.map(e=>n(D,{imageSrc:e.imageSrc,imageAlt:e.title,title:e.title},e.title))})]})]})]})}export{H as AppHeader,o as Avatar,s as Badge,p as Button,m as Card,g as Checkbox,v as Chip,J as DashboardTemplate,b as Divider,P as HighlightCard,V as HomeHero,W as HomePage,f as List,y as Rating,U as SearchBar,T as SectionHeader,N as Select,j as Skeleton,S as Slider,M as Switch,F as Table,I as TextInput,q as Tooltip,Q as TourismLandingPage,D as VideoThumbnailCard};

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "fufa-comlib",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.mjs",
@@ -49,6 +49,7 @@
     "@storybook/addon-docs": "^10.2.8",
     "@storybook/addon-vitest": "^10.2.8",
     "@storybook/react-vite": "^10.2.8",
+    "@tailwindcss/postcss": "^4.1.18",
     "@tailwindcss/vite": "^4.1.18",
     "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",