@readme/markdown 15.0.1 → 15.0.2

package/dist/processor/transform/flatten-attribute-expressions.d.ts

@@ -0,0 +1,11 @@
+import type { Transform } from 'mdast-util-from-markdown';
+/**
+ * Rewrites JSX attribute expressions (`icon={String(1 + 3)}`) into plain string attributes
+ * holding their literal source, so nothing downstream can evaluate them.
+ *
+ * This is the RMDX counterpart to mdxish's `preserveExpressionsAsText` parse option: safeMode's
+ * contract is enforced once, at the head of the pipeline, rather than at every `getAttrs()` call
+ * site. Only registered when safeMode is on.
+ */
+declare const flattenAttributeExpressions: () => Transform;
+export default flattenAttributeExpressions;

package/dist/processor/transform/index.d.ts

@@ -1,5 +1,6 @@
 import compatabilityTransfomer from './compatability';
 import divTransformer from './div';
+import flattenAttributeExpressions from './flatten-attribute-expressions';
 import handleMissingComponents from './handle-missing-components';
 import injectComponents from './inject-components';
 import mdxToHast from './mdx-to-hast';
@@ -11,7 +12,7 @@ import tablesToJsx from './tables-to-jsx';
 import tailwindTransformer from './tailwind';
 import validateMCPIntro from './validate-mcpintro';
 import variablesTransformer from './variables';
-export { compatabilityTransfomer, divTransformer, injectComponents, mdxToHast, mdxishTables, mermaidTransformer, readmeComponentsTransformer, readmeToMdx, tablesToJsx, tailwindTransformer, handleMissingComponents, validateMCPIntro, variablesTransformer, };
+export { compatabilityTransfomer, divTransformer, flattenAttributeExpressions, injectComponents, mdxToHast, mdxishTables, mermaidTransformer, readmeComponentsTransformer, readmeToMdx, tablesToJsx, tailwindTransformer, handleMissingComponents, validateMCPIntro, variablesTransformer, };
 export declare const defaultTransforms: {
     calloutTransformer: ({ isMdxish }?: {
         isMdxish?: boolean;

package/dist/render-fixture.css

@@ -1,6 +1,6 @@
 .Accordion{background:rgba(var(--color-bg-page-rgb, white), 1);border:1px solid var(--color-border-default, rgba(0, 0, 0, 0.1));border-radius:5px}.Accordion-title{align-items:center;background:rgba(var(--color-bg-page-rgb, white), 1);border:0;border-radius:5px;color:var(--color-text-default, #384248);cursor:pointer;display:flex;font-size:16px;font-weight:500;padding:10px;position:relative;text-align:left;width:100%}.Accordion-title:hover{background:var(--color-bg-hover, rgba(0, 0, 0, 0.05))}.Accordion[open] .Accordion-title{border-bottom-left-radius:0;border-bottom-right-radius:0}.Accordion-title::marker{content:""}.Accordion-title::-webkit-details-marker{display:none}.Accordion-toggleIcon,.Accordion-toggleIcon_opened{color:var(--color-text-minimum, #637288);font-size:14px;margin-left:5px;margin-right:10px;transition:transform .1s}.Accordion-toggleIcon_opened,.Accordion-toggleIcon_opened_opened{transform:rotate(90deg)}.Accordion-icon{color:var(--project-color-primary, inherit);margin-right:10px}.Accordion-content{color:var(--color-text-muted, #4f5a66);padding:5px 15px 0 15px}.Accordion-content>*{margin-bottom:var(--markdown-spacing, 15px)}
 .CardsGrid{--CardsGrid-gap: 1.5em;--CardsGrid-columns: auto-fit;--CardsGrid-cardWidth: auto;display:grid;gap:var(--CardsGrid-gap);grid-template-columns:repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr))}.Card{--Card-badge-bg-color: var(--yellow);--Card-badge-color: var(--yellow10);--Card-content-color: var(--color-text-minimum);--Card-gap: 0.25em;--Card-href-arrow-opacity: 0;--Card-href-arrow-transform: translateX(-5px);--Card-icon-color: var(--color-text-default);--Card-icon-opacity: 0.65;--Card-icon-opacity-hover: 0.75;--Card-line-height: 1.4;--Card-shadow: none;--Card-title-color: var(--color-text-default);background:var(--Card-bg-color);border:1px solid var(--Card-border-color);border-radius:var(--border-radius-lg);box-shadow:var(--Card-shadow);display:flex;flex-direction:var(--Card-layout);gap:var(--Card-gap);line-height:var(--Card-line-height);padding:var(--Card-padding);text-decoration:none}.Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);--Card-border-color: var(--color-border-default);--Card-layout: column;--Card-padding: 1.5em}[data-color-mode=dark] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}@media(prefers-color-scheme: dark){[data-color-mode=auto] .Card_card,[data-color-mode=system] .Card_card{--Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);--Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1)}}.Card_tile{--Card-gap: 1em;--Card-icon-opacity: 0.5;--Card-layout: row}.Card_tile .Card-content{--Card-gap: 0}.Card[href]:not([href=""]){color:inherit;text-decoration:none}.Card[href]:not([href=""]):hover,.Card[href]:not([href=""]):active,.Card[href]:not([href=""]):focus{--Card-icon-opacity: var(--Card-icon-opacity-hover);--Card-href-arrow-opacity: 0.75;--Card-href-arrow-transform: none;background:var(--Card-bg-color-hover)}.Card-icon{color:var(--Card-icon-color);font-size:1.4em;margin-bottom:.5em;opacity:var(--Card-icon-opacity);transition:opacity var(--transition-timing) var(--transition-fast)}.Card-title{align-items:flex-start;color:var(--Card-title-color);display:flex;gap:.5em;font-weight:var(--font-weight-bold)}.Card-badge{align-items:center;background:var(--Card-badge-bg-color);border-radius:1em;color:var(--Card-badge-color);font-size:.6em;padding:0 .5em;display:inline-flex;position:relative;top:.5em}.Card-arrow{font-size:.8em;opacity:var(--Card-href-arrow-opacity);position:relative;top:.375em;transition:opacity var(--transition-timing) var(--transition-fast),transform var(--transition-timing) var(--transition-fast);transform:var(--Card-href-arrow-transform)}.Card-content{color:var(--Card-content-color);display:flex;flex-direction:column;font-size:1em;gap:var(--Card-gap)}.Card-content p:last-child{margin-bottom:0}
 .Columns{display:grid;gap:var(--md, 20px)}@media(max-width: 414px){.Columns{grid-template-columns:1fr !important}}
-.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--color-tab-active, currentcolor);color:var(--color-tab-active, currentcolor);font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}
+.TabGroup-nav{border-bottom:solid var(--color-border-default, rgba(0, 0, 0, 0.1));margin-bottom:15px}.TabGroup-tab{background:none;border:0;color:var(--color-text-minimum, #637288);cursor:pointer;font-size:15px;font-weight:600;margin-right:15px;padding:0;padding-bottom:10px}.TabGroup-tab_active{background:none;border:0;border-bottom:solid var(--color-tab-active, currentcolor);color:var(--color-tab-active, currentcolor);font-size:15px;font-weight:600;margin-right:15px;margin-bottom:-2px;padding:0;padding-bottom:10px}.TabGroup-tab:hover{color:var(--color-text-muted, #4f5a66)}.TabGroup-icon{color:var(--project-color-primary, inherit);margin-right:10px}.TabGroup .TabContent{color:var(--color-text-muted, #4f5a66)}:where(.TabGroup .TabContent>*:not(:last-child)){margin-bottom:var(--markdown-spacing, 15px)}
 
 /*# sourceMappingURL=render-fixture.css.map*/

package/dist/render-fixture.css.map

@@ -1 +1 @@
-{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;ACzDN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAGF,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCXA,kCDcE,8DACA,mECTA,mCAFF,sEDUE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE7HN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uC","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/dark-mode.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n  background: rgba(var(--color-bg-page-rgb, white), 1);\n  border: 1px solid var(--color-border-default, rgba(black, 0.1));\n  border-radius: 5px;\n\n  &-title {\n    align-items: center;\n    background: rgba(var(--color-bg-page-rgb, white), 1);\n    border: 0;\n    border-radius: 5px;\n    color: var(--color-text-default, #384248);\n    cursor: pointer;\n    display: flex;\n    font-size: 16px;\n    font-weight: 500;\n    padding: 10px;\n    position: relative;\n    text-align: left;\n    width: 100%;\n\n    &:hover {\n      background: var(--color-bg-hover, rgba(black, 0.05));\n    }\n\n    .Accordion[open] & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &::marker {\n      content: \"\";\n    }\n\n    &::-webkit-details-marker {\n      display: none;\n    } \n  }\n\n  &-toggleIcon,\n  &-toggleIcon_opened {\n    color: var(--color-text-minimum, #637288);\n    font-size: 14px;\n    margin-left: 5px;\n    margin-right: 10px;\n    transition: transform 0.1s;\n\n    &_opened {\n      transform: rotate(90deg);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  &-content {\n    color: var(--color-text-muted, #4f5a66);\n    padding: 5px 15px 0 15px;\n\n    > * {\n      margin-bottom: var(--markdown-spacing, 15px);\n    }\n  }\n}\n","@import '../../styles/mixins/dark-mode.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n  --CardsGrid-gap: 1.5em;\n  --CardsGrid-columns: auto-fit;\n  --CardsGrid-cardWidth: auto;\n\n  display: grid;\n  gap: var(--CardsGrid-gap);\n  grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n}\n\n.Card {\n  $card: &;\n\n  --Card-badge-bg-color: var(--yellow);\n  --Card-badge-color: var(--yellow10);\n  --Card-content-color: var(--color-text-minimum);\n  --Card-gap: 0.25em;\n  --Card-href-arrow-opacity: 0;\n  --Card-href-arrow-transform: translateX(-5px);\n  --Card-icon-color: var(--color-text-default);\n  --Card-icon-opacity: 0.65;\n  --Card-icon-opacity-hover: 0.75;\n  --Card-line-height: 1.4;\n  --Card-shadow: none;\n  --Card-title-color: var(--color-text-default);\n\n  background: var(--Card-bg-color);\n  border: 1px solid var(--Card-border-color);\n  border-radius: var(--border-radius-lg);\n  box-shadow: var(--Card-shadow);\n  display: flex;\n  flex-direction: var(--Card-layout);\n  gap: var(--Card-gap);\n  line-height: var(--Card-line-height);\n  padding: var(--Card-padding);\n  text-decoration: none;\n\n  &_card {\n    --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-border-color: var(--color-border-default);\n    --Card-layout: column;\n    --Card-padding: 1.5em;\n\n    @include dark-mode {\n      --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n      --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n    }\n  }\n\n  &_tile {\n    --Card-gap: 1em;\n    --Card-icon-opacity: 0.5;\n    --Card-layout: row;\n\n    #{$card}-content {\n      --Card-gap: 0;\n    }\n  }\n\n  // needs specificity to override the default link styles; while preserving logic for empty hrefs\n  &[href]:not([href='']) {\n    color: inherit;\n    text-decoration: none;\n\n    &:hover,\n    &:active,\n    &:focus {\n      --Card-icon-opacity: var(--Card-icon-opacity-hover);\n      --Card-href-arrow-opacity: 0.75;\n      --Card-href-arrow-transform: none;\n\n      background: var(--Card-bg-color-hover);\n    }\n  }\n\n  &-icon {\n    color: var(--Card-icon-color);\n    font-size: 1.4em;\n    margin-bottom: 0.5em;\n    opacity: var(--Card-icon-opacity);\n    transition: opacity var(--transition-timing) var(--transition-fast);\n  }\n\n  &-title {\n    align-items: flex-start;\n    color: var(--Card-title-color);\n    display: flex;\n    gap: 0.5em;\n    font-weight: var(--font-weight-bold);\n  }\n\n  &-badge {\n    align-items: center;\n    background: var(--Card-badge-bg-color);\n    border-radius: 1em;\n    color: var(--Card-badge-color);\n    font-size: 0.6em;\n    padding: 0 0.5em;\n    display: inline-flex;\n    position: relative;\n    top: 0.5em;\n  }\n\n  &-arrow {\n    font-size: 0.8em;\n    opacity: var(--Card-href-arrow-opacity);\n    position: relative;\n    top: 0.375em;\n    transition:\n      opacity var(--transition-timing) var(--transition-fast),\n      transform var(--transition-timing) var(--transition-fast);\n    transform: var(--Card-href-arrow-transform);\n  }\n\n  &-content {\n    color: var(--Card-content-color);\n    display: flex;\n    flex-direction: column;\n    font-size: 1em;\n    gap: var(--Card-gap);\n\n    p:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","/*  We’re planning to move this in to the monorepo in which case\n    we could share the dark mode mix in. Kelly is planning to take\n    some time to make that move so can we add a comment here to\n    circle back on this at that point?\n\n    - Rafe\n      April 2025\n*/\n\n@mixin dark-mode($global: false) {\n  $root: &;\n\n  @if not $root {\n    [data-color-mode='dark'] {\n      @content;\n    }\n\n    [data-color-mode='auto'],\n    [data-color-mode='system'] {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else if $global {\n    :global([data-color-mode='dark']) & {\n      @content;\n    }\n\n    :global([data-color-mode='auto']) &,\n    :global([data-color-mode='system']) & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else {\n    [data-color-mode='dark'] & {\n      @content;\n    }\n\n    [data-color-mode='auto'] &,\n    [data-color-mode='system'] & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n  display: grid;\n  gap: var(--md, 20px);\n\n  @media (max-width: $iphone-plus) {\n    grid-template-columns: 1fr !important;\n  }\n}\n",".TabGroup {\n  &-nav {\n    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n    margin-bottom: 15px;\n  }\n\n  &-tab {\n    background: none;\n    border: 0;\n    color: var(--color-text-minimum, #637288);\n    cursor: pointer;\n    font-size: 15px;\n    font-weight: 600;\n    margin-right: 15px;\n    padding: 0;\n    padding-bottom: 10px;\n\n    &_active {\n      background: none;\n      border: 0;\n      border-bottom: solid var(--color-tab-active, currentcolor);\n      color: var(--color-tab-active, currentcolor);\n      font-size: 15px;\n      font-weight: 600;\n      margin-right: 15px;\n      margin-bottom: -2px;\n      padding: 0;\n      padding-bottom: 10px;\n    }\n\n    &:hover {\n      color: var(--color-text-muted, #4f5a66);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  .TabContent {\n    color: var(--color-text-muted, #4f5a66);\n  }\n}\n"],"names":[],"sourceRoot":""}
+{"version":3,"file":"render-fixture.css","mappings":"AAAA,WACE,oDACA,iEACA,kBAEA,iBACE,mBACA,oDACA,SACA,kBACA,yCACA,eACA,aACA,eACA,gBACA,aACA,kBACA,gBACA,WAEA,uBACE,sDAGF,kCACE,4BACA,6BAGF,yBACE,WAGF,yCACE,aAIJ,mDAEE,yCACA,eACA,gBACA,kBACA,yBAEA,iEACE,wBAIJ,gBACE,4CACA,kBAGF,mBACE,uCACA,wBAEA,qBACE,4C;ACzDN,WACE,uBACA,8BACA,4BAEA,aACA,yBACA,gGAGF,MAGE,qCACA,oCACA,gDACA,mBACA,6BACA,8CACA,6CACA,0BACA,gCACA,wBACA,oBACA,8CAEA,gCACA,0CACA,sCACA,8BACA,aACA,kCACA,oBACA,oCACA,4BACA,qBAEA,WACE,2DACA,iEACA,iDACA,sBACA,sBCXA,kCDcE,8DACA,mECTA,mCAFF,sEDUE,8DACA,oEAIJ,WACE,gBACA,yBACA,mBAEA,yBACE,cAKJ,2BACE,cACA,qBAEA,oGAGE,oDACA,gCACA,kCAEA,sCAIJ,WACE,6BACA,gBACA,mBACA,iCACA,mEAGF,YACE,uBACA,8BACA,aACA,SACA,oCAGF,YACE,mBACA,sCACA,kBACA,8BACA,eACA,eACA,oBACA,kBACA,SAGF,YACE,eACA,uCACA,kBACA,WACA,4HACE,CAEF,2CAGF,cACE,gCACA,aACA,sBACA,cACA,oBAEA,2BACE,gB;AE7HN,SACE,aACA,oBAEA,yBAJF,SAKI,sC;ACNF,cACE,oEACA,mBAGF,cACE,gBACA,SACA,yCACA,eACA,eACA,gBACA,kBACA,UACA,oBAEA,qBACE,gBACA,SACA,0DACA,4CACA,eACA,gBACA,kBACA,mBACA,UACA,oBAGF,oBACE,uCAIJ,eACE,4CACA,kBAGF,sBACE,uCAIJ,iDACE,4C","sources":["webpack://@readme/markdown/./components/Accordion/style.scss","webpack://@readme/markdown/./components/Cards/style.scss","webpack://@readme/markdown/./styles/mixins/dark-mode.scss","webpack://@readme/markdown/./components/Columns/style.scss","webpack://@readme/markdown/./components/Tabs/style.scss"],"sourcesContent":[".Accordion {\n  background: rgba(var(--color-bg-page-rgb, white), 1);\n  border: 1px solid var(--color-border-default, rgba(black, 0.1));\n  border-radius: 5px;\n\n  &-title {\n    align-items: center;\n    background: rgba(var(--color-bg-page-rgb, white), 1);\n    border: 0;\n    border-radius: 5px;\n    color: var(--color-text-default, #384248);\n    cursor: pointer;\n    display: flex;\n    font-size: 16px;\n    font-weight: 500;\n    padding: 10px;\n    position: relative;\n    text-align: left;\n    width: 100%;\n\n    &:hover {\n      background: var(--color-bg-hover, rgba(black, 0.05));\n    }\n\n    .Accordion[open] & {\n      border-bottom-left-radius: 0;\n      border-bottom-right-radius: 0;\n    }\n\n    &::marker {\n      content: \"\";\n    }\n\n    &::-webkit-details-marker {\n      display: none;\n    } \n  }\n\n  &-toggleIcon,\n  &-toggleIcon_opened {\n    color: var(--color-text-minimum, #637288);\n    font-size: 14px;\n    margin-left: 5px;\n    margin-right: 10px;\n    transition: transform 0.1s;\n\n    &_opened {\n      transform: rotate(90deg);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  &-content {\n    color: var(--color-text-muted, #4f5a66);\n    padding: 5px 15px 0 15px;\n\n    > * {\n      margin-bottom: var(--markdown-spacing, 15px);\n    }\n  }\n}\n","@import '../../styles/mixins/dark-mode.scss';\n\n$iphone-plus: 414px;\n\n.CardsGrid {\n  --CardsGrid-gap: 1.5em;\n  --CardsGrid-columns: auto-fit;\n  --CardsGrid-cardWidth: auto;\n\n  display: grid;\n  gap: var(--CardsGrid-gap);\n  grid-template-columns: repeat(var(--CardsGrid-columns), minmax(var(--CardsGrid-cardWidth), 1fr));\n}\n\n.Card {\n  $card: &;\n\n  --Card-badge-bg-color: var(--yellow);\n  --Card-badge-color: var(--yellow10);\n  --Card-content-color: var(--color-text-minimum);\n  --Card-gap: 0.25em;\n  --Card-href-arrow-opacity: 0;\n  --Card-href-arrow-transform: translateX(-5px);\n  --Card-icon-color: var(--color-text-default);\n  --Card-icon-opacity: 0.65;\n  --Card-icon-opacity-hover: 0.75;\n  --Card-line-height: 1.4;\n  --Card-shadow: none;\n  --Card-title-color: var(--color-text-default);\n\n  background: var(--Card-bg-color);\n  border: 1px solid var(--Card-border-color);\n  border-radius: var(--border-radius-lg);\n  box-shadow: var(--Card-shadow);\n  display: flex;\n  flex-direction: var(--Card-layout);\n  gap: var(--Card-gap);\n  line-height: var(--Card-line-height);\n  padding: var(--Card-padding);\n  text-decoration: none;\n\n  &_card {\n    --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0);\n    --Card-border-color: var(--color-border-default);\n    --Card-layout: column;\n    --Card-padding: 1.5em;\n\n    @include dark-mode {\n      --Card-bg-color: rgba(var(--color-bg-page-inverse-rgb), 0.05);\n      --Card-bg-color-hover: rgba(var(--color-bg-page-inverse-rgb), 0.1);\n    }\n  }\n\n  &_tile {\n    --Card-gap: 1em;\n    --Card-icon-opacity: 0.5;\n    --Card-layout: row;\n\n    #{$card}-content {\n      --Card-gap: 0;\n    }\n  }\n\n  // needs specificity to override the default link styles; while preserving logic for empty hrefs\n  &[href]:not([href='']) {\n    color: inherit;\n    text-decoration: none;\n\n    &:hover,\n    &:active,\n    &:focus {\n      --Card-icon-opacity: var(--Card-icon-opacity-hover);\n      --Card-href-arrow-opacity: 0.75;\n      --Card-href-arrow-transform: none;\n\n      background: var(--Card-bg-color-hover);\n    }\n  }\n\n  &-icon {\n    color: var(--Card-icon-color);\n    font-size: 1.4em;\n    margin-bottom: 0.5em;\n    opacity: var(--Card-icon-opacity);\n    transition: opacity var(--transition-timing) var(--transition-fast);\n  }\n\n  &-title {\n    align-items: flex-start;\n    color: var(--Card-title-color);\n    display: flex;\n    gap: 0.5em;\n    font-weight: var(--font-weight-bold);\n  }\n\n  &-badge {\n    align-items: center;\n    background: var(--Card-badge-bg-color);\n    border-radius: 1em;\n    color: var(--Card-badge-color);\n    font-size: 0.6em;\n    padding: 0 0.5em;\n    display: inline-flex;\n    position: relative;\n    top: 0.5em;\n  }\n\n  &-arrow {\n    font-size: 0.8em;\n    opacity: var(--Card-href-arrow-opacity);\n    position: relative;\n    top: 0.375em;\n    transition:\n      opacity var(--transition-timing) var(--transition-fast),\n      transform var(--transition-timing) var(--transition-fast);\n    transform: var(--Card-href-arrow-transform);\n  }\n\n  &-content {\n    color: var(--Card-content-color);\n    display: flex;\n    flex-direction: column;\n    font-size: 1em;\n    gap: var(--Card-gap);\n\n    p:last-child {\n      margin-bottom: 0;\n    }\n  }\n}\n","/*  We’re planning to move this in to the monorepo in which case\n    we could share the dark mode mix in. Kelly is planning to take\n    some time to make that move so can we add a comment here to\n    circle back on this at that point?\n\n    - Rafe\n      April 2025\n*/\n\n@mixin dark-mode($global: false) {\n  $root: &;\n\n  @if not $root {\n    [data-color-mode='dark'] {\n      @content;\n    }\n\n    [data-color-mode='auto'],\n    [data-color-mode='system'] {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else if $global {\n    :global([data-color-mode='dark']) & {\n      @content;\n    }\n\n    :global([data-color-mode='auto']) &,\n    :global([data-color-mode='system']) & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  } @else {\n    [data-color-mode='dark'] & {\n      @content;\n    }\n\n    [data-color-mode='auto'] &,\n    [data-color-mode='system'] & {\n      @media (prefers-color-scheme: dark) {\n        @content;\n      }\n    }\n  }\n}\n","$iphone-plus: 414px;\n\n.Columns {\n  display: grid;\n  gap: var(--md, 20px);\n\n  @media (max-width: $iphone-plus) {\n    grid-template-columns: 1fr !important;\n  }\n}\n",".TabGroup {\n  &-nav {\n    border-bottom: solid var(--color-border-default, #{rgba(black, 0.1)});\n    margin-bottom: 15px;\n  }\n\n  &-tab {\n    background: none;\n    border: 0;\n    color: var(--color-text-minimum, #637288);\n    cursor: pointer;\n    font-size: 15px;\n    font-weight: 600;\n    margin-right: 15px;\n    padding: 0;\n    padding-bottom: 10px;\n\n    &_active {\n      background: none;\n      border: 0;\n      border-bottom: solid var(--color-tab-active, currentcolor);\n      color: var(--color-tab-active, currentcolor);\n      font-size: 15px;\n      font-weight: 600;\n      margin-right: 15px;\n      margin-bottom: -2px;\n      padding: 0;\n      padding-bottom: 10px;\n    }\n\n    &:hover {\n      color: var(--color-text-muted, #4f5a66);\n    }\n  }\n\n  &-icon {\n    color: var(--project-color-primary, inherit);\n    margin-right: 10px;\n  }\n\n  .TabContent {\n    color: var(--color-text-muted, #4f5a66);\n  }\n}\n\n:where(.TabGroup .TabContent > *:not(:last-child)) {\n  margin-bottom: var(--markdown-spacing, 15px);\n}\n"],"names":[],"sourceRoot":""}

package/dist/render-fixture.node.js

@@ -68723,12 +68723,104 @@ const mdast_mdast = (text, opts = {}) => {
  */
 const jsxAcornParser = Parser.extend(acorn_jsx_default()());
 
+;// ./lib/utils/literal-expression.ts
+
+const unsupported = (description) => new Error(`not a literal expression: ${description}`);
+/** Narrows a resolved value for arithmetic, so operands never coerce to `NaN` or `"[object Object]"`. */
+const asNumber = (value) => {
+    if (typeof value !== 'number')
+        throw unsupported('non-numeric operand');
+    return value;
+};
+const asOperand = (value) => {
+    if (typeof value !== 'number' && typeof value !== 'string')
+        throw unsupported('non-primitive operand');
+    return value;
+};
+const ARITHMETIC_OPERATORS = {
+    // `+` doubles as string concatenation, so it accepts a string on either side.
+    '+': (left, right) => (typeof left === 'number' && typeof right === 'number' ? left + right : `${left}${right}`),
+    '-': (left, right) => asNumber(left) - asNumber(right),
+    '*': (left, right) => asNumber(left) * asNumber(right),
+    '/': (left, right) => asNumber(left) / asNumber(right),
+};
+/** Resolve one estree node, recursing into arrays and objects. Throws for anything not on the allowlist. */
+const resolveNode = (node) => {
+    switch (node.type) {
+        case 'Literal':
+            // Regex and bigint `Literal`s hold values a tree consumer can't serialise;
+            // a BigInt throws outright in `JSON.stringify`.
+            if ('regex' in node || 'bigint' in node)
+                throw unsupported('regex or bigint literal');
+            return node.value;
+        case 'Identifier':
+            if (node.name !== 'undefined')
+                throw unsupported(`identifier \`${node.name}\``);
+            return undefined;
+        case 'TemplateLiteral':
+            if (node.expressions.length)
+                throw unsupported('template substitution');
+            return node.quasis.map(quasi => quasi.value.cooked).join('');
+        case 'UnaryExpression':
+            if (node.operator !== '-')
+                throw unsupported(`operator \`${node.operator}\``);
+            return -asNumber(resolveNode(node.argument));
+        case 'BinaryExpression': {
+            const applyOperator = ARITHMETIC_OPERATORS[node.operator];
+            if (!applyOperator)
+                throw unsupported(`operator \`${node.operator}\``);
+            return applyOperator(asOperand(resolveNode(node.left)), asOperand(resolveNode(node.right)));
+        }
+        case 'ArrayExpression':
+            return node.elements.map(element => (element === null ? null : resolveNode(element)));
+        case 'ObjectExpression':
+            return node.properties.reduce((memo, property) => {
+                if (property.type !== 'Property' || property.computed)
+                    throw unsupported('computed or spread property');
+                const { key } = property;
+                if (key.type !== 'Identifier' && key.type !== 'Literal')
+                    throw unsupported('property key');
+                const name = key.type === 'Identifier' ? key.name : String(key.value);
+                // `__proto__` would replace the object's prototype rather than add a property.
+                if (name === '__proto__')
+                    throw unsupported('`__proto__` key');
+                memo[name] = resolveNode(property.value);
+                return memo;
+            }, {});
+        default:
+            throw unsupported(node.type);
+    }
+};
+/**
+ * Resolve a JSX attribute expression's source to its value without executing it.
+ *
+ * Supports the literal syntax attributes actually use — `true`, `"a"`, `` `a` ``,
+ * `undefined`, `{ textAlign: "left" }`, `["left"]`, `1 + 1`, `'https://' + 'x.com'` —
+ * and refuses everything else, so no identifier, member access, call, assignment or
+ * function body can ever run. The trade-off is that expressions needing a scope or a
+ * method call (`{item.url}`, `{"a".toUpperCase()}`) throw, and callers keep the raw
+ * source instead — the same fallback they already used for an expression that threw.
+ * mdxish rendering is unaffected, since it resolves those later with its scoped
+ * evaluator; only consumers reading attributes straight off the tree see the source.
+ *
+ * @param source expression body, without the surrounding braces
+ * @throws if `source` is unparseable or isn't a supported literal expression
+ */
+const evaluateLiteralExpression = (source) => {
+    const expression = jsxAcornParser.parseExpressionAt(source, 0, { ecmaVersion: 'latest' });
+    // acorn stops at the first complete expression, so anything trailing means this isn't one.
+    if (expression.end !== source.trimEnd().length)
+        throw unsupported('trailing content');
+    return resolveNode(expression);
+};
+
 ;// ./processor/utils.ts
 
 
 
 
 
+
 /**
  * Evaluate a JavaScript expression source and return its value.
  *
@@ -68826,8 +68918,10 @@ const utils_getAttrs = (jsx) => jsx.attributes.reduce((memo, attr) => {
             memo[attr.name] = decode_decodeHTMLStrict(attr.value);
         }
         else if (attr.value?.value !== undefined) {
+            // Expression values only survive to here when safeMode is off; `flattenAttributeExpressions`
+            // rewrites them to plain strings at the head of the pipeline otherwise.
             try {
-                memo[attr.name] = evaluate(attr.value.value);
+                memo[attr.name] = evaluateLiteralExpression(attr.value.value);
             }
             catch {
                 memo[attr.name] = attr.value.value;
@@ -69608,6 +69702,31 @@ const embedTransformer = () => {
 };
 /* harmony default export */ const transform_embeds = (embedTransformer);
 
+;// ./processor/transform/flatten-attribute-expressions.ts
+
+
+/**
+ * Rewrites JSX attribute expressions (`icon={String(1 + 3)}`) into plain string attributes
+ * holding their literal source, so nothing downstream can evaluate them.
+ *
+ * This is the RMDX counterpart to mdxish's `preserveExpressionsAsText` parse option: safeMode's
+ * contract is enforced once, at the head of the pipeline, rather than at every `getAttrs()` call
+ * site. Only registered when safeMode is on.
+ */
+const flattenAttributeExpressions = () => tree => {
+    lib_visit(tree, utils_isMDXElement, (node) => {
+        node.attributes.forEach(attr => {
+            if (!('name' in attr))
+                return;
+            if (attr.value === null || typeof attr.value === 'string')
+                return;
+            attr.value = attr.value.value;
+        });
+    });
+    return tree;
+};
+/* harmony default export */ const flatten_attribute_expressions = (flattenAttributeExpressions);
+
 ;// ./node_modules/gemoji/index.js
 /**
  * @typedef Gemoji
@@ -101593,6 +101712,7 @@ const variables = ({ asMdx } = { asMdx: true }) => tree => {
 
 
 
+
 const defaultTransforms = {
     calloutTransformer: callouts,
     codeTabsTransformer: code_tabs,
@@ -101620,6 +101740,9 @@ const ast_processor_astProcessor = (opts = {}) => {
     const components = opts.components || {};
     let processor = remark_remark()
         .use(lib_remarkMdx)
+        // Must precede every other transformer: it strips evaluable attribute expressions so no
+        // downstream `getAttrs()` call can reach `evaluate()`.
+        .use(opts.safeMode ? flatten_attribute_expressions : undefined)
         .use(remarkPlugins)
         .use(opts.remarkPlugins)
         .use(transform_variables, { asMdx: false })
@@ -116199,12 +116322,59 @@ const lib_h = create_h_createH(node_modules_property_information_html, 'div')
 /** @type {ReturnType<createH>} */
 const lib_s = create_h_createH(node_modules_property_information_svg, 'g', svg_case_sensitive_tag_names_svgCaseSensitiveTagNames)
 
+;// ./utils/user.ts
+/**
+ * Coerce a user variable value to a string for substitution into markdown text.
+ * Non-string values (arrays, objects, numbers) are stringified via JSON or `String()`
+ * so that `<<var>>` syntax doesn't produce `[object Object]` for structured data like
+ * JWT `keys`.
+ */
+const stringifyVariableValue = (value) => {
+    if (typeof value === 'string')
+        return value;
+    if (value == null)
+        return '';
+    if (typeof value === 'object') {
+        try {
+            return JSON.stringify(value) ?? '';
+        }
+        catch {
+            console.warn('[WARNING] Could not stringify a structured user variable.');
+            return '';
+        }
+    }
+    return String(value);
+};
+/**
+ * Flatten `variables.user` into a string-keyed string-valued record by coercing
+ * each value. Used by markdown substitution paths that need a plain
+ * `Record<string, string>` lookup.
+ */
+const flattenUserVariables = (user) => Object.fromEntries(Object.entries(user).map(([name, value]) => [name, stringifyVariableValue(value)]));
+const User = (variables) => {
+    const { user = {}, defaults = [] } = variables || {};
+    return new Proxy(user, {
+        get(target, attribute) {
+            if (typeof attribute === 'symbol') {
+                return '';
+            }
+            if (attribute in target) {
+                return target[attribute];
+            }
+            const def = defaults.find((d) => d.name === attribute);
+            return def ? def.default : attribute.toUpperCase();
+        },
+    });
+};
+/* harmony default export */ const user = (User);
+
 ;// ./processor/plugin/toc.ts
 
 
 
 
 
+
 const HEADING_TAGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
 const isHeadingTag = (tag) => (tag ? HEADING_TAGS.includes(tag) : false);
 const isStandardHtmlElement = (node) => STANDARD_HTML_TAGS.has(node.tagName.toLowerCase());
@@ -116316,7 +116486,7 @@ const flattenVariables = (variables) => {
     if (!variables)
         return {};
     return {
-        ...variables.user,
+        ...flattenUserVariables(variables.user),
         ...Object.fromEntries((variables.defaults || []).filter(d => !(d.name in variables.user)).map(d => [d.name, d.default])),
     };
 };
@@ -116464,7 +116634,7 @@ const exports_exports = (doc) => {
 
 const hast = (text, opts = {}) => {
     const components = Object.entries(opts.components || {}).reduce((memo, [name, doc]) => {
-        memo[name] = mdast(doc);
+        memo[name] = mdast(doc, { safeMode: opts.safeMode });
         return memo;
     }, {});
     const processor = astProcessor(opts)
@@ -127065,6 +127235,7 @@ function normalizeTableSeparator(content) {
 ;// ./processor/transform/mdxish/variables-code.ts
 
 
+
 // Single combined regex so that resolved values from one pattern are never re-scanned by the other.
 const COMBINED_VARIABLE_REGEX = new RegExp(`${variable_dist.VARIABLE_REGEXP}|${variable_dist.MDX_VARIABLE_REGEXP}`, 'giu');
 // Flatten variables into a single object for easy lookup
@@ -127073,7 +127244,7 @@ function variables_code_flattenVariables(variables) {
         return {};
     return {
         ...Object.fromEntries((variables.defaults || []).map(d => [d.name, d.default])),
-        ...variables.user,
+        ...flattenUserVariables(variables.user),
     };
 }
 function resolveCodeVariables(value, resolvedVariables) {
@@ -127561,24 +127732,6 @@ const Contexts = ({ children, terms = [], variables = { user: {}, defaults: [] }
 };
 /* harmony default export */ const contexts = (Contexts);
 
-;// ./utils/user.ts
-const User = (variables) => {
-    const { user = {}, defaults = [] } = variables || {};
-    return new Proxy(user, {
-        get(target, attribute) {
-            if (typeof attribute === 'symbol') {
-                return '';
-            }
-            if (attribute in target) {
-                return target[attribute];
-            }
-            const def = defaults.find((d) => d.name === attribute);
-            return def ? def.default : attribute.toUpperCase();
-        },
-    });
-};
-/* harmony default export */ const user = (User);
-
 ;// ./lib/utils/makeUseMdxComponents.ts
 
 
@@ -127611,6 +127764,7 @@ const makeUseMDXComponents = (more = {}) => {
 
 ;// ./lib/utils/mdxish/mdxish-variables.ts
 
+
 // The `$` guard skips template-literal interpolation: `${user.name}` embeds `{user.name}`, and
 // substituting it would leave a mangled `` `Hi $Name` `` behind. Those belong to an expression,
 // which either evaluated already or is meant to stay literal.
@@ -127634,7 +127788,7 @@ function resolveAttributeVariables(value, user) {
         .replace(MDX_VARIABLE_REGEX, (source, escapePrefix, name, escapeSuffix) => {
         if (escapePrefix || escapeSuffix)
             return source;
-        return user[name];
+        return stringifyVariableValue(user[name]);
     });
 }
 
@@ -127910,7 +128064,8 @@ const run_run = (string, _opts = {}) => {
 
 const tags = (doc) => {
     const set = new Set();
-    visit(mdast(doc), isMDXElement, (node) => {
+    // Tag names never depend on evaluated attribute values, so always parse in safeMode.
+    visit(mdast(doc, { safeMode: true }), isMDXElement, (node) => {
         if (node.name?.match(/^[A-Z]/)) {
             set.add(node.name);
         }
@@ -127926,13 +128081,14 @@ const tags = (doc) => {
 
 
 
-const { micromarkExtensions, fromMarkdownExtensions } = mdxish_extensions_mdxishExtensions(mdxish_extensions_FEATURES.tags);
+const { micromarkExtensions, fromMarkdownExtensions } = mdxish_extensions_mdxishExtensions(mdxish_extensions_FEATURES.tags, { safeMode: true });
 const mdxishTags_tags = (doc) => {
     const set = new Set();
     const processor = remark()
         .data('micromarkExtensions', micromarkExtensions)
         .data('fromMarkdownExtensions', fromMarkdownExtensions)
-        .use(mdxishMdxComponentBlocks)
+        // Tag names never depend on evaluated attribute values, so always parse in safeMode.
+        .use(mdxishMdxComponentBlocks, { safeMode: true })
         .use(mdxishTables);
     const tree = processor.parse(doc);
     visit(processor.runSync(tree), isMDXElement, (node) => {