var Component=(()=>{var y=Object.create;var l=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var u=Object.getPrototypeOf,f=Object.prototype.hasOwnProperty;var m=(e,n)=>()=>(n||e((n={exports:{}}).exports,n),n.exports),C=(e,n)=>{for(var o in n)l(e,o,{get:n[o],enumerable:!0})},t=(e,n,o,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let i of g(n))!f.call(e,i)&&i!==o&&l(e,i,{get:()=>n[i],enumerable:!(s=v(n,i))||s.enumerable});return e};var N=(e,n,o)=>(o=e!=null?y(u(e)):{},t(n||!e||!e.__esModule?l(o,"default",{value:e,enumerable:!0}):o,e)),b=e=>t(l({},"__esModule",{value:!0}),e);var d=m((I,h)=>{h.exports=_jsx_runtime});var w={};C(w,{default:()=>k,frontmatter:()=>x});var r=N(d()),x={title:"Card",navTitle:"Card",keywords:["card"],description:"The Card component provides a flexible container with optional decorative patterns, used throughout Xata for consistent design.",slug:"components/card",published:!0};function p(e){let n={code:"code",div:"div",h2:"h2",h3:"h3",h4:"h4",p:"p",pre:"pre",span:"span",strong:"strong",...e.components},{Box:o,Card:s,LinkOverlay:i,SpotlightCard:c}=n;return o||a("Box",!0),s||a("Card",!0),i||a("LinkOverlay",!0),c||a("SpotlightCard",!0),(0,r.jsxs)(r.Fragment,{children:[(0,r.jsx)(n.h2,{children:"Card"}),` `,(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Card"})," component is an enhanced ",(0,r.jsx)(n.code,{children:"Box"})," component that primarily includes border styles. Additionally, you can apply various decorative patterns to the card by specifying one of the following options: ",(0,r.jsx)(n.code,{children:"'none' | 'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'"}),"."]}),` `,(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"Card"})," component can also be made ",(0,r.jsx)(n.strong,{children:"clickable"}),". To do this, set the ",(0,r.jsx)(n.code,{children:"isClickable"})," prop, which will render the ",(0,r.jsx)(n.code,{children:"Card"})," as a Chakra UI ",(0,r.jsx)(n.code,{children:"LinkBox"}),". This requires using the ",(0,r.jsx)(n.code,{children:"LinkOverlay"})," component as a child or wrapping it around the title or content."]}),` `,(0,r.jsx)(n.h3,{children:"Examples"}),` `,(0,r.jsx)(n.h4,{children:"Basic Card"}),` `,(0,r.jsx)(s,{p:4,mb:4,children:(0,r.jsxs)("p",{children:["I'm a Card with padding of ",(0,r.jsx)(n.code,{children:"4"})]})}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"mb"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a Card with padding of `4`"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:""})]}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h4,{children:"Clickable Card with Pattern"}),` `,(0,r.jsxs)(s,{p:4,isClickable:!0,pattern:"topRight",mb:4,children:[(0,r.jsx)(i,{href:"#",children:"I'm a LinkOverlay"}),(0,r.jsxs)("p",{children:["I'm a clickable Card with padding of ",(0,r.jsx)(n.code,{children:"4"})," and a ",(0,r.jsx)(n.code,{children:"topRight"})," pattern"]})]}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"} "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:"isClickable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" pattern"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"topRight"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"LinkOverlay"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" href"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"#"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a LinkOverlay"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a clickable Card with padding of `4` and a `topRight` pattern"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:""})]}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h3,{children:"Code"}),` `,(0,r.jsxs)(n.p,{children:["To use the ",(0,r.jsx)(n.code,{children:"Card"})," component in your application, import and use it as shown below:"]}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { Card } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,r.jsx)(n.span,{className:"line"}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Card"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">My Card content"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h2,{children:"Spotlight Card"}),` `,(0,r.jsxs)(n.p,{children:["The ",(0,r.jsx)(n.code,{children:"SpotlightCard"})," component adds an interactive spotlight effect that follows your mouse on hover. Use this card as a wrapper. If padding is needed, include a nested ",(0,r.jsx)(n.code,{children:"Box"})," or ",(0,r.jsx)(n.code,{children:"Flex"})," component with the desired padding properties."]}),` `,(0,r.jsxs)(n.p,{children:["Similar to the standard ",(0,r.jsx)(n.code,{children:"Card"}),", the ",(0,r.jsx)(n.code,{children:"SpotlightCard"})," accepts a ",(0,r.jsx)(n.code,{children:"pattern"})," prop and can also be made clickable using the ",(0,r.jsx)(n.code,{children:"isClickable"})," prop."]}),` `,(0,r.jsx)(n.h3,{children:"Examples"}),` `,(0,r.jsx)(n.h4,{children:"Basic Spotlight Card"}),` `,(0,r.jsx)(c,{mb:4,children:(0,r.jsx)(o,{p:4,children:(0,r.jsxs)("p",{children:["I'm a SpotlightCard with padding of ",(0,r.jsx)(n.code,{children:"4"})]})})}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a SpotlightCard with padding of `4`"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:""})]}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h4,{children:"Clickable Spotlight Card with Pattern"}),` `,(0,r.jsx)(c,{isClickable:!0,mb:4,pattern:"topRight",children:(0,r.jsx)(o,{p:4,children:(0,r.jsxs)("p",{children:["I'm a clickable SpotlightCard with padding of ",(0,r.jsx)(n.code,{children:"4"})," and a ",(0,r.jsx)(n.code,{children:"topRight"})," pattern"]})})}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"<"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" isClickable"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" pattern"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"topRight"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a clickable SpotlightCard with padding of `4` and a `topRight` pattern"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:""})]}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h3,{children:"Code"}),` `,(0,r.jsxs)(n.p,{children:["To use the ",(0,r.jsx)(n.code,{children:"SpotlightCard"})," in your application, import and use it as follows:"]}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { SpotlightCard } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,r.jsx)(n.span,{className:"line"}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"SpotlightCard"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"{"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"4"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"}>"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">I'm a SpotlightCard"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.h2,{children:"Card Pattern"}),` `,(0,r.jsxs)(n.p,{children:["You can also import the ",(0,r.jsx)(n.code,{children:"CardPattern"})," component to apply various decorative patterns to a section of your design. The available variants are ",(0,r.jsx)(n.code,{children:"'right' | 'bottomLeft' | 'bottomRight' | 'bottom' | 'topRight' | 'topLeft'"}),"."]}),` `,(0,r.jsx)(n.div,{className:"shiki-container",children:(0,r.jsx)(n.pre,{className:"shiki css-variables",style:{backgroundColor:"var(--shiki-background)",color:"var(--shiki-foreground)"},tabIndex:"0",children:(0,r.jsxs)(n.code,{children:[(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"import"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" { CardPattern } "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"from"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:" '@internal/components'"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:";"})]}),` `,(0,r.jsx)(n.span,{className:"line"}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"export"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" const"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" MyComponent"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" ="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" () "}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"=>"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" {"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:" return"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" ("})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"Box"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-constant)"},children:"CardPattern"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-function)"},children:" variant"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-keyword)"},children:"="}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:'"bottomRight"'}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" <"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-token-string-expression)"},children:"p"}),(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:">Lorem ipsum"})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsxs)(n.span,{className:"line",children:[(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" "})]}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:" );"})}),` `,(0,r.jsx)(n.span,{className:"line",children:(0,r.jsx)(n.span,{style:{color:"var(--shiki-foreground)"},children:"};"})}),` `,(0,r.jsx)(n.span,{className:"line"})]})})}),` `,(0,r.jsx)(n.p,{children:"By using these components, you can create consistent, styled containers throughout your application, enhancing both the design and user experience."})]})}function k(e={}){let{wrapper:n}=e.components||{};return n?(0,r.jsx)(n,{...e,children:(0,r.jsx)(p,{...e})}):p(e)}function a(e,n){throw new Error("Expected "+(n?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return b(w);})(); ;return Component;

Welcome to the Xata Design System

Colors

Typography

Illustrations

Logos