@redocly/theme 0.45.10 → 0.46.0

package/lib/components/CodeBlock/CodeBlock.d.ts

@@ -16,6 +16,7 @@ export type CodeBlockProps = {
     codeBlockMaxHeight?: string;
     hideCodeColors?: boolean;
     wrapContents?: boolean;
+    [key: string]: unknown;
 };
 type UnstableExternalCodeSample = {
     lang: string;
@@ -36,5 +37,5 @@ type ExternalSource = {
     properties?: any;
     operation?: any;
 };
-export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, children, }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
+export declare function CodeBlock({ lang, source, externalSource, header, dataTestId, codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents, children, ...rest }: React.PropsWithChildren<CodeBlockProps>): JSX.Element;
 export {};

package/lib/components/CodeBlock/CodeBlock.js

@@ -22,6 +22,17 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -34,10 +45,23 @@ const hooks_1 = require("../../core/hooks");
 const ReportDialog_1 = require("../../components/Feedback/ReportDialog");
 const CodeBlockContainer_1 = require("../../components/CodeBlock/CodeBlockContainer");
 const CodeBlockControls_1 = require("../../components/CodeBlock/CodeBlockControls");
-function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children, }) {
-    var _a, _b, _c, _d, _e, _f;
-    const [sourceCode, setSourceCode] = (0, react_1.useState)((_c = (source || ((_b = (_a = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _a === void 0 ? void 0 : _a.get) === null || _b === void 0 ? void 0 : _b.call(_a, externalSource)))) !== null && _c !== void 0 ? _c : '');
-    const highlightedCode = highlightedHtml || (children ? null : (0, utils_1.highlight)(sourceCode, lang));
+function CodeBlock(_a) {
+    var _b, _c, _d, _e, _f, _g;
+    var { lang, source, externalSource, header, dataTestId = 'source-code', codeBlockRef, highlightedHtml, withLineNumbers, startLineNumber, className, codeBlockMaxHeight, tabs, hideCodeColors, wrapContents = false, children } = _a, rest = __rest(_a, ["lang", "source", "externalSource", "header", "dataTestId", "codeBlockRef", "highlightedHtml", "withLineNumbers", "startLineNumber", "className", "codeBlockMaxHeight", "tabs", "hideCodeColors", "wrapContents", "children"]);
+    const [sourceCode, setSourceCode] = (0, react_1.useState)((_d = (source || ((_c = (_b = externalSource === null || externalSource === void 0 ? void 0 : externalSource.sample) === null || _b === void 0 ? void 0 : _b.get) === null || _c === void 0 ? void 0 : _c.call(_b, externalSource)))) !== null && _d !== void 0 ? _d : '');
+    const { useCodeHighlight } = (0, hooks_1.useThemeHooks)();
+    const { highlight } = useCodeHighlight() || {};
+    const highlightedCode = highlightedHtml
+        ? withLineNumbers
+            ? (0, utils_1.addLineNumbers)(highlightedHtml, startLineNumber)
+            : highlightedHtml
+        : children
+            ? null
+            : highlight === null || highlight === void 0 ? void 0 : highlight(sourceCode, lang, {
+                withLineNumbers,
+                startLineNumber,
+                highlight: rest['data-highlight'],
+            });
     // The same initial value should be returned for ssr and frontend to avoid issues
     // Because we don't have session storage in ssr and can't get the security details there
     // Issue for more details https://github.com/Redocly/reference-docs/issues/888
@@ -50,15 +74,13 @@ function CodeBlock({ lang, source, externalSource, header, dataTestId = 'source-
     }, [source, externalSource]);
     const { reportDialog, reportButton } = (0, hooks_1.useReportDialog)();
     (0, hooks_1.useModalScrollLock)(Boolean(reportDialog.visible));
-    const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_d = header === null || header === void 0 ? void 0 : header.controls) === null || _d === void 0 ? void 0 : _d.report), { props: reportButton.props }), copy: ((_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.copy) ? Object.assign(Object.assign({}, (_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy), { data: sourceCode }) : undefined });
+    const controls = (header === null || header === void 0 ? void 0 : header.controls) && Object.assign(Object.assign({}, header === null || header === void 0 ? void 0 : header.controls), { report: Object.assign(Object.assign({}, (_e = header === null || header === void 0 ? void 0 : header.controls) === null || _e === void 0 ? void 0 : _e.report), { props: reportButton.props }), copy: ((_f = header === null || header === void 0 ? void 0 : header.controls) === null || _f === void 0 ? void 0 : _f.copy) ? Object.assign(Object.assign({}, (_g = header === null || header === void 0 ? void 0 : header.controls) === null || _g === void 0 ? void 0 : _g.copy), { data: sourceCode }) : undefined });
     return (react_1.default.createElement(CodeBlockWrapper, { "data-component-name": "CodeBlock/CodeBlock", className: className },
         react_1.default.createElement(ContainerWrapper, null,
             react_1.default.createElement(CodeBlockControls_1.CodeBlockControls, { tabs: tabs, className: header === null || header === void 0 ? void 0 : header.className, title: header === null || header === void 0 ? void 0 : header.title, controls: controls }),
-            react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, className: withLineNumbers ? 'line-numbers' : '', dangerouslySetInnerHTML: highlightedCode
+            react_1.default.createElement(CodeBlockContainer_1.CodeBlockContainer, { ref: codeBlockRef, withLineNumbers: withLineNumbers, dangerouslySetInnerHTML: highlightedCode
                     ? {
-                        __html: withLineNumbers
-                            ? (0, utils_1.addLineNumbers)(highlightedCode, startLineNumber)
-                            : highlightedCode,
+                        __html: highlightedCode,
                     }
                     : undefined, suppressHydrationWarning // TODO: investigate issue
                 : true, "data-testid": dataTestId, hideCodeColors: hideCodeColors, maxHeight: codeBlockMaxHeight, wrapContents: wrapContents, tabIndex: 0 }, children),
@@ -72,5 +94,7 @@ const CodeBlockWrapper = styled_components_1.default.div `
   border-radius: var(--border-radius);
   background-color: var(--code-block-bg-color);
   margin: 0 0 var(--spacing-sm);
+
+  --md-pre-margin: 0;
 `;
 //# sourceMappingURL=CodeBlock.js.map

package/lib/components/CodeBlock/CodeBlockContainer.d.ts

@@ -5,6 +5,7 @@ export type CodeBlockContainerProps = PropsWithChildren<{
     wrapContents?: boolean;
     ref?: (instance: HTMLPreElement | null) => void;
     className?: string;
+    withLineNumbers?: boolean;
     dangerouslySetInnerHTML?: {
         __html: string;
     };

package/lib/components/CodeBlock/CodeBlockContainer.js

@@ -52,104 +52,278 @@ const CodeBlockContainerComponent = styled_components_1.default.pre `
       font-family: var(--code-block-font-family);
     }
   }
-  /**
-  * Based on prism-dark.css
-  */
-  code[class*='language-'],
-  pre[class*='language-'] {
-    text-shadow: 0 -0.1em 0.2em black;
-    text-align: left;
-    word-spacing: normal;
-    word-break: normal;
-    word-wrap: normal;
-    line-height: 1.5;
-
-    -moz-tab-size: 4;
-    -o-tab-size: 4;
-    tab-size: 4;
-
-    -webkit-hyphens: none;
-    -moz-hyphens: none;
-    -ms-hyphens: none;
-    hyphens: none;
-  }
 
-  @media print {
-    code[class*='language-'],
-    pre[class*='language-'] {
-      text-shadow: none;
+  .highlighted {
+    background: var(--layer-color-hover);
+    margin-left: calc(var(--spacing-sm) * -1);
+    padding-left: var(--spacing-sm);
+    width: calc(100% + var(--spacing-sm));
+    display: inline-block;
+
+    &.error {
+      background: var(--color-raspberry-2);
+    }
+
+    &.warning {
+      background: var(--color-carrot-2);
     }
   }
 
-  /* Code blocks */
+  [data-line-number] {
+    &::before {
+      content: attr(data-line-number);
+      display: inline-block;
+      min-width: 2em;
+      padding-right: 0.8em;
+      text-align: right;
+      pointer-events: none;
+      user-select: none;
+    }
+  }
 
-  pre[class*='language-'] {
-    padding: 1em;
-    margin: 0.5em 0;
-    overflow: auto;
+  .has-diff {
+    > .line {
+      &::before {
+        content: attr(data-line-number) '  ';
+        display: inline-block;
+        padding-right: 0.4em;
+        text-align: right;
+        pointer-events: none;
+        user-select: none;
+      }
+      &[data-line-number]::before {
+        min-width: 3em;
+      }
+    }
   }
 
-  .token.punctuation {
-    opacity: 1;
+  .diff {
+    margin-left: calc(var(--spacing-sm) * -1);
+    padding-left: var(--spacing-sm);
+    width: calc(100% + var(--spacing-sm));
+    display: inline-block;
+
+    &.add {
+      background: var(--color-grass-2);
+      &:before {
+        content: attr(data-line-number) ' +';
+        color: var(--color-grass-7);
+      }
+    }
+    &.remove {
+      background: var(--color-raspberry-2);
+
+      &:before {
+        content: attr(data-line-number) ' -';
+        color: var(--color-raspberry-7);
+      }
+    }
   }
 
-  .namespace {
-    opacity: 0.7;
+  .highlighted-word {
+    background: var(--color-carrot-2);
+    border: 1px solid var(--color-carrot-5);
+    border-radius: 4px;
   }
 
-  .token.selector,
-  .token.attr-name,
-  .token.string,
-  .token.char,
-  .token.builtin,
-  .token.inserted {
-    & + a,
-    & + a:visited {
-      color: var(--code-block-tokens-link-color);
-      text-decoration: underline;
+  .has-focused {
+    .line {
+      margin-left: calc(var(--spacing-sm) * -1);
+      padding-left: var(--spacing-sm);
+      width: calc(100% + var(--spacing-sm));
+      display: inline-block;
+
+      opacity: 0.7;
+      filter: blur(0.095rem);
+      transition:
+        filter 0.35s,
+        opacity 0.35s;
+      &.focused {
+        opacity: 1;
+        filter: blur(0);
+      }
+    }
+
+    &:hover {
+      .line {
+        opacity: 1;
+        filter: blur(0);
+      }
     }
   }
 
-  .token.property.string {
-    color: var(--code-block-tokens-property-string-color);
+  /*
+  * Tree view styles
+   */
+
+  .shiki {
+    &.theme {
+      display: inline-block;
+      width: 100%;
+
+      &.tree-view-root {
+        display: flex;
+        flex-direction: column;
+      }
+    }
   }
 
-  .token.important,
-  .token.bold {
-    font-weight: bold;
+  . .line {
+    display: inline-block;
   }
 
-  .token.italic {
-    font-style: italic;
+  .tree-view-line {
+    display: flex;
   }
 
-  .token.entity {
-    cursor: help;
+  .tree-view-branch {
+    color: var(--code-block-tree-view-lines-color);
   }
 
-  .code-line {
-    &:before {
-      content: attr(data-line-number);
-      display: inline-block;
-      min-width: 2em;
-      padding-right: 0.8em;
-      text-align: right;
-      pointer-events: none;
-      user-select: none;
+  .tree-view-file {
+    display: inline-flex;
+    &::before {
+      content: '\\ea01';
+      margin-left: 0.3rem;
+      margin-right: 0.5rem;
+      font-family: 'TreeViewIcons';
     }
-  }
 
-  .highlighted {
-    background: var(--tag-basic-bg-color);
+    &.no-file {
+      &::before {
+        content: '';
+        margin-right: 0;
+      }
+    }
+
+    &.ext-folder {
+      &::before {
+        content: '\\ea02';
+      }
+    }
+
+    &.ext-img,
+    &.ext-png,
+    &.ext-jpg,
+    &.ext-jpeg,
+    &.ext-gif,
+    &.ext-svg {
+      &::before {
+        content: '\\ea03';
+      }
+    }
+
+    &.ext-mp2,
+    &.ext-mp3,
+    &.ext-wav,
+    &.ext-ogg,
+    &.ext-flac {
+      &::before {
+        content: '\\ea04';
+      }
+    }
+
+    &.ext-mp4,
+    &.ext-mkv,
+    &.ext-avi,
+    &.ext-mov,
+    &.ext-wmv,
+    &.ext-flv {
+      &::before {
+        content: '\\ea05';
+      }
+    }
+
+    &.ext-txt,
+    &.ext-text,
+    &.ext-md,
+    &.ext-markdown {
+      &::before {
+        content: '\\ea06';
+      }
+    }
+
+    &.ext-js,
+    &.ext-ts,
+    &.ext-jsx,
+    &.ext-tsx,
+    &.ext-json,
+    &.ext-yaml,
+    &.ext-yml,
+    &.ext-xml,
+    &.ext-html,
+    &.ext-css,
+    &.ext-scss,
+    &.ext-less,
+    &.ext-sass,
+    &.ext-java,
+    &.ext-c,
+    &.ext-cpp,
+    &.ext-cs,
+    &.ext-php,
+    &.ext-py,
+    &.ext-rb,
+    &.ext-go,
+    &.ext-swift,
+    &.ext-sql,
+    &.ext-perl,
+    &.ext-lua,
+    &.ext-scala,
+    &.ext-sh {
+      &::before {
+        content: '\\ea07';
+      }
+    }
+
+    &.ext-zip,
+    &.ext-rar,
+    &.ext-tar,
+    &.ext-gz,
+    &.ext-iso {
+      &::before {
+        content: '\\ea08';
+      }
+    }
+
+    &.ext-pdf,
+    &.ext-PDF {
+      &::before {
+        content: '\\ea09';
+      }
+    }
+
+    &.ext-excel,
+    &.ext-xls,
+    &.ext-xlsx {
+      &::before {
+        content: '\\ea0a';
+      }
+    }
+
+    &.ext-powerpoint,
+    &.ext-ppt,
+    &.ext-pptx {
+      &::before {
+        content: '\\ea0b';
+      }
+    }
+
+    &.ext-doc,
+    &.ext-docx,
+    &.ext-rtf {
+      &::before {
+        content: '\\ea0c';
+      }
+    }
   }
 
   ${(0, utils_1.generateCodeBlockTokens)()}
 
   ${({ hideCodeColors }) => hideCodeColors &&
     (0, styled_components_1.css) `
-      .code-line:not(.highlighted),
-      .code-line:not(.highlighted) > span,
-      .code-line:not(.highlighted) > span > span {
+      .line-number:not(.highlighted),
+      .line-number:not(.highlighted) > span,
+      .line-number:not(.highlighted) > span > span {
         color: grey;
       }
     `}

package/lib/components/CodeBlock/variables.js

@@ -3,6 +3,30 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.code = void 0;
 const styled_components_1 = require("styled-components");
 exports.code = (0, styled_components_1.css) `
+  /**
+    * Tree view icons font
+    */
+  @font-face {
+    font-family: 'TreeViewIcons';
+    /**
+    * Use the following escape sequences to refer to a specific icon:
+    *
+    * - \\ea01 file
+    * - \\ea02 folder
+    * - \\ea03 image
+    * - \\ea04 audio
+    * - \\ea05 video
+    * - \\ea06 text
+    * - \\ea07 code
+    * - \\ea08 archive
+    * - \\ea09 pdf
+    * - \\ea0a excel
+    * - \\ea0b powerpoint
+    * - \\ea0c word
+    */
+    src: url('data:application/font-woff;base64,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') format('woff');
+  }
+  
   /**
     * @tokens Code base styles
     */
@@ -85,10 +109,29 @@ exports.code = (0, styled_components_1.css) `
   --code-block-tokens-atrule-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-attr-value-color: var(--code-block-tokens-keyword-color); // @presenter Color
   --code-block-tokens-regex-color: var(--color-carrot-7); // @presenter Color
+  --code-block-tokens-regex-char-escape-color: var(--color-grass-8); // @presenter Color
   --code-block-tokens-important-color: var(--code-block-tokens-regex-color); // @presenter Color
   --code-block-tokens-deleted-color: var(--color-red-7); // @presenter Color
   --code-block-tokens-class-name-color: var(--color-carrot-7); // @presenter Color
   --code-block-tokens-function-color: var(--color-carrot-7); // @presenter Color
+  --code-block-tokens-invalid-color: var(--color-orange-8); // @presenter Color
+  --code-block-tokens-message-error-color: var(--code-block-tokens-invalid-color); // @presenter Color
+  --code-block-tokens-unmatched-color: var(--code-block-tokens-invalid-color); // @presenter Color
+  --code-block-tokens-markup-bg-color: var(--color-grass-1); // @presenter Color
+  --code-block-tokens-markup-foreground-color: var(--color-grass-8); // @presenter Color
+  --code-block-tokens-markup-changed-color: var(--color-carrot-1); // @presenter Color
+  --code-block-tokens-markup-deleted-color: var(--color-magenta-1); // @presenter Color
+  --code-block-tokens-markup-quote-color: var(--color-grass-8); // @presenter Color
+  --code-block-tokens-markup-ignored-color: var(--color-blue-1); // @presenter Color
+  --code-block-tokens-warm-bg-color: var(--color-warm-grey-2); // @presenter Color
+  --code-block-tokens-warm-foreground-color: var(--color-warm-grey-8); // @presenter Color
+  --code-block-tokens-meta-diff-range-color: var(--color-purple-8); // @presenter Color
+
+  /**
+    * @tokens Code Block tree view
+   */
+  --code-block-tree-view-icon-font-family: 'TreeViewIcons'; // @presenter FontFamily
+  --code-block-tree-view-lines-color: var(--border-color-primary); // @presenter Color
 
   // @tokens End
 `;

package/lib/components/Link/Link.js

@@ -41,7 +41,7 @@ const react_router_dom_1 = require("react-router-dom");
 const contexts_1 = require("../../core/contexts");
 function Link(props) {
     const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
-    if (context) {
+    if (context === null || context === void 0 ? void 0 : context.components) {
         const { LinkComponent } = context.components;
         return React.createElement(LinkComponent, Object.assign({}, props));
     }

package/lib/core/hooks/use-theme-config.js

@@ -6,7 +6,7 @@ const contexts_1 = require("../../core/contexts");
 // TODO: rename and additionally export as alias for backward compatibility
 function useThemeConfig(useProductConfig = true) {
     const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);
-    if (!context) {
+    if (!(context === null || context === void 0 ? void 0 : context.config)) {
         return {};
     }
     const { config, hooks } = context;

package/lib/core/hooks/use-theme-hooks.js

@@ -10,6 +10,7 @@ const fallbacks = {
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
     useTelemetry: () => ({ telemetry: () => { } }),
     useBreadcrumbs: () => [],
+    useCodeHighlight: () => ({ highlight: (rawContent) => rawContent }),
 };
 const useThemeHooks = () => {
     const context = (0, react_1.useContext)(contexts_1.ThemeDataContext);

package/lib/core/types/hooks.d.ts

@@ -98,6 +98,13 @@ export type ThemeHooks = {
     };
     useUserTeams: () => string[];
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;
+    useCodeHighlight: () => {
+        highlight: (code: string, language?: string | undefined, highlightOptions?: {
+            withLineNumbers?: boolean;
+            startLineNumber?: number;
+            highlight?: string;
+        }) => string;
+    };
 };
 export type L10nConfig = {
     currentLocale: string;

package/lib/core/utils/add-line-numbers.d.ts

@@ -0,0 +1,6 @@
+/**
+ * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
+ * @param start - The number to start the line numbering from; default is 1
+ * @returns A string with line numbers added before each line
+ */
+export declare function addLineNumbers(highlightedCode: string, start?: number): string;

package/lib/core/utils/add-line-numbers.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.addLineNumbers = addLineNumbers;
+const NEW_LINE_EXP = /\n(?!$)/g;
+/**
+ * @param highlightedCode - A string with new line breaks; the line numbers will be added before each line.
+ * @param start - The number to start the line numbering from; default is 1
+ * @returns A string with line numbers added before each line
+ */
+function addLineNumbers(highlightedCode, start = 1) {
+    const codeLines = highlightedCode.split(NEW_LINE_EXP);
+    return codeLines
+        .map((line, i) => {
+        return `<span class='line' data-line-number='${start + i}'>${line}</span>`;
+    })
+        .join('\n');
+}
+//# sourceMappingURL=add-line-numbers.js.map

package/lib/core/utils/index.d.ts

@@ -1,6 +1,6 @@
 export * from '../../core/utils/clipboard-service';
 export * from '../../core/utils/css-variables';
-export * from '../../core/utils/highlight';
+export * from '../../core/utils/add-line-numbers';
 export * from '../../core/utils/media-css';
 export * from '../../core/utils/theme-helpers';
 export * from '../../core/utils/class-names';

package/lib/core/utils/index.js

@@ -16,7 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("../../core/utils/clipboard-service"), exports);
 __exportStar(require("../../core/utils/css-variables"), exports);
-__exportStar(require("../../core/utils/highlight"), exports);
+__exportStar(require("../../core/utils/add-line-numbers"), exports);
 __exportStar(require("../../core/utils/media-css"), exports);
 __exportStar(require("../../core/utils/theme-helpers"), exports);
 __exportStar(require("../../core/utils/class-names"), exports);

package/lib/markdoc/components/Cards/Card.d.ts

@@ -5,6 +5,7 @@ export type CardProps = React.PropsWithChildren<{
     icon?: string;
     iconRawContent?: string;
     imagePosition?: 'start' | 'end';
+    iconPosition?: 'auto' | 'start' | 'center' | 'end';
     lineClamp?: number;
     layout?: 'horizontal' | 'vertical' | 'combined';
     variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
@@ -12,4 +13,4 @@ export type CardProps = React.PropsWithChildren<{
     align?: 'start' | 'center' | 'end';
     to?: string;
 }>;
-export declare function Card({ title, image, icon, iconRawContent, imagePosition, layout, variant, lineClamp, iconVariant, align, to, children, }: CardProps): React.JSX.Element;
+export declare function Card({ title, image, icon, iconRawContent, imagePosition, iconPosition, layout, variant, lineClamp, iconVariant, align, to, children, }: CardProps): React.JSX.Element;

package/lib/markdoc/components/Cards/Card.js

@@ -10,7 +10,7 @@ const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRight
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
 const Link_1 = require("../../../components/Link/Link");
-function Card({ title, image, icon, iconRawContent, imagePosition = 'start', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
+function Card({ title, image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant, align = 'start', to, children, }) {
     const titleNoSpaces = title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
@@ -21,7 +21,7 @@ function Card({ title, image, icon, iconRawContent, imagePosition = 'start', lay
         react_1.default.createElement(react_1.default.Fragment, null,
             image ? react_1.default.createElement(CardImage_1.CardImage, { src: image, alt: title, position: imagePosition }) : null,
             react_1.default.createElement(CardContentWrapper, { "$layout": layout, "$alignItems": alignItems, "$textAlign": textAlign, "$hasImage": image !== undefined },
-                icon && react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent }),
+                icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition })),
                 react_1.default.createElement(ContentWrapper, null,
                     react_1.default.createElement(Title, { id: cardTitleId, "$isCardLink": !!to, "$justifyContent": justifyContent },
                         title,

package/lib/markdoc/components/Cards/CardIcon.d.ts

@@ -3,5 +3,6 @@ export type CardIconProps = {
     variant?: string;
     src: string;
     rawContent?: string;
+    position?: 'auto' | 'start' | 'center' | 'end';
 };
-export declare function CardIcon({ variant, src, rawContent }: CardIconProps): React.JSX.Element;
+export declare function CardIcon({ variant, src, rawContent, position }: CardIconProps): React.JSX.Element;