import * as React from "react";
export declare const Section: ({ children }: {
    children: React.ReactNode;
}) => JSX.Element;
export declare const Divider: () => JSX.Element;
export declare const H2: ({ children }: {
    children: React.ReactNode;
}) => JSX.Element;
export declare const H3: ({ children }: {
    children: React.ReactNode;
}) => JSX.Element;
export declare const P: ({ children }: {
    children: React.ReactNode;
}) => JSX.Element;
export declare const Code: ({ children }: {
    children: React.ReactNode;
}) => JSX.Element;
export declare const CodeBlock: ({ children }: {
    children: string;
}) => JSX.Element;
export declare const Tag: ({ children, color }: {
    children: React.ReactNode;
    color?: string | undefined;
}) => JSX.Element;
export declare const TableHead: () => JSX.Element;
export declare const SwatchRow: ({ description, defaultValue, cssVar }: {
    description: string;
    defaultValue: string;
    cssVar: string;
}) => JSX.Element;
export declare const SNIPPET_DECORATOR = "// .storybook/preview.tsx\n\nconst withLsgTheme: Decorator = (Story, context) => {\n  const themeKey = context.globals.lsgTheme ?? \"theme-1\";\n  const vars = LSG_THEMES[themeKey];\n\n  React.useEffect(() => {\n    let el = document.getElementById(\"lsg-theme-vars\");\n    if (!el) {\n      el = document.createElement(\"style\");\n      el.id = \"lsg-theme-vars\";\n      document.head.appendChild(el);\n    }\n    // Builds:  :root { --lsg-color-primary: #c4262e; ... }\n    el.textContent = Object.entries(vars)\n      .reduce((acc, [k, v]) => acc + \"  \" + k + \": \" + v + \";\\n\", \":root {\\n\") + \"}\";\n  }, [themeKey]);\n\n  return <Story />;\n};";
export declare const SNIPPET_ADD_THEME = "// .storybook/preview.tsx  \u2192  LSG_THEMES\n\nconst LSG_THEMES = {\n  \"theme-1\": { /* ... existing ... */ },\n  \"theme-2\": { /* ... existing ... */ },\n  \"theme-3\": { /* ... existing ... */ },\n\n  // Add your new brand here:\n  mybrand: {\n    \"--lsg-color-primary\":          \"#7b2d8b\",   // brand violet\n    \"--lsg-color-secondary\":        \"#4a4e54\",\n    \"--lsg-color-tertiary\":         \"#d97706\",\n    \"--lsg-color-light\":            \"#f3f4f6\",\n    \"--lsg-color-dark\":             \"#1e2124\",\n    \"--lsg-color-black\":            \"#000000\",\n    \"--lsg-color-white\":            \"#ffffff\",\n    \"--lsg-font-family-primary\":    '\"Helvetica Neue\", Arial, sans-serif',\n    \"--lsg-font-family-secondary\":  '\"Helvetica Neue\", Arial, sans-serif',\n    \"--lsg-radius-rounded\":         \"10px\",\n  },\n} as const;";
export declare const SNIPPET_TOOLBAR = "// .storybook/preview.tsx  \u2192  globalTypes\n\nglobalTypes: {\n  lsgTheme: {\n    toolbar: {\n      items: [\n        { value: \"theme-1\",    title: \"Theme 1\" },\n        { value: \"theme-2\",    title: \"Theme 2\" },\n        { value: \"theme-3\",    title: \"Theme 3\" },\n        { value: \"mybrand\",    title: \"My Brand\" },  // add here\n      ],\n      dynamicTitle: true,\n    },\n  },\n},";
export declare const SNIPPET_AEM_CLIENTLIB = "/* /apps/mybrand/clientlibs/lsg-theme/css/theme.css */\n\n:root {\n  --lsg-color-primary:          #7b2d8b;\n  --lsg-color-secondary:        #4a4e54;\n  --lsg-color-tertiary:         #d97706;\n  --lsg-color-light:            #f3f4f6;\n  --lsg-color-dark:             #1e2124;\n  --lsg-color-black:            #000000;\n  --lsg-color-white:            #ffffff;\n  --lsg-font-family-primary:    \"Helvetica Neue\", Arial, sans-serif;\n  --lsg-font-family-secondary:  \"Helvetica Neue\", Arial, sans-serif;\n}";
export declare const SNIPPET_AEM_HTL = "<!-- AEM HTL: page.html -->\n<body style=\"\n  --lsg-color-primary: ${properties.brandPrimary @ context='styleString'};\n  --lsg-color-secondary: ${properties.brandSecondary @ context='styleString'};\n\">\n  ...\n</body>";