npm - @ossy/pages - Versions diffs - 0.10.0 → 0.10.1 - Mend

@ossy/pages 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (3) hide show

package/README.md ADDED Viewed

@@ -0,0 +1,57 @@
+# @ossy/pages
+SaaS page templates and layouts for the Ossy Ecosystem. Pre-built screens for auth, pricing, settings, dashboards, and more.
+## Installation
+```bash
+npm install @ossy/pages @ossy/design-system @ossy/themes
+```
+## Available pages
+| Category | Components |
+|----------|------------|
+| **Auth** | Login, SignUp, ForgotPassword, VerifyEmail |
+| **Pricing** | Pricing tables and plans |
+| **Settings** | User and app settings |
+| **Dashboard** | Dashboard layouts |
+| **Billing** | Billing and subscription |
+| **Onboarding** | Onboarding flows |
+| **Team** | Team management |
+| **Integrations** | Third-party integrations |
+| **Support** | Help and support |
+| **Other** | Landing page, Resume, 404, Unauthorized, Maintenance, EmptyState |
+## Usage
+Import and use pages in your app:
+```jsx
+import { Login, SignUp, ForgotPassword } from '@ossy/pages'
+import { Theme } from '@ossy/design-system'
+import { CloudLight } from '@ossy/themes'
+<Theme theme={CloudLight}>
+  <Login onSubmit={handleLogin} />
+</Theme>
+```
+## Documentation
+Run Storybook from the monorepo root to browse all page templates:
+```bash
+npm start
+```
+## Peer dependencies
+- `react` >=19.0.0
+- `react-dom` >=19.0.0
+- `@ossy/design-system` >=0.0.1
+- `@ossy/themes` for theme support
+## License
+MIT

package/build/index.js CHANGED Viewed

	@@ -1 +1 @@
1	- import e,{useState as t,useEffect as a}from"react";import{View as n,Title as r,Text as o,Button as l,Image as i,Card as s,Guide as c,Stack as m,ProfileCard as p,Tabs as d,Dropdown as g,ContextMenu as y,Tags as u,ResumeExperience as v,PageSection as x}from"@ossy/design-system";function f(){return f=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var n in a)({}).hasOwnProperty.call(a,n)&&(e[n]=a[n])}return e},f.apply(null,arguments)}const h=({columns:t=[]})=>e.createElement(n,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(r,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(o,null,t.text),!!t.list&&e.createElement("ul",{key:t.title,style:{padding:"0"}},t.list.map(({label:t,...a})=>e.createElement("li",{key:t,style:{listStyle:"none"}},e.createElement(l,f({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),E=({title:t,titleMaxWidth:a="800px",text:n,actions:i=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/pages/hero",precedence:"high"},'\n [data-component="hero"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n\n @media (min-width: 820px) {\n [data-component="hero"] {\n /* min-height: 60vh; */\n flex: 0 0 auto;\n }\n }\n '),e.createElement(r,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(o,{style:{marginBottom:"var(--space-l)"}},n),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},i.map(({label:t,...a})=>e.createElement(l,f({},a,{key:t}),t)))),b=({columns:t=[]})=>e.createElement(n,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/pages/footer",precedence:"high"},"\n .footer {\n padding: var(--space-s);\n }\n\n .footer .title {\n margin-bottom: var(--space-m);\n }\n\n .footer .list {\n padding: 0;\n }\n\n .footer .list-item {\n list-style: none;\n }\n "),t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(r,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(o,{style:{color:"var(--color-primary)"}},t.text),!!t.list&&e.createElement("ul",{className:"list",key:t.title},t.list.map(({label:t,...a})=>e.createElement("li",{className:"list-item",key:t},e.createElement(l,f({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),w=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(n,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:n,text:l})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(i,{key:t,src:n,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(r,{as:"h1",variant:"primary"},t),e.createElement(r,{as:"h2",variant:"lead"},a)),e.createElement(o,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},l)))),e.createElement(o,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(n,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(s,null,e.createElement(i,{src:a,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:t})=>e.createElement(E,t)},{id:"services",surface:"primary",maxWidth:"large",layout:"row",placeContent:"stretch space-around",gap:"xl",style:{borderBottom:"1px solid var(--separator-primary)",padding:"var(--space-xxl) var(--space-m)"},render:({services:t})=>e.createElement(e.Fragment,null,t.map(({title:t,text:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(o,{style:{maxWidth:"600px"}},a))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:t})=>e.createElement(e.Fragment,null,e.createElement(c,{title:t.title,titleVariant:"display",text:t.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),t.categories.map(({title:t,text:a,links:n})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(r,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(o,null,a),e.createElement(m,null,n.map(t=>e.createElement(m,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(l,f({},t,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:t})=>e.createElement(b,{columns:t.columns})}],k=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]\|\|"1900",n=new Date(a(e));return new Date(a(t))-n},j=(e=[])=>{e.sort(k);const[n,r]=t([]),[o,l]=t([]),[i,s]=t([]),[c,m]=t([]),[p,d]=t([]),[g,y]=t();Object.keys(e.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,t)=>({[t]:"",...e}),{}));const u=Object.keys(e.reduce((e,t)=>({[t.typeOfExperience]:"",...e}),{}));a(()=>{let t=e;p.length&&(t=e.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>p.map(e=>e.toLowerCase()).includes(e)))),g&&(t=t.filter(e=>e.typeOfExperience===g));const a=(e=>e.reduce((e,t)=>(e[t.typeOfExperience\|\|"Other"].push(t),e),{Work:[],Education:[],Project:[],Other:[]}))(t);r(a.Work),l(a.Education),s(a.Project),m(a.Other)},[p,e,g]);return{work:n,education:o,project:i,other:c,tags:[],categories:u,activeTags:p,toggleActiveTag:e=>{d(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:g,toggleActiveExperienceType:e=>{e!==g&&y("All"===e?void 0:e)}}},B=({status:t,profile:a,experiences:n,translations:o,profileCardProps:i={},actions:s=[]})=>{const{work:c,education:m,project:x,other:h,tags:E,categories:b,activeTags:w,toggleActiveTag:k,activeExperienceType:B,toggleActiveExperienceType:C}=j(n),O=[{id:"All",label:o.all},{id:"Work",label:o.work},{id:"Project",label:o.projects},{id:"Education",label:o.education},{id:"Other",label:o.other}].filter(e=>"All"===e.id?e:b.includes(e.id)),W=[{title:o.work,experiences:c},{title:o.projects,experiences:x},{title:o.education,experiences:m},{title:o.other,experiences:h}];return e.createElement("div",{"data-component":"@ossy/pages/resume","data-status":t},e.createElement("style",{href:"@ossy/pages/resume",precedence:"high"},'\n [data-component="@ossy/pages/resume"] {\n\n --padding: var(--resume-padding, 0);\n --background: var(--resume-background, transparent);\n --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n --header-justify-content: var(--resume-header-justify-content, center);\n --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n --content-background: var(--resume-content-background, transparent);\n\n background: var(--background);\n padding: var(--padding);\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: fit-content fit-content fit-content;\n grid-template-areas:\n "profile-summary"\n "actions"\n "content";\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"] {\n min-width: 0;\n box-sizing: border-box;\n grid-area: actions;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--header-padding);\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@ossy/pages/resume"] .secondary-actions {\n display: none;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="profile-summary"] {\n grid-area: profile-summary;\n z-index: 1;\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="content"] {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n grid-area: content;\n padding: var(--space-l) var(--space-m);\n margin: var(--content-margin);\n gap: var(--space-xl);\n background: var(--content-background);\n }\n\n [data-component="@ossy/pages/resume"] [data-animation="fade-in"] {\n opacity: 0;\n transition-property: opacity, transform;\n transition-duration: 1s, 1s;\n transition-timing-function: ease-in-out;\n transform: translateZ(0);\n }\n\n [data-component="@ossy/pages/resume"] [data-scroll] {\n scrollbar-width: none;\n overflow-y: auto;\n }\n\n [data-component="@ossy/pages/resume"] [data-scroll]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@ossy/pages/resume"][data-status="Success"] [data-animation="fade-in"] {\n opacity: 1;\n }\n\n [data-component="@ossy/pages/resume"] .content-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n width: 100%;\n max-width: 700px;\n }\n\n @media (min-width: 1200px) {\n [data-component="@ossy/pages/resume"] {\n height: 100vh;\n grid-template-columns: 400px 1fr;\n grid-template-rows: min-content 1fr;\n grid-template-areas:\n "profile-summary actions"\n "profile-summary content";\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"] {\n justify-content: space-between;\n }\n\n [data-component="@ossy/pages/resume"] .secondary-actions {\n display: flex;\n }\n }\n\n @media (min-width: 1900px) {\n [data-component="@ossy/pages/resume"] [data-slot="content"] {\n grid-column-start: profile-summary;\n grid-column-end: content;\n grid-row-start: content;\n grid-row-end: content;\n }\n }\n '),e.createElement(p,f({"data-scroll":!0,"data-slot":"profile-summary",activeTags:w,onTagClick:k,translations:o,surface:"primary"},i,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(d,{tabs:O,activeTabId:B\|\|"All",onTabClick:(e,t)=>C(t.id),style:{borderBottom:E.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},s.map(({label:t,contextMenu:a,...n})=>a?e.createElement(g,{trigger:e.createElement(l,n,t)},e.createElement(y,null,a.map(t=>e.createElement(y.Item,t,t.label)))):e.createElement(l,n,t))),!!E.length&&e.createElement(u,{tags:E,activeTags:w,onSelect:k,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},W.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(r,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(v,{key:t.id\|\|t.title,title:t.title,subTitle:t.subTitle,date:t.date,description:t.description,website:t.website,github:t.github,tags:t.tags})))))))},C=({title:t,titleVariant:a="secondary",titleAs:n="h2",text:l,children:i,maxWidth:s="l",...c})=>e.createElement(x,f({maxWidth:s},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(r,{as:n,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(o,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},l),i),O=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(C,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "}),e.createElement(C,{title:"Colors",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl"},Object.entries(t.color).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:t,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${t})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(o,null,t))))),e.createElement(C,{title:"Spacing",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row",gap:"xl"},Object.entries(t.space).map(([t,a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:a,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(o,null,t," - ",a))))),e.createElement(C,{title:"Content sizes (max width)",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(n,{layout:"row",gap:"l"},e.createElement(o,{style:{flexBasis:"90px"}},t," - ",a),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${t}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(C,{title:"Surfaces",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl"},Object.entries(t.surface).map(([t,a])=>e.createElement("div",{style:{background:`var(--surface-${t})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(o,null,t))))),e.createElement(C,{title:"Separators",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row",gap:"xl"},Object.entries(t.separator).map(([t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:t,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${t})`}}),e.createElement(o,null,t))))),e.createElement(C,{title:"Typography",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(n,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(t.title).filter(([e])=>"default"!==e).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(r,{variant:t},t)))),e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(n,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(t.text).map(([t])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(o,{variant:t},t))))),e.createElement(C,{title:"Buttons",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(t.button).map(([t])=>e.createElement(l,{variant:t,style:{flexGrow:"0",flexShrink:"0"}},t)))));export{h as Footer,w as LandingPage2020,B as Resume,O as ThemeDisplay,j as useResume};
1	+ import e,{useState as a,useEffect as t}from"react";import{View as n,Title as r,Text as s,Button as o,Image as l,Card as i,Guide as c,Stack as m,ProfileCard as p,Tabs as d,Dropdown as g,ContextMenu as y,Tags as v,ResumeExperience as u,PageSection as x,Input as f}from"@ossy/design-system";function h(){return h=Object.assign?Object.assign.bind():function(e){for(var a=1;a<arguments.length;a++){var t=arguments[a];for(var n in t)({}).hasOwnProperty.call(t,n)&&(e[n]=t[n])}return e},h.apply(null,arguments)}const E=({columns:a=[]})=>e.createElement(n,{layout:"row",placeContent:"normal space-between",gap:"xl"},a.map(a=>e.createElement("div",{style:{maxWidth:`var(--max-width-${a.maxWidth}, 100%)`}},e.createElement(r,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},a.title),!!a.text&&e.createElement(s,null,a.text),!!a.list&&e.createElement("ul",{key:a.title,style:{padding:"0"}},a.list.map(({label:a,...t})=>e.createElement("li",{key:a,style:{listStyle:"none"}},e.createElement(o,h({variant:"link"},t,{style:{marginBottom:"var(--space-m)"}}),a))))))),b=({title:a,titleMaxWidth:t="800px",text:n,actions:l=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/pages/hero",precedence:"high"},'\n [data-component="hero"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n text-align: center;\n }\n\n @media (min-width: 820px) {\n [data-component="hero"] {\n /* min-height: 60vh; */\n flex: 0 0 auto;\n }\n }\n '),e.createElement(r,{variant:"display",style:{maxWidth:t,marginBottom:"var(--space-l)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-l)"}},n),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},l.map(({label:a,...t})=>e.createElement(o,h({},t,{key:a}),a)))),w=({columns:a=[]})=>e.createElement(n,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/pages/footer",precedence:"high"},"\n .footer {\n padding: var(--space-s);\n }\n\n .footer .title {\n margin-bottom: var(--space-m);\n }\n\n .footer .list {\n padding: 0;\n }\n\n .footer .list-item {\n list-style: none;\n }\n "),a.map(a=>e.createElement("div",{style:{maxWidth:`var(--max-width-${a.maxWidth}, 100%)`}},e.createElement(r,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},a.title),!!a.text&&e.createElement(s,{style:{color:"var(--color-primary)"}},a.text),!!a.list&&e.createElement("ul",{className:"list",key:a.title},a.list.map(({label:a,...t})=>e.createElement("li",{className:"list-item",key:a},e.createElement(o,h({variant:"link"},t,{style:{marginBottom:"var(--space-m)"}}),a))))))),k=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:a,socialProof:t})=>e.createElement(e.Fragment,null,e.createElement(n,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},a.columns.map(({name:a,role:t,imgSrc:n,text:o})=>e.createElement("div",{key:a,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(l,{key:a,src:n,style:{borderRadius:"50%",width:"100%",maxWidth:"200px",height:"auto",margin:"0 auto",marginBottom:"var(--space-l)"}}),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-s)",alignItems:"center",marginBottom:"var(--space-l)"}},e.createElement(r,{as:"h1",variant:"primary"},a),e.createElement(r,{as:"h2",variant:"lead"},t)),e.createElement(s,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},o)))),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},t.title),e.createElement(n,{layout:"row",justifyContent:"space-between",gap:"m"},t.columns.map(({title:a,logo:t})=>e.createElement("div",{key:a,style:{textAlign:"center"}},e.createElement(i,null,e.createElement(l,{src:t,style:{height:"20px",width:"auto"}}))))))},{id:"hero",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)"},render:({hero:a})=>e.createElement(b,a)},{id:"services",surface:"primary",maxWidth:"large",layout:"row",placeContent:"stretch space-around",gap:"xl",style:{borderBottom:"1px solid var(--separator-primary)",padding:"var(--space-xxl) var(--space-m)"},render:({services:a})=>e.createElement(e.Fragment,null,a.map(({title:a,text:t})=>e.createElement("div",{key:a,style:{textAlign:"center"}},e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{maxWidth:"600px"}},t))))},{id:"projects",surface:"primary",style:{padding:"var(--space-xxl) var(--space-m) var(--space-xl)",minHeight:"60vh"},render:({projects:a})=>e.createElement(e.Fragment,null,e.createElement(c,{title:a.title,titleVariant:"display",text:a.text,style:{textAlign:"left",maxWidth:"600px",marginBottom:"var(--space-xl)"}}),a.categories.map(({title:a,text:t,links:n})=>e.createElement("div",{style:{marginBottom:"var(--space-xl)"}},e.createElement(r,{title:a,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},a),e.createElement(s,null,t),e.createElement(m,null,n.map(a=>e.createElement(m,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},a.map(a=>e.createElement(o,h({},a,{variant:"link",target:"_blank",style:{marginRight:"var(--space-m)"}})))))))))},{id:"contact",surface:"accent",style:{padding:"var(--space-xxl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"},render:({contact:a})=>e.createElement(w,{columns:a.columns})}],B=(e,a)=>{const t=e=>e?.date?.split(" - ")?.[0]\|\|"1900",n=new Date(t(e));return new Date(t(a))-n},C=(e=[])=>{e.sort(B);const[n,r]=a([]),[s,o]=a([]),[l,i]=a([]),[c,m]=a([]),[p,d]=a([]),[g,y]=a();Object.keys(e.flatMap(e=>e.tags).filter(e=>!!e).reduce((e,a)=>({[a]:"",...e}),{}));const v=Object.keys(e.reduce((e,a)=>({[a.typeOfExperience]:"",...e}),{}));t(()=>{let a=e;p.length&&(a=e.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>p.map(e=>e.toLowerCase()).includes(e)))),g&&(a=a.filter(e=>e.typeOfExperience===g));const t=(e=>e.reduce((e,a)=>(e[a.typeOfExperience\|\|"Other"].push(a),e),{Work:[],Education:[],Project:[],Other:[]}))(a);r(t.Work),o(t.Education),i(t.Project),m(t.Other)},[p,e,g]);return{work:n,education:s,project:l,other:c,tags:[],categories:v,activeTags:p,toggleActiveTag:e=>{d(a=>a.includes(e)?a.filter(a=>a!==e):[...a,e])},activeExperienceType:g,toggleActiveExperienceType:e=>{e!==g&&y("All"===e?void 0:e)}}},N=({status:a,profile:t,experiences:n,translations:s,profileCardProps:l={},actions:i=[]})=>{const{work:c,education:m,project:x,other:f,tags:E,categories:b,activeTags:w,toggleActiveTag:k,activeExperienceType:B,toggleActiveExperienceType:N}=C(n),j=[{id:"All",label:s.all},{id:"Work",label:s.work},{id:"Project",label:s.projects},{id:"Education",label:s.education},{id:"Other",label:s.other}].filter(e=>"All"===e.id?e:b.includes(e.id)),S=[{title:s.work,experiences:c},{title:s.projects,experiences:x},{title:s.education,experiences:m},{title:s.other,experiences:f}];return e.createElement("div",{"data-component":"@ossy/pages/resume","data-status":a},e.createElement("style",{href:"@ossy/pages/resume",precedence:"high"},'\n [data-component="@ossy/pages/resume"] {\n\n --padding: var(--resume-padding, 0);\n --background: var(--resume-background, transparent);\n --header-padding: var(--resume-header-padding, 8px 24px 8px 0);\n --header-justify-content: var(--resume-header-justify-content, center);\n --filter-padding: var(--resume-filter-padding, var(--space-s) var(--space-m));\n --content-background: var(--resume-content-background, transparent);\n\n background: var(--background);\n padding: var(--padding);\n display: grid;\n grid-template-columns: 1fr;\n grid-template-rows: fit-content fit-content fit-content;\n grid-template-areas:\n "profile-summary"\n "actions"\n "content";\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"] {\n min-width: 0;\n box-sizing: border-box;\n grid-area: actions;\n display: flex;\n justify-content: center;\n align-items: center;\n padding: var(--header-padding);\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@ossy/pages/resume"] .secondary-actions {\n display: none;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="profile-summary"] {\n grid-area: profile-summary;\n z-index: 1;\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="content"] {\n display: flex;\n width: 100%;\n flex-direction: column;\n align-items: center;\n justify-content: flex-start;\n grid-area: content;\n padding: var(--space-l) var(--space-m);\n margin: var(--content-margin);\n gap: var(--space-xl);\n background: var(--content-background);\n }\n\n [data-component="@ossy/pages/resume"] [data-animation="fade-in"] {\n opacity: 0;\n transition-property: opacity, transform;\n transition-duration: 1s, 1s;\n transition-timing-function: ease-in-out;\n transform: translateZ(0);\n }\n\n [data-component="@ossy/pages/resume"] [data-scroll] {\n scrollbar-width: none;\n overflow-y: auto;\n }\n\n [data-component="@ossy/pages/resume"] [data-scroll]::-webkit-scrollbar {\n display: none;\n }\n\n [data-component="@ossy/pages/resume"][data-status="Success"] [data-animation="fade-in"] {\n opacity: 1;\n }\n\n [data-component="@ossy/pages/resume"] .content-section {\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n width: 100%;\n max-width: 700px;\n }\n\n @media (min-width: 1200px) {\n [data-component="@ossy/pages/resume"] {\n height: 100vh;\n grid-template-columns: 400px 1fr;\n grid-template-rows: min-content 1fr;\n grid-template-areas:\n "profile-summary actions"\n "profile-summary content";\n }\n\n [data-component="@ossy/pages/resume"] [data-slot="actions"] {\n justify-content: space-between;\n }\n\n [data-component="@ossy/pages/resume"] .secondary-actions {\n display: flex;\n }\n }\n\n @media (min-width: 1900px) {\n [data-component="@ossy/pages/resume"] [data-slot="content"] {\n grid-column-start: profile-summary;\n grid-column-end: content;\n grid-row-start: content;\n grid-row-end: content;\n }\n }\n '),e.createElement(p,h({"data-scroll":!0,"data-slot":"profile-summary",activeTags:w,onTagClick:k,translations:s,surface:"primary"},l,t)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(d,{tabs:j,activeTabId:B\|\|"All",onTabClick:(e,a)=>N(a.id),style:{borderBottom:E.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},i.map(({label:a,contextMenu:t,...n})=>t?e.createElement(g,{trigger:e.createElement(o,n,a)},e.createElement(y,null,t.map(a=>e.createElement(y.Item,a,a.label)))):e.createElement(o,n,a))),!!E.length&&e.createElement(v,{tags:E,activeTags:w,onSelect:k,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},S.filter(e=>!!e.experiences.length).map(({title:a,experiences:t})=>e.createElement("section",{className:"content-section",key:a},e.createElement(r,{variant:"primary",style:{textAlign:"center"}},a),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},t.map(a=>e.createElement(u,{key:a.id\|\|a.title,title:a.title,subTitle:a.subTitle,date:a.date,description:a.description,website:a.website,github:a.github,tags:a.tags})))))))},j=({title:a,titleVariant:t="secondary",titleAs:n="h2",text:o,children:l,maxWidth:i="l",...c})=>e.createElement(x,h({maxWidth:i},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(r,{as:n,variant:t,style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},o),l),S=({theme:a={}})=>e.createElement(e.Fragment,null,e.createElement(j,{title:"Theme overview",titleVariant:"primary",titleAs:"h1",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "}),e.createElement(j,{title:"Colors",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl"},Object.entries(a.color).map(([a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)"}},e.createElement("div",{variant:a,style:{width:"200px",height:"var(--space-xl)",backgroundColor:`var(--color-${a})`,boxShadow:"2px 2px 10px 0 hsla(0, 0%, 90%, .8)",borderRadius:"var(--space-xs)"}}),e.createElement(s,null,a))))),e.createElement(j,{title:"Spacing",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row",gap:"xl"},Object.entries(a.space).map(([a,t])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",justifyContent:"flex-end",alignItems:"center"}},e.createElement("div",{style:{background:"var(--button-cta-background)",width:"20px",height:t,borderRadius:"var(--space-xxs)",marginBottom:"var(--space-m)"}}),e.createElement(s,null,a," - ",t))))),e.createElement(j,{title:"Content sizes (max width)",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{gap:"s"},Object.entries(a["max-width"]).map(([a,t])=>e.createElement(n,{layout:"row",gap:"l"},e.createElement(s,{style:{flexBasis:"90px"}},a," - ",t),e.createElement("div",{style:{background:"var(--color-accent)",width:"100%",maxWidth:`calc(var(--max-width-${a}) / 2)`,height:"20px",borderRadius:"var(--space-xxs)"}}))))),e.createElement(j,{title:"Surfaces",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl"},Object.entries(a.surface).map(([a,t])=>e.createElement("div",{style:{background:`var(--surface-${a})`,width:"300px",height:"300px",display:"flex",justifyContent:"center",alignItems:"center",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,null,a))))),e.createElement(j,{title:"Separators",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row",gap:"xl"},Object.entries(a.separator).map(([a])=>e.createElement("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"flex-start",flexWrap:"wrap",gap:"var(--space-l)",marginBottom:"var(--space-xl)"}},e.createElement("div",{variant:a,style:{width:"300px",height:"1px",backgroundColor:`var(--separator-${a})`}}),e.createElement(s,null,a))))),e.createElement(j,{title:"Typography",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(n,{layout:"row-wrap",gap:"xl",placeItems:"center",style:{marginBottom:"var(--space-xl)"}},Object.entries(a.title).filter(([e])=>"default"!==e).map(([a])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)",display:"flex",justifyContent:"center",alignItems:"center"}},e.createElement(r,{variant:a},a)))),e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(n,{layout:"row",gap:"xl",placeItems:"center"},Object.entries(a.text).map(([a])=>e.createElement("div",{style:{padding:"var(--space-l)",borderRadius:"var(--space-s)",border:"1px solid var(--separator-primary)"}},e.createElement(s,{variant:a},a))))),e.createElement(j,{title:"Buttons",text:"\n Here you can find an overview of our patterns, colors, and components.\n Keep in mind that this is only an overview, for usage examples and documentation go to\n our Storybook page.\n "},e.createElement(n,{layout:"row-wrap",gap:"xl",alignItems:"center",justifyContent:"flex-start"},Object.entries(a.button).map(([a])=>e.createElement(o,{variant:a,style:{flexGrow:"0",flexShrink:"0"}},a))))),A=({title:t="Sign in",subtitle:n="Enter your credentials to access your account",onSubmit:l,signUpLink:i,forgotPasswordLink:c,loading:m=!1})=>{const[p,d]=a(""),[g,y]=a("");return e.createElement("div",{"data-component":"@ossy/pages/login"},e.createElement("style",{href:"@ossy/pages/login",precedence:"high"},'\n [data-component="@ossy/pages/login"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/login"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n }\n\n [data-component="@ossy/pages/login"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/login"] .actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-m);\n align-items: stretch;\n }\n\n [data-component="@ossy/pages/login"] .links {\n display: flex;\n justify-content: space-between;\n flex-wrap: wrap;\n gap: var(--space-s);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)",textAlign:"center"}},t),e.createElement(s,{style:{marginBottom:"var(--space-xl)",textAlign:"center"}},n),e.createElement("form",{onSubmit:e=>{e.preventDefault(),l?.({email:p,password:g})}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Email"),e.createElement(f,{type:"email",name:"email",placeholder:"you@example.com",value:p,onChange:e=>d(e.target.value),required:!0,autoComplete:"email"})),e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Password"),e.createElement(f,{type:"password",name:"password",placeholder:"••••••••",value:g,onChange:e=>y(e.target.value),required:!0,autoComplete:"current-password"})),e.createElement("div",{className:"actions"},e.createElement(o,{type:"submit",variant:"cta",disabled:m},m?"Signing in...":"Sign in"),e.createElement("div",{className:"links"},c&&e.createElement(o,h({variant:"link"},c),"Forgot password?"),i&&e.createElement(o,h({variant:"link"},i),"Create an account")))))},T=({title:t="Create an account",subtitle:n="Get started with your free account",onSubmit:l,loginLink:i,termsLink:c,loading:m=!1})=>{const[p,d]=a(""),[g,y]=a(""),[v,u]=a("");return e.createElement("div",{"data-component":"@ossy/pages/sign-up"},e.createElement("style",{href:"@ossy/pages/sign-up",precedence:"high"},'\n [data-component="@ossy/pages/sign-up"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/sign-up"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n }\n\n [data-component="@ossy/pages/sign-up"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/sign-up"] .actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-m);\n align-items: stretch;\n }\n\n [data-component="@ossy/pages/sign-up"] .terms {\n font-size: 0.875rem;\n color: var(--foreground-secondary, inherit);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)",textAlign:"center"}},t),e.createElement(s,{style:{marginBottom:"var(--space-xl)",textAlign:"center"}},n),e.createElement("form",{onSubmit:e=>{e.preventDefault(),l?.({email:p,password:g,name:v})}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Name"),e.createElement(f,{type:"text",name:"name",placeholder:"Your name",value:v,onChange:e=>u(e.target.value),autoComplete:"name"})),e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Email"),e.createElement(f,{type:"email",name:"email",placeholder:"you@example.com",value:p,onChange:e=>d(e.target.value),required:!0,autoComplete:"email"})),e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Password"),e.createElement(f,{type:"password",name:"password",placeholder:"••••••••",value:g,onChange:e=>y(e.target.value),required:!0,autoComplete:"new-password"})),e.createElement("div",{className:"actions"},e.createElement(o,{type:"submit",variant:"cta",disabled:m},m?"Creating account...":"Create account"),c&&e.createElement(s,{variant:"small",className:"terms",style:{textAlign:"center"}},"By signing up, you agree to our"," ",e.createElement(o,h({variant:"link"},c,{style:{padding:0}}),"Terms of Service")),i&&e.createElement(o,h({variant:"link"},i,{style:{alignSelf:"center"}}),"Already have an account? Sign in"))))},L=({title:t="Reset password",subtitle:n="Enter your email and we'll send you a link to reset your password",onSubmit:l,loginLink:i,successMessage:c="Check your email for a reset link.",loading:m=!1,success:p=!1})=>{const[d,g]=a("");return p?e.createElement("div",{"data-component":"@ossy/pages/forgot-password"},e.createElement("style",{href:"@ossy/pages/forgot-password",precedence:"high"},'\n [data-component="@ossy/pages/forgot-password"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/forgot-password"] .success-actions {\n margin-top: var(--space-xl);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},"Check your email"),e.createElement(s,{style:{marginBottom:"var(--space-l)",maxWidth:"400px"}},c),i&&e.createElement("div",{className:"success-actions"},e.createElement(o,h({variant:"cta"},i),"Back to sign in"))):e.createElement("div",{"data-component":"@ossy/pages/forgot-password"},e.createElement("style",{href:"@ossy/pages/forgot-password",precedence:"high"},'\n [data-component="@ossy/pages/forgot-password"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/forgot-password"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n }\n\n [data-component="@ossy/pages/forgot-password"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/forgot-password"] .actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-m);\n align-items: stretch;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)",textAlign:"center"}},t),e.createElement(s,{style:{marginBottom:"var(--space-xl)",textAlign:"center"}},n),e.createElement("form",{onSubmit:e=>{e.preventDefault(),l?.({email:d})}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Email"),e.createElement(f,{type:"email",name:"email",placeholder:"you@example.com",value:d,onChange:e=>g(e.target.value),required:!0,autoComplete:"email"})),e.createElement("div",{className:"actions"},e.createElement(o,{type:"submit",variant:"cta",disabled:m},m?"Sending...":"Send reset link"),i&&e.createElement(o,h({variant:"link"},i,{style:{alignSelf:"center"}}),"Back to sign in"))))},D=({title:a="Verify your email",subtitle:t="We've sent a verification link to your email address. Click the link to activate your account.",onResend:n,loginLink:l,loading:i=!1,resent:c=!1})=>e.createElement("div",{"data-component":"@ossy/pages/verify-email"},e.createElement("style",{href:"@ossy/pages/verify-email",precedence:"high"},'\n [data-component="@ossy/pages/verify-email"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/verify-email"] .actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-m);\n margin-top: var(--space-xl);\n align-items: center;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-l)",maxWidth:"400px"}},t),c&&e.createElement(s,{variant:"small",style:{color:"var(--color-accent)",marginBottom:"var(--space-m)"}},"A new verification link has been sent."),e.createElement("div",{className:"actions"},n&&e.createElement(o,{variant:"secondary",onClick:n,disabled:i},i?"Sending...":"Resend verification email"),l&&e.createElement(o,h({variant:"link"},l),"Back to sign in"))),W=({title:t="Set new password",subtitle:n="Enter your new password below",onSubmit:l,loginLink:i,loading:c=!1,success:m=!1,successMessage:p="Your password has been reset."})=>{const[d,g]=a(""),[y,v]=a("");if(m)return e.createElement("div",{"data-component":"@ossy/pages/reset-password"},e.createElement("style",{href:"@ossy/pages/reset-password",precedence:"high"},'\n [data-component="@ossy/pages/reset-password"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/reset-password"] .success-actions {\n margin-top: var(--space-xl);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},"Password reset"),e.createElement(s,{style:{marginBottom:"var(--space-l)",maxWidth:"400px"}},p),i&&e.createElement("div",{className:"success-actions"},e.createElement(o,h({variant:"cta"},i),"Sign in")));const u=d===y\|\|!y;return e.createElement("div",{"data-component":"@ossy/pages/reset-password"},e.createElement("style",{href:"@ossy/pages/reset-password",precedence:"high"},'\n [data-component="@ossy/pages/reset-password"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/reset-password"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n }\n\n [data-component="@ossy/pages/reset-password"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/reset-password"] .actions {\n display: flex;\n flex-direction: column;\n gap: var(--space-m);\n align-items: stretch;\n }\n\n [data-component="@ossy/pages/reset-password"] .error {\n color: var(--color-error, #c00);\n font-size: 0.875rem;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)",textAlign:"center"}},t),e.createElement(s,{style:{marginBottom:"var(--space-xl)",textAlign:"center"}},n),e.createElement("form",{onSubmit:e=>{e.preventDefault(),d===y&&l?.({password:d})}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"New password"),e.createElement(f,{type:"password",name:"password",placeholder:"••••••••",value:d,onChange:e=>g(e.target.value),required:!0,minLength:8,autoComplete:"new-password"})),e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Confirm password"),e.createElement(f,{type:"password",name:"confirmPassword",placeholder:"••••••••",value:y,onChange:e=>v(e.target.value),required:!0,minLength:8,autoComplete:"new-password"}),y&&!u&&e.createElement(s,{className:"error"},"Passwords do not match")),e.createElement("div",{className:"actions"},e.createElement(o,{type:"submit",variant:"cta",disabled:c\|\|!u\|\|d.length<8},c?"Resetting...":"Reset password"),i&&e.createElement(o,h({variant:"link"},i,{style:{alignSelf:"center"}}),"Back to sign in"))))},P=({title:t="Delete account",subtitle:n="This action cannot be undone. All your data will be permanently removed.",confirmText:l="delete my account",onSubmit:i,cancelLink:c,loading:m=!1})=>{const[p,d]=a(""),g=p.toLowerCase()===l.toLowerCase();return e.createElement("div",{"data-component":"@ossy/pages/delete-account"},e.createElement("style",{href:"@ossy/pages/delete-account",precedence:"high"},'\n [data-component="@ossy/pages/delete-account"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/delete-account"] .content {\n max-width: 480px;\n text-align: center;\n }\n\n [data-component="@ossy/pages/delete-account"] .warning {\n padding: var(--space-m);\n background: var(--surface-secondary, rgba(0,0,0,0.05));\n border-radius: var(--space-s);\n margin: var(--space-xl) 0;\n border: 1px solid var(--color-error, #c00);\n }\n\n [data-component="@ossy/pages/delete-account"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n margin-top: var(--space-xl);\n }\n\n [data-component="@ossy/pages/delete-account"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/delete-account"] .actions {\n display: flex;\n gap: var(--space-m);\n justify-content: center;\n flex-wrap: wrap;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)",textAlign:"center"}},t),e.createElement(s,{style:{marginBottom:"var(--space-m)",textAlign:"center"}},n),e.createElement("div",{className:"warning"},e.createElement(s,{variant:"small"},"This will permanently delete your account and all associated data. This action cannot be undone.")),e.createElement("form",{onSubmit:e=>{e.preventDefault(),p.toLowerCase()===l.toLowerCase()&&i?.()}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Type ",e.createElement("strong",null,l)," to confirm"),e.createElement(f,{type:"text",value:p,onChange:e=>d(e.target.value),placeholder:l,autoComplete:"off"})),e.createElement("div",{className:"actions"},c&&e.createElement(o,h({variant:"secondary"},c),"Cancel"),e.createElement(o,{type:"submit",variant:"cta",disabled:m\|\|!g,style:{background:"var(--color-error, #c00)"}},m?"Deleting...":"Delete account"))))},I=({title:t="Two-factor authentication",subtitle:n="Add an extra layer of security to your account",enabled:l=!1,onEnable:i,onDisable:c,onVerify:m,loading:p=!1})=>{const[d,g]=a("");return l?e.createElement("div",{"data-component":"@ossy/pages/two-factor"},e.createElement("style",{href:"@ossy/pages/two-factor",precedence:"high"},'\n [data-component="@ossy/pages/two-factor"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/two-factor"] .content {\n max-width: 480px;\n text-align: center;\n }\n\n [data-component="@ossy/pages/two-factor"] .success {\n padding: var(--space-m);\n background: var(--surface-secondary, rgba(0,0,0,0.05));\n border-radius: var(--space-s);\n margin: var(--space-xl) 0;\n color: var(--color-accent);\n }\n\n [data-component="@ossy/pages/two-factor"] .actions {\n margin-top: var(--space-xl);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},t),e.createElement(s,{style:{marginBottom:"var(--space-m)"}},"Two-factor authentication is enabled on your account."),e.createElement("div",{className:"success"},e.createElement(s,{variant:"small"},"Your account is protected with 2FA.")),c&&e.createElement("div",{className:"actions"},e.createElement(o,{variant:"secondary",onClick:c,disabled:p,style:{color:"var(--color-error, #c00)"}},p?"Disabling...":"Disable 2FA"))):e.createElement("div",{"data-component":"@ossy/pages/two-factor"},e.createElement("style",{href:"@ossy/pages/two-factor",precedence:"high"},'\n [data-component="@ossy/pages/two-factor"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 60vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/two-factor"] .content {\n max-width: 480px;\n text-align: center;\n }\n\n [data-component="@ossy/pages/two-factor"] form {\n width: 100%;\n max-width: 400px;\n display: flex;\n flex-direction: column;\n gap: var(--space-l);\n margin-top: var(--space-xl);\n }\n\n [data-component="@ossy/pages/two-factor"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/two-factor"] .steps {\n text-align: left;\n margin: var(--space-xl) 0;\n padding: var(--space-m);\n background: var(--surface-secondary, rgba(0,0,0,0.05));\n border-radius: var(--space-s);\n }\n\n [data-component="@ossy/pages/two-factor"] .steps ol {\n margin: 0;\n padding-left: var(--space-l);\n }\n\n [data-component="@ossy/pages/two-factor"] .steps li {\n margin-bottom: var(--space-s);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},t),e.createElement(s,{style:{marginBottom:"var(--space-m)"}},n),e.createElement("div",{className:"steps"},e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-s)"}},"To enable 2FA:"),e.createElement("ol",null,e.createElement("li",null,e.createElement(s,{variant:"small"},"Download an authenticator app (e.g. Google Authenticator)")),e.createElement("li",null,e.createElement(s,{variant:"small"},"Scan the QR code we'll show you")),e.createElement("li",null,e.createElement(s,{variant:"small"},"Enter the 6-digit code to verify")))),i?e.createElement(o,{variant:"cta",onClick:i,disabled:p},p?"Setting up...":"Enable 2FA"):e.createElement("form",{onSubmit:e=>{e.preventDefault(),m?.(d)}},e.createElement("div",{className:"field"},e.createElement(s,{variant:"small"},"Verification code"),e.createElement(f,{type:"text",placeholder:"000000",value:d,onChange:e=>g(e.target.value.replace(/\D/g,"").slice(0,6)),maxLength:6,autoComplete:"one-time-code"})),e.createElement(o,{type:"submit",variant:"cta",disabled:p\|\|6!==d.length},p?"Verifying...":"Verify and enable")))},R=({title:a="Simple, transparent pricing",subtitle:t="Choose the plan that fits your needs",plans:n=[],billingToggle:l})=>{const c=n.length>0?n:[{id:"starter",name:"Starter",price:"$9",period:"/month",description:"Perfect for individuals and small projects",features:["Up to 3 projects","Basic analytics","Email support"],cta:{label:"Get started",href:"/signup"},highlighted:!1},{id:"pro",name:"Pro",price:"$29",period:"/month",description:"For growing teams and businesses",features:["Unlimited projects","Advanced analytics","Priority support","API access"],cta:{label:"Start free trial",href:"/signup"},highlighted:!0},{id:"enterprise",name:"Enterprise",price:"Custom",period:"",description:"For large organizations with custom needs",features:["Everything in Pro","Dedicated support","Custom integrations","SLA"],cta:{label:"Contact sales",href:"/contact"},highlighted:!1}];return e.createElement("div",{"data-component":"@ossy/pages/pricing"},e.createElement("style",{href:"@ossy/pages/pricing",precedence:"high"},'\n [data-component="@ossy/pages/pricing"] {\n padding: var(--space-xxl) var(--space-m);\n }\n\n [data-component="@ossy/pages/pricing"] .header {\n text-align: center;\n margin-bottom: var(--space-xxl);\n max-width: 600px;\n margin-left: auto;\n margin-right: auto;\n }\n\n [data-component="@ossy/pages/pricing"] .plans {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));\n gap: var(--space-xl);\n max-width: 1200px;\n margin: 0 auto;\n align-items: stretch;\n }\n\n [data-component="@ossy/pages/pricing"] .plan-card {\n display: flex;\n flex-direction: column;\n height: 100%;\n padding: var(--space-xl);\n border-radius: var(--space-m);\n border: 1px solid var(--separator-primary);\n position: relative;\n }\n\n [data-component="@ossy/pages/pricing"] .plan-card.highlighted {\n border-color: var(--color-primary);\n box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);\n }\n\n [data-component="@ossy/pages/pricing"] .plan-price {\n display: flex;\n align-items: baseline;\n gap: var(--space-xs);\n margin-bottom: var(--space-s);\n }\n\n [data-component="@ossy/pages/pricing"] .plan-features {\n list-style: none;\n padding: 0;\n margin: var(--space-l) 0;\n flex: 1;\n }\n\n [data-component="@ossy/pages/pricing"] .plan-features li {\n padding: var(--space-s) 0;\n border-bottom: 1px solid var(--separator-secondary, transparent);\n display: flex;\n align-items: center;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/pricing"] .plan-features li:last-child {\n border-bottom: none;\n }\n '),e.createElement("div",{className:"header"},e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{marginBottom:l?"var(--space-l)":0}},t),l),e.createElement("div",{className:"plans"},c.map(a=>e.createElement(i,{key:a.id,surface:"primary",className:"plan-card "+(a.highlighted?"highlighted":"")},e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-s)"}},a.name),e.createElement("div",{className:"plan-price"},e.createElement(r,{variant:"display"},a.price),a.period&&e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.period)),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-m)"}},a.description),e.createElement("ul",{className:"plan-features"},a.features?.map((a,t)=>e.createElement("li",{key:t},a))),a.cta&&e.createElement(o,h({variant:a.highlighted?"cta":"default"},a.cta,{style:{marginTop:"auto"}}),a.cta.label)))))},q=({title:a="Settings",subtitle:t="Manage your account and preferences",sections:n=[]})=>{const l=n.length>0?n:[{id:"profile",title:"Profile",description:"Update your personal information",fields:[{id:"name",label:"Name",type:"text",placeholder:"Your name"},{id:"email",label:"Email",type:"email",placeholder:"you@example.com"}],submitLabel:"Save changes"},{id:"security",title:"Security",description:"Manage your password and security settings",fields:[{id:"current-password",label:"Current password",type:"password",placeholder:"••••••••"},{id:"new-password",label:"New password",type:"password",placeholder:"••••••••"}],submitLabel:"Update password"},{id:"notifications",title:"Notifications",description:"Choose how you want to be notified",toggles:[{id:"email",label:"Email notifications",description:"Receive updates via email"},{id:"marketing",label:"Marketing emails",description:"Receive product updates and tips"}]}];return e.createElement("div",{"data-component":"@ossy/pages/settings"},e.createElement("style",{href:"@ossy/pages/settings",precedence:"high"},'\n [data-component="@ossy/pages/settings"] {\n padding: var(--space-xl) var(--space-m);\n max-width: 800px;\n margin: 0 auto;\n }\n\n [data-component="@ossy/pages/settings"] .section {\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/settings"] .field {\n display: flex;\n flex-direction: column;\n gap: var(--space-s);\n margin-bottom: var(--space-l);\n }\n\n [data-component="@ossy/pages/settings"] .toggle-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-m) 0;\n border-bottom: 1px solid var(--separator-primary);\n }\n\n [data-component="@ossy/pages/settings"] .toggle-row:last-child {\n border-bottom: none;\n }\n\n [data-component="@ossy/pages/settings"] .toggle-label {\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n }\n\n [data-component="@ossy/pages/settings"] .toggle-checkbox {\n width: 44px;\n height: 24px;\n accent-color: var(--color-primary);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-xxl)"}},t),l.map(a=>e.createElement(x,{key:a.id,surface:"primary",style:{marginBottom:"var(--space-xl)",padding:"var(--space-xl)"}},e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-s)"}},a.title),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-l)"}},a.description),a.fields?.map(a=>e.createElement("div",{key:a.id,className:"field"},e.createElement(s,{variant:"small"},a.label),e.createElement(f,h({type:a.type,id:a.id,placeholder:a.placeholder},a)))),a.toggles?.map(a=>e.createElement("div",{key:a.id,className:"toggle-row"},e.createElement("div",{className:"toggle-label"},e.createElement(s,null,a.label),a.description&&e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.description)),e.createElement("input",{type:"checkbox",className:"toggle-checkbox",checked:a.value??!1,onChange:e=>a.onChange?.(e.target.checked)}))),a.submitLabel&&e.createElement(o,{variant:"cta",style:{marginTop:"var(--space-m)"}},a.submitLabel))))},O=({title:a="Dashboard",subtitle:t,children:n,stats:o=[]})=>{const l=o.length>0?o:[{label:"Active users",value:"—"},{label:"Revenue",value:"—"},{label:"Conversions",value:"—"}];return e.createElement("div",{"data-component":"@ossy/pages/dashboard"},e.createElement("style",{href:"@ossy/pages/dashboard",precedence:"high"},'\n [data-component="@ossy/pages/dashboard"] {\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/dashboard"] .header {\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/dashboard"] .stats {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));\n gap: var(--space-l);\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/dashboard"] .stat-card {\n padding: var(--space-l);\n border-radius: var(--space-m);\n border: 1px solid var(--separator-primary);\n }\n '),e.createElement("div",{className:"header"},e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),t&&e.createElement(s,{style:{color:"var(--foreground-secondary)"}},t)),e.createElement("div",{className:"stats"},l.map((a,t)=>e.createElement(i,{key:t,surface:"primary",className:"stat-card"},e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-xs)"}},a.label),e.createElement(r,{variant:"primary"},a.value)))),n)},z=({title:a="Billing",subtitle:t="Manage your subscription and payment methods",currentPlan:n,paymentMethod:l,invoices:c=[],onChangePlanLink:m,onUpdatePaymentLink:p})=>{const d=n\|\|{name:"Pro",price:"$29/month",status:"active",nextBillingDate:"March 18, 2026"},g=l\|\|{last4:"4242",brand:"Visa",expiry:"12/28"};return e.createElement("div",{"data-component":"@ossy/pages/billing"},e.createElement("style",{href:"@ossy/pages/billing",precedence:"high"},'\n [data-component="@ossy/pages/billing"] {\n padding: var(--space-xl) var(--space-m);\n max-width: 800px;\n margin: 0 auto;\n }\n\n [data-component="@ossy/pages/billing"] .section {\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/billing"] .plan-card,\n [data-component="@ossy/pages/billing"] .payment-card {\n padding: var(--space-xl);\n border-radius: var(--space-m);\n border: 1px solid var(--separator-primary);\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-wrap: wrap;\n gap: var(--space-m);\n margin-bottom: var(--space-m);\n }\n\n [data-component="@ossy/pages/billing"] .invoice-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-m) 0;\n border-bottom: 1px solid var(--separator-primary);\n }\n\n [data-component="@ossy/pages/billing"] .invoice-row:last-child {\n border-bottom: none;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-xxl)"}},t),e.createElement("div",{className:"section"},e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-m)"}},"Current plan"),e.createElement(i,{surface:"primary",className:"plan-card"},e.createElement("div",null,e.createElement(r,{variant:"primary"},d.name),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},d.price," · ",d.status),d.nextBillingDate&&e.createElement(s,{variant:"small",style:{display:"block",marginTop:"var(--space-xs)"}},"Next billing: ",d.nextBillingDate)),m&&e.createElement(o,h({variant:"secondary"},m),"Change plan"))),e.createElement("div",{className:"section"},e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-m)"}},"Payment method"),e.createElement(i,{surface:"primary",className:"payment-card"},e.createElement("div",null,e.createElement(s,null,g.brand," •••• ",g.last4),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},"Expires ",g.expiry)),p&&e.createElement(o,h({variant:"secondary"},p),"Update"))),c.length>0&&e.createElement("div",{className:"section"},e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-m)"}},"Invoices"),e.createElement(i,{surface:"primary",style:{padding:"var(--space-m)"}},c.map((a,t)=>e.createElement("div",{key:t,className:"invoice-row"},e.createElement("div",null,e.createElement(s,null,a.date\|\|"Mar 18, 2026"),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.description\|\|"Pro plan")),e.createElement("div",{style:{display:"flex",alignItems:"center",gap:"var(--space-m)"}},e.createElement(s,null,a.amount\|\|"$29.00"),a.downloadLink&&e.createElement(o,h({variant:"link"},a.downloadLink),"Download")))))))},F=({title:a="Welcome!",subtitle:t="Let's get you set up",steps:n=[],currentStep:l=0,onNext:i,onBack:c,onSkip:m,completeLabel:p="Get started"})=>{const d=n.length>0?n:[{id:"profile",title:"Complete your profile",description:"Add your name and avatar so your team can recognize you."},{id:"workspace",title:"Create your workspace",description:"Set up your first workspace to start collaborating."},{id:"invite",title:"Invite your team",description:"Bring your team on board to work together."}],g=d[l],y=l===d.length-1;return e.createElement("div",{"data-component":"@ossy/pages/onboarding"},e.createElement("style",{href:"@ossy/pages/onboarding",precedence:"high"},'\n [data-component="@ossy/pages/onboarding"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 70vh;\n padding: var(--space-xl) var(--space-m);\n }\n\n [data-component="@ossy/pages/onboarding"] .progress {\n display: flex;\n gap: var(--space-s);\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/onboarding"] .progress-dot {\n width: 8px;\n height: 8px;\n border-radius: 50%;\n background: var(--separator-primary);\n transition: background 0.2s;\n }\n\n [data-component="@ossy/pages/onboarding"] .progress-dot.active {\n background: var(--color-primary);\n }\n\n [data-component="@ossy/pages/onboarding"] .content {\n max-width: 480px;\n text-align: center;\n margin-bottom: var(--space-xxl);\n }\n\n [data-component="@ossy/pages/onboarding"] .actions {\n display: flex;\n gap: var(--space-m);\n justify-content: center;\n flex-wrap: wrap;\n }\n '),e.createElement("div",{className:"progress"},d.map((a,t)=>e.createElement("div",{key:t,className:"progress-dot "+(t<=l?"active":"")}))),e.createElement("div",{className:"content"},e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},g?.title\|\|a),e.createElement(s,{style:{color:"var(--foreground-secondary)"}},g?.description\|\|t)),e.createElement("div",{className:"actions"},l>0&&c&&e.createElement(o,{variant:"secondary",onClick:c},"Back"),m&&!y&&e.createElement(o,{variant:"link",onClick:m},"Skip"),e.createElement(o,{variant:"cta",onClick:()=>i?.(y?"complete":l+1)},y?p:"Next")))},M=({title:a="Team",subtitle:t="Invite and manage your team members",members:n=[],pendingInvites:l=[],onInvite:c,onRemoveMember:m,onResendInvite:p,onCancelInvite:d})=>{const g=n.length>0?n:[{id:"1",name:"You",email:"you@example.com",role:"Owner"},{id:"2",name:"Jane Doe",email:"jane@example.com",role:"Admin"}],y=l.length>0?l:[{id:"1",email:"pending@example.com",role:"Member",status:"pending"}];return e.createElement("div",{"data-component":"@ossy/pages/team"},e.createElement("style",{href:"@ossy/pages/team",precedence:"high"},'\n [data-component="@ossy/pages/team"] {\n padding: var(--space-xl) var(--space-m);\n max-width: 800px;\n margin: 0 auto;\n }\n\n [data-component="@ossy/pages/team"] .invite-form {\n display: flex;\n gap: var(--space-m);\n margin-bottom: var(--space-xl);\n flex-wrap: wrap;\n }\n\n [data-component="@ossy/pages/team"] .invite-form input {\n flex: 1;\n min-width: 200px;\n }\n\n [data-component="@ossy/pages/team"] .member-row,\n [data-component="@ossy/pages/team"] .pending-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-m) 0;\n border-bottom: 1px solid var(--separator-primary);\n flex-wrap: wrap;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/team"] .member-row:last-child,\n [data-component="@ossy/pages/team"] .pending-row:last-child {\n border-bottom: none;\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-xxl)"}},t),c&&e.createElement("form",{className:"invite-form",onSubmit:e=>{e.preventDefault();const a=e.target.email?.value;a&&c({email:a})}},e.createElement(f,{type:"email",name:"email",placeholder:"Email address",required:!0}),e.createElement(o,{type:"submit",variant:"cta"},"Invite")),e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-m)"}},"Members"),e.createElement(i,{surface:"primary",style:{padding:"var(--space-m)",marginBottom:"var(--space-xl)"}},g.map(a=>e.createElement("div",{key:a.id,className:"member-row"},e.createElement("div",null,e.createElement(s,null,a.name),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.email," · ",a.role)),m&&"Owner"!==a.role&&e.createElement(o,{variant:"link",onClick:()=>m(a),style:{color:"var(--color-error, #c00)"}},"Remove")))),y.length>0&&e.createElement(e.Fragment,null,e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-m)"}},"Pending invites"),e.createElement(i,{surface:"primary",style:{padding:"var(--space-m)"}},y.map(a=>e.createElement("div",{key:a.id,className:"pending-row"},e.createElement("div",null,e.createElement(s,null,a.email),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.role," · ",a.status)),e.createElement("div",{style:{display:"flex",gap:"var(--space-s)"}},p&&e.createElement(o,{variant:"link",onClick:()=>p(a)},"Resend"),d&&e.createElement(o,{variant:"link",onClick:()=>d(a),style:{color:"var(--color-error, #c00)"}},"Cancel")))))))},H=({title:a="API Keys",subtitle:t="Manage your API keys for programmatic access",keys:n=[],onCreateKey:l,onRevokeKey:c})=>{const m=n.length>0?n:[{id:"1",name:"Production",prefix:"sk_live_••••••••••••",created:"Mar 1, 2026"},{id:"2",name:"Development",prefix:"sk_test_••••••••••••",created:"Feb 15, 2026"}];return e.createElement("div",{"data-component":"@ossy/pages/api-keys"},e.createElement("style",{href:"@ossy/pages/api-keys",precedence:"high"},'\n [data-component="@ossy/pages/api-keys"] {\n padding: var(--space-xl) var(--space-m);\n max-width: 800px;\n margin: 0 auto;\n }\n\n [data-component="@ossy/pages/api-keys"] .key-row {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: var(--space-m) 0;\n border-bottom: 1px solid var(--separator-primary);\n flex-wrap: wrap;\n gap: var(--space-s);\n }\n\n [data-component="@ossy/pages/api-keys"] .key-row:last-child {\n border-bottom: none;\n }\n\n [data-component="@ossy/pages/api-keys"] .warning {\n padding: var(--space-m);\n background: var(--surface-secondary, rgba(0,0,0,0.05));\n border-radius: var(--space-s);\n margin-bottom: var(--space-xl);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-xl)"}},t),e.createElement("div",{className:"warning"},e.createElement(s,{variant:"small"},"Keep your API keys secure. Never share them or commit them to version control.")),l&&e.createElement(o,{variant:"cta",onClick:l,style:{marginBottom:"var(--space-xl)"}},"Create new key"),e.createElement(i,{surface:"primary",style:{padding:"var(--space-m)"}},m.map(a=>e.createElement("div",{key:a.id,className:"key-row"},e.createElement("div",null,e.createElement(s,null,a.name),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)",fontFamily:"monospace"}},a.prefix),a.created&&e.createElement(s,{variant:"small",style:{display:"block",color:"var(--foreground-secondary)"}},"Created ",a.created)),c&&e.createElement(o,{variant:"link",onClick:()=>c(a),style:{color:"var(--color-error, #c00)"}},"Revoke")))))},K=({title:a="Help & Support",subtitle:t="Find answers or get in touch",faqs:n=[],contactEmail:l,contactLink:i,documentationLink:c})=>{const m=n.length>0?n:[{question:"How do I reset my password?",answer:'Go to Settings > Security and click "Reset password". You\'ll receive an email with a link to set a new password.'},{question:"How do I change my plan?",answer:"Visit the Billing page to upgrade or downgrade your subscription. Changes take effect immediately."},{question:"How do I invite team members?",answer:"Go to the Team page and enter their email address. They'll receive an invitation to join your workspace."}];return e.createElement("div",{"data-component":"@ossy/pages/support"},e.createElement("style",{href:"@ossy/pages/support",precedence:"high"},'\n [data-component="@ossy/pages/support"] {\n padding: var(--space-xl) var(--space-m);\n max-width: 800px;\n margin: 0 auto;\n }\n\n [data-component="@ossy/pages/support"] .faq-item {\n padding: var(--space-l) 0;\n border-bottom: 1px solid var(--separator-primary);\n }\n\n [data-component="@ossy/pages/support"] .faq-item:last-child {\n border-bottom: none;\n }\n\n [data-component="@ossy/pages/support"] .faq-question {\n margin-bottom: var(--space-s);\n }\n\n [data-component="@ossy/pages/support"] .contact-section {\n margin-top: var(--space-xxl);\n padding-top: var(--space-xxl);\n border-top: 1px solid var(--separator-primary);\n text-align: center;\n }\n\n [data-component="@ossy/pages/support"] .contact-actions {\n display: flex;\n gap: var(--space-m);\n justify-content: center;\n flex-wrap: wrap;\n margin-top: var(--space-m);\n }\n '),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{marginBottom:"var(--space-xxl)"}},t),e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-l)"}},"Frequently asked questions"),m.map((a,t)=>e.createElement("div",{key:t,className:"faq-item"},e.createElement(r,{variant:"tertiary",as:"h3",className:"faq-question"},a.question),e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},a.answer))),e.createElement("div",{className:"contact-section"},e.createElement(r,{variant:"tertiary",as:"h2",style:{marginBottom:"var(--space-s)"}},"Still need help?"),e.createElement(s,{style:{marginBottom:"var(--space-m)"}},l?`Reach out at ${l}`:"We're here to help."),e.createElement("div",{className:"contact-actions"},i&&e.createElement(o,h({variant:"cta"},i),"Contact support"),c&&e.createElement(o,h({variant:"secondary"},c),"Documentation"))))},G=({title:a="Page not found",subtitle:t="The page you're looking for doesn't exist or has been moved.",homeLink:n})=>e.createElement("div",{"data-component":"@ossy/pages/not-found"},e.createElement("style",{href:"@ossy/pages/not-found",precedence:"high"},'\n [data-component="@ossy/pages/not-found"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 70vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/not-found"] .code {\n font-size: 6rem;\n font-weight: 200;\n line-height: 1;\n color: var(--foreground-secondary, #999);\n margin-bottom: var(--space-m);\n }\n\n [data-component="@ossy/pages/not-found"] .actions {\n margin-top: var(--space-xl);\n }\n '),e.createElement("div",{className:"code"},"404"),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{maxWidth:"400px",marginBottom:"var(--space-l)"}},t),n&&e.createElement("div",{className:"actions"},e.createElement(o,h({variant:"cta"},n),"Go to homepage"))),$=({title:a="Access denied",subtitle:t="You don't have permission to view this page.",homeLink:n,loginLink:l})=>e.createElement("div",{"data-component":"@ossy/pages/unauthorized"},e.createElement("style",{href:"@ossy/pages/unauthorized",precedence:"high"},'\n [data-component="@ossy/pages/unauthorized"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 70vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/unauthorized"] .code {\n font-size: 6rem;\n font-weight: 200;\n line-height: 1;\n color: var(--foreground-secondary, #999);\n margin-bottom: var(--space-m);\n }\n\n [data-component="@ossy/pages/unauthorized"] .actions {\n display: flex;\n gap: var(--space-m);\n margin-top: var(--space-xl);\n justify-content: center;\n flex-wrap: wrap;\n }\n '),e.createElement("div",{className:"code"},"403"),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{maxWidth:"400px",marginBottom:"var(--space-l)"}},t),e.createElement("div",{className:"actions"},n&&e.createElement(o,h({variant:"cta"},n),"Go to homepage"),l&&e.createElement(o,h({variant:"secondary"},l),"Sign in"))),V=({title:a="We'll be back soon",subtitle:t="We're performing scheduled maintenance. Please check back in a few minutes.",estimatedTime:n})=>e.createElement("div",{"data-component":"@ossy/pages/maintenance"},e.createElement("style",{href:"@ossy/pages/maintenance",precedence:"high"},'\n [data-component="@ossy/pages/maintenance"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 100vh;\n padding: var(--space-xl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/maintenance"] .icon {\n font-size: 4rem;\n margin-bottom: var(--space-xl);\n opacity: 0.5;\n }\n '),e.createElement("div",{className:"icon"},"⚙️"),e.createElement(r,{variant:"display",style:{marginBottom:"var(--space-m)"}},a),e.createElement(s,{style:{maxWidth:"400px",marginBottom:"var(--space-s)"}},t),n&&e.createElement(s,{variant:"small",style:{color:"var(--foreground-secondary)"}},"Estimated downtime: ",n)),U=({title:a="No data yet",subtitle:t="Get started by creating your first item.",icon:n,action:l,secondaryAction:i})=>e.createElement("div",{"data-component":"@ossy/pages/empty-state"},e.createElement("style",{href:"@ossy/pages/empty-state",precedence:"high"},'\n [data-component="@ossy/pages/empty-state"] {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 40vh;\n padding: var(--space-xxl) var(--space-m);\n text-align: center;\n }\n\n [data-component="@ossy/pages/empty-state"] .icon {\n font-size: 4rem;\n margin-bottom: var(--space-xl);\n opacity: 0.4;\n }\n\n [data-component="@ossy/pages/empty-state"] .actions {\n display: flex;\n gap: var(--space-m);\n margin-top: var(--space-xl);\n justify-content: center;\n flex-wrap: wrap;\n }\n '),n&&e.createElement("div",{className:"icon"},n),e.createElement(r,{variant:"tertiary",style:{marginBottom:"var(--space-s)"}},a),e.createElement(s,{style:{maxWidth:"400px",color:"var(--foreground-secondary)"}},t),e.createElement("div",{className:"actions"},l&&e.createElement(o,h({variant:"cta"},l),l.label\|\|"Get started"),i&&e.createElement(o,h({variant:"secondary"},i),i.label\|\|"Learn more")));export{H as ApiKeys,z as Billing,O as Dashboard,P as DeleteAccount,U as EmptyState,E as Footer,L as ForgotPassword,k as LandingPage2020,A as Login,V as Maintenance,G as NotFound,F as Onboarding,R as Pricing,W as ResetPassword,N as Resume,q as Settings,T as SignUp,K as Support,M as Team,S as ThemeDisplay,I as TwoFactorSetup,$ as Unauthorized,D as VerifyEmail,C as useResume};

package/package.json CHANGED Viewed

@@ -4,8 +4,8 @@
     "type": "git",
     "url": "git+https://github.com/ossy-se/packages.git"
   },
-  "description": "Ossy's page templates and layouts",
-  "version": "0.10.0",
+  "description": "SaaS page templates and layouts: auth (login, signup, forgot password, verify email), pricing, settings, dashboard, 404, landing page, resume",
+  "version": "0.10.1",
   "source": "src/index.js",
   "type": "module",
   "module": "build/index.js",
@@ -31,7 +31,7 @@
     ]
   },
   "dependencies": {
-    "@ossy/themes": "^0.10.0",
+    "@ossy/themes": "^0.10.1",
     "moment": "^2.29.4"
   },
   "peerDependencies": {
@@ -47,5 +47,5 @@
     "/build",
     "README.md"
   ],
-  "gitHead": "3019a8da590435ba6f10d7d861addeba011baf5d"
+  "gitHead": "fa8cbcb5f24811e6844c929d7fa7cd1d2544efa7"
 }