@redocly/theme 0.69.0-next.0 → 0.69.0-next.10

package/lib/markdoc/components/Accordion/Accordion.js

@@ -0,0 +1,132 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Accordion = Accordion;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
+const constants_1 = require("../../../core/constants");
+function Accordion({ title, expanded = false, className, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(AccordionWrapper, { className: className, open: expanded, "data-component-name": constants_1.ACCORDION_COMPONENT_NAME, "data-source": dataSource, "data-hash": dataHash },
+        react_1.default.createElement(AccordionSummary, null,
+            react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { color: "--md-accordion-chevron-icon-color", size: "var(--md-accordion-chevron-icon-size)" }),
+            title),
+        react_1.default.createElement(AccordionBody, null, children)));
+}
+const AccordionWrapper = styled_components_1.default.details `
+  margin: var(--md-accordion-margin);
+  border: var(--md-accordion-border);
+  border-radius: var(--md-accordion-border-radius);
+  font-family: var(--md-accordion-font-family);
+  overflow: hidden;
+
+  &[open] > summary svg {
+    transform: rotate(90deg);
+  }
+`;
+const AccordionSummary = styled_components_1.default.summary `
+  display: flex;
+  align-items: center;
+  gap: var(--md-accordion-gap);
+  cursor: pointer;
+  list-style: none;
+
+  background-color: var(--md-accordion-header-bg-color);
+  color: var(--md-accordion-header-text-color);
+  font-weight: var(--md-accordion-header-font-weight);
+  font-size: var(--md-accordion-header-font-size);
+  line-height: var(--md-accordion-header-line-height);
+  padding: var(--md-accordion-header-padding);
+
+  &::-webkit-details-marker {
+    display: none;
+  }
+
+  &:hover {
+    background-color: var(--md-accordion-header-bg-color-hover);
+  }
+
+  &:focus-visible {
+    outline: none;
+    position: relative;
+
+    &::after {
+      content: '';
+      position: absolute;
+      inset: 2px;
+      border: 1px solid var(--button-border-color-focused);
+      border-radius: calc(var(--md-accordion-border-radius) - 2px);
+      pointer-events: none;
+    }
+  }
+
+  svg {
+    flex-shrink: 0;
+    transition: transform 0.15s ease-out;
+  }
+`;
+const showAccordionBody = (0, styled_components_1.keyframes) `
+  0% {
+    opacity: 0;
+    transform: translateY(-5px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+`;
+const AccordionBody = styled_components_1.default.div `
+  padding: var(--md-accordion-body-padding);
+  background-color: var(--md-accordion-body-bg-color);
+  color: var(--md-accordion-body-text-color);
+  font-size: var(--md-accordion-body-font-size);
+  line-height: var(--md-accordion-body-line-height);
+
+  details[open] > & {
+    animation: ${showAccordionBody} 0.15s ease-out;
+  }
+
+  > :first-child {
+    margin-top: 0;
+  }
+
+  > :last-child {
+    margin-bottom: 0;
+  }
+`;
+//# sourceMappingURL=Accordion.js.map

package/lib/markdoc/components/Accordion/AccordionGroup.d.ts

@@ -0,0 +1,5 @@
+import type { JSX, PropsWithChildren } from 'react';
+export type AccordionGroupProps = {
+    className?: string;
+};
+export declare function AccordionGroup({ className, children, }: PropsWithChildren<AccordionGroupProps>): JSX.Element;

package/lib/markdoc/components/Accordion/AccordionGroup.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AccordionGroup = AccordionGroup;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const constants_1 = require("../../../core/constants");
+function AccordionGroup({ className, children, }) {
+    return (react_1.default.createElement(AccordionGroupWrapper, { className: className, "data-component-name": constants_1.ACCORDION_GROUP_COMPONENT_NAME }, children));
+}
+const AccordionGroupWrapper = styled_components_1.default.div `
+  margin: var(--md-accordion-group-margin);
+  border: var(--md-accordion-group-border);
+  border-radius: var(--md-accordion-group-border-radius);
+  overflow: hidden;
+
+  & > ${constants_1.ACCORDION_SELECTOR} {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+  }
+
+  & > ${constants_1.ACCORDION_SELECTOR} + ${constants_1.ACCORDION_SELECTOR} {
+    border-top: var(--md-accordion-group-divider);
+  }
+`;
+//# sourceMappingURL=AccordionGroup.js.map

package/lib/markdoc/components/Accordion/variables.d.ts

@@ -0,0 +1 @@
+export declare const markdownAccordion: import("styled-components").RuleSet<object>;

package/lib/markdoc/components/Accordion/variables.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.markdownAccordion = void 0;
+const styled_components_1 = require("styled-components");
+exports.markdownAccordion = (0, styled_components_1.css) `
+  /**
+  *  @tokens Markdown Accordion
+  */
+
+  --md-accordion-group-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-group-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-group-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-group-divider: 1px solid var(--border-color-secondary); // @presenter Border
+
+  --md-accordion-margin: var(--spacing-base) 0; // @presenter Spacing
+  --md-accordion-border: 1px solid var(--border-color-secondary); // @presenter Border
+  --md-accordion-border-radius: var(--border-radius-xl); // @presenter BorderRadius
+  --md-accordion-gap: var(--spacing-xs); // @presenter Spacing
+  --md-accordion-font-family: var(--font-family-base); // @presenter FontFamily
+
+  --md-accordion-chevron-icon-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-chevron-icon-size: 16px;
+
+  --md-accordion-header-bg-color: var(--layer-color); // @presenter Color
+  --md-accordion-header-bg-color-hover: var(--layer-color-hover); // @presenter Color
+  --md-accordion-header-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-header-font-weight: var(--font-weight-semibold); // @presenter FontWeight
+  --md-accordion-header-line-height: var(--line-height-lg); // @presenter LineHeight
+  --md-accordion-header-font-size: var(--font-size-lg); // @presenter FontSize
+  --md-accordion-header-padding: var(--spacing-sm) var(--spacing-md); // @presenter Spacing
+
+  --md-accordion-body-bg-color: var(--bg-color); // @presenter Color
+  --md-accordion-body-text-color: var(--text-color-primary); // @presenter Color
+  --md-accordion-body-font-size: var(--font-size-base); // @presenter FontSize
+  --md-accordion-body-line-height: var(--line-height-base); // @presenter LineHeight
+  --md-accordion-body-padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md); // @presenter Spacing
+
+  // @tokens End
+`;
+//# sourceMappingURL=variables.js.map

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

@@ -10,7 +10,14 @@ export type CardProps = React.PropsWithChildren<{
     layout?: 'horizontal' | 'vertical' | 'combined';
     variant?: 'filled' | 'outlined' | 'elevated' | 'ghost';
     iconVariant?: 'filled' | 'ghost';
+    iconColor?: string;
     align?: 'start' | 'center' | 'end';
     to?: string;
+    linkIcon?: 'chevron' | 'arrow';
+    cta?: React.ReactNode;
+    badge?: string;
+    badgeColor?: string;
+    badgeIcon?: string;
+    badgeIconRawContent?: string;
 }>;
-export declare function Card({ title, image, icon, iconRawContent, imagePosition, iconPosition, 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, iconColor, align, to, cta, linkIcon, badge, badgeColor, badgeIcon, badgeIconRawContent, children, }: CardProps): React.JSX.Element;

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

@@ -7,10 +7,12 @@ exports.Card = Card;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const ChevronRightIcon_1 = require("../../../icons/ChevronRightIcon/ChevronRightIcon");
+const ArrowUpRightIcon_1 = require("../../../icons/ArrowUpRightIcon/ArrowUpRightIcon");
 const CardImage_1 = require("../../../markdoc/components/Cards/CardImage");
 const CardIcon_1 = require("../../../markdoc/components/Cards/CardIcon");
+const CardBadge_1 = require("../../../markdoc/components/Cards/CardBadge");
 const Link_1 = require("../../../components/Link/Link");
-function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', align = 'start', to, children, }) {
+function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start', iconPosition = 'auto', layout = 'vertical', variant = 'filled', lineClamp, iconVariant = 'filled', iconColor, align = 'start', to, cta, linkIcon, badge, badgeColor, badgeIcon, badgeIconRawContent, children, }) {
     const titleNoSpaces = title === null || title === void 0 ? void 0 : title.replace(/\s+/g, '-').toLowerCase();
     const cardTitleId = `card-title-${titleNoSpaces}`;
     const justifyContent = align === 'center' ? 'center' : align === 'end' ? 'flex-end' : 'flex-start';
@@ -20,12 +22,20 @@ function Card({ title = '', image, icon, iconRawContent, imagePosition = 'start'
         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, position: iconPosition })),
+                icon && (react_1.default.createElement(CardIcon_1.CardIcon, { variant: iconVariant, src: icon, rawContent: iconRawContent, position: iconPosition, color: iconColor })),
                 react_1.default.createElement(ContentWrapper, null,
-                    react_1.default.createElement(Title, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
-                        title,
-                        variant == 'ghost' && !!to && react_1.default.createElement(CardLinkIcon, null)),
-                    react_1.default.createElement(Body, { $lineClamp: lineClamp }, children))))));
+                    react_1.default.createElement(TitleWrapper, { id: cardTitleId, $isCardLink: !!to, $justifyContent: justifyContent },
+                        react_1.default.createElement(Title, null,
+                            title,
+                            !!to && !!linkIcon && (react_1.default.createElement(CardLinkIcon, { as: linkIcon === 'arrow' ? ArrowUpRightIcon_1.ArrowUpRightIcon : undefined }))),
+                        !!badge && (react_1.default.createElement(CardBadge_1.CardBadge, { color: badgeColor, icon: badgeIcon, iconRawContent: badgeIconRawContent }, badge))),
+                    react_1.default.createElement(Body, { $lineClamp: lineClamp }, children),
+                    !!to && !!cta && (react_1.default.createElement(Cta, { $justifyContent: justifyContent },
+                        react_1.default.createElement(CtaText, null,
+                            " ",
+                            cta,
+                            " "),
+                        react_1.default.createElement(CtaIcon, null))))))));
 }
 const CardContentWrapper = styled_components_1.default.div `
   display: flex;
@@ -44,24 +54,26 @@ const ContentWrapper = styled_components_1.default.div `
   gap: var(--card-content-gap);
   width: 100%;
 `;
-const Title = styled_components_1.default.h3 `
-  margin: var(--card-title-margin);
-  font-weight: var(--card-title-font-weight);
+const TitleWrapper = styled_components_1.default.div `
   color: var(--card-title-text-color);
   display: flex;
   align-items: center;
+  flex-wrap: wrap;
+  row-gap: var(--card-title-row-gap);
   justify-content: ${({ $justifyContent }) => $justifyContent};
   width: 100%;
 `;
+const Title = styled_components_1.default.h3 `
+  margin: var(--card-title-margin);
+  font-weight: var(--card-title-font-weight);
+`;
+// The `as` prop selects the icon; the chevron is the default target.
 const CardLinkIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
   width: var(--card-link-icon-width);
   height: var(--card-link-icon-height);
-  color: var(--card-link-icon-color);
+  color: var(--icon-color-secondary);
   margin-left: var(--spacing-xxs);
-  opacity: 0;
-  transition:
-    opacity 0.3s,
-    transform 0.3s;
+  margin-top: calc(var(--spacing-xxs) / 2);
 `;
 const Body = styled_components_1.default.div `
   color: var(--card-text-color);
@@ -84,6 +96,26 @@ const Body = styled_components_1.default.div `
     margin-bottom: 0;
   }
 `;
+const Cta = styled_components_1.default.div `
+  display: flex;
+  gap: var(--card-cta-gap);
+  align-items: center;
+  margin-top: var(--card-cta-margin-top);
+  color: var(--card-cta-text-color);
+  font-size: var(--card-cta-font-size);
+  justify-content: ${({ $justifyContent }) => $justifyContent};
+    
+  && > * {
+    cursor: pointer;
+  }  
+`;
+const CtaText = styled_components_1.default.span `
+  font-weight: var(--card-cta-font-weight);
+`;
+const CtaIcon = (0, styled_components_1.default)(ChevronRightIcon_1.ChevronRightIcon) `
+  width: var(--card-cta-icon-width);
+  height: var(--card-cta-icon-height);
+`;
 const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $variant }) => ({
     className: getCardWrapperClass($isCardLink, $variant),
 })) `
@@ -112,6 +144,13 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
       height: 100%;
       object-fit: cover;
     `}
+  } 
+    
+  &:hover,
+  &:focus-within {
+    ${Cta} {
+      color: var(--card-link-icon-color);
+    }
   }
 
   &.card-link {
@@ -130,8 +169,8 @@ const CardWrapper = styled_components_1.default.div.attrs(({ $isCardLink, $varia
         background-color: var(--card-icon-bg-color-hover);
       }
 
-      svg {
-        opacity: 1;
+      ${CardLinkIcon} {
+        color: var(--card-link-icon-color);
       }
     }
   }

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

@@ -0,0 +1,9 @@
+import React from 'react';
+export type CardBadgeProps = React.PropsWithChildren<{
+    color?: string;
+    icon?: string;
+    /** Inline SVG content for the icon */
+    iconRawContent?: string;
+    className?: string;
+}>;
+export declare function CardBadge({ color, icon, iconRawContent, className, children }: CardBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,30 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CardBadge = CardBadge;
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Badge_1 = require("../../../components/Badge/Badge");
+function CardBadge({ color, icon, iconRawContent, className, children }) {
+    // `tag-default` keeps a badge grey when the name is absent or unknown.
+    const classNames = ['tag-default', color && `tag-${color}`, className].filter(Boolean).join(' ');
+    return (react_1.default.createElement(CardBadgeWrapper, { className: classNames, icon: icon, iconRawContent: iconRawContent }, children));
+}
+const CardBadgeWrapper = (0, styled_components_1.default)(Badge_1.Badge) `
+  display: flex;
+  align-items: center;
+  margin: var(--card-badge-margin);
+  padding: var(--card-badge-padding);
+  border-radius: var(--card-badge-border-radius);
+  font-size: var(--card-badge-font-size);
+  font-weight: var(--card-badge-font-weight);
+  line-height: var(--card-badge-line-height);
+  white-space: nowrap;
+  flex-shrink: 0;
+
+  --badge-text-color: var(--tag-color);
+  --badge-bg-color: var(--tag-bg-color);
+`;
+//# sourceMappingURL=CardBadge.js.map

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

@@ -1,15 +1,16 @@
 import React from 'react';
 export type CardIconProps = {
-    variant?: string;
+    variant?: 'filled' | 'ghost';
     src: string;
     rawContent?: string;
     position?: 'auto' | 'start' | 'center' | 'end';
+    color?: string;
 };
-export declare function CardIcon({ variant, src, rawContent, position }: CardIconProps): React.JSX.Element;
+export declare function CardIcon({ variant, src, rawContent, position, color }: CardIconProps): React.JSX.Element;
 export declare const CardIconWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
-    $variant?: string;
+    $variant?: 'filled' | 'ghost';
     $position?: string;
 }, never> & Partial<Pick<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "$position" | "$variant"> & {
-    $variant?: string;
+    $variant?: 'filled' | 'ghost';
     $position?: string;
 }, never>>> & string;

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

@@ -8,14 +8,17 @@ exports.CardIcon = CardIcon;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const GenericIcon_1 = require("../../../icons/GenericIcon/GenericIcon");
-function CardIcon({ variant, src, rawContent, position }) {
-    return (react_1.default.createElement(exports.CardIconWrapper, { $variant: variant, $position: position },
+function CardIcon({ variant, src, rawContent, position, color }) {
+    return (react_1.default.createElement(exports.CardIconWrapper, { className: color && `card-icon-color-${color}`, $variant: variant, $position: position },
         react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: src, rawContent: rawContent })));
 }
 exports.CardIconWrapper = styled_components_1.default.div `
+  --card-icon-bg-color-hover: ${({ $variant }) => $variant === 'ghost' && 'transparent'};
   --icon-width: var(--card-icon-width);
   --icon-height: var(--card-icon-height);
   color: var(--card-icon-color);
+  /* An inline SVG fills from this. */
+  --icon-color: var(--card-icon-color);
 
   display: flex;
   align-self: ${({ $position }) => ($position ? $position : 'auto')};
@@ -24,7 +27,7 @@ exports.CardIconWrapper = styled_components_1.default.div `
   min-height: var(--card-icon-height);
   flex-shrink: 0;
 
-  padding: var(--card-icon-padding);
+  padding: ${({ $variant }) => ($variant === 'ghost' ? 0 : `var(--card-icon-padding)`)};
   border: ${({ $variant }) => $variant !== 'ghost' && `var(--card-icon-border)`};
   border-radius: var(--card-icon-border-radius);
   overflow: hidden;

package/lib/markdoc/components/Cards/variables.dark.js

@@ -23,6 +23,38 @@ exports.cardsDarkMode = (0, styled_components_1.css) `
     --card-box-shadow: 0px 8px 24px -4px #00000014, 0px 6px 12px -6px #0000001F;
     --card-box-shadow-hover: 0px 14px 64px -4px #0000001F, 0px 8px 22px -6px #0000001F;
   }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--color-warm-grey-8);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-6);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-4);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-6);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-7);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-7);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-6);
+  }
 `;
 /* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.dark.js.map

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

@@ -23,24 +23,38 @@ exports.cards = (0, styled_components_1.css) `
   --card-border-radius: var(--border-radius-xl);
   --card-border-style: solid;
   --card-link-cursor: pointer;
-  --card-link-icon-width: var(--h3-font-size);
-  --card-link-icon-height: var(--h3-font-size);
+  --card-link-icon-width: 14px;
+  --card-link-icon-height: 14px;
   --card-border-width: 1px;
-  --card-image-border-radius: var(--border-radius-md);
+  --card-image-border-radius: var(--border-radius-xl);
   --card-image-aspect-ratio: 16 / 9;
-  --card-icon-border-radius: var(--border-radius-md);
+  --card-icon-border-radius: var(--border-radius-lg);
   --card-icon-border: var(--card-border-width) var(--border-style) var(--card-icon-border-color);
   --card-icon-padding: var(--spacing-sm);
   --card-icon-size: 24px;
   --card-icon-height: var(--card-icon-size);
   --card-icon-width: var(--card-icon-size);
   --card-icon-gap: var(--spacing-base);
-  --card-title-margin: 0;
+  --card-title-margin: 0 var(--spacing-xs) 0 0;
   --card-title-font-weight: var(--font-weight-semibold);
+  --card-title-row-gap: var(--spacing-xxs);
   --card-content-gap: 4px;
   --card-padding: 16px 20px;
   --card-body-font-size: var(--font-size-base);
   --card-body-line-height: var(--line-height-base);
+  --card-cta-margin-top: var(--spacing-base);
+  --card-cta-gap: var(--spacing-xxs);
+  --card-cta-font-size: var(--font-size-base);
+  --card-cta-font-weight: var(--font-weight-regular);  
+  --card-cta-text-color: var(--text-color-secondary);
+  --card-cta-icon-width: 14px;
+  --card-cta-icon-height: 14px;
+  --card-badge-margin: 0 var(--spacing-xxs) 0 0 ;
+  --card-badge-padding: 0 var(--spacing-xxs);
+  --card-badge-border-radius: var(--badge-border-radius);
+  --card-badge-font-size: var(--font-size-sm);
+  --card-badge-font-weight: var(--font-weight-regular);
+  --card-badge-line-height: var(--line-height-sm);
 
   /**
    * @tokens Card variants
@@ -76,7 +90,7 @@ exports.cards = (0, styled_components_1.css) `
     --card-bg-color: transparent;
     --card-bg-color-hover: var(--layer-color);
     --card-border-width: 0;
-    --card-border-radius: var(--border-radius-md);
+    --card-border-radius: var(--border-radius-xl);
     --card-padding: var(--spacing-xs) 0;
     --card-icon-border-color-hover: var(--card-icon-border-color);
     --card-icon-bg-color-hover: var(--card-icon-bg-color);
@@ -84,6 +98,66 @@ exports.cards = (0, styled_components_1.css) `
     --card-hover-transition: initial;
   }
 
+  /**
+   * @tokens Card icon colors
+   */
+  .card-icon-color-red {
+    --card-icon-color: var(--color-red-7);
+  }
+
+  .card-icon-color-green {
+    --card-icon-color: var(--color-green-8);
+  }
+
+  .card-icon-color-blue {
+    --card-icon-color: var(--color-blue-7);
+  }
+
+  .card-icon-color-grey {
+    --card-icon-color: var(--text-color-secondary);
+  }
+
+  .card-icon-color-turquoise {
+    --card-icon-color: var(--color-turquoise-8);
+  }
+
+  .card-icon-color-magenta {
+    --card-icon-color: var(--color-magenta-7);
+  }
+
+  .card-icon-color-purple {
+    --card-icon-color: var(--color-purple-7);
+  }
+
+  .card-icon-color-carrot {
+    --card-icon-color: var(--color-carrot-8);
+  }
+
+  .card-icon-color-raspberry {
+    --card-icon-color: var(--color-raspberry-7);
+  }
+
+  .card-icon-color-orange {
+    --card-icon-color: var(--color-orange-7);
+  }
+
+  .card-icon-color-grass {
+    --card-icon-color: var(--color-grass-8);
+  }
+
+  .card-icon-color-persian-green {
+    --card-icon-color: var(--color-persian-green-8);
+  }
+
+  .card-icon-color-sky {
+    --card-icon-color: var(--color-sky-8);
+  }
+
+  .card-icon-color-blueberry {
+    --card-icon-color: var(--color-blueberry-7);
+  }
+
+  // @tokens End
 `;
-/* eslint-enable theme/no-raw-colors-in-styles */ 
+/* eslint-enable theme/no-raw-colors-in-styles */
 //# sourceMappingURL=variables.js.map

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -67,6 +67,7 @@ const CodePanelWrapper = styled_components_1.default.div `
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);
   border-radius: var(--code-panel-border-radius);
+  overflow: clip;
   --code-block-max-height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   height: calc(100vh - var(--navbar-height) - 2 * var(--spacing-xl));
   position: sticky;

package/lib/markdoc/components/CodeWalkthrough/CodeStep.js

@@ -113,7 +113,7 @@ const StepContent = styled_components_1.default.div.withConfig({
   margin: var(--spacing-xs) 0px var(--spacing-xs) calc(var(--spacing-unit) * 3.5);
   padding: var(--spacing-md) var(--spacing-lg);
   background: ${({ isActive }) => (isActive ? 'var(--layer-color)' : 'none')};
-  border-radius: var(--border-radius);
+  border-radius: var(--code-step-border-radius);
 
   &:hover {
     background-color: ${({ isActive }) => isActive ? 'var(--code-step-bg-active-hover)' : 'var(--code-step-bg-hover)'};

package/lib/markdoc/components/CodeWalkthrough/variables.js

@@ -9,11 +9,12 @@ exports.codeWalkthrough = (0, styled_components_1.css) `
 --code-step-bg-active: var(--layer-color);
 --code-step-bg-hover: var(--color-hover-base);
 --code-step-bg-active-hover: var(--layer-color-hover);
+--code-step-border-radius: var(--border-radius-lg);
 
 --code-panel-bg-color: var(--layer-color);
 --code-panel-line-numbering-color: var(--text-color-disabled);
 --code-panel-header-height: var(--spacing-lg);
 --code-panel-border-color: var(--border-color-secondary);
---code-panel-border-radius: var(--border-radius);
+--code-panel-border-radius: var(--border-radius-xl);
 `;
 //# sourceMappingURL=variables.js.map