@ossy/design-system-extras 0.1.4 → 0.1.5

package/build/index.js

@@ -0,0 +1 @@
+import e,{useState as t,useEffect as a}from"react";import n from"react-markdown";import r from"react-syntax-highlighter";import{View as o,Button as l,Text as s,Title as i,Header as c,Tabs as m,Page as d,PageSection as p,Card as y,ProfileCard as g,Dropdown as u,ContextMenu as v,Tags as h,ResumeExperience as x,Image as f,Guide as E,Stack as b}from"@ossy/design-system";function w(){return w=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},w.apply(null,arguments)}var j={hljs:{display:"block",overflowX:"auto",padding:"0.5em",color:"#383a42",background:"#fafafa"},"hljs-comment":{color:"#a0a1a7",fontStyle:"italic"},"hljs-quote":{color:"#a0a1a7",fontStyle:"italic"},"hljs-doctag":{color:"#a626a4"},"hljs-keyword":{color:"#a626a4"},"hljs-formula":{color:"#a626a4"},"hljs-section":{color:"#e45649"},"hljs-name":{color:"#e45649"},"hljs-selector-tag":{color:"#e45649"},"hljs-deletion":{color:"#e45649"},"hljs-subst":{color:"#e45649"},"hljs-literal":{color:"#0184bb"},"hljs-string":{color:"#50a14f"},"hljs-regexp":{color:"#50a14f"},"hljs-addition":{color:"#50a14f"},"hljs-attribute":{color:"#50a14f"},"hljs-meta-string":{color:"#50a14f"},"hljs-built_in":{color:"#c18401"},"hljs-class .hljs-title":{color:"#c18401"},"hljs-attr":{color:"#986801"},"hljs-variable":{color:"#986801"},"hljs-template-variable":{color:"#986801"},"hljs-type":{color:"#986801"},"hljs-selector-class":{color:"#986801"},"hljs-selector-attr":{color:"#986801"},"hljs-selector-pseudo":{color:"#986801"},"hljs-number":{color:"#986801"},"hljs-symbol":{color:"#4078f2"},"hljs-bullet":{color:"#4078f2"},"hljs-link":{color:"#4078f2",textDecoration:"underline"},"hljs-meta":{color:"#4078f2"},"hljs-selector-id":{color:"#4078f2"},"hljs-title":{color:"#4078f2"},"hljs-emphasis":{fontStyle:"italic"},"hljs-strong":{fontWeight:"bold"}};const k={h1:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h1",variant:"primary"},a,{style:{marginBottom:"var(--space-l)"}})),h2:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h2",variant:"secondary"},a,{style:{marginBottom:"var(--space-m)",marginTop:"var(--space-l)"}})),h3:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h3",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h4:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h4",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),h5:({node:t,...a})=>e.createElement(i,w({id:B(a.children),as:"h5",variant:"tertiary"},a,{style:{marginBottom:"var(--space-m)"}})),p:({node:t,...a})=>e.createElement(s,w({},a,{style:{marginBottom:"var(--space-m)"}})),ul:({node:t,...a})=>e.createElement("ul",w({},a,{style:{listStyle:"inside",paddingLeft:"var(--space-l)"}})),li:({node:t,...a})=>e.createElement(s,w({as:"li"},a,{style:{marginBottom:"var(--space-m)"}})),a:({node:t,...a})=>e.createElement(l,w({as:a.href?"a":"button"},a,{variant:"link"})),code:({node:t,className:a,...n})=>{const[l,s]=/language-(\w+)/.exec(a||"")||[];return!s?e.createElement(o,w({inset:"xs",surface:"secondary",roundness:"s",style:{display:"inline-block"}},n),e.createElement(r,w({style:{display:"inline",...j,hljs:{display:"inline",color:"#383a42",background:"transparent"}},language:s},n))):e.createElement(o,{inset:"m",surface:"secondary",roundness:"m","data-component":"MarkdownViewer"},e.createElement("style",{href:"@ossy/design-system-extras/markdown-viewer/MarkdownViewer",precedence:"high"},'\n        [data-component="MarkdownViewer"] {\n          margin: var(--space-s) 0;\n        }\n\n        [data-component="MarkdownViewer"] pre {\n          margin: 0;\n        }\n      '),e.createElement(r,w({style:{...j,hljs:{display:"block",overflowX:"auto",color:"#383a42",background:"transparent"}},language:s},n)))}};function B(e){return e?e.toLowerCase().replace(/\s+/g,"-"):""}const W=({markdown:t,children:a,components:r={},...o})=>e.createElement(n,w({children:t||a,components:{...k,...r}},o)),C=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl"},t.map(t=>e.createElement("div",{style:{maxWidth:`var(--max-width-${t.maxWidth}, 100%)`}},e.createElement(i,{as:"h3",variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t.title),!!t.text&&e.createElement(s,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,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),S=({logo:t,headerActions:a,headerAccentBorder:n=!0,navigation:r,maxWidth:o="medium",copyright:l,footer:i,children:p,...y})=>{const g=[n&&{id:"accent-border",style:{height:"4px",position:"sticky",zIndex:"10",top:"0",background:"var(--separator-accent)"}},(t||a)&&{id:"header",surface:"primary",style:{padding:"var(--space-s) var(--space-l)",width:"100%"},render:()=>e.createElement(c,{logo:t,actions:a})},r&&{id:"navigation",surface:"primary",style:{height:"55px",position:"sticky",top:"4px",width:"100%",zIndex:"10"},render:()=>e.createElement(m,{tabs:r,style:{height:"100%"}})},{id:"outlet",as:"main",maxWidth:"full",style:{gridArea:"content"},render:()=>p},i&&{id:"footer",surface:i.surface,as:"footer",style:{padding:"var(--space-xl) var(--space-m)"},render:()=>e.createElement(C,{columns:i.columns})},l&&{id:"footer-section-copyright",surface:"alt-secondary",style:{padding:"var(--space-m)",textAlign:"center"},render:()=>e.createElement(s,{variant:"small"},l)}].filter(e=>!!e);return e.createElement(d,w({maxWidth:o,sections:g},y))},A=({surface:t="primary",maxWidth:a="full",layout:n="off-center",cardVariant:r,cardSurface:l,header:s,children:i,content:c})=>e.createElement(p,{surface:t,maxWidth:a},e.createElement(o,{layout:n,style:{height:"100vh"}},s,e.createElement(y,{slot:"content",variant:r,style:{overflowY:"auto"},surface:l},c??i))),O=({surface:t="primary",layout:a="off-center-m",navigation:n=[],cardVariant:r,cardSurface:o,header:s,children:i,content:c,...m})=>e.createElement(p,w({layout:a,surface:t},m),s,e.createElement(y,{variant:r,surface:o,slot:"content",style:{display:"flex",flexDirection:"row",padding:"0"}},e.createElement("div",{style:{display:"flex",gap:"var(--space-s)",padding:"var(--space-l) var(--space-s)",flexDirection:"column",width:"180px",borderRight:"1px solid var(--separator-primary)"}},n.map(t=>e.createElement(l,w({},t,{style:{justifyContent:"flex-start"}})))),e.createElement("div",{style:{flexGrow:"1",padding:"var(--space-l)",overflowY:"auto"}},c??i))),T=({surface:t="primary",layout:a="off-center",cardVariant:n="decorated",tabs:r=[],content:l,children:s,...i})=>e.createElement(p,w({layout:a,surface:t},i),e.createElement(o,{style:{height:"100%",background:"var(--surface-linear-gradient)"}},e.createElement(y,{variant:n,slot:"content",style:{width:"100vw",padding:"0"}},e.createElement(m,{tabs:r,style:{height:"auto",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement("div",{style:{padding:"var(--space-m)"}},l||s)))),I=(e,t)=>{const a=e=>e?.date?.split(" - ")?.[0]||"1900",n=new Date(a(e));return new Date(a(t))-n},D=(e=[])=>{e.sort(I);const[n,r]=t([]),[o,l]=t([]),[s,i]=t([]),[c,m]=t([]),[d,p]=t([]),[y,g]=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;d.length&&(t=e.filter(e=>e?.tags?.map(e=>e.toLowerCase())?.some(e=>d.map(e=>e.toLowerCase()).includes(e)))),y&&(t=t.filter(e=>e.typeOfExperience===y));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),i(a.Project),m(a.Other)},[d,e,y]);return{work:n,education:o,project:s,other:c,tags:[],categories:u,activeTags:d,toggleActiveTag:e=>{p(t=>t.includes(e)?t.filter(t=>t!==e):[...t,e])},activeExperienceType:y,toggleActiveExperienceType:e=>{e!==y&&g("All"===e?void 0:e)}}},V=({status:t,profile:a,experiences:n,translations:r,profileCardProps:o={},actions:s=[]})=>{const{work:c,education:d,project:p,other:y,tags:f,categories:E,activeTags:b,toggleActiveTag:j,activeExperienceType:k,toggleActiveExperienceType:B}=D(n),W=[{id:"All",label:r.all},{id:"Work",label:r.work},{id:"Project",label:r.projects},{id:"Education",label:r.education},{id:"Other",label:r.other}].filter(e=>"All"===e.id?e:E.includes(e.id)),C=[{title:r.work,experiences:c},{title:r.projects,experiences:p},{title:r.education,experiences:d},{title:r.other,experiences:y}];return e.createElement("div",{"data-component":"@design-system-extras/resume","data-status":t},e.createElement("style",{href:"@design-system-extras/resume",precedence:"high"},'\n        [data-component="@design-system-extras/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="@design-system-extras/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="@design-system-extras/resume"] [data-slot="actions"]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"] .secondary-actions {\n          display: none;\n          gap: var(--space-s);\n        }\n\n        [data-component="@design-system-extras/resume"] [data-slot="profile-summary"] {\n          grid-area: profile-summary;\n          z-index: 1;\n        }\n\n        [data-component="@design-system-extras/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="@design-system-extras/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="@design-system-extras/resume"] [data-scroll] {\n          scrollbar-width: none;\n          overflow-y: auto;\n        }\n\n        [data-component="@design-system-extras/resume"] [data-scroll]::-webkit-scrollbar {\n          display: none;\n        }\n\n        [data-component="@design-system-extras/resume"][data-status="Success"] [data-animation="fade-in"] {\n          opacity: 1;\n        }\n\n        [data-component="@design-system-extras/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="@design-system-extras/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="@design-system-extras/resume"] [data-slot="actions"] {\n            justify-content: space-between;\n          }\n\n          [data-component="@design-system-extras/resume"] .secondary-actions {\n            display: flex;\n          }\n        }\n\n        @media (min-width: 1900px) {\n          [data-component="@design-system-extras/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(g,w({"data-scroll":!0,"data-slot":"profile-summary",activeTags:b,onTagClick:j,translations:r,surface:"primary"},o,a)),e.createElement("header",{className:"actions","data-slot":"actions","data-surface":"primary"},e.createElement(m,{tabs:W,activeTabId:k||"All",onTabClick:(e,t)=>B(t.id),style:{borderBottom:f.length?"var(--header-border-bottom)":void 0}}),e.createElement("div",{className:"secondary-actions"},s.map(({label:t,contextMenu:a,...n})=>a?e.createElement(u,{trigger:e.createElement(l,n,t)},e.createElement(v,null,a.map(t=>e.createElement(v.Item,t,t.label)))):e.createElement(l,n,t))),!!f.length&&e.createElement(h,{tags:f,activeTags:b,onSelect:j,style:{padding:"var(--filter-padding)",display:"flex"}})),e.createElement("main",{className:"content","data-slot":"content","data-scroll":!0},C.filter(e=>!!e.experiences.length).map(({title:t,experiences:a})=>e.createElement("section",{className:"content-section",key:t},e.createElement(i,{variant:"primary",style:{textAlign:"center"}},t),e.createElement("div",{style:{display:"flex",flexDirection:"column",gap:"var(--space-l)"}},a.map(t=>e.createElement(x,{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})))))))},H=({title:t,titleVariant:a="secondary",titleAs:n="h2",text:r,children:o,maxWidth:l="l",...c})=>e.createElement(p,w({maxWidth:l},c,{style:{padding:"var(--space-xl) var(--space-m)",borderBottom:"1px solid var(--separator-primary)"}}),e.createElement(i,{as:n,variant:a,style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{style:{maxWidth:"600px",marginBottom:"var(--space-xl)"}},r),o),N=({theme:t={}})=>e.createElement(e.Fragment,null,e.createElement(H,{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(H,{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(o,{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(s,null,t))))),e.createElement(H,{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(o,{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(s,null,t," - ",a))))),e.createElement(H,{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(o,{gap:"s"},Object.entries(t["max-width"]).map(([t,a])=>e.createElement(o,{layout:"row",gap:"l"},e.createElement(s,{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(H,{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(o,{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(s,null,t))))),e.createElement(H,{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(o,{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(s,null,t))))),e.createElement(H,{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(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Titles"),e.createElement(o,{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(i,{variant:t},t)))),e.createElement(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},"Text"),e.createElement(o,{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(s,{variant:t},t))))),e.createElement(H,{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(o,{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))))),R=({title:t,titleMaxWidth:a="800px",text:n,actions:r=[]})=>e.createElement("div",{"data-component":"hero"},e.createElement("style",{href:"@ossy/design-system-extras/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(i,{variant:"display",style:{maxWidth:a,marginBottom:"var(--space-l)"}},t),e.createElement(s,{style:{marginBottom:"var(--space-l)"}},n),e.createElement("div",{style:{display:"flex",gap:"var(--space-m)"}},r.map(({label:t,...a})=>e.createElement(l,w({},a,{key:t}),t)))),K=({columns:t=[]})=>e.createElement(o,{layout:"row",placeContent:"normal space-between",gap:"xl",className:"footer"},e.createElement("style",{href:"@ossy/design-system-extras/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(i,{as:"h3",variant:"tertiary",className:"title",style:{color:"var(--color-primary)"}},t.title),!!t.text&&e.createElement(s,{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,w({variant:"link"},a,{style:{marginBottom:"var(--space-m)"}}),t))))))),M=[{id:"about",surface:"decorated",style:{padding:"var(--space-xxl) var(--space-m)"},render:({about:t,socialProof:a})=>e.createElement(e.Fragment,null,e.createElement(o,{alignItems:"stretch",justifyContent:"center",style:{marginBottom:"var(--space-xl)"}},t.columns.map(({name:t,role:a,imgSrc:n,text:r})=>e.createElement("div",{key:t,style:{display:"flex",flexDirection:"column",justifyContent:"center"}},e.createElement(f,{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(i,{as:"h1",variant:"primary"},t),e.createElement(i,{as:"h2",variant:"lead"},a)),e.createElement(s,{style:{textAlign:"center",maxWidth:"600px",margin:"0 auto"}},r)))),e.createElement(s,{variant:"small",style:{marginBottom:"var(--space-l)",textAlign:"center"}},a.title),e.createElement(o,{layout:"row",justifyContent:"space-between",gap:"m"},a.columns.map(({title:t,logo:a})=>e.createElement("div",{key:t,style:{textAlign:"center"}},e.createElement(y,null,e.createElement(f,{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(R,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(i,{variant:"tertiary",style:{marginBottom:"var(--space-m)"}},t),e.createElement(s,{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(E,{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(i,{title:t,variant:"tertiary",style:{marginBottom:"var(--space-l)"}},t),e.createElement(s,null,a),e.createElement(b,null,n.map(t=>e.createElement(b,{horizontal:!0,style:{marginBottom:"var(--space-m)"}},t.map(t=>e.createElement(l,w({},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(K,{columns:t.columns})}];export{A as CardLayout,O as CardSidebar,T as CardTabs,M as LandingPage2020,W as MarkdownViewer,V as Resume,S as StandardLayout,N as ThemeDisplay,D as useResume};

package/package.json

@@ -5,7 +5,7 @@
     "url": "git+https://github.com/ossy-se/packages.git"
   },
   "description": "Ossy's React Design System Extra Components",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "source": "src/index.js",
   "type": "module",
   "module": "build/index.js",
@@ -35,7 +35,7 @@
     ]
   },
   "dependencies": {
-    "@ossy/themes": "^0.1.4",
+    "@ossy/themes": "^0.1.5",
     "moment": "^2.29.4"
   },
   "peerDependencies": {
@@ -49,5 +49,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "d5cd2ad89b32cdc9cd31a27ff53b71a9c3226799"
+  "files": [
+    "/build",
+    "README.md"
+  ],
+  "gitHead": "a768d71e76cc523f367cd764a403c0960f8d2e93"
 }

package/.storybook/main.js

@@ -1,19 +0,0 @@
-
-
-/** @type { import('@storybook/react-vite').StorybookConfig } */
-const config = {
-  "stories": [
-    "../src/**/*.mdx",
-    "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"
-  ],
-  "addons": [
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions"
-  ],
-  "framework": {
-    "name": "@storybook/react-vite",
-    "options": {}
-  }
-};
-export default config;

package/.storybook/preview.jsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { Theme } from '@ossy/design-system';
-import { Ossy, Standard } from '@ossy/themes'
-
-/** @type { import('@storybook/react').Preview } */
-const preview = {
-
-  parameters: {
-    
-    controls: {
-      matchers: {
-       color: /(background|color)$/i,
-       date: /Date$/i,
-      },
-    },
-
-    options: {
-      storySort: {
-        order: ['App', 'Layout', '*', 'Base'],
-      },
-    },
-
-  },
-
-  decorators: [
-    (Story) => (
-      <Theme theme={Ossy} >
-        <Story />
-      </Theme>
-    ),
-  ]
-
-};
-
-export default preview;

package/CHANGELOG.md

@@ -1,166 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## 0.1.4 (2025-10-31)
-
-
-### Bug Fixes
-
-* **app:** add @babel/preset-env ([#7](https://github.com/ossy-se/packages/issues/7)) ([252b41a](https://github.com/ossy-se/packages/commit/252b41a6d4e3d7d3750661091c97186b0d9cdde2))
-
-
-
-
-
-## 0.1.3 (2025-10-31)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.1.2 (2025-10-31)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.1.1 (2025-10-31)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-# 0.1.0 (2025-10-30)
-
-
-### Features
-
-* **sdk:** get current workspace ([#4](https://github.com/ossy-se/packages/issues/4)) ([afce7d5](https://github.com/ossy-se/packages/commit/afce7d5787af42691f62c9eba672ea1be000e19e))
-
-
-
-
-
-## 0.0.16 (2025-10-30)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.15 (2025-10-27)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.14 (2025-10-27)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.13 (2025-10-27)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.12 (2025-10-27)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.11 (2025-10-27)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.10 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.9 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.8 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.7 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.6 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.5 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.4 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.3 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras
-
-
-
-
-
-## 0.0.2 (2025-10-25)
-
-**Note:** Version bump only for package @ossy/design-system-extras

package/rollup.config.js

@@ -1,31 +0,0 @@
-import babel from '@rollup/plugin-babel'
-import { nodeResolve as resolveDependencies } from '@rollup/plugin-node-resolve'
-import resolveCommonJsDependencies from '@rollup/plugin-commonjs'
-import removeOwnPeerDependencies from 'rollup-plugin-peer-deps-external'
-import minifyJS from '@rollup/plugin-terser'
-// import typescript from '@rollup/plugin-typescript'
-import preserveDirectives from "rollup-plugin-preserve-directives"
-
-export default [
-  {
-    input: 'src/index.js',
-    output: [
-      {
-        dir: 'build',
-        format: 'esm'
-      }
-    ],
-    plugins: [
-      removeOwnPeerDependencies(),
-      resolveCommonJsDependencies(),
-      resolveDependencies(),
-      babel({
-        exclude: ['**/node_modules/**/*'],
-        presets: ['@babel/preset-react']
-      }),
-      preserveDirectives(),
-      minifyJS(),
-      // typescript({ tsconfig: "./tsconfig.json" }),
-    ]
-  },
-]

package/src/index.js

@@ -1,3 +0,0 @@
-export * from './markdown-viewer'
-export * from './router-layouts'
-export * from './templates'

package/src/markdown-viewer/MarkdownViewer.jsx

@@ -1,86 +0,0 @@
-import React from 'react'
-import ReactMarkdown from 'react-markdown'
-import SyntaxHighlighter from 'react-syntax-highlighter'
-import atomOneLight from './styles/atom-one-light'
-import { View, Button, Title, Text } from "@ossy/design-system"
-
-const defaultComponents = {
-  'h1': ({ node, ...props }) => <Title id={asId(props.children)} as="h1" variant="primary" {...props} style={{ marginBottom: 'var(--space-l)' }} />,
-  'h2': ({ node, ...props }) => <Title id={asId(props.children)} as="h2" variant="secondary" {...props} style={{ marginBottom: 'var(--space-m)', marginTop: 'var(--space-l)' }} />,
-  'h3': ({ node, ...props }) => <Title id={asId(props.children)} as="h3" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
-  'h4': ({ node, ...props }) => <Title id={asId(props.children)} as="h4" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
-  'h5': ({ node, ...props }) => <Title id={asId(props.children)} as="h5" variant="tertiary" {...props} style={{ marginBottom: 'var(--space-m)' }} />,
-  'p': ({ node, ...props }) => <Text {...props} style={{ marginBottom: 'var(--space-m)' }} />,
-  'ul': ({ node, ...props }) => <ul {...props} style={{ listStyle: 'inside', paddingLeft: 'var(--space-l)' }} />,
-  'li': ({ node, ...props }) => <Text as="li" {...props} style={{ marginBottom: 'var(--space-m)' }}/>,
-  'a': ({ node, ...props }) => <Button as={props.href ? 'a' : 'button'} {...props} variant="link" />,
-  code: ({ node, className, ...props }) => {
-    const [_, language] = /language-(\w+)/.exec(className || '') || []
-    const inline = !language
-
-    if (inline) {
-      return (
-        <View inset="xs" surface="secondary" roundness="s" style={{ display: 'inline-block' }} {...props} >
-          <SyntaxHighlighter
-            style={{
-              display: 'inline',
-              ...atomOneLight,
-              "hljs": {
-                display: 'inline',
-                "color": "#383a42",
-                "background": "transparent"
-            }}}
-            language={language}
-            {...props}
-          />
-        </View>
-      )
-    }
-
-    return (
-      <View inset="m" surface="secondary" roundness="m" data-component="MarkdownViewer">
-      <style href="@ossy/design-system-extras/markdown-viewer/MarkdownViewer" precedence="high">
-      {`
-        [data-component="MarkdownViewer"] {
-          margin: var(--space-s) 0;
-        }
-
-        [data-component="MarkdownViewer"] pre {
-          margin: 0;
-        }
-      `}
-        </style>
-        <SyntaxHighlighter
-          style={{
-            ...atomOneLight,
-            "hljs": {
-              "display": "block",
-              "overflowX": "auto",
-              "color": "#383a42",
-              "background": "transparent"
-          }}}
-          language={language}
-          {...props}
-        />
-      </View>
-    )
-
-  }
-}
-
-function asId(str) {
-  if (!str) return ''
-  return str.toLowerCase().replace(/\s+/g, '-');
-}
-
-export const MarkdownViewer = ({
-  markdown,
-  children,
-  components = {},
-  ...props
-}) =>
-  <ReactMarkdown
-    children={markdown || children}
-    components={{ ...defaultComponents, ...components }}
-    {...props}
-  />

package/src/markdown-viewer/MarkdownViewer.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react'
-import { MarkdownViewer } from './MarkdownViewer.jsx'
-
-export default {
-  title: 'Design System Extras/MarkdownViewer',
-  component: MarkdownViewer,
-}
-
-const Story = props => <MarkdownViewer {...props} />
-
-export const Default = Story.bind({})
-Default.args = {
-  children: `
-    # Hello, this is an md doc
-
-    Let's get started with some documentation
-
-    ## Getting started
-
-    \`\`\`javascript
-    npm install @ossy/cms-client-react
-    \`\`\`
-
-    \`\`\`javascript
-    import { WorkspaceProvider } from '@ossy/cms-client-react'
-
-    export const App = () => (
-      <WorkspaceProvider workspaceId={<yourWorkspaceId>}>
-        {//...}
-      </WorkspaceProvider>
-    )
-    \`\`\`
-  `
-}

package/src/markdown-viewer/index.js

@@ -1 +0,0 @@
-export * from './MarkdownViewer.jsx'

package/src/markdown-viewer/styles/atom-one-light.js

@@ -1,114 +0,0 @@
-export default {
-    "hljs": {
-        "display": "block",
-        "overflowX": "auto",
-        "padding": "0.5em",
-        "color": "#383a42",
-        "background": "#fafafa"
-    },
-    "hljs-comment": {
-        "color": "#a0a1a7",
-        "fontStyle": "italic"
-    },
-    "hljs-quote": {
-        "color": "#a0a1a7",
-        "fontStyle": "italic"
-    },
-    "hljs-doctag": {
-        "color": "#a626a4"
-    },
-    "hljs-keyword": {
-        "color": "#a626a4"
-    },
-    "hljs-formula": {
-        "color": "#a626a4"
-    },
-    "hljs-section": {
-        "color": "#e45649"
-    },
-    "hljs-name": {
-        "color": "#e45649"
-    },
-    "hljs-selector-tag": {
-        "color": "#e45649"
-    },
-    "hljs-deletion": {
-        "color": "#e45649"
-    },
-    "hljs-subst": {
-        "color": "#e45649"
-    },
-    "hljs-literal": {
-        "color": "#0184bb"
-    },
-    "hljs-string": {
-        "color": "#50a14f"
-    },
-    "hljs-regexp": {
-        "color": "#50a14f"
-    },
-    "hljs-addition": {
-        "color": "#50a14f"
-    },
-    "hljs-attribute": {
-        "color": "#50a14f"
-    },
-    "hljs-meta-string": {
-        "color": "#50a14f"
-    },
-    "hljs-built_in": {
-        "color": "#c18401"
-    },
-    "hljs-class .hljs-title": {
-        "color": "#c18401"
-    },
-    "hljs-attr": {
-        "color": "#986801"
-    },
-    "hljs-variable": {
-        "color": "#986801"
-    },
-    "hljs-template-variable": {
-        "color": "#986801"
-    },
-    "hljs-type": {
-        "color": "#986801"
-    },
-    "hljs-selector-class": {
-        "color": "#986801"
-    },
-    "hljs-selector-attr": {
-        "color": "#986801"
-    },
-    "hljs-selector-pseudo": {
-        "color": "#986801"
-    },
-    "hljs-number": {
-        "color": "#986801"
-    },
-    "hljs-symbol": {
-        "color": "#4078f2"
-    },
-    "hljs-bullet": {
-        "color": "#4078f2"
-    },
-    "hljs-link": {
-        "color": "#4078f2",
-        "textDecoration": "underline"
-    },
-    "hljs-meta": {
-        "color": "#4078f2"
-    },
-    "hljs-selector-id": {
-        "color": "#4078f2"
-    },
-    "hljs-title": {
-        "color": "#4078f2"
-    },
-    "hljs-emphasis": {
-        "fontStyle": "italic"
-    },
-    "hljs-strong": {
-        "fontWeight": "bold"
-    }
-}

package/src/router-layouts/Footer.jsx

@@ -1,38 +0,0 @@
-import React from 'react'
-import { Title, Button, Text, View } from "@ossy/design-system"
-
-export const Footer = ({
-  columns = [],
-}) => {
-  return (
-    <View layout="row" placeContent="normal space-between" gap="xl">
-      {
-        columns.map(column => (
-          <div style={{ maxWidth: `var(--max-width-${column.maxWidth}, 100%)` }}>
-            <Title as="h3" variant="tertiary" style={{ marginBottom: 'var(--space-m)' }}>
-              {column.title}
-            </Title>
-            {
-              !!column.text && <Text>{column.text}</Text>
-            }
-            {
-              !!column.list && (
-                <ul key={column.title} style={{ padding: '0' }}>
-                  {
-                    column.list.map(({ label, ...anchorProps }) => (
-                      <li key={label} style={{ listStyle: 'none' }}>
-                        <Button variant="link" {...anchorProps} style={{ marginBottom: 'var(--space-m)' }}>
-                          {label}
-                        </Button>
-                      </li>
-                    ))
-                  }
-                </ul>
-              )
-            }
-          </div>
-        ))
-      }
-    </View>
-  )
-}