export declare const sidePanelTemplate = "\"use client\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport { mq, Theme } from \"@/app/theme\";\nimport { focusModeHide } from \"@/components/layout/SharedStyled\";\n\n// Below \"lg\" the panel stays in the document flow, rendering inline exactly\n// where it sits in the MDX source. From \"lg\" up it is lifted out of the flow\n// into the fixed right rail, at the 280px width the table of\n// contents it replaces would have used - the content column already reserves\n// exactly that much, so nothing has to move. Only from \"xl\", where there is\n// room to spare, does it widen to the chat panel's 420px and pull\n// the other columns left with it (see sidePanelOffset, keyed off the data\n// attribute below).\nconst StyledSidePanel = styled.aside<{ theme: Theme }>`\n  display: flex;\n  flex-direction: column;\n  gap: 20px;\n  padding: 20px;\n  border-radius: ${({ theme }) => theme.spacing.radius.lg};\n  background: ${({ theme }) =>\n    `color-mix(in srgb, ${theme.colors.primaryLight} 10%, transparent)`};\n\n  ${mq(\"lg\")} {\n    position: fixed;\n    top: 0;\n    right: 0;\n    z-index: 1;\n    width: 280px;\n    height: 100dvh;\n    overflow-y: auto;\n    gap: 15px;\n    padding: 82px 20px 20px 20px;\n    border-left: solid 1px ${({ theme }) => theme.colors.grayLight};\n    border-radius: 0;\n    background: ${({ theme }) => theme.colors.light};\n    -webkit-overflow-scrolling: touch;\n\n    &::-webkit-scrollbar {\n      display: none;\n    }\n  }\n\n  ${mq(\"xl\")} {\n    width: 420px;\n  }\n\n  ${focusModeHide(\"right\")};\n`;\n\ninterface SidePanelProps {\n  children?: React.ReactNode;\n}\n\nfunction SidePanel({ children }: SidePanelProps) {\n  return (\n    <StyledSidePanel aria-label=\"Page panel\" data-side-panel>\n      {children}\n    </StyledSidePanel>\n  );\n}\n\nexport { SidePanel };\n";