var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.getPrototypeOf,v=Object.prototype.hasOwnProperty;var g=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),D=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},o=(n,e,r,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of u(e))!v.call(n,a)&&a!==r&&t(n,a,{get:()=>e[a],enumerable:!(d=p(e,a))||d.enumerable});return n};var x=(n,e,r)=>(r=n!=null?h(m(n)):{},o(e||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),f=n=>o(t({},"__esModule",{value:!0}),n);var l=g((w,c)=>{c.exports=_jsx_runtime});var C={};D(C,{default:()=>k,frontmatter:()=>b});var i=x(l()),b={id:"divider",title:"Divider",package:"@saas-ui/core",description:"Dividers are used to visually separate content in a list or group."};function s(n){let e=Object.assign({p:"p",h2:"h2",pre:"pre",code:"code",h3:"h3"},n.components),{ComponentLinks:r}=e;return r||L("ComponentLinks",!0),(0,i.jsxs)(i.Fragment,{children:[(0,i.jsx)(e.p,{children:"Dividers are used to visually separate content in a list or group."}),` `,(0,i.jsx)(r,{theme:{componentName:"divider"},github:{url:"https://github.com/saas-ui/saas-ui/blob/main/packages/saas-ui-core/src/divider"},npm:{package:"@saas-ui/core"}}),` `,(0,i.jsx)(e.h2,{id:"import",children:"Import"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-js",children:`import { Divider, DividerLabel } from '@saas-ui/react' `})}),` `,(0,i.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"Divider"})," displays a thin horizontal or vertical line, and renders a ",(0,i.jsx)(e.code,{children:"hr"}),` tag.`]}),` `,(0,i.jsx)(e.h2,{id:"basic",children:"Basic"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.h2,{id:"variants",children:"Variants"}),` `,(0,i.jsxs)(e.p,{children:["The ",(0,i.jsx)(e.code,{children:"Divider"})," component comes with 2 variants: ",(0,i.jsx)(e.code,{children:"solid"})," and ",(0,i.jsx)(e.code,{children:"dashed"}),"."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.h2,{id:"label",children:"Label"}),` `,(0,i.jsxs)(e.p,{children:["You can add a text label that will be aligned in the center of the ",(0,i.jsx)(e.code,{children:"Divider"}),`, this will render a `,(0,i.jsx)(e.code,{children:"div"})," tag."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` Divider `})}),` `,(0,i.jsx)(e.h3,{id:"divider-orientation",children:"Divider Orientation"}),` `,(0,i.jsxs)(e.p,{children:["Pass the ",(0,i.jsx)(e.code,{children:"orientation"})," prop and set it to either ",(0,i.jsx)(e.code,{children:"horizontal"})," or ",(0,i.jsx)(e.code,{children:"vertical"}),". The default is ",(0,i.jsx)(e.code,{children:"horizontal"}),"."]}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:` `})}),` `,(0,i.jsx)(e.p,{children:`If the vertical orientation is used, make sure that the parent element is assigned a height.`}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Center } from '@chakra-ui/react' import { Divider } from '@saas-ui/react' export default function Vertical() { return ( ) } `})}),` `,(0,i.jsx)(e.p,{children:"Vertical with a label."}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Center } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function VerticalWithLabel() { return ( Label ) } `})}),` `,(0,i.jsx)(e.h2,{id:"composition",children:"Composition"}),` `,(0,i.jsx)(e.pre,{children:(0,i.jsx)(e.code,{className:"language-jsx",children:`import { Stack, Text } from '@chakra-ui/react' import { Divider, DividerLabel } from '@saas-ui/react' export default function Composition() { return ( Saas UI ) } `})})]})}function j(n={}){let{wrapper:e}=n.components||{};return e?(0,i.jsx)(e,Object.assign({},n,{children:(0,i.jsx)(s,n)})):s(n)}var k=j;function L(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return f(C);})(); ;return Component;

Prop	Type	Default	Description
colorScheme	`"whiteAlpha" \| "blackAlpha" \| "gray" \| "red" \| "orange" \| "yellow" \| "green" \| "teal" \| "blue" \| "cyan" \| "purple" \| "pink" \| "linkedin" \| "facebook" \| "messenger" \| "whatsapp" \| "twitter" \| "telegram"`		The visual color appearance of the component
size	`string`		The size of the Divider
variant	`"solid" \| "dashed"`	`solid`	The variant of the Divider