@radix-ui/themes/dist/esm/components/scroll-area.js

[](https://radix-ui.com/themes)

import*as r from"react";import s from"classnames";import{ScrollArea as e}from"radix-ui";import{scrollAreaPropDefs as o}from"./scroll-area.props.js";import{extractMarginProps as h}from"../helpers/extract-margin-props.js";import{getMarginStyles as w}from"../helpers/get-margin-styles.js";import{getResponsiveClassNames as m}from"../helpers/get-responsive-styles.js";import{getSubtree as C}from"../helpers/get-subtree.js";import{mergeStyles as z}from"../helpers/merge-styles.js";const c=r.forwardRef((n,S)=>{const{rest:f,...P}=h(n),[u,A]=w(P),{asChild:a,children:d,className:y,style:v,type:t,scrollHideDelay:N=t!=="scroll"?0:void 0,dir:V,size:i=o.size.default,radius:p=o.radius.default,scrollbars:l=o.scrollbars.default,...b}=f;return r.createElement(e.Root,{type:t,scrollHideDelay:N,className:s("rt-ScrollAreaRoot",u,y),style:z(A,v),asChild:a},C({asChild:a,children:d},g=>r.createElement(r.Fragment,null,r.createElement(e.Viewport,{...b,ref:S,className:"rt-ScrollAreaViewport"},g),r.createElement("div",{className:"rt-ScrollAreaViewportFocusRing"}),l!=="vertical"?r.createElement(e.Scrollbar,{"data-radius":p,orientation:"horizontal",className:s("rt-ScrollAreaScrollbar",m({className:"rt-r-size",value:i,propValues:o.size.values}))},r.createElement(e.Thumb,{className:"rt-ScrollAreaThumb"})):null,l!=="horizontal"?r.createElement(e.Scrollbar,{"data-radius":p,orientation:"vertical",className:s("rt-ScrollAreaScrollbar",m({className:"rt-r-size",value:i,propValues:o.size.values}))},r.createElement(e.Thumb,{className:"rt-ScrollAreaThumb"})):null,l==="both"?r.createElement(e.Corner,{className:"rt-ScrollAreaCorner"}):null)))});c.displayName="ScrollArea";export{c as ScrollArea};
//# sourceMappingURL=scroll-area.js.map