@traefik-labs/faency 12.2.0 → 12.2.1

package/dist/components/Blockquote/Blockquote.vanilla.css.cjs

@@ -1,6 +1,5 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-;/* empty css                                             */
 ;/* empty css                                        */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var blockquoteRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });

package/dist/components/Blockquote/Blockquote.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}
+{"version":3,"file":"Blockquote.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/Blockquote/Blockquote.vanilla.css.js

@@ -1,4 +1,3 @@
-/* empty css                                           */
 /* empty css                                      */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var blockquoteRecipe = createRuntimeFn({ defaultClassName: "kyxdzh1 kyxdzh0", variantClassNames: { size: { "0": "kyxdzh2", "1": "kyxdzh3", "2": "kyxdzh4", "3": "kyxdzh5", "4": "kyxdzh6", "5": "kyxdzh7", "6": "kyxdzh8", "7": "kyxdzh9", "8": "kyxdzha", "9": "kyxdzhb", "10": "kyxdzhc", "11": "kyxdzhd", "12": "kyxdzhe", inherit: "kyxdzhf" }, weight: { light: "kyxdzhg", regular: "kyxdzhh", medium: "kyxdzhi", semiBold: "kyxdzhj", bold: "kyxdzhk" }, variant: { red: "kyxdzhl", subtle: "kyxdzhm", "default": "kyxdzhn", contrast: "kyxdzho", inherit: "kyxdzhp", invalid: "kyxdzhq" }, gradient: { true: "kyxdzhr" }, transform: { uppercase: "kyxdzhs", capitalize: "kyxdzht", capitalizeWords: "kyxdzhu" }, noWrap: { true: "kyxdzhv" } }, defaultVariants: { size: "3", variant: "default" }, compoundVariants: [] });

package/dist/components/Blockquote/Blockquote.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Blockquote.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"Blockquote.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}

package/dist/components/CodeBlock/CodeBlock.cjs

@@ -146,15 +146,25 @@ const CodeBlock = React.forwardRef(
               style: { maxHeight, ...highlightStyle, backgroundColor: "inherit", ...style },
               noBorder,
               ...props,
-              children: /* @__PURE__ */ jsxRuntime.jsx(Box.Box, { css: { p: "$4", ...copyable && isBottom ? { pb: "$7" } : {} }, children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
-                "div",
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                Box.Box,
                 {
-                  ...getLineProps({ line }),
-                  style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
-                  children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))
-                },
-                i
-              )) })
+                  css: {
+                    p: "$4",
+                    ...copyable && isLeft && isBottom ? { pb: "$7" } : {},
+                    ...copyable && isLeft && !isBottom ? { pt: "$7" } : {}
+                  },
+                  children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
+                    "div",
+                    {
+                      ...getLineProps({ line }),
+                      style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
+                      children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({ token }) }, key))
+                    },
+                    i
+                  ))
+                }
+              )
             }
           ),
           copyButton && /* @__PURE__ */ jsxRuntime.jsx(CopyButtonWrapper, { ref: buttonWrapperRef, position: buttonPosition, children: copyButton })

package/dist/components/CodeBlock/CodeBlock.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.cjs","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  ComponentProps,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n  m: 0,\n  borderRadius: '$2',\n  overflow: 'auto',\n  border: '1px solid $colors$deepBlue3',\n  fontSize: '$2',\n  lineHeight: 1.6,\n\n  variants: {\n    noBorder: {\n      true: { border: 'none' },\n    },\n  },\n});\n\nconst CopyButtonWrapper = styled('div', {\n  position: 'absolute',\n  zIndex: 1,\n  variants: {\n    position: {\n      top: { top: '$2', right: '$3' },\n      topLeft: { top: '$2', left: '$3' },\n      bottomRight: { bottom: '$2', right: '$3' },\n      bottomLeft: { bottom: '$2', left: '$3' },\n    },\n  },\n\n  defaultVariants: {\n    position: 'top',\n  },\n});\n\nexport type CodeBlockProps = {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n  css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const systemScheme = useColorScheme();\n    const resolvedScheme = colorScheme ?? systemScheme;\n    const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPosition = isBottom\n      ? isLeft\n        ? 'bottomLeft'\n        : 'bottomRight'\n      : isLeft\n        ? 'topLeft'\n        : 'top';\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isBottomAlign = isBottom;\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const copyButton = copyable ? (\n      <Button\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </Button>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <Box css={{ position: 'relative', ...css }}>\n            <Pre\n              ref={setPreRef}\n              className={[highlightClass, className].filter(Boolean).join(' ')}\n              style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n              noBorder={noBorder}\n              {...props}\n            >\n              <Box css={{ p: '$4', ...(copyable && isBottom ? { pb: '$7' } : {}) }}>\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </Box>\n            </Pre>\n            {copyButton && (\n              <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n                {copyButton}\n              </CopyButtonWrapper>\n            )}\n          </Box>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":["styled","forwardRef","useColorScheme","themes","useState","useRef","useCallback","useLayoutEffect","jsxs","Button","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","Box"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.cjs","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  ComponentProps,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n  m: 0,\n  borderRadius: '$2',\n  overflow: 'auto',\n  border: '1px solid $colors$deepBlue3',\n  fontSize: '$2',\n  lineHeight: 1.6,\n\n  variants: {\n    noBorder: {\n      true: { border: 'none' },\n    },\n  },\n});\n\nconst CopyButtonWrapper = styled('div', {\n  position: 'absolute',\n  zIndex: 1,\n  variants: {\n    position: {\n      top: { top: '$2', right: '$3' },\n      topLeft: { top: '$2', left: '$3' },\n      bottomRight: { bottom: '$2', right: '$3' },\n      bottomLeft: { bottom: '$2', left: '$3' },\n    },\n  },\n\n  defaultVariants: {\n    position: 'top',\n  },\n});\n\nexport type CodeBlockProps = {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n  css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const systemScheme = useColorScheme();\n    const resolvedScheme = colorScheme ?? systemScheme;\n    const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPosition = isBottom\n      ? isLeft\n        ? 'bottomLeft'\n        : 'bottomRight'\n      : isLeft\n        ? 'topLeft'\n        : 'top';\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isBottomAlign = isBottom;\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const copyButton = copyable ? (\n      <Button\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </Button>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <Box css={{ position: 'relative', ...css }}>\n            <Pre\n              ref={setPreRef}\n              className={[highlightClass, className].filter(Boolean).join(' ')}\n              style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n              noBorder={noBorder}\n              {...props}\n            >\n              <Box\n                css={{\n                  p: '$4',\n                  ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n                  ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n                }}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </Box>\n            </Pre>\n            {copyButton && (\n              <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n                {copyButton}\n              </CopyButtonWrapper>\n            )}\n          </Box>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":["styled","forwardRef","useColorScheme","themes","useState","useRef","useCallback","useLayoutEffect","jsxs","Button","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","Box"],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.js

@@ -144,15 +144,25 @@ const CodeBlock = forwardRef(
               style: { maxHeight, ...highlightStyle, backgroundColor: "inherit", ...style },
               noBorder,
               ...props,
-              children: /* @__PURE__ */ jsx(Box, { css: { p: "$4", ...copyable && isBottom ? { pb: "$7" } : {} }, children: tokens.map((line, i) => /* @__PURE__ */ jsx(
-                "div",
+              children: /* @__PURE__ */ jsx(
+                Box,
                 {
-                  ...getLineProps({ line }),
-                  style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
-                  children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
-                },
-                i
-              )) })
+                  css: {
+                    p: "$4",
+                    ...copyable && isLeft && isBottom ? { pb: "$7" } : {},
+                    ...copyable && isLeft && !isBottom ? { pt: "$7" } : {}
+                  },
+                  children: tokens.map((line, i) => /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      ...getLineProps({ line }),
+                      style: wrapText ? { whiteSpace: "pre-wrap", wordBreak: "break-all" } : void 0,
+                      children: line.map((token, key) => /* @__PURE__ */ jsx("span", { ...getTokenProps({ token }) }, key))
+                    },
+                    i
+                  ))
+                }
+              )
             }
           ),
           copyButton && /* @__PURE__ */ jsx(CopyButtonWrapper, { ref: buttonWrapperRef, position: buttonPosition, children: copyButton })

package/dist/components/CodeBlock/CodeBlock.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.js","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  ComponentProps,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n  m: 0,\n  borderRadius: '$2',\n  overflow: 'auto',\n  border: '1px solid $colors$deepBlue3',\n  fontSize: '$2',\n  lineHeight: 1.6,\n\n  variants: {\n    noBorder: {\n      true: { border: 'none' },\n    },\n  },\n});\n\nconst CopyButtonWrapper = styled('div', {\n  position: 'absolute',\n  zIndex: 1,\n  variants: {\n    position: {\n      top: { top: '$2', right: '$3' },\n      topLeft: { top: '$2', left: '$3' },\n      bottomRight: { bottom: '$2', right: '$3' },\n      bottomLeft: { bottom: '$2', left: '$3' },\n    },\n  },\n\n  defaultVariants: {\n    position: 'top',\n  },\n});\n\nexport type CodeBlockProps = {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n  css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const systemScheme = useColorScheme();\n    const resolvedScheme = colorScheme ?? systemScheme;\n    const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPosition = isBottom\n      ? isLeft\n        ? 'bottomLeft'\n        : 'bottomRight'\n      : isLeft\n        ? 'topLeft'\n        : 'top';\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isBottomAlign = isBottom;\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const copyButton = copyable ? (\n      <Button\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </Button>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <Box css={{ position: 'relative', ...css }}>\n            <Pre\n              ref={setPreRef}\n              className={[highlightClass, className].filter(Boolean).join(' ')}\n              style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n              noBorder={noBorder}\n              {...props}\n            >\n              <Box css={{ p: '$4', ...(copyable && isBottom ? { pb: '$7' } : {}) }}>\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </Box>\n            </Pre>\n            {copyButton && (\n              <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n                {copyButton}\n              </CopyButtonWrapper>\n            )}\n          </Box>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeBlock.js","sources":["../../../components/CodeBlock/CodeBlock.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  ComponentProps,\n  forwardRef,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSS, styled } from '../../stitches.config';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { Box } from '../Box';\nimport { Button } from '../Button';\nimport { useColorScheme } from '../colorSchemeContext';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nconst Pre = styled('pre', {\n  m: 0,\n  borderRadius: '$2',\n  overflow: 'auto',\n  border: '1px solid $colors$deepBlue3',\n  fontSize: '$2',\n  lineHeight: 1.6,\n\n  variants: {\n    noBorder: {\n      true: { border: 'none' },\n    },\n  },\n});\n\nconst CopyButtonWrapper = styled('div', {\n  position: 'absolute',\n  zIndex: 1,\n  variants: {\n    position: {\n      top: { top: '$2', right: '$3' },\n      topLeft: { top: '$2', left: '$3' },\n      bottomRight: { bottom: '$2', right: '$3' },\n      bottomLeft: { bottom: '$2', left: '$3' },\n    },\n  },\n\n  defaultVariants: {\n    position: 'top',\n  },\n});\n\nexport type CodeBlockProps = {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n  css?: CSS;\n} & Omit<ComponentProps<typeof Pre>, 'css'>;\n\nexport const CodeBlock = forwardRef<HTMLPreElement, CodeBlockProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const systemScheme = useColorScheme();\n    const resolvedScheme = colorScheme ?? systemScheme;\n    const prismTheme = resolvedScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPosition = isBottom\n      ? isLeft\n        ? 'bottomLeft'\n        : 'bottomRight'\n      : isLeft\n        ? 'topLeft'\n        : 'top';\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isBottomAlign = isBottom;\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const copyButton = copyable ? (\n      <Button\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </Button>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <Box css={{ position: 'relative', ...css }}>\n            <Pre\n              ref={setPreRef}\n              className={[highlightClass, className].filter(Boolean).join(' ')}\n              style={{ maxHeight, ...highlightStyle, backgroundColor: 'inherit', ...style }}\n              noBorder={noBorder}\n              {...props}\n            >\n              <Box\n                css={{\n                  p: '$4',\n                  ...(copyable && isLeft && isBottom ? { pb: '$7' } : {}),\n                  ...(copyable && isLeft && !isBottom ? { pt: '$7' } : {}),\n                }}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </Box>\n            </Pre>\n            {copyButton && (\n              <CopyButtonWrapper ref={buttonWrapperRef} position={buttonPosition}>\n                {copyButton}\n              </CopyButtonWrapper>\n            )}\n          </Box>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlock.displayName = 'CodeBlock';\n"],"names":[],"mappings":";;;;;;;;;AAoBA,MAAM,MAAM,OAAO,OAAO;AAAA,EACxB,GAAG;AAAA,EACH,cAAc;AAAA,EACd,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,EACV,YAAY;AAAA,EAEZ,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM,EAAE,QAAQ,OAAA;AAAA,IAAO;AAAA,EACzB;AAEJ,CAAC;AAED,MAAM,oBAAoB,OAAO,OAAO;AAAA,EACtC,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,UAAU;AAAA,IACR,UAAU;AAAA,MACR,KAAK,EAAE,KAAK,MAAM,OAAO,KAAA;AAAA,MACzB,SAAS,EAAE,KAAK,MAAM,MAAM,KAAA;AAAA,MAC5B,aAAa,EAAE,QAAQ,MAAM,OAAO,KAAA;AAAA,MACpC,YAAY,EAAE,QAAQ,MAAM,MAAM,KAAA;AAAA,IAAK;AAAA,EACzC;AAAA,EAGF,iBAAiB;AAAA,IACf,UAAU;AAAA,EAAA;AAEd,CAAC;AAiBM,MAAM,YAAY;AAAA,EACvB,CACE;AAAA,IACE,OAAO;AAAA,IACP;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA,kBAAkB;AAAA,IAClB;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,YAAY;AAAA,IACZ;AAAA,IACA;AAAA,IACA;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,eAAe,eAAA;AACrB,UAAM,iBAAiB,eAAe;AACtC,UAAM,aAAa,mBAAmB,SAAS,OAAO,WAAW,OAAO;AAExE,UAAM,WAAW,gBAAgB,SAAS,QAAQ;AAClD,UAAM,SAAS,gBAAgB,SAAS,MAAM;AAC9C,UAAM,iBAAiB,WACnB,SACE,eACA,gBACF,SACE,YACA;AAEN,UAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,KAAK;AAE1C,UAAM,SAAS;AAAA,MACb;AAAA,IAAA;AAEF,UAAM,mBAAmB,OAAuB,IAAI;AAEpD,UAAM,YAAY;AAAA,MAChB,CAAC,SAAgC;AAC/B,eAAO,UAAU;AACjB,YAAI,OAAO,QAAQ,WAAY,KAAI,IAAI;AAAA,iBAC9B,IAAM,KAAsD,UAAU;AAAA,MACjF;AAAA,MACA,CAAC,GAAG;AAAA,IAAA;AAGN,oBAAgB,MAAM;AACpB,UAAI,CAAC,SAAU;AACf,YAAM,MAAM,OAAO;AACnB,YAAM,UAAU,iBAAiB;AACjC,UAAI,CAAC,OAAO,CAAC,QAAS;AAEtB,YAAM,gBAAgB;AACtB,YAAM,UAAU,WAAW,IAAI;AAE/B,YAAM,SAAS,MAAM;AACnB,YAAI,CAAC,QAAQ;AACX,gBAAM,aAAa,KAAK,IAAI,GAAG,IAAI,cAAc,IAAI,cAAc,OAAO;AAC1E,kBAAQ,MAAM,QAAQ,GAAG,KAAK,UAAU;AAAA,QAC1C;AACA,YAAI,eAAe;AACjB,gBAAM,aAAa,KAAK,IAAI,GAAG,IAAI,eAAe,IAAI,eAAe,OAAO;AAC5E,kBAAQ,MAAM,SAAS,GAAG,IAAI,UAAU;AAAA,QAC1C;AAAA,MACF;AAEA,aAAA;AACA,YAAM,WAAW,IAAI,eAAe,MAAM;AAC1C,eAAS,QAAQ,GAAG;AACpB,aAAO,MAAM,SAAS,WAAA;AAAA,IACxB,GAAG,CAAC,UAAU,UAAU,QAAQ,QAAQ,CAAC;AAEzC,UAAM,aAAa,YAAY;AAC7B,UAAI;AACF,cAAM,UAAU,UAAU,UAAU,IAAI;AACxC,kBAAU,IAAI;AACd,iBAAA;AACA,mBAAW,MAAM,UAAU,KAAK,GAAG,IAAI;AAAA,MACzC,QAAQ;AAAA,MAER;AAAA,IACF;AAEA,UAAM,aAAa,WACjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,SAAQ;AAAA,QACR,OAAK;AAAA,QACL,MAAK;AAAA,QACL,MAAK;AAAA,QACL,SAAS;AAAA,QACT,KAAK;AAAA,UACH,OAAO;AAAA,UACP,KAAK;AAAA,UACL,iBAAiB;AAAA,UACjB,QAAQ;AAAA,QAAA;AAAA,QAGV,UAAA;AAAA,UAAA,oBAAC,gBAAA,EAAe,OAAO,SAAS,WAAW,QACxC,UAAA,SAAS,oBAAC,WAAA,EAAU,IAAK,oBAAC,UAAA,CAAA,CAAS,GACtC;AAAA,UACC,SAAS,aAAa;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA,IAEvB;AAEJ,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,OAAO;AAAA,QACP;AAAA,QACA,UAAW,MAAM,UAAU,IAAI,KAAK,OAAO,OAAO;AAAA,QAEjD,UAAA,CAAC;AAAA,UACA,WAAW;AAAA,UACX,OAAO;AAAA,UACP;AAAA,UACA;AAAA,UACA;AAAA,QAAA,2BAEC,KAAA,EAAI,KAAK,EAAE,UAAU,YAAY,GAAG,IAAA,GACnC,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,KAAK;AAAA,cACL,WAAW,CAAC,gBAAgB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,cAC/D,OAAO,EAAE,WAAW,GAAG,gBAAgB,iBAAiB,WAAW,GAAG,MAAA;AAAA,cACtE;AAAA,cACC,GAAG;AAAA,cAEJ,UAAA;AAAA,gBAAC;AAAA,gBAAA;AAAA,kBACC,KAAK;AAAA,oBACH,GAAG;AAAA,oBACH,GAAI,YAAY,UAAU,WAAW,EAAE,IAAI,KAAA,IAAS,CAAA;AAAA,oBACpD,GAAI,YAAY,UAAU,CAAC,WAAW,EAAE,IAAI,SAAS,CAAA;AAAA,kBAAC;AAAA,kBAGvD,UAAA,OAAO,IAAI,CAAC,MAAM,MACjB;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBAEE,GAAG,aAAa,EAAE,MAAM;AAAA,sBACzB,OACE,WAAW,EAAE,YAAY,YAAY,WAAW,gBAAgB;AAAA,sBAGjE,UAAA,KAAK,IAAI,CAAC,OAAO,QAChB,oBAAC,QAAA,EAAgB,GAAG,cAAc,EAAE,MAAA,CAAO,EAAA,GAAhC,GAAmC,CAC/C;AAAA,oBAAA;AAAA,oBARI;AAAA,kBAAA,CAUR;AAAA,gBAAA;AAAA,cAAA;AAAA,YACH;AAAA,UAAA;AAAA,UAED,cACC,oBAAC,mBAAA,EAAkB,KAAK,kBAAkB,UAAU,gBACjD,UAAA,WAAA,CACH;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAIR;AACF;AAEA,UAAU,cAAc;"}

package/dist/components/CodeBlock/CodeBlock.vanilla.cjs

@@ -31,6 +31,8 @@ const CodeBlockVanilla = React.forwardRef(
     const { colors, resolvedTheme } = themeContext.useVanillaExtractTheme();
     const effectiveScheme = colorScheme ?? resolvedTheme;
     const prismTheme = effectiveScheme === "dark" ? prismReactRenderer.themes.nightOwl : prismReactRenderer.themes.nightOwlLight;
+    const isBottom = copyButtonAlign.includes("bottom");
+    const isLeft = copyButtonAlign.includes("left");
     const { style: cssStyles, vars } = cssProps.processCSSProp(css, colors);
     const containerStyles = {
       position: "relative",
@@ -55,15 +57,13 @@ const CodeBlockVanilla = React.forwardRef(
       const pre2 = preRef.current;
       const wrapper = buttonWrapperRef.current;
       if (!pre2 || !wrapper) return;
-      const isLeftAlign = copyButtonAlign.includes("left");
-      const isBottomAlign = copyButtonAlign.includes("bottom");
       const borderH = noBorder ? 0 : 2;
       const update = () => {
-        if (!isLeftAlign) {
+        if (!isLeft) {
           const vScrollbar = Math.max(0, pre2.offsetWidth - pre2.clientWidth - borderH);
           wrapper.style.right = `${16 + vScrollbar}px`;
         }
-        if (isBottomAlign) {
+        if (isBottom) {
           const hScrollbar = Math.max(0, pre2.offsetHeight - pre2.clientHeight - borderH);
           wrapper.style.bottom = `${8 + hScrollbar}px`;
         }
@@ -72,7 +72,7 @@ const CodeBlockVanilla = React.forwardRef(
       const observer = new ResizeObserver(update);
       observer.observe(pre2);
       return () => observer.disconnect();
-    }, [copyable, copyButtonAlign, noBorder]);
+    }, [copyable, isBottom, isLeft, noBorder]);
     const handleCopy = async () => {
       try {
         await navigator.clipboard.writeText(code);
@@ -82,8 +82,6 @@ const CodeBlockVanilla = React.forwardRef(
       } catch {
       }
     };
-    const isBottom = copyButtonAlign.includes("bottom");
-    const isLeft = copyButtonAlign.includes("left");
     const buttonPositionClass = isBottom ? isLeft ? CodeBlock_vanilla_css.copyButtonWrapperBottomLeft : CodeBlock_vanilla_css.copyButtonWrapperBottomRight : isLeft ? CodeBlock_vanilla_css.copyButtonWrapperTopLeft : CodeBlock_vanilla_css.copyButtonWrapperTop;
     const copyButton = copyable ? /* @__PURE__ */ jsxRuntime.jsxs(
       Button_vanilla.ButtonVanilla,
@@ -133,7 +131,11 @@ const CodeBlockVanilla = React.forwardRef(
               children: /* @__PURE__ */ jsxRuntime.jsx(
                 "div",
                 {
-                  className: [CodeBlock_vanilla_css.codeContent, copyable && isBottom ? CodeBlock_vanilla_css.codeContentBottomPadding : ""].filter(Boolean).join(" "),
+                  className: [
+                    CodeBlock_vanilla_css.codeContent,
+                    copyable && isLeft && isBottom ? CodeBlock_vanilla_css.codeContentBottomPadding : "",
+                    copyable && isLeft && !isBottom ? CodeBlock_vanilla_css.codeContentTopPadding : ""
+                  ].filter(Boolean).join(" "),
                   children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx(
                     "div",
                     {

package/dist/components/CodeBlock/CodeBlock.vanilla.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.vanilla.cjs","sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n  codeContent,\n  codeContentBottomPadding,\n  copyButtonWrapperBottomLeft,\n  copyButtonWrapperBottomRight,\n  copyButtonWrapperTop,\n  copyButtonWrapperTopLeft,\n  pre,\n  preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nexport interface CodeBlockVanillaProps\n  extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>,\n    CSSProps {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { colors, resolvedTheme } = useVanillaExtractTheme();\n    const effectiveScheme = colorScheme ?? resolvedTheme;\n    const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const containerStyles = {\n      position: 'relative' as const,\n      ...cssStyles,\n      ...assignInlineVars(vars),\n    };\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isLeftAlign = copyButtonAlign.includes('left');\n      const isBottomAlign = copyButtonAlign.includes('bottom');\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeftAlign) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, copyButtonAlign, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPositionClass = isBottom\n      ? isLeft\n        ? copyButtonWrapperBottomLeft\n        : copyButtonWrapperBottomRight\n      : isLeft\n        ? copyButtonWrapperTopLeft\n        : copyButtonWrapperTop;\n\n    const copyButton = copyable ? (\n      <ButtonVanilla\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </ButtonVanilla>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <div style={containerStyles}>\n            <pre\n              ref={setPreRef}\n              className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                maxHeight,\n                ...highlightStyle,\n                backgroundColor: 'inherit',\n                ...style,\n              }}\n              {...props}\n            >\n              <div\n                className={[codeContent, copyable && isBottom ? codeContentBottomPadding : '']\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </div>\n            </pre>\n            {copyButton && (\n              <div ref={buttonWrapperRef} className={buttonPositionClass}>\n                {copyButton}\n              </div>\n            )}\n          </div>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","themes","processCSSProp","assignInlineVars","useState","useRef","useCallback","useLayoutEffect","pre","copyButtonWrapperBottomLeft","copyButtonWrapperBottomRight","copyButtonWrapperTopLeft","copyButtonWrapperTop","jsxs","ButtonVanilla","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","preNoBorder","codeContent","codeContentBottomPadding"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.vanilla.cjs","sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n  codeContent,\n  codeContentBottomPadding,\n  codeContentTopPadding,\n  copyButtonWrapperBottomLeft,\n  copyButtonWrapperBottomRight,\n  copyButtonWrapperTop,\n  copyButtonWrapperTopLeft,\n  pre,\n  preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nexport interface CodeBlockVanillaProps\n  extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>,\n    CSSProps {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { colors, resolvedTheme } = useVanillaExtractTheme();\n    const effectiveScheme = colorScheme ?? resolvedTheme;\n    const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const containerStyles = {\n      position: 'relative' as const,\n      ...cssStyles,\n      ...assignInlineVars(vars),\n    };\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottom) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const buttonPositionClass = isBottom\n      ? isLeft\n        ? copyButtonWrapperBottomLeft\n        : copyButtonWrapperBottomRight\n      : isLeft\n        ? copyButtonWrapperTopLeft\n        : copyButtonWrapperTop;\n\n    const copyButton = copyable ? (\n      <ButtonVanilla\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </ButtonVanilla>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <div style={containerStyles}>\n            <pre\n              ref={setPreRef}\n              className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                maxHeight,\n                ...highlightStyle,\n                backgroundColor: 'inherit',\n                ...style,\n              }}\n              {...props}\n            >\n              <div\n                className={[\n                  codeContent,\n                  copyable && isLeft && isBottom ? codeContentBottomPadding : '',\n                  copyable && isLeft && !isBottom ? codeContentTopPadding : '',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </div>\n            </pre>\n            {copyButton && (\n              <div ref={buttonWrapperRef} className={buttonPositionClass}>\n                {copyButton}\n              </div>\n            )}\n          </div>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"names":["forwardRef","useVanillaExtractTheme","themes","processCSSProp","assignInlineVars","useState","useRef","useCallback","useLayoutEffect","pre","copyButtonWrapperBottomLeft","copyButtonWrapperBottomRight","copyButtonWrapperTopLeft","copyButtonWrapperTop","jsxs","ButtonVanilla","jsx","AccessibleIcon","CheckIcon","CopyIcon","Highlight","Prism","preNoBorder","codeContent","codeContentBottomPadding","codeContentTopPadding"],"mappings":"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"}

package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs

@@ -5,12 +5,14 @@ var pre = "_1krwcuz0";
 var preNoBorder = "_1krwcuz1";
 var codeContent = "_1krwcuz2";
 var codeContentBottomPadding = "_1krwcuz3";
-var copyButtonWrapperTop = "_1krwcuz4";
-var copyButtonWrapperTopLeft = "_1krwcuz5";
-var copyButtonWrapperBottomRight = "_1krwcuz6";
-var copyButtonWrapperBottomLeft = "_1krwcuz7";
+var codeContentTopPadding = "_1krwcuz4";
+var copyButtonWrapperTop = "_1krwcuz5";
+var copyButtonWrapperTopLeft = "_1krwcuz6";
+var copyButtonWrapperBottomRight = "_1krwcuz7";
+var copyButtonWrapperBottomLeft = "_1krwcuz8";
 exports.codeContent = codeContent;
 exports.codeContentBottomPadding = codeContentBottomPadding;
+exports.codeContentTopPadding = codeContentTopPadding;
 exports.copyButtonWrapperBottomLeft = copyButtonWrapperBottomLeft;
 exports.copyButtonWrapperBottomRight = copyButtonWrapperBottomRight;
 exports.copyButtonWrapperTop = copyButtonWrapperTop;

package/dist/components/CodeBlock/CodeBlock.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"CodeBlock.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/CodeBlock/CodeBlock.vanilla.css.js

@@ -3,13 +3,15 @@ var pre = "_1krwcuz0";
 var preNoBorder = "_1krwcuz1";
 var codeContent = "_1krwcuz2";
 var codeContentBottomPadding = "_1krwcuz3";
-var copyButtonWrapperTop = "_1krwcuz4";
-var copyButtonWrapperTopLeft = "_1krwcuz5";
-var copyButtonWrapperBottomRight = "_1krwcuz6";
-var copyButtonWrapperBottomLeft = "_1krwcuz7";
+var codeContentTopPadding = "_1krwcuz4";
+var copyButtonWrapperTop = "_1krwcuz5";
+var copyButtonWrapperTopLeft = "_1krwcuz6";
+var copyButtonWrapperBottomRight = "_1krwcuz7";
+var copyButtonWrapperBottomLeft = "_1krwcuz8";
 export {
   codeContent,
   codeContentBottomPadding,
+  codeContentTopPadding,
   copyButtonWrapperBottomLeft,
   copyButtonWrapperBottomRight,
   copyButtonWrapperTop,

package/dist/components/CodeBlock/CodeBlock.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;"}
+{"version":3,"file":"CodeBlock.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;"}

package/dist/components/CodeBlock/CodeBlock.vanilla.js

@@ -5,7 +5,7 @@ import { themes, Highlight, Prism } from "prism-react-renderer";
 import { forwardRef, useState, useRef, useCallback, useLayoutEffect } from "react";
 import { processCSSProp } from "../../styles/cssProps.js";
 import { useVanillaExtractTheme } from "../../styles/themeContext.js";
-import { pre, preNoBorder, codeContent, codeContentBottomPadding, copyButtonWrapperBottomLeft, copyButtonWrapperBottomRight, copyButtonWrapperTopLeft, copyButtonWrapperTop } from "./CodeBlock.vanilla.css.js";
+import { pre, preNoBorder, codeContent, codeContentBottomPadding, codeContentTopPadding, copyButtonWrapperBottomLeft, copyButtonWrapperBottomRight, copyButtonWrapperTopLeft, copyButtonWrapperTop } from "./CodeBlock.vanilla.css.js";
 import { ButtonVanilla } from "../Button/Button.vanilla.js";
 import { AccessibleIcon } from "../AccessibleIcon/AccessibleIcon.js";
 const CodeBlockVanilla = forwardRef(
@@ -29,6 +29,8 @@ const CodeBlockVanilla = forwardRef(
     const { colors, resolvedTheme } = useVanillaExtractTheme();
     const effectiveScheme = colorScheme ?? resolvedTheme;
     const prismTheme = effectiveScheme === "dark" ? themes.nightOwl : themes.nightOwlLight;
+    const isBottom = copyButtonAlign.includes("bottom");
+    const isLeft = copyButtonAlign.includes("left");
     const { style: cssStyles, vars } = processCSSProp(css, colors);
     const containerStyles = {
       position: "relative",
@@ -53,15 +55,13 @@ const CodeBlockVanilla = forwardRef(
       const pre2 = preRef.current;
       const wrapper = buttonWrapperRef.current;
       if (!pre2 || !wrapper) return;
-      const isLeftAlign = copyButtonAlign.includes("left");
-      const isBottomAlign = copyButtonAlign.includes("bottom");
       const borderH = noBorder ? 0 : 2;
       const update = () => {
-        if (!isLeftAlign) {
+        if (!isLeft) {
           const vScrollbar = Math.max(0, pre2.offsetWidth - pre2.clientWidth - borderH);
           wrapper.style.right = `${16 + vScrollbar}px`;
         }
-        if (isBottomAlign) {
+        if (isBottom) {
           const hScrollbar = Math.max(0, pre2.offsetHeight - pre2.clientHeight - borderH);
           wrapper.style.bottom = `${8 + hScrollbar}px`;
         }
@@ -70,7 +70,7 @@ const CodeBlockVanilla = forwardRef(
       const observer = new ResizeObserver(update);
       observer.observe(pre2);
       return () => observer.disconnect();
-    }, [copyable, copyButtonAlign, noBorder]);
+    }, [copyable, isBottom, isLeft, noBorder]);
     const handleCopy = async () => {
       try {
         await navigator.clipboard.writeText(code);
@@ -80,8 +80,6 @@ const CodeBlockVanilla = forwardRef(
       } catch {
       }
     };
-    const isBottom = copyButtonAlign.includes("bottom");
-    const isLeft = copyButtonAlign.includes("left");
     const buttonPositionClass = isBottom ? isLeft ? copyButtonWrapperBottomLeft : copyButtonWrapperBottomRight : isLeft ? copyButtonWrapperTopLeft : copyButtonWrapperTop;
     const copyButton = copyable ? /* @__PURE__ */ jsxs(
       ButtonVanilla,
@@ -131,7 +129,11 @@ const CodeBlockVanilla = forwardRef(
               children: /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: [codeContent, copyable && isBottom ? codeContentBottomPadding : ""].filter(Boolean).join(" "),
+                  className: [
+                    codeContent,
+                    copyable && isLeft && isBottom ? codeContentBottomPadding : "",
+                    copyable && isLeft && !isBottom ? codeContentTopPadding : ""
+                  ].filter(Boolean).join(" "),
                   children: tokens.map((line, i) => /* @__PURE__ */ jsx(
                     "div",
                     {

package/dist/components/CodeBlock/CodeBlock.vanilla.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.vanilla.js","sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n  codeContent,\n  codeContentBottomPadding,\n  copyButtonWrapperBottomLeft,\n  copyButtonWrapperBottomRight,\n  copyButtonWrapperTop,\n  copyButtonWrapperTopLeft,\n  pre,\n  preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nexport interface CodeBlockVanillaProps\n  extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>,\n    CSSProps {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { colors, resolvedTheme } = useVanillaExtractTheme();\n    const effectiveScheme = colorScheme ?? resolvedTheme;\n    const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const containerStyles = {\n      position: 'relative' as const,\n      ...cssStyles,\n      ...assignInlineVars(vars),\n    };\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const isLeftAlign = copyButtonAlign.includes('left');\n      const isBottomAlign = copyButtonAlign.includes('bottom');\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeftAlign) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottomAlign) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, copyButtonAlign, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n    const buttonPositionClass = isBottom\n      ? isLeft\n        ? copyButtonWrapperBottomLeft\n        : copyButtonWrapperBottomRight\n      : isLeft\n        ? copyButtonWrapperTopLeft\n        : copyButtonWrapperTop;\n\n    const copyButton = copyable ? (\n      <ButtonVanilla\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </ButtonVanilla>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <div style={containerStyles}>\n            <pre\n              ref={setPreRef}\n              className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                maxHeight,\n                ...highlightStyle,\n                backgroundColor: 'inherit',\n                ...style,\n              }}\n              {...props}\n            >\n              <div\n                className={[codeContent, copyable && isBottom ? codeContentBottomPadding : '']\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </div>\n            </pre>\n            {copyButton && (\n              <div ref={buttonWrapperRef} className={buttonPositionClass}>\n                {copyButton}\n              </div>\n            )}\n          </div>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"names":["pre"],"mappings":"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"}
+{"version":3,"file":"CodeBlock.vanilla.js","sources":["../../../components/CodeBlock/CodeBlock.vanilla.tsx"],"sourcesContent":["import './prism-extend';\n\nimport { CheckIcon, CopyIcon } from '@radix-ui/react-icons';\nimport { assignInlineVars } from '@vanilla-extract/dynamic';\nimport { Highlight, Language, Prism, themes } from 'prism-react-renderer';\nimport React, {\n  forwardRef,\n  HTMLAttributes,\n  useCallback,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from 'react';\n\nimport { CSSProps, processCSSProp } from '../../styles/cssProps';\nimport { useVanillaExtractTheme } from '../../styles/themeContext';\nimport { AccessibleIcon } from '../AccessibleIcon';\nimport { ButtonVanilla } from '../Button';\nimport {\n  codeContent,\n  codeContentBottomPadding,\n  codeContentTopPadding,\n  copyButtonWrapperBottomLeft,\n  copyButtonWrapperBottomRight,\n  copyButtonWrapperTop,\n  copyButtonWrapperTopLeft,\n  pre,\n  preNoBorder,\n} from './CodeBlock.vanilla.css';\nimport type { CodeBlockCopyButtonAlign, CodeBlockLanguage } from './index';\n\nexport interface CodeBlockVanillaProps\n  extends Omit<HTMLAttributes<HTMLPreElement>, 'css'>,\n    CSSProps {\n  lang?: CodeBlockLanguage;\n  code: string;\n  copyable?: boolean;\n  copyText?: string;\n  copiedText?: string;\n  copyButtonAlign?: CodeBlockCopyButtonAlign;\n  onCopy?: () => void;\n  noBorder?: boolean;\n  wrapText?: boolean;\n  colorScheme?: 'light' | 'dark';\n  maxHeight?: number | string;\n}\n\nexport const CodeBlockVanilla = forwardRef<HTMLPreElement, CodeBlockVanillaProps>(\n  (\n    {\n      lang = 'text',\n      code,\n      copyable = false,\n      copyText,\n      copiedText,\n      copyButtonAlign = 'top right',\n      onCopy,\n      noBorder,\n      wrapText = false,\n      colorScheme,\n      maxHeight = 424,\n      css,\n      style,\n      className,\n      ...props\n    },\n    ref,\n  ) => {\n    const { colors, resolvedTheme } = useVanillaExtractTheme();\n    const effectiveScheme = colorScheme ?? resolvedTheme;\n    const prismTheme = effectiveScheme === 'dark' ? themes.nightOwl : themes.nightOwlLight;\n\n    const isBottom = copyButtonAlign.includes('bottom');\n    const isLeft = copyButtonAlign.includes('left');\n\n    const { style: cssStyles, vars } = processCSSProp(css, colors);\n    const containerStyles = {\n      position: 'relative' as const,\n      ...cssStyles,\n      ...assignInlineVars(vars),\n    };\n\n    const [copied, setCopied] = useState(false);\n\n    const preRef = useRef<HTMLPreElement | null>(\n      null,\n    ) as React.MutableRefObject<HTMLPreElement | null>;\n    const buttonWrapperRef = useRef<HTMLDivElement>(null);\n\n    const setPreRef = useCallback(\n      (node: HTMLPreElement | null) => {\n        preRef.current = node;\n        if (typeof ref === 'function') ref(node);\n        else if (ref) (ref as React.MutableRefObject<HTMLPreElement | null>).current = node;\n      },\n      [ref],\n    );\n\n    useLayoutEffect(() => {\n      if (!copyable) return;\n      const pre = preRef.current;\n      const wrapper = buttonWrapperRef.current;\n      if (!pre || !wrapper) return;\n\n      const borderH = noBorder ? 0 : 2;\n\n      const update = () => {\n        if (!isLeft) {\n          const vScrollbar = Math.max(0, pre.offsetWidth - pre.clientWidth - borderH);\n          wrapper.style.right = `${16 + vScrollbar}px`;\n        }\n        if (isBottom) {\n          const hScrollbar = Math.max(0, pre.offsetHeight - pre.clientHeight - borderH);\n          wrapper.style.bottom = `${8 + hScrollbar}px`;\n        }\n      };\n\n      update();\n      const observer = new ResizeObserver(update);\n      observer.observe(pre);\n      return () => observer.disconnect();\n    }, [copyable, isBottom, isLeft, noBorder]);\n\n    const handleCopy = async () => {\n      try {\n        await navigator.clipboard.writeText(code);\n        setCopied(true);\n        onCopy?.();\n        setTimeout(() => setCopied(false), 1500);\n      } catch {\n        // clipboard write failed (e.g. permission denied) — leave UI unchanged\n      }\n    };\n\n    const buttonPositionClass = isBottom\n      ? isLeft\n        ? copyButtonWrapperBottomLeft\n        : copyButtonWrapperBottomRight\n      : isLeft\n        ? copyButtonWrapperTopLeft\n        : copyButtonWrapperTop;\n\n    const copyButton = copyable ? (\n      <ButtonVanilla\n        variant=\"secondary\"\n        ghost\n        size=\"small\"\n        type=\"button\"\n        onClick={handleCopy}\n        css={{\n          color: '$hiContrast',\n          gap: '$1',\n          backgroundColor: '$codeBlockCopyButtonBg',\n          height: '32px',\n        }}\n      >\n        <AccessibleIcon label={copied ? 'Copied' : 'Copy'}>\n          {copied ? <CheckIcon /> : <CopyIcon />}\n        </AccessibleIcon>\n        {copied ? copiedText : copyText}\n      </ButtonVanilla>\n    ) : null;\n\n    return (\n      <Highlight\n        theme={prismTheme}\n        code={code}\n        language={(Prism.languages[lang] != null ? lang : 'text') as Language}\n      >\n        {({\n          className: highlightClass,\n          style: highlightStyle,\n          tokens,\n          getLineProps,\n          getTokenProps,\n        }) => (\n          <div style={containerStyles}>\n            <pre\n              ref={setPreRef}\n              className={[pre, noBorder ? preNoBorder : '', highlightClass, className]\n                .filter(Boolean)\n                .join(' ')}\n              style={{\n                maxHeight,\n                ...highlightStyle,\n                backgroundColor: 'inherit',\n                ...style,\n              }}\n              {...props}\n            >\n              <div\n                className={[\n                  codeContent,\n                  copyable && isLeft && isBottom ? codeContentBottomPadding : '',\n                  copyable && isLeft && !isBottom ? codeContentTopPadding : '',\n                ]\n                  .filter(Boolean)\n                  .join(' ')}\n              >\n                {tokens.map((line, i) => (\n                  <div\n                    key={i}\n                    {...getLineProps({ line })}\n                    style={\n                      wrapText ? { whiteSpace: 'pre-wrap', wordBreak: 'break-all' } : undefined\n                    }\n                  >\n                    {line.map((token, key) => (\n                      <span key={key} {...getTokenProps({ token })} />\n                    ))}\n                  </div>\n                ))}\n              </div>\n            </pre>\n            {copyButton && (\n              <div ref={buttonWrapperRef} className={buttonPositionClass}>\n                {copyButton}\n              </div>\n            )}\n          </div>\n        )}\n      </Highlight>\n    );\n  },\n);\n\nCodeBlockVanilla.displayName = 'CodeBlockVanilla';\n"],"names":["pre"],"mappings":"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"}

package/dist/components/Label/Label.vanilla.css.cjs

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css                                             */
 ;/* empty css                                   */
 const createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
 var labelRecipe = createRuntimeFn.createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });

package/dist/components/Label/Label.vanilla.css.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}
+{"version":3,"file":"Label.vanilla.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/components/Label/Label.vanilla.css.js

@@ -1,3 +1,4 @@
+/* empty css                                           */
 /* empty css                                 */
 import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
 var labelRecipe = createRuntimeFn({ defaultClassName: "_14umx1r1 _14umx1r0", variantClassNames: { size: { "0": "_14umx1r2", "1": "_14umx1r3", "2": "_14umx1r4", "3": "_14umx1r5", "4": "_14umx1r6", "5": "_14umx1r7", "6": "_14umx1r8", "7": "_14umx1r9", "8": "_14umx1ra", "9": "_14umx1rb", "10": "_14umx1rc", "11": "_14umx1rd", "12": "_14umx1re", inherit: "_14umx1rf" }, weight: { light: "_14umx1rg", regular: "_14umx1rh", medium: "_14umx1ri", semiBold: "_14umx1rj", bold: "_14umx1rk" }, variant: { red: "_14umx1rl", subtle: "_14umx1rm", "default": "_14umx1rn", contrast: "_14umx1ro", inherit: "_14umx1rp", invalid: "_14umx1rq" }, gradient: { true: "_14umx1rr" }, transform: { uppercase: "_14umx1rs", capitalize: "_14umx1rt", capitalizeWords: "_14umx1ru" }, noWrap: { true: "_14umx1rv" } }, defaultVariants: { size: "0", variant: "subtle", transform: "capitalize" }, compoundVariants: [] });

package/dist/components/Label/Label.vanilla.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;"}
+{"version":3,"file":"Label.vanilla.css.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/dist/faency.css

@@ -6072,24 +6072,27 @@
   padding-bottom: var(--_17h2n96a0);
 }
 ._1krwcuz4 {
+  padding-top: var(--_17h2n96a0);
+}
+._1krwcuz5 {
   position: absolute;
   z-index: 1;
   top: var(--_17h2n969v);
   right: var(--_17h2n969w);
 }
-._1krwcuz5 {
+._1krwcuz6 {
   position: absolute;
   z-index: 1;
   top: var(--_17h2n969v);
   left: var(--_17h2n969w);
 }
-._1krwcuz6 {
+._1krwcuz7 {
   position: absolute;
   z-index: 1;
   bottom: var(--_17h2n969v);
   right: var(--_17h2n969w);
 }
-._1krwcuz7 {
+._1krwcuz8 {
   position: absolute;
   z-index: 1;
   bottom: var(--_17h2n969v);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@traefik-labs/faency",
   "description": "Traefik Labs design system",
-  "version": "12.2.0",
+  "version": "12.2.1",
   "license": "Apache-2.0",
   "keywords": [
     "traefiklabs",