@zydon/common 2.8.62 → 2.8.63
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.
|
@@ -5,7 +5,7 @@ import a from '@mui/material/Stack';
|
|
|
5
5
|
import { styled, alpha } from '@mui/material/styles';
|
|
6
6
|
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
7
7
|
|
|
8
|
-
var g=60,i=styled(a)(({theme:t})=>({position:"sticky",width:"100%",minHeight:g,top:"var(--sticky-header-height,
|
|
8
|
+
var g=60,i=styled(a)(({theme:t})=>({position:"sticky",width:"100%",minHeight:g,top:"var(--sticky-header-height, 0px)",flexDirection:"row",alignItems:"center",justifyContent:"space-between",padding:"0 24px",gap:12,borderBottom:`1px solid ${alpha(t.palette.grey[500],.12)}`,backgroundColor:t.palette.background.paper,zIndex:999,"& .logo svg":{width:24,height:24,color:t.palette.primary.main}})),o=styled(a)({flex:1,background:`linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
|
|
9
9
|
linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),
|
|
10
10
|
var(--dot-color)`});o.defaultProps={style:{"--dot-bg":"#F1F2FD","--dot-color":"#000","--dot-size":"1px","--dot-space":"56px"}};var u=({children:t,header:n,helpLink:s,configButton:c})=>jsxs(Fragment,{children:[jsxs(i,{children:[n,jsxs(a,{direction:"row",alignItems:"center",gap:2,children:[jsx(a$1,{link:s,children:"Ajuda"}),c]})]}),jsx(o,{children:t})]}),H=u;
|
|
11
11
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/BuilderLayout/index.tsx","../../../src/components/BuilderLayout/styles.ts"],"names":["Stack","alpha","styled","HEADER_HEIGHT","Header","theme","Content","Fragment","jsx","jsxs","BuilderLayout","children","header","helpLink","configButton","HelpButton_default","BuilderLayout_default"],"mappings":"4GACA,OAAOA,MAAW,sBCAlB,OAAOA,MAAW,sBAClB,OAAS,SAAAC,EAAO,UAAAC,MAAc,uBAE9B,IAAMC,EAAgB,GAETC,EAASF,EAAOF,CAAK,EAAE,CAAC,CAAE,MAAAK,CAAM,KAAO,CAClD,SAAU,SACV,MAAO,OACP,UAAWF,EACX,IAAK,
|
|
1
|
+
{"version":3,"sources":["../../../src/components/BuilderLayout/index.tsx","../../../src/components/BuilderLayout/styles.ts"],"names":["Stack","alpha","styled","HEADER_HEIGHT","Header","theme","Content","Fragment","jsx","jsxs","BuilderLayout","children","header","helpLink","configButton","HelpButton_default","BuilderLayout_default"],"mappings":"4GACA,OAAOA,MAAW,sBCAlB,OAAOA,MAAW,sBAClB,OAAS,SAAAC,EAAO,UAAAC,MAAc,uBAE9B,IAAMC,EAAgB,GAETC,EAASF,EAAOF,CAAK,EAAE,CAAC,CAAE,MAAAK,CAAM,KAAO,CAClD,SAAU,SACV,MAAO,OACP,UAAWF,EACX,IAAK,mCACL,cAAe,MACf,WAAY,SACZ,eAAgB,gBAChB,QAAS,SACT,IAAK,GACL,aAAc,aAAaF,EAAMI,EAAM,QAAQ,KAAK,GAAG,EAAG,GAAI,IAC9D,gBAAiBA,EAAM,QAAQ,WAAW,MAC1C,OAAQ,IAER,cAAe,CACb,MAAO,GACP,OAAQ,GACR,MAAOA,EAAM,QAAQ,QAAQ,IAC/B,CACF,EAAE,EAEWC,EAAUJ,EAAOF,CAAK,EAAE,CACnC,KAAM,EACN,WAAY;AAAA;AAAA,mBAGd,CAAC,EAEDM,EAAQ,aAAe,CACrB,MAAO,CACL,WAAY,UACZ,cAAe,OACf,aAAc,MACd,cAAe,MACjB,CACF,ED1BI,mBAAAC,EAKM,OAAAC,EADF,QAAAC,MAJJ,oBAPJ,IAAMC,EAAgB,CAAC,CACrB,SAAAC,EACA,OAAAC,EACA,SAAAC,EACA,aAAAC,CACF,IAEIL,EAAAF,EAAA,CACE,UAAAE,EAACL,EAAA,CACE,UAAAQ,EAEDH,EAACT,EAAA,CAAM,UAAU,MAAM,WAAW,SAAS,IAAK,EAC9C,UAAAQ,EAACO,EAAA,CAAW,KAAMF,EAAU,iBAAK,EAChCC,GACH,GACF,EAEAN,EAACF,EAAA,CAAS,SAAAK,EAAS,GACrB,EAIGK,EAAQN","sourcesContent":["import { PropsWithChildren } from 'react';\nimport Stack from '@mui/material/Stack';\n\nimport HelpButton from '../HelpButton';\n\nimport { BuilderLayoutProps } from './props';\nimport { Content, Header } from './styles';\n\nconst BuilderLayout = ({\n children,\n header,\n helpLink,\n configButton,\n}: PropsWithChildren<BuilderLayoutProps>) => {\n return (\n <>\n <Header>\n {header}\n\n <Stack direction=\"row\" alignItems=\"center\" gap={2}>\n <HelpButton link={helpLink}>Ajuda</HelpButton>\n {configButton}\n </Stack>\n </Header>\n\n <Content>{children}</Content>\n </>\n );\n};\n\nexport default BuilderLayout;\n","import { CSSProperties } from 'react';\nimport Stack from '@mui/material/Stack';\nimport { alpha, styled } from '@mui/material/styles';\n\nconst HEADER_HEIGHT = 60;\n\nexport const Header = styled(Stack)(({ theme }) => ({\n position: 'sticky',\n width: '100%',\n minHeight: HEADER_HEIGHT,\n top: 'var(--sticky-header-height, 0px)',\n flexDirection: 'row',\n alignItems: 'center',\n justifyContent: 'space-between',\n padding: '0 24px',\n gap: 12,\n borderBottom: `1px solid ${alpha(theme.palette.grey[500], 0.12)}`,\n backgroundColor: theme.palette.background.paper,\n zIndex: 999,\n\n '& .logo svg': {\n width: 24,\n height: 24,\n color: theme.palette.primary.main,\n },\n}));\n\nexport const Content = styled(Stack)({\n flex: 1,\n background: `linear-gradient(90deg, var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n linear-gradient(var(--dot-bg) calc(var(--dot-space) - var(--dot-size)), transparent 1%) center / var(--dot-space) var(--dot-space),\n var(--dot-color)`,\n});\n\nContent.defaultProps = {\n style: {\n '--dot-bg': '#F1F2FD',\n '--dot-color': '#000',\n '--dot-size': '1px',\n '--dot-space': '56px',\n } as CSSProperties,\n};\n"]}
|
|
@@ -15,7 +15,7 @@ import L from '@mui/material/Button';
|
|
|
15
15
|
import { styled } from '@mui/material/styles';
|
|
16
16
|
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
17
17
|
|
|
18
|
-
var S=styled("aside")(({theme:t})=>({flex:1,maxWidth:300,backgroundColor:t.palette.background.paper,borderRight:`1px solid ${t.palette.divider}`,[t.breakpoints.down("md")]:{display:"none"}})),k=styled(r)({position:"sticky",top:"calc(var(--sticky-header-height,
|
|
18
|
+
var S=styled("aside")(({theme:t})=>({flex:1,maxWidth:300,backgroundColor:t.palette.background.paper,borderRight:`1px solid ${t.palette.divider}`,[t.breakpoints.down("md")]:{display:"none"}})),k=styled(r)({position:"sticky",top:"calc(var(--sticky-header-height, 0px))",height:"calc(100vh - var(--sticky-header-height, 0px))"}),C=styled("nav")({display:"flex",flexDirection:"column"}),v=styled("main")(({theme:t})=>({flex:1,width:"100%",maxWidth:"100%",[t.breakpoints.up("md")]:{"&.with-left-box":{maxWidth:"calc(100% - 300px)"}}})),w=styled(r)(({theme:t})=>({position:"sticky",top:"var(--sticky-header-height, 0px)",flexDirection:"row",alignItems:"center",backgroundColor:t.palette.background.paper,zIndex:t.zIndex.appBar,width:"100%",padding:"12px 24px",height:64,gap:12,[t.breakpoints.down("md")]:{padding:"14px 16px",gap:6},borderBottom:`1px solid ${t.palette.divider}`})),T=styled(L)(({theme:t})=>({height:50,background:"none",fontSize:13,fontWeight:400,justifyContent:"flex-start",padding:t.spacing(1,4),color:t.palette.text.secondary,borderRadius:0,gap:4,"&:hover":{backgroundColor:"transparent"},"& .required":{color:t.palette.error.main},"&:before":{content:'""',position:"absolute",top:0,left:t.spacing(2),height:0,width:`calc(100% - ${t.spacing(4)})`,borderBottom:`1px dashed ${t.palette.divider}`}})),p=styled(r)(({theme:t})=>({flex:1,flexDirection:"row",alignItems:"center",gap:24,"&.header-left-content":{justifyContent:"flex-start",marginLeft:12},[t.breakpoints.down("md")]:{gap:8,flex:"initial","& button, & a":{display:"flex",textIndent:"-9999em",fontSize:0,minWidth:36,maxWidth:36,height:36,width:36,overflow:"hidden","& .MuiButton-icon":{margin:"auto"}},"&.header-left-content":{justifyContent:"flex-end",marginLeft:"auto",marginRight:-6,"& label":{marginRight:0},"& .MuiTypography-root":{display:"none"}}}})),W=styled(r)(({theme:t})=>({flex:1,width:"100%",padding:24,gap:24,alignItems:"center",overflow:"hidden",[t.breakpoints.down("md")]:{padding:"24px 16px"}})),d=styled("section")(({theme:t})=>({alignItems:"start",width:"100%",maxWidth:900,[t.breakpoints.down("md")]:{maxWidth:"100%"}})),I=styled(a)(({theme:t})=>({width:"100%",borderRadius:12,gap:12,[t.breakpoints.down("md")]:{padding:"24px 16px"}})),B=styled(c)(({theme:t})=>({color:t.palette.text.primary,fontSize:18,fontWeight:900,fontFamily:t.typography.fontFamily,margin:0,lineHeight:1.5})),R=styled(c)(({theme:t})=>({color:t.palette.text.secondary,fontSize:14,fontWeight:400,paddingBottom:24}));var j=({title:t,subtitle:s,children:N,sections:f,headerLeftContent:P,headerRightContent:H,showLeftContent:m=!0,onClickBack:z})=>(a$1(!0),jsxs(r,{id:"frame-skeleton",className:"frame-skeleton",direction:"row",flex:1,children:[m&&jsx(S,{id:"frame-skeleton-left-box",children:jsx(k,{children:jsx(a$2,{fillContent:!0,"aria-label":"Acesso r\xE1pido",children:jsxs(r,{gap:1.5,children:[jsx(c,{variant:"overline",color:"text.disabled",fontWeight:700,pt:3,px:4,pb:0,children:"Acesso r\xE1pido"}),jsx(C,{children:f.map(o=>jsxs(T,{onClick:()=>{o.ref.current&&o.ref.current.scrollIntoView({block:"center",behavior:"smooth"});},children:[o.title,o.isRequired&&jsx("span",{className:"required","aria-label":"Se\xE7\xE3o obrigat\xF3ria",children:"*"})]},o.title))})]})})})}),jsxs(v,{className:m?"with-left-box":"",children:[jsxs(w,{children:[jsx($,{color:"inherit",onClick:()=>z(),"data-testid":"backToPreviousPage","aria-label":"Voltar",children:jsx(a$3,{icon:"CHEVRON_LEFT"})}),jsxs(r,{overflow:"hidden",children:[jsx(c,{variant:"subtitle1",noWrap:!0,component:"h1",children:t}),s&&jsx(c,{variant:"caption",color:"text.secondary",noWrap:!0,component:"div",children:s})]}),jsx(p,{className:"header-left-content",children:P}),jsx(p,{justifyContent:"flex-end",color:"text.secondary",children:H})]}),jsxs(W,{children:[jsx(d,{children:N}),f.map((o,F)=>{let a=o.id||`section-${F}`,x=`${a}-title`;return jsxs(d,{id:a,role:"region","aria-labelledby":x,children:[o.title&&jsx(B,{component:"h2",id:x,ref:o.ref,children:o.title}),o.subTitle&&jsx(R,{children:o.subTitle}),jsx(I,{...o.sectionContentProps,children:o.child})]},o.title||a)})]})]})]})),Y=j;
|
|
19
19
|
|
|
20
20
|
export { Y as default };
|
|
21
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../src/components/FrameSkeleton/index.tsx","../../../src/components/FrameSkeleton/styles.ts"],"names":["IconButton","Stack","Typography","Button","styled","Sidebar","theme","SidebarContent","Nav","Content","TopBox","SectionLink","HeaderContent","Children","Section","SectionContent","Panel_default","SectionTitle","SectionSubtitle","jsx","jsxs","FrameSkeleton","title","subtitle","children","sections","headerLeftContent","headerRightContent","showLeftContent","onClickBack","useCollapseSidebarOnMount_default","Scrollbar_default","section","Icon_default","index","id","titleId","FrameSkeleton_default"],"mappings":"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","sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport Icon from 'components/Icon';\nimport Scrollbar from 'components/Scrollbar';\nimport useCollapseSidebarOnMount from 'hooks/useCollapseSidebarOnMount';\n\nimport { FrameSkeletonProps } from './props';\nimport {\n Children,\n Content,\n HeaderContent,\n Nav,\n Section,\n SectionContent,\n SectionLink,\n SectionSubtitle,\n SectionTitle,\n Sidebar,\n SidebarContent,\n TopBox,\n} from './styles';\n\nconst FrameSkeleton = ({\n title,\n subtitle,\n children,\n sections,\n headerLeftContent,\n headerRightContent,\n showLeftContent = true,\n onClickBack,\n}: FrameSkeletonProps) => {\n useCollapseSidebarOnMount(true);\n return (\n <Stack\n id=\"frame-skeleton\"\n className=\"frame-skeleton\"\n direction=\"row\"\n flex={1}\n >\n {showLeftContent && (\n <Sidebar id=\"frame-skeleton-left-box\">\n <SidebarContent>\n <Scrollbar fillContent aria-label=\"Acesso rápido\">\n <Stack gap={1.5}>\n <Typography\n variant=\"overline\"\n color=\"text.disabled\"\n fontWeight={700}\n pt={3}\n px={4}\n pb={0}\n >\n Acesso rápido\n </Typography>\n\n <Nav>\n {sections.map(section => (\n <SectionLink\n key={section.title}\n onClick={() => {\n if (section.ref.current)\n section.ref.current.scrollIntoView({\n block: 'center',\n behavior: 'smooth',\n });\n }}\n >\n {section.title}\n {section.isRequired && (\n <span\n className=\"required\"\n aria-label=\"Seção obrigatória\"\n >\n *\n </span>\n )}\n </SectionLink>\n ))}\n </Nav>\n </Stack>\n </Scrollbar>\n </SidebarContent>\n </Sidebar>\n )}\n\n <Content className={showLeftContent ? 'with-left-box' : ''}>\n <TopBox>\n <IconButton\n color=\"inherit\"\n onClick={() => onClickBack()}\n data-testid=\"backToPreviousPage\"\n aria-label=\"Voltar\"\n >\n <Icon icon=\"CHEVRON_LEFT\" />\n </IconButton>\n\n <Stack overflow=\"hidden\">\n <Typography variant=\"subtitle1\" noWrap component=\"h1\">\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n noWrap\n component=\"div\"\n >\n {subtitle}\n </Typography>\n )}\n </Stack>\n\n <HeaderContent className=\"header-left-content\">\n {headerLeftContent}\n </HeaderContent>\n\n <HeaderContent justifyContent=\"flex-end\" color=\"text.secondary\">\n {headerRightContent}\n </HeaderContent>\n </TopBox>\n\n <Children>\n <Section>{children}</Section>\n\n {sections.map((section, index) => {\n const id = section.id || `section-${index}`;\n const titleId = `${id}-title`;\n return (\n <Section\n key={section.title || id}\n id={id}\n role=\"region\"\n aria-labelledby={titleId}\n >\n {section.title && (\n <SectionTitle\n component=\"h2\"\n id={titleId}\n ref={section.ref as React.RefObject<HTMLDivElement>}\n >\n {section.title}\n </SectionTitle>\n )}\n {section.subTitle && (\n <SectionSubtitle>{section.subTitle}</SectionSubtitle>\n )}\n\n <SectionContent {...section.sectionContentProps}>\n {section.child}\n </SectionContent>\n </Section>\n );\n })}\n </Children>\n </Content>\n </Stack>\n );\n};\n\nexport default FrameSkeleton;\n","import Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography, { TypographyProps } from '@mui/material/Typography';\n\nimport Panel from 'components/Panel';\n\nexport const Sidebar = styled('aside')(({ theme }) => ({\n flex: 1,\n maxWidth: 300,\n backgroundColor: theme.palette.background.paper,\n borderRight: `1px solid ${theme.palette.divider}`,\n\n [theme.breakpoints.down('md')]: {\n display: 'none',\n },\n}));\n\nexport const SidebarContent = styled(Stack)({\n position: 'sticky',\n top: 'calc(var(--sticky-header-height, 64px))',\n height: 'calc(100vh - var(--sticky-header-height, 64px))',\n});\n\nexport const Nav = styled('nav')({\n display: 'flex',\n flexDirection: 'column',\n});\n\nexport const Content = styled('main')(({ theme }) => ({\n flex: 1,\n width: '100%',\n maxWidth: '100%',\n\n [theme.breakpoints.up('md')]: {\n '&.with-left-box': { maxWidth: 'calc(100% - 300px)' },\n },\n}));\n\nexport const TopBox = styled(Stack)(({ theme }) => ({\n position: 'sticky',\n top: 'var(--sticky-header-height, 64px)',\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: theme.palette.background.paper,\n zIndex: theme.zIndex.appBar,\n width: '100%',\n padding: '12px 24px',\n height: 64,\n gap: 12,\n\n [theme.breakpoints.down('md')]: {\n padding: '14px 16px',\n gap: 6,\n },\n borderBottom: `1px solid ${theme.palette.divider}`,\n}));\n\nexport const SectionLink = styled(Button)(({ theme }) => ({\n height: 50,\n background: 'none',\n fontSize: 13,\n fontWeight: 400,\n justifyContent: 'flex-start',\n padding: theme.spacing(1, 4),\n color: theme.palette.text.secondary,\n borderRadius: 0,\n gap: 4,\n\n '&:hover': {\n backgroundColor: 'transparent',\n },\n\n '& .required': {\n color: theme.palette.error.main,\n },\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: theme.spacing(2),\n height: 0,\n width: `calc(100% - ${theme.spacing(4)})`,\n borderBottom: `1px dashed ${theme.palette.divider}`,\n },\n}));\n\nexport const HeaderContent = styled(Stack)(({ theme }) => ({\n flex: 1,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 24,\n\n '&.header-left-content': {\n justifyContent: 'flex-start',\n marginLeft: 12,\n },\n\n [theme.breakpoints.down('md')]: {\n gap: 8,\n flex: 'initial',\n\n '& button, & a': {\n display: 'flex',\n textIndent: '-9999em',\n fontSize: 0,\n minWidth: 36,\n maxWidth: 36,\n height: 36,\n width: 36,\n overflow: 'hidden',\n\n '& .MuiButton-icon': {\n margin: 'auto',\n },\n },\n\n '&.header-left-content': {\n justifyContent: 'flex-end',\n marginLeft: 'auto',\n marginRight: -6,\n\n '& label': {\n marginRight: 0,\n },\n\n '& .MuiTypography-root': {\n display: 'none',\n },\n },\n },\n}));\n\nexport const Children = styled(Stack)(({ theme }) => ({\n flex: 1,\n width: '100%',\n padding: 24,\n gap: 24,\n alignItems: 'center',\n overflow: 'hidden',\n\n [theme.breakpoints.down('md')]: {\n padding: '24px 16px',\n },\n}));\n\nexport const Section = styled('section')(({ theme }) => ({\n alignItems: 'start',\n width: '100%',\n maxWidth: 900,\n\n [theme.breakpoints.down('md')]: {\n maxWidth: '100%',\n },\n}));\n\nexport const SectionContent = styled(Panel)(({ theme }) => ({\n width: '100%',\n borderRadius: 12,\n gap: 12,\n\n [theme.breakpoints.down('md')]: {\n padding: '24px 16px',\n },\n}));\n\nexport const SectionTitle = styled(Typography)<TypographyProps>(\n ({ theme }) => ({\n color: theme.palette.text.primary,\n fontSize: 18,\n fontWeight: 900,\n fontFamily: theme.typography.fontFamily,\n margin: 0,\n lineHeight: 1.5,\n }),\n);\n\nexport const SectionSubtitle = styled(Typography)(({ theme }) => ({\n color: theme.palette.text.secondary,\n fontSize: 14,\n fontWeight: 400,\n paddingBottom: 24,\n}));\n"]}
|
|
1
|
+
{"version":3,"sources":["../../../src/components/FrameSkeleton/index.tsx","../../../src/components/FrameSkeleton/styles.ts"],"names":["IconButton","Stack","Typography","Button","styled","Sidebar","theme","SidebarContent","Nav","Content","TopBox","SectionLink","HeaderContent","Children","Section","SectionContent","Panel_default","SectionTitle","SectionSubtitle","jsx","jsxs","FrameSkeleton","title","subtitle","children","sections","headerLeftContent","headerRightContent","showLeftContent","onClickBack","useCollapseSidebarOnMount_default","Scrollbar_default","section","Icon_default","index","id","titleId","FrameSkeleton_default"],"mappings":"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","sourcesContent":["import IconButton from '@mui/material/IconButton';\nimport Stack from '@mui/material/Stack';\nimport Typography from '@mui/material/Typography';\n\nimport Icon from 'components/Icon';\nimport Scrollbar from 'components/Scrollbar';\nimport useCollapseSidebarOnMount from 'hooks/useCollapseSidebarOnMount';\n\nimport { FrameSkeletonProps } from './props';\nimport {\n Children,\n Content,\n HeaderContent,\n Nav,\n Section,\n SectionContent,\n SectionLink,\n SectionSubtitle,\n SectionTitle,\n Sidebar,\n SidebarContent,\n TopBox,\n} from './styles';\n\nconst FrameSkeleton = ({\n title,\n subtitle,\n children,\n sections,\n headerLeftContent,\n headerRightContent,\n showLeftContent = true,\n onClickBack,\n}: FrameSkeletonProps) => {\n useCollapseSidebarOnMount(true);\n return (\n <Stack\n id=\"frame-skeleton\"\n className=\"frame-skeleton\"\n direction=\"row\"\n flex={1}\n >\n {showLeftContent && (\n <Sidebar id=\"frame-skeleton-left-box\">\n <SidebarContent>\n <Scrollbar fillContent aria-label=\"Acesso rápido\">\n <Stack gap={1.5}>\n <Typography\n variant=\"overline\"\n color=\"text.disabled\"\n fontWeight={700}\n pt={3}\n px={4}\n pb={0}\n >\n Acesso rápido\n </Typography>\n\n <Nav>\n {sections.map(section => (\n <SectionLink\n key={section.title}\n onClick={() => {\n if (section.ref.current)\n section.ref.current.scrollIntoView({\n block: 'center',\n behavior: 'smooth',\n });\n }}\n >\n {section.title}\n {section.isRequired && (\n <span\n className=\"required\"\n aria-label=\"Seção obrigatória\"\n >\n *\n </span>\n )}\n </SectionLink>\n ))}\n </Nav>\n </Stack>\n </Scrollbar>\n </SidebarContent>\n </Sidebar>\n )}\n\n <Content className={showLeftContent ? 'with-left-box' : ''}>\n <TopBox>\n <IconButton\n color=\"inherit\"\n onClick={() => onClickBack()}\n data-testid=\"backToPreviousPage\"\n aria-label=\"Voltar\"\n >\n <Icon icon=\"CHEVRON_LEFT\" />\n </IconButton>\n\n <Stack overflow=\"hidden\">\n <Typography variant=\"subtitle1\" noWrap component=\"h1\">\n {title}\n </Typography>\n {subtitle && (\n <Typography\n variant=\"caption\"\n color=\"text.secondary\"\n noWrap\n component=\"div\"\n >\n {subtitle}\n </Typography>\n )}\n </Stack>\n\n <HeaderContent className=\"header-left-content\">\n {headerLeftContent}\n </HeaderContent>\n\n <HeaderContent justifyContent=\"flex-end\" color=\"text.secondary\">\n {headerRightContent}\n </HeaderContent>\n </TopBox>\n\n <Children>\n <Section>{children}</Section>\n\n {sections.map((section, index) => {\n const id = section.id || `section-${index}`;\n const titleId = `${id}-title`;\n return (\n <Section\n key={section.title || id}\n id={id}\n role=\"region\"\n aria-labelledby={titleId}\n >\n {section.title && (\n <SectionTitle\n component=\"h2\"\n id={titleId}\n ref={section.ref as React.RefObject<HTMLDivElement>}\n >\n {section.title}\n </SectionTitle>\n )}\n {section.subTitle && (\n <SectionSubtitle>{section.subTitle}</SectionSubtitle>\n )}\n\n <SectionContent {...section.sectionContentProps}>\n {section.child}\n </SectionContent>\n </Section>\n );\n })}\n </Children>\n </Content>\n </Stack>\n );\n};\n\nexport default FrameSkeleton;\n","import Button from '@mui/material/Button';\nimport Stack from '@mui/material/Stack';\nimport { styled } from '@mui/material/styles';\nimport Typography, { TypographyProps } from '@mui/material/Typography';\n\nimport Panel from 'components/Panel';\n\nexport const Sidebar = styled('aside')(({ theme }) => ({\n flex: 1,\n maxWidth: 300,\n backgroundColor: theme.palette.background.paper,\n borderRight: `1px solid ${theme.palette.divider}`,\n\n [theme.breakpoints.down('md')]: {\n display: 'none',\n },\n}));\n\nexport const SidebarContent = styled(Stack)({\n position: 'sticky',\n top: 'calc(var(--sticky-header-height, 0px))',\n height: 'calc(100vh - var(--sticky-header-height, 0px))',\n});\n\nexport const Nav = styled('nav')({\n display: 'flex',\n flexDirection: 'column',\n});\n\nexport const Content = styled('main')(({ theme }) => ({\n flex: 1,\n width: '100%',\n maxWidth: '100%',\n\n [theme.breakpoints.up('md')]: {\n '&.with-left-box': { maxWidth: 'calc(100% - 300px)' },\n },\n}));\n\nexport const TopBox = styled(Stack)(({ theme }) => ({\n position: 'sticky',\n top: 'var(--sticky-header-height, 0px)',\n flexDirection: 'row',\n alignItems: 'center',\n backgroundColor: theme.palette.background.paper,\n zIndex: theme.zIndex.appBar,\n width: '100%',\n padding: '12px 24px',\n height: 64,\n gap: 12,\n\n [theme.breakpoints.down('md')]: {\n padding: '14px 16px',\n gap: 6,\n },\n borderBottom: `1px solid ${theme.palette.divider}`,\n}));\n\nexport const SectionLink = styled(Button)(({ theme }) => ({\n height: 50,\n background: 'none',\n fontSize: 13,\n fontWeight: 400,\n justifyContent: 'flex-start',\n padding: theme.spacing(1, 4),\n color: theme.palette.text.secondary,\n borderRadius: 0,\n gap: 4,\n\n '&:hover': {\n backgroundColor: 'transparent',\n },\n\n '& .required': {\n color: theme.palette.error.main,\n },\n\n '&:before': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n left: theme.spacing(2),\n height: 0,\n width: `calc(100% - ${theme.spacing(4)})`,\n borderBottom: `1px dashed ${theme.palette.divider}`,\n },\n}));\n\nexport const HeaderContent = styled(Stack)(({ theme }) => ({\n flex: 1,\n flexDirection: 'row',\n alignItems: 'center',\n gap: 24,\n\n '&.header-left-content': {\n justifyContent: 'flex-start',\n marginLeft: 12,\n },\n\n [theme.breakpoints.down('md')]: {\n gap: 8,\n flex: 'initial',\n\n '& button, & a': {\n display: 'flex',\n textIndent: '-9999em',\n fontSize: 0,\n minWidth: 36,\n maxWidth: 36,\n height: 36,\n width: 36,\n overflow: 'hidden',\n\n '& .MuiButton-icon': {\n margin: 'auto',\n },\n },\n\n '&.header-left-content': {\n justifyContent: 'flex-end',\n marginLeft: 'auto',\n marginRight: -6,\n\n '& label': {\n marginRight: 0,\n },\n\n '& .MuiTypography-root': {\n display: 'none',\n },\n },\n },\n}));\n\nexport const Children = styled(Stack)(({ theme }) => ({\n flex: 1,\n width: '100%',\n padding: 24,\n gap: 24,\n alignItems: 'center',\n overflow: 'hidden',\n\n [theme.breakpoints.down('md')]: {\n padding: '24px 16px',\n },\n}));\n\nexport const Section = styled('section')(({ theme }) => ({\n alignItems: 'start',\n width: '100%',\n maxWidth: 900,\n\n [theme.breakpoints.down('md')]: {\n maxWidth: '100%',\n },\n}));\n\nexport const SectionContent = styled(Panel)(({ theme }) => ({\n width: '100%',\n borderRadius: 12,\n gap: 12,\n\n [theme.breakpoints.down('md')]: {\n padding: '24px 16px',\n },\n}));\n\nexport const SectionTitle = styled(Typography)<TypographyProps>(\n ({ theme }) => ({\n color: theme.palette.text.primary,\n fontSize: 18,\n fontWeight: 900,\n fontFamily: theme.typography.fontFamily,\n margin: 0,\n lineHeight: 1.5,\n }),\n);\n\nexport const SectionSubtitle = styled(Typography)(({ theme }) => ({\n color: theme.palette.text.secondary,\n fontSize: 14,\n fontWeight: 400,\n paddingBottom: 24,\n}));\n"]}
|