@bitrise/bitkit-v2 0.3.334 → 0.3.335

package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.d.ts

@@ -6,15 +6,28 @@ interface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'>
     startingHeight?: never;
     textToCopy?: string;
     variant: 'inline';
+    wrapLines?: never;
 }
 interface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {
     children: string;
     interactive?: never;
     size?: 'md' | 'lg';
-    startingHeight?: number;
     textToCopy?: string;
-    variant: 'multi' | 'single';
 }
-export type BitkitCodeSnippetProps = InlineProps | BlockProps;
+interface SingleProps extends BlockProps {
+    startingHeight?: never;
+    variant: 'single';
+    wrapLines?: never;
+}
+interface MultiProps extends BlockProps {
+    startingHeight?: number;
+    variant: 'multi';
+    /**
+     * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is
+     * what indented code (YAML, shell) needs to stay readable.
+     */
+    wrapLines?: boolean;
+}
+export type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;
 declare const BitkitCodeSnippet: import('react').ForwardRefExoticComponent<BitkitCodeSnippetProps & import('react').RefAttributes<HTMLElement>>;
 export default BitkitCodeSnippet;

package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js

@@ -20,7 +20,8 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
 		interactive: props.interactive,
 		isExpanded,
 		size: props.size ?? "lg",
-		variant: props.variant
+		variant: props.variant,
+		wrapLines: props.wrapLines
 	});
 	const handleToggleExpand = () => {
 		setIsExpanded((prev) => !prev);
@@ -66,7 +67,7 @@ var BitkitCodeSnippet = forwardRef((props, ref) => {
 			})
 		});
 	}
-	const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, ...rest } = props;
+	const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, wrapLines: _wrapLines, ...rest } = props;
 	if (variant === "single") return /* @__PURE__ */ jsxs(chakra.div, {
 		ref,
 		...rest,

package/dist/components/BitkitCodeSnippet/BitkitCodeSnippet.js.map

@@ -1 +1 @@
-{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n  children: string;\n  interactive?: boolean;\n  size?: 'md' | 'lg';\n  startingHeight?: never;\n  textToCopy?: string;\n  variant: 'inline';\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n  children: string;\n  interactive?: never;\n  size?: 'md' | 'lg';\n  startingHeight?: number;\n  textToCopy?: string;\n  variant: 'multi' | 'single';\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | BlockProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n  const hasShowMore = props.startingHeight !== undefined;\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { copied, copy } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n  const recipe = useSlotRecipe({ key: 'codeSnippet' });\n  const styles = recipe({\n    hasShowMore,\n    interactive: props.interactive,\n    isExpanded,\n    size: props.size ?? 'lg',\n    variant: props.variant,\n  });\n\n  const handleToggleExpand = () => {\n    setIsExpanded((prev) => !prev);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      copy();\n    }\n  };\n\n  const copyButton = (\n    <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n      {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n    </chakra.button>\n  );\n\n  if (props.variant === 'inline') {\n    const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;\n\n    if (!interactive) {\n      return (\n        <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n          {children}\n        </chakra.code>\n      );\n    }\n\n    return (\n      <BitkitTooltip text={COPY_TOOLTIP}>\n        <chakra.code\n          ref={ref}\n          {...rest}\n          css={[styles.root, rest.css]}\n          onClick={(e) => {\n            rest.onClick?.(e);\n            if (!e.defaultPrevented) copy();\n          }}\n          onKeyDown={(e) => {\n            rest.onKeyDown?.(e);\n            if (!e.defaultPrevented) handleKeyDown(e);\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {children}\n        </chakra.code>\n      </BitkitTooltip>\n    );\n  }\n\n  const { children, size: _size, startingHeight, textToCopy: _textToCopy, variant, ...rest } = props;\n\n  if (variant === 'single') {\n    return (\n      <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n        <chakra.code css={styles.content} tabIndex={-1}>\n          {children}\n        </chakra.code>\n        <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n      </chakra.div>\n    );\n  }\n\n  const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n  return (\n    <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n      <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n        {children}\n      </chakra.code>\n      <chakra.div css={styles.copyButtonWrapper}>\n        <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n      </chakra.div>\n      {hasShowMore && (\n        <chakra.div css={styles.showMoreContainer}>\n          {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n          <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n            {isExpanded ? 'Show less' : 'Show more'}\n            <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n          </chakra.button>\n        </chakra.div>\n      )}\n    </chakra.div>\n  );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":";;;;;;;;;AAQA,IAAM,eAAe;AAsBrB,IAAM,oBAAoB,YAAiD,OAAO,QAAQ;CACxF,MAAM,cAAc,MAAM,mBAAmB,KAAA;CAC7C,MAAM,CAAC,YAAY,iBAAiB,SAAS,KAAK;CAElD,MAAM,EAAE,QAAQ,SAAS,aAAa;EAAE,SAAS;EAAM,OAAO,MAAM,cAAc,MAAM;CAAS,CAAC;CAGlG,MAAM,SADS,cAAc,EAAE,KAAK,cAAc,CACnC,CAAA,CAAO;EACpB;EACA,aAAa,MAAM;EACnB;EACA,MAAM,MAAM,QAAQ;EACpB,SAAS,MAAM;CACjB,CAAC;CAED,MAAM,2BAA2B;EAC/B,eAAe,SAAS,CAAC,IAAI;CAC/B;CAEA,MAAM,iBAAiB,MAAkC;EACvD,IAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;GACtC,EAAE,eAAe;GACjB,KAAK;EACP;CACF;CAEA,MAAM,aACJ,oBAAC,OAAO,QAAR;EAAe,cAAY;EAAc,KAAK,OAAO;EAAY,SAAS;EAAM,MAAK;EAClF,UAAA,SAAS,oBAAC,WAAD,EAAW,MAAK,KAAM,CAAA,IAAI,oBAAC,UAAD,EAAU,MAAK,KAAM,CAAA;CAC5C,CAAA;CAGjB,IAAI,MAAM,YAAY,UAAU;EAC9B,MAAM,EAAE,UAAU,aAAa,MAAM,OAAO,YAAY,aAAa,SAAS,UAAU,GAAG,SAAS;EAEpG,IAAI,CAAC,aACH,OACE,oBAAC,OAAO,MAAR;GAAkB;GAAK,GAAI;GAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;GACzD;EACU,CAAA;EAIjB,OACE,oBAAC,eAAD;GAAe,MAAM;GACnB,UAAA,oBAAC,OAAO,MAAR;IACO;IACL,GAAI;IACJ,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;IAC3B,UAAU,MAAM;KACd,KAAK,UAAU,CAAC;KAChB,IAAI,CAAC,EAAE,kBAAkB,KAAK;IAChC;IACA,YAAY,MAAM;KAChB,KAAK,YAAY,CAAC;KAClB,IAAI,CAAC,EAAE,kBAAkB,cAAc,CAAC;IAC1C;IACA,MAAK;IACL,UAAU;IAET;GACU,CAAA;EACA,CAAA;CAEnB;CAEA,MAAM,EAAE,UAAU,MAAM,OAAO,gBAAgB,YAAY,aAAa,SAAS,GAAG,SAAS;CAE7F,IAAI,YAAY,UACd,OACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;EAA3D,UAAA,CACE,oBAAC,OAAO,MAAR;GAAa,KAAK,OAAO;GAAS,UAAU;GACzC;EACU,CAAA,GACb,oBAAC,eAAD;GAAe,MAAM;GAAe,UAAA;EAA0B,CAAA,CACpD;;CAIhB,MAAM,mBAAmB,eAAe,CAAC,aAAa,iBAAiB,KAAA;CAEvE,OACE,qBAAC,OAAO,KAAR;EAAiB;EAAK,GAAI;EAAM,KAAK,CAAC,OAAO,MAAM,KAAK,GAAG;EAA3D,UAAA;GACE,oBAAC,OAAO,MAAR;IAAa,KAAK,OAAO;IAAS,WAAW;IAAkB,UAAU;IACtE;GACU,CAAA;GACb,oBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IACtB,UAAA,oBAAC,eAAD;KAAe,MAAM;KAAe,UAAA;IAA0B,CAAA;GACpD,CAAA;GACX,eACC,qBAAC,OAAO,KAAR;IAAY,KAAK,OAAO;IAAxB,UAAA,CACG,CAAC,cAAc,oBAAC,OAAO,KAAR,EAAY,KAAK,OAAO,iBAAmB,CAAA,GAC3D,qBAAC,OAAO,QAAR;KAAe,SAAS;KAAoB,KAAK,OAAO;KAAxD,UAAA,CACG,aAAa,cAAc,aAC5B,oBAAC,oBAAD;MAAoB,cAAY,aAAa,SAAS;MAAU,QAAO;MAAK,OAAM;KAAM,CAAA,CAC3E;IACL,CAAA,CAAA;;EAEJ;;AAEhB,CAAC;AAED,kBAAkB,cAAc"}
+{"version":3,"file":"BitkitCodeSnippet.js","names":[],"sources":["../../../lib/components/BitkitCodeSnippet/BitkitCodeSnippet.tsx"],"sourcesContent":["import { useClipboard } from '@ark-ui/react/clipboard';\nimport { chakra, type HTMLChakraProps, useSlotRecipe } from '@chakra-ui/react/styled-system';\nimport { forwardRef, type KeyboardEvent, useState } from 'react';\n\nimport { IconCheck, IconCopy } from '../../icons';\nimport AssetSelectChevron from '../../utilities/AssetSelectChevron';\nimport BitkitTooltip from '../BitkitTooltip/BitkitTooltip';\n\nconst COPY_TOOLTIP = 'Copy to clipboard';\n\ninterface InlineProps extends Omit<HTMLChakraProps<'code'>, 'children' | 'size'> {\n  children: string;\n  interactive?: boolean;\n  size?: 'md' | 'lg';\n  startingHeight?: never;\n  textToCopy?: string;\n  variant: 'inline';\n  wrapLines?: never;\n}\n\ninterface BlockProps extends Omit<HTMLChakraProps<'div'>, 'children' | 'size'> {\n  children: string;\n  interactive?: never;\n  size?: 'md' | 'lg';\n  textToCopy?: string;\n}\n\n// `single` is one line behind a horizontal scrollbar, so neither the show-more height nor the\n// wrapping switch means anything there -- `never` says so at the call site instead of ignoring them.\ninterface SingleProps extends BlockProps {\n  startingHeight?: never;\n  variant: 'single';\n  wrapLines?: never;\n}\n\ninterface MultiProps extends BlockProps {\n  startingHeight?: number;\n  variant: 'multi';\n  /**\n   * Long lines wrap by default; `false` keeps them whole behind a horizontal scrollbar, which is\n   * what indented code (YAML, shell) needs to stay readable.\n   */\n  wrapLines?: boolean;\n}\n\nexport type BitkitCodeSnippetProps = InlineProps | MultiProps | SingleProps;\n\nconst BitkitCodeSnippet = forwardRef<HTMLElement, BitkitCodeSnippetProps>((props, ref) => {\n  const hasShowMore = props.startingHeight !== undefined;\n  const [isExpanded, setIsExpanded] = useState(false);\n\n  const { copied, copy } = useClipboard({ timeout: 2000, value: props.textToCopy ?? props.children });\n\n  const recipe = useSlotRecipe({ key: 'codeSnippet' });\n  const styles = recipe({\n    hasShowMore,\n    interactive: props.interactive,\n    isExpanded,\n    size: props.size ?? 'lg',\n    variant: props.variant,\n    wrapLines: props.wrapLines,\n  });\n\n  const handleToggleExpand = () => {\n    setIsExpanded((prev) => !prev);\n  };\n\n  const handleKeyDown = (e: KeyboardEvent<HTMLElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      copy();\n    }\n  };\n\n  const copyButton = (\n    <chakra.button aria-label={COPY_TOOLTIP} css={styles.copyButton} onClick={copy} type=\"button\">\n      {copied ? <IconCheck size=\"16\" /> : <IconCopy size=\"16\" />}\n    </chakra.button>\n  );\n\n  if (props.variant === 'inline') {\n    const { children, interactive, size: _size, textToCopy: _textToCopy, variant: _variant, ...rest } = props;\n\n    if (!interactive) {\n      return (\n        <chakra.code ref={ref} {...rest} css={[styles.root, rest.css]}>\n          {children}\n        </chakra.code>\n      );\n    }\n\n    return (\n      <BitkitTooltip text={COPY_TOOLTIP}>\n        <chakra.code\n          ref={ref}\n          {...rest}\n          css={[styles.root, rest.css]}\n          onClick={(e) => {\n            rest.onClick?.(e);\n            if (!e.defaultPrevented) copy();\n          }}\n          onKeyDown={(e) => {\n            rest.onKeyDown?.(e);\n            if (!e.defaultPrevented) handleKeyDown(e);\n          }}\n          role=\"button\"\n          tabIndex={0}\n        >\n          {children}\n        </chakra.code>\n      </BitkitTooltip>\n    );\n  }\n\n  const {\n    children,\n    size: _size,\n    startingHeight,\n    textToCopy: _textToCopy,\n    variant,\n    wrapLines: _wrapLines,\n    ...rest\n  } = props;\n\n  if (variant === 'single') {\n    return (\n      <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n        <chakra.code css={styles.content} tabIndex={-1}>\n          {children}\n        </chakra.code>\n        <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n      </chakra.div>\n    );\n  }\n\n  const contentMaxHeight = hasShowMore && !isExpanded ? startingHeight : undefined;\n\n  return (\n    <chakra.div ref={ref} {...rest} css={[styles.root, rest.css]}>\n      <chakra.code css={styles.content} maxHeight={contentMaxHeight} tabIndex={-1}>\n        {children}\n      </chakra.code>\n      <chakra.div css={styles.copyButtonWrapper}>\n        <BitkitTooltip text={COPY_TOOLTIP}>{copyButton}</BitkitTooltip>\n      </chakra.div>\n      {hasShowMore && (\n        <chakra.div css={styles.showMoreContainer}>\n          {!isExpanded && <chakra.div css={styles.showMoreGradient} />}\n          <chakra.button onClick={handleToggleExpand} css={styles.showMoreButton}>\n            {isExpanded ? 'Show less' : 'Show more'}\n            <AssetSelectChevron data-state={isExpanded ? 'open' : 'closed'} height=\"16\" width=\"16\" />\n          </chakra.button>\n        </chakra.div>\n      )}\n    </chakra.div>\n  );\n});\n\nBitkitCodeSnippet.displayName = 'BitkitCodeSnippet';\n\nexport default BitkitCodeSnippet;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/CodeSnippet.recipe.d.ts

@@ -146,6 +146,10 @@ declare const codeSnippetSlotRecipe: import('@chakra-ui/react').SlotRecipeDefini
         true: {};
         false: {};
     };
+    wrapLines: {
+        true: {};
+        false: {};
+    };
     isExpanded: {
         true: {};
         false: {};

package/dist/theme/slot-recipes/CodeSnippet.recipe.js

@@ -172,12 +172,24 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 			true: {},
 			false: {}
 		},
+		wrapLines: {
+			true: {},
+			false: {}
+		},
 		isExpanded: {
 			true: {},
 			false: {}
 		}
 	},
 	compoundVariants: [
+		{
+			variant: "multi",
+			wrapLines: false,
+			css: { content: {
+				overflowX: "auto",
+				whiteSpace: "pre"
+			} }
+		},
 		{
 			variant: "inline",
 			interactive: true,
@@ -228,7 +240,8 @@ var codeSnippetSlotRecipe = defineSlotRecipe({
 	defaultVariants: {
 		interactive: false,
 		size: "lg",
-		variant: "single"
+		variant: "single",
+		wrapLines: true
 	}
 });
 //#endregion

package/dist/theme/slot-recipes/CodeSnippet.recipe.js.map

@@ -1 +1 @@
-{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n  className: 'code-snippet',\n  slots: [\n    'root',\n    'content',\n    'copyButton',\n    'copyButtonWrapper',\n    'showMoreContainer',\n    'showMoreGradient',\n    'showMoreButton',\n  ],\n  base: {\n    root: {\n      background: 'background/secondary',\n    },\n    content: {\n      flex: '1',\n      minWidth: 0,\n    },\n    copyButton: {\n      background: 'background/secondary',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      _hover: {\n        background: 'background/hover',\n        color: 'icon/primary',\n        _active: {\n          background: 'background/active',\n          color: 'icon/primary',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'icon/primary',\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      inline: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '2',\n          color: 'text/body',\n          display: 'inline-flex',\n          paddingBlock: '2',\n          paddingInline: '6',\n          whiteSpace: 'nowrap',\n        },\n      },\n      single: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '4',\n          display: 'flex',\n          height: '40',\n          isolation: 'isolate',\n          overflow: 'hidden',\n          whiteSpace: 'nowrap',\n        },\n        content: {\n          alignItems: 'center',\n          display: 'flex',\n          height: '40',\n          overflow: 'hidden',\n          paddingInlineStart: '16',\n          position: 'relative',\n          _after: {\n            background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n            content: '\"\"',\n            height: '40',\n            pointerEvents: 'none',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            width: '8',\n          },\n        },\n        copyButton: {\n          flexShrink: '0',\n          padding: '12',\n        },\n      },\n      multi: {\n        root: {\n          borderRadius: '4',\n          display: 'flex',\n          flexDirection: 'column',\n          padding: '16',\n          position: 'relative',\n        },\n        content: {\n          color: 'text/body',\n          overflowY: 'auto',\n          transition: 'max-height 0.3s ease',\n          whiteSpace: 'pre-wrap',\n        },\n        copyButton: {\n          borderRadius: '4',\n          overflow: 'hidden',\n          padding: '8',\n        },\n        copyButtonWrapper: {\n          background: 'background/secondary',\n          padding: '4',\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        showMoreContainer: {\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'flex-end',\n        },\n        showMoreGradient: {\n          background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n          borderBottomRadius: '4',\n          bottom: 0,\n          height: '40',\n          left: 0,\n          pointerEvents: 'none',\n          position: 'absolute',\n          right: 0,\n        },\n        showMoreButton: {\n          alignItems: 'center',\n          background: 'background/secondary',\n          borderRadius: '4',\n          color: 'text/secondary',\n          cursor: 'pointer',\n          display: 'flex',\n          fontFamily: 'body',\n          gap: '4',\n          justifyContent: 'center',\n          minWidth: '64',\n          paddingBlock: '8',\n          paddingInline: '12',\n          position: 'relative',\n          textStyle: 'comp/button/md',\n          _hover: {\n            background: 'background/hover',\n            color: 'text/primary',\n            _active: {\n              background: 'background/active',\n              color: 'text/primary',\n              overflow: 'hidden',\n            },\n          },\n          _active: {\n            background: 'background/active',\n            color: 'text/primary',\n            overflow: 'hidden',\n          },\n          _focusVisible: {\n            outlineOffset: '-3px',\n          },\n        },\n      },\n    },\n    size: {\n      md: {\n        root: { textStyle: 'code/md' },\n        content: { textStyle: 'code/md' },\n      },\n      lg: {\n        root: { textStyle: 'code/lg' },\n        content: { textStyle: 'code/lg' },\n      },\n    },\n    interactive: {\n      true: {},\n      false: {},\n    },\n    hasShowMore: {\n      true: {},\n      false: {},\n    },\n    isExpanded: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    {\n      variant: 'inline',\n      interactive: true,\n      css: {\n        root: {\n          cursor: 'pointer',\n          userSelect: 'none',\n          '&:hover:not(:active)': {\n            background: 'background/hover',\n          },\n          '&:active': {\n            background: 'background/active',\n          },\n        },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      css: {\n        root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: false,\n      css: {\n        showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: true,\n      css: {\n        root: { padding: 0, paddingInlineEnd: 0 },\n        content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n        showMoreContainer: { position: 'relative' },\n      },\n    },\n  ],\n  defaultVariants: {\n    interactive: false,\n    size: 'lg',\n    variant: 'single',\n  },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":"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"}
+{"version":3,"file":"CodeSnippet.recipe.js","names":[],"sources":["../../../lib/theme/slot-recipes/CodeSnippet.recipe.ts"],"sourcesContent":["import { defineSlotRecipe } from '@chakra-ui/react/styled-system';\n\nconst codeSnippetSlotRecipe = defineSlotRecipe({\n  className: 'code-snippet',\n  slots: [\n    'root',\n    'content',\n    'copyButton',\n    'copyButtonWrapper',\n    'showMoreContainer',\n    'showMoreGradient',\n    'showMoreButton',\n  ],\n  base: {\n    root: {\n      background: 'background/secondary',\n    },\n    content: {\n      flex: '1',\n      minWidth: 0,\n    },\n    copyButton: {\n      background: 'background/secondary',\n      color: 'icon/secondary',\n      cursor: 'pointer',\n      _hover: {\n        background: 'background/hover',\n        color: 'icon/primary',\n        _active: {\n          background: 'background/active',\n          color: 'icon/primary',\n        },\n      },\n      _active: {\n        background: 'background/active',\n        color: 'icon/primary',\n      },\n      _focusVisible: {\n        outlineOffset: '-3px',\n      },\n    },\n  },\n  variants: {\n    variant: {\n      inline: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '2',\n          color: 'text/body',\n          display: 'inline-flex',\n          paddingBlock: '2',\n          paddingInline: '6',\n          whiteSpace: 'nowrap',\n        },\n      },\n      single: {\n        root: {\n          alignItems: 'center',\n          borderRadius: '4',\n          display: 'flex',\n          height: '40',\n          isolation: 'isolate',\n          overflow: 'hidden',\n          whiteSpace: 'nowrap',\n        },\n        content: {\n          alignItems: 'center',\n          display: 'flex',\n          height: '40',\n          overflow: 'hidden',\n          paddingInlineStart: '16',\n          position: 'relative',\n          _after: {\n            background: 'linear-gradient(to left, var(--colors-background-secondary), transparent)',\n            content: '\"\"',\n            height: '40',\n            pointerEvents: 'none',\n            position: 'absolute',\n            right: 0,\n            top: 0,\n            width: '8',\n          },\n        },\n        copyButton: {\n          flexShrink: '0',\n          padding: '12',\n        },\n      },\n      multi: {\n        root: {\n          borderRadius: '4',\n          display: 'flex',\n          flexDirection: 'column',\n          padding: '16',\n          position: 'relative',\n        },\n        content: {\n          color: 'text/body',\n          overflowY: 'auto',\n          transition: 'max-height 0.3s ease',\n          whiteSpace: 'pre-wrap',\n        },\n        copyButton: {\n          borderRadius: '4',\n          overflow: 'hidden',\n          padding: '8',\n        },\n        copyButtonWrapper: {\n          background: 'background/secondary',\n          padding: '4',\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        showMoreContainer: {\n          alignItems: 'center',\n          display: 'flex',\n          justifyContent: 'flex-end',\n        },\n        showMoreGradient: {\n          background: 'linear-gradient(to top, var(--colors-background-secondary) 33%, transparent)',\n          borderBottomRadius: '4',\n          bottom: 0,\n          height: '40',\n          left: 0,\n          pointerEvents: 'none',\n          position: 'absolute',\n          right: 0,\n        },\n        showMoreButton: {\n          alignItems: 'center',\n          background: 'background/secondary',\n          borderRadius: '4',\n          color: 'text/secondary',\n          cursor: 'pointer',\n          display: 'flex',\n          fontFamily: 'body',\n          gap: '4',\n          justifyContent: 'center',\n          minWidth: '64',\n          paddingBlock: '8',\n          paddingInline: '12',\n          position: 'relative',\n          textStyle: 'comp/button/md',\n          _hover: {\n            background: 'background/hover',\n            color: 'text/primary',\n            _active: {\n              background: 'background/active',\n              color: 'text/primary',\n              overflow: 'hidden',\n            },\n          },\n          _active: {\n            background: 'background/active',\n            color: 'text/primary',\n            overflow: 'hidden',\n          },\n          _focusVisible: {\n            outlineOffset: '-3px',\n          },\n        },\n      },\n    },\n    size: {\n      md: {\n        root: { textStyle: 'code/md' },\n        content: { textStyle: 'code/md' },\n      },\n      lg: {\n        root: { textStyle: 'code/lg' },\n        content: { textStyle: 'code/lg' },\n      },\n    },\n    interactive: {\n      true: {},\n      false: {},\n    },\n    hasShowMore: {\n      true: {},\n      false: {},\n    },\n    wrapLines: {\n      true: {},\n      false: {},\n    },\n    isExpanded: {\n      true: {},\n      false: {},\n    },\n  },\n  compoundVariants: [\n    // Indented code (YAML, shell) loses its structure when a long line wraps: the continuation starts\n    // at the left edge, so a nested key reads like a top-level one. `wrapLines={false}` keeps lines whole\n    // behind a horizontal scrollbar instead. Only `multi` wraps in the first place.\n    {\n      variant: 'multi',\n      wrapLines: false,\n      css: {\n        content: {\n          overflowX: 'auto',\n          whiteSpace: 'pre',\n        },\n      },\n    },\n    {\n      variant: 'inline',\n      interactive: true,\n      css: {\n        root: {\n          cursor: 'pointer',\n          userSelect: 'none',\n          '&:hover:not(:active)': {\n            background: 'background/hover',\n          },\n          '&:active': {\n            background: 'background/active',\n          },\n        },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      css: {\n        root: { paddingBlockEnd: 0, paddingInlineEnd: '8' },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: false,\n      css: {\n        showMoreContainer: { bottom: 0, left: 0, position: 'absolute', right: 0 },\n      },\n    },\n    {\n      variant: 'multi',\n      hasShowMore: true,\n      isExpanded: true,\n      css: {\n        root: { padding: 0, paddingInlineEnd: 0 },\n        content: { overflow: 'auto', padding: '16', paddingBlockEnd: 0 },\n        showMoreContainer: { position: 'relative' },\n      },\n    },\n  ],\n  defaultVariants: {\n    interactive: false,\n    size: 'lg',\n    variant: 'single',\n    wrapLines: true,\n  },\n});\n\nexport default codeSnippetSlotRecipe;\n"],"mappings":"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"}

package/dist/theme/slot-recipes/index.d.ts

@@ -499,6 +499,10 @@ declare const slotRecipes: {
             true: {};
             false: {};
         };
+        wrapLines: {
+            true: {};
+            false: {};
+        };
         isExpanded: {
             true: {};
             false: {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit-v2",
   "private": false,
-  "version": "0.3.334",
+  "version": "0.3.335",
   "description": "Bitrise Design System Components built with Chakra UI V3",
   "keywords": [
     "react",