@ngrok/mantle 0.57.1 → 0.57.2

package/assets/mantle.css

@@ -1194,8 +1194,8 @@
 
 	--breakpoint-xs: 30rem;
 
-	--text-size-mono: 0.8125rem;
-	--text-size-inherit: inherit;
+	--text-mono: 0.8125rem;
+	--text-mono--line-height: 1.25rem;
 
 	--shadow-sm: 0px 1px 2px 0
 		--alpha(var(--shadow-color) / var(--shadow-first-opacity));
@@ -1353,11 +1353,6 @@
 	cursor: inherit;
 }
 
-@utility text-size-mono {
-	line-height: 1.25rem;
-	font-size: var(--text-size-mono);
-}
-
 @utility scrollbar {
 	scrollbar-color: --alpha(var(--color-neutral-800) / 50%) transparent;
 

package/dist/{chunk-4R4RBAKU.js → chunk-O6OZ2EQY.js}

@@ -1,2 +1,2 @@
-import{a as p}from"./chunk-MF2QITTY.js";import{a as n}from"./chunk-AZ56JGNY.js";import{forwardRef as s,useEffect as N,useMemo as T,useRef as g,useState as O}from"react";import{jsx as d}from"react/jsx-runtime";var b=s(({children:t,className:o,...r},e)=>{let a=E();return d("div",{className:n("group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full",o),"data-sticky-active":a.state.hasOverflow&&!a.state.scrolledToEnd||void 0,"data-x-overflow":a.state.hasOverflow,"data-x-scroll-end":a.state.hasOverflow&&a.state.scrolledToEnd,ref:p(a.ref,e),...r,children:t})});b.displayName="TableRoot";var v=s(({children:t,className:o,...r},e)=>d("table",{ref:e,className:n("table-auto border-collapse caption-bottom w-full min-w-full text-left",o),...r,children:t}));v.displayName="TableElement";var u=s(({children:t,className:o,...r},e)=>d("thead",{ref:e,className:n("border-b border-card-muted","divide-y divide-card-muted","text-strong bg-base","[&>tr]:bg-base",o),...r,children:t}));u.displayName="TableHead";var h=s(({children:t,className:o,...r},e)=>d("tbody",{className:n("divide-y divide-card-muted","text-body","[thead+&]:border-t [thead+&]:border-card-muted","[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover",o),ref:e,...r,children:t}));h.displayName="TableBody";var y=s(({children:t,className:o,...r},e)=>d("tfoot",{ref:e,className:n("font-medium text-body","border-t border-card-muted","divide-y divide-card-muted","[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover",o),...r,children:t}));y.displayName="TableFoot";var C=s(({children:t,className:o,...r},e)=>d("tr",{ref:e,className:n(o),...r,children:t}));C.displayName="TableRow";var w=s(({children:t,className:o,...r},e)=>d("th",{ref:e,className:n("h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0",o),...r,children:t}));w.displayName="TableHeader";var R=s(({children:t,className:o,...r},e)=>d("td",{ref:e,className:n("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono",o),...r,children:t}));R.displayName="TableCell";var x=s(({children:t,className:o,...r},e)=>d("caption",{ref:e,className:n("py-4 text-sm text-gray-500","border-t border-card-muted",o),...r,children:t}));x.displayName="TableCaption";var z={Body:h,Caption:x,Cell:R,Element:v,Foot:y,Head:u,Header:w,Root:b,Row:C};function E(){let t=g(null),[o,r]=O({hasOverflow:!1,scrolledToEnd:!1});return N(()=>{let e=t.current;if(!e)return;let a=()=>{let i=e.scrollWidth>e.clientWidth,f=Math.abs(e.scrollWidth-e.scrollLeft-e.clientWidth)<1;r(l=>l.hasOverflow!==i||l.scrolledToEnd!==f?{hasOverflow:i,scrolledToEnd:f}:l)},c=new ResizeObserver(a);c.observe(e);let m=new MutationObserver(a);return m.observe(e,{childList:!0,subtree:!0}),e.addEventListener("scroll",a,{passive:!0}),a(),()=>{c.disconnect(),m.disconnect(),e.removeEventListener("scroll",a)}},[]),T(()=>({ref:t,state:o}),[o])}export{z as a};
-//# sourceMappingURL=chunk-4R4RBAKU.js.map
+import{a as p}from"./chunk-MF2QITTY.js";import{a as n}from"./chunk-AZ56JGNY.js";import{forwardRef as s,useEffect as N,useMemo as T,useRef as g,useState as O}from"react";import{jsx as d}from"react/jsx-runtime";var b=s(({children:t,className:o,...r},e)=>{let a=E();return d("div",{className:n("group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full",o),"data-sticky-active":a.state.hasOverflow&&!a.state.scrolledToEnd||void 0,"data-x-overflow":a.state.hasOverflow,"data-x-scroll-end":a.state.hasOverflow&&a.state.scrolledToEnd,ref:p(a.ref,e),...r,children:t})});b.displayName="TableRoot";var v=s(({children:t,className:o,...r},e)=>d("table",{ref:e,className:n("table-auto border-collapse caption-bottom w-full min-w-full text-left",o),...r,children:t}));v.displayName="TableElement";var u=s(({children:t,className:o,...r},e)=>d("thead",{ref:e,className:n("border-b border-card-muted","divide-y divide-card-muted","text-strong bg-base","[&>tr]:bg-base",o),...r,children:t}));u.displayName="TableHead";var h=s(({children:t,className:o,...r},e)=>d("tbody",{className:n("divide-y divide-card-muted","text-body","[thead+&]:border-t [thead+&]:border-card-muted","[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover",o),ref:e,...r,children:t}));h.displayName="TableBody";var y=s(({children:t,className:o,...r},e)=>d("tfoot",{ref:e,className:n("font-medium text-body","border-t border-card-muted","divide-y divide-card-muted","[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover",o),...r,children:t}));y.displayName="TableFoot";var C=s(({children:t,className:o,...r},e)=>d("tr",{ref:e,className:n(o),...r,children:t}));C.displayName="TableRow";var w=s(({children:t,className:o,...r},e)=>d("th",{ref:e,className:n("h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0",o),...r,children:t}));w.displayName="TableHeader";var R=s(({children:t,className:o,...r},e)=>d("td",{ref:e,className:n("p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono",o),...r,children:t}));R.displayName="TableCell";var x=s(({children:t,className:o,...r},e)=>d("caption",{ref:e,className:n("py-4 text-sm text-gray-500","border-t border-card-muted",o),...r,children:t}));x.displayName="TableCaption";var L={Body:h,Caption:x,Cell:R,Element:v,Foot:y,Head:u,Header:w,Root:b,Row:C};function E(){let t=g(null),[o,r]=O({hasOverflow:!1,scrolledToEnd:!1});return N(()=>{let e=t.current;if(!e)return;let a=()=>{let i=e.scrollWidth>e.clientWidth,f=Math.abs(e.scrollWidth-e.scrollLeft-e.clientWidth)<1;r(l=>l.hasOverflow!==i||l.scrolledToEnd!==f?{hasOverflow:i,scrolledToEnd:f}:l)},c=new ResizeObserver(a);c.observe(e);let m=new MutationObserver(a);return m.observe(e,{childList:!0,subtree:!0}),e.addEventListener("scroll",a,{passive:!0}),a(),()=>{c.disconnect(),m.disconnect(),e.removeEventListener("scroll",a)}},[]),T(()=>({ref:t,state:o}),[o])}export{L as a};
+//# sourceMappingURL=chunk-O6OZ2EQY.js.map

package/dist/chunk-O6OZ2EQY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow &&\n\t\t\t\t\t\t!horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow &&\n\t\t\t\t\thorizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-collapse caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-b border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-strong bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[thead+&]:border-t [thead+&]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-caption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-cell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-element\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-foot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-row\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"gFACA,OAAS,cAAAA,EAAY,aAAAC,EAAW,WAAAC,EAAS,UAAAC,EAAQ,YAAAC,MAAgB,QAoD9D,cAAAC,MAAA,oBANH,IAAMC,EAAOC,EACZ,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CAC3C,IAAMC,EACLC,EAAmD,EAEpD,OACCR,EAAC,OACA,UAAWS,EACV,kIACAL,CACD,EACA,qBACEG,EAAmB,MAAM,aACzB,CAACA,EAAmB,MAAM,eAC3B,OAED,kBAAiBA,EAAmB,MAAM,YAC1C,oBACCA,EAAmB,MAAM,aACzBA,EAAmB,MAAM,cAE1B,IAAKG,EAAYH,EAAmB,IAAKD,CAAG,EAC3C,GAAGD,EAEH,SAAAF,EACF,CAEF,CACD,EACAF,EAAK,YAAc,YAmEnB,IAAMU,EAAUT,EACf,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAElCN,EAAC,SACA,IAAKM,EACL,UAAWG,EACV,wEACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAGH,EACAQ,EAAQ,YAAc,eAiDtB,IAAMC,EAAOV,EACZ,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,SACA,IAAKM,EACL,UAAWG,EAEV,6BACA,6BACA,sBACA,iBACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAS,EAAK,YAAc,YA+CnB,IAAMC,EAAOX,EACZ,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,SACA,UAAWS,EAEV,6BACA,YACA,iDACA,qDACAL,CACD,EACA,IAAKE,EACJ,GAAGD,EAEH,SAAAF,EACF,CAEF,EACAU,EAAK,YAAc,YAiDnB,IAAMC,EAAOZ,EACZ,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,SACA,IAAKM,EACL,UAAWG,EAEV,wBACA,6BACA,6BACA,kDACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAW,EAAK,YAAc,YA8CnB,IAAMC,EAAMb,EACX,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,MACA,IAAKM,EACL,UAAWG,EAEVL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAY,EAAI,YAAc,WAgDlB,IAAMC,EAASd,EACd,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,MACA,IAAKM,EACL,UAAWG,EACV,qFACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAa,EAAO,YAAc,cA8CrB,IAAMC,EAAOf,EACZ,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,MACA,IAAKM,EACL,UAAWG,EACV,qEACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAc,EAAK,YAAc,YA8CnB,IAAMC,EAAUhB,EACf,CAAC,CAAE,SAAAC,EAAU,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IACnCN,EAAC,WACA,IAAKM,EACL,UAAWG,EACV,6BACA,6BACAL,CACD,EACC,GAAGC,EAEH,SAAAF,EACF,CAEF,EACAe,EAAQ,YAAc,eAyCtB,IAAMC,EAAQ,CAuCb,KAAAN,EAuCA,QAAAK,EAuCA,KAAAD,EAuCA,QAAAN,EAuCA,KAAAG,EAuCA,KAAAF,EAuCA,OAAAI,EAuCA,KAAAf,EAuCA,IAAAc,CACD,EAaA,SAASK,GAAuD,CAC/D,IAAMC,EAAMC,EAAiB,IAAI,EAC3B,CAACC,EAAOC,CAAQ,EAAIC,EAAS,CAClC,YAAa,GACb,cAAe,EAChB,CAAC,EAED,OAAAC,EAAU,IAAM,CACf,IAAMC,EAAUN,EAAI,QACpB,GAAI,CAACM,EACJ,OAGD,IAAMC,EAAa,IAAM,CACxB,IAAMC,EAAcF,EAAQ,YAAcA,EAAQ,YAC5CG,EACL,KAAK,IACJH,EAAQ,YAAcA,EAAQ,WAAaA,EAAQ,WACpD,EAAI,EAELH,EAAUO,GAERA,EAAS,cAAgBF,GACzBE,EAAS,gBAAkBD,EAEpB,CAAE,YAAAD,EAAa,cAAAC,CAAc,EAE9BC,CACP,CACF,EAEMC,EAAiB,IAAI,eAAeJ,CAAU,EACpDI,EAAe,QAAQL,CAAO,EAE9B,IAAMM,EAAmB,IAAI,iBAAiBL,CAAU,EACxD,OAAAK,EAAiB,QAAQN,EAAS,CAAE,UAAW,GAAM,QAAS,EAAK,CAAC,EAEpEA,EAAQ,iBAAiB,SAAUC,EAAY,CAAE,QAAS,EAAK,CAAC,EAEhEA,EAAW,EAEJ,IAAM,CACZI,EAAe,WAAW,EAC1BC,EAAiB,WAAW,EAC5BN,EAAQ,oBAAoB,SAAUC,CAAU,CACjD,CACD,EAAG,CAAC,CAAC,EAEEM,EAAQ,KAAO,CAAE,IAAAb,EAAK,MAAAE,CAAM,GAAI,CAACA,CAAK,CAAC,CAC/C","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","Root","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Element","Head","Body","Foot","Row","Header","Cell","Caption","Table","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}

package/dist/code-block.js

@@ -1,4 +1,4 @@
-import{a as _}from"./chunk-X7RUBITL.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as B}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as S,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let o of e)switch(o){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=o}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(se(e),"spaces"))}var ne=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function re(e){return ne.includes(e)}function se(e){return oe.includes(e)}function k(e,t){let{indentation:o="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,n=>o==="spaces"?n.replace(/\t/g,"  "):n.replace(/ {2}/g,"	"))}var w=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function ae(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&w.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as ye,jsx as a,jsxs as j}from"react/jsx-runtime";var M=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...o},n)=>{let[r,s]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),v=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:s,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return a(M.Provider,{value:v,children:a(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:n,...o})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("relative",t),ref:n,...o}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:o,language:n="text",showLineNumbers:r,style:s,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:v,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(M),T=$(n,o),L=F(()=>k(p,{indentation:T}),[p,T]),[X,Z]=b(N(k(p,{indentation:T})));S(()=>{let R=E.languages[n];P(R,`CodeBlock does not support the language "${n}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${w.join(", ")}.`);let ee=E.highlight(L,R,n);Z(ee)},[L,n]),S(()=>{g(L)},[L,g]),S(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(n);return a("pre",{"aria-expanded":c?v:void 0,className:m("scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14","text-size-inherit text-size-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",z,e),"data-lang":n,id:l,ref:f,style:{...s,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:a("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:n,...o}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...o},n)=>a(e?x:"h3",{ref:n,className:m("text-size-mono m-0 font-mono font-normal",t),...o}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:o,onCopyError:n,onClick:r,...s},d)=>{let{copyText:p}=A(M),[,u]=_(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),o?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){n?.(g)}},...s,children:[a("span",{className:"sr-only",children:"Copy code"}),f?j(ye,{children:["Copied",a(I,{svg:a(de,{weight:"bold"}),className:"size-4"})]}):a(I,{svg:a(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:o,...n},r)=>{let{codeId:s,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(M);return S(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...n,"aria-controls":s,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),o?.(l)},children:[d?"Show less":"Show more"," ",a(I,{svg:a(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:o,...n}){let r=o;if(t!=null)switch(t){case"file":r=a(le,{weight:"fill"});break;case"cli":r=a(ue,{weight:"fill"});break;case"traffic-policy":r=a(O,{});break}return a(I,{className:e,svg:r,...n})}U.displayName="CodeBlockIcon";var Ce={Root:V,Body:Y,Code:J,CopyButton:G,ExpanderButton:K,Header:q,Icon:U,Title:Q};function he(e,...t){if(!xe(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n	Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let o=String.raw({raw:e},...t),n=be(o);return o.trim().split(`
-`).map(s=>/^\S+/.test(s)?s:s.slice(n)).join(`
-`)}function be(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((o,n)=>Math.min(o,n.length),Number.POSITIVE_INFINITY):0}function xe(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var Ie=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ve(e){let t=e?.trim()??"";if(!t)return i;let o=ke(t).reduce((n,r)=>{let[s,d]=r.split("=");if(!s)return n;let p=Le(d);return n[s]=p??!0,n},{});try{let n=Se(o);return{...i,...n}}catch{return i}}function Le(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ke(e){let t=e?.trim()??"",o=[],n="",r=!1;for(let s of t)s===" "&&!r?n&&(o.push(n),n=""):(s==='"'&&(r=!r),n+=s);return n&&o.push(n),o}function we(e){return Ie.includes(e)}function Se(e){let{collapsible:t=i.collapsible,disableCopy:o=i.disableCopy,indentation:n=i.indentation,mode:r=i.mode,title:s=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?B(t):i.collapsible,disableCopy:typeof o=="string"||typeof o=="boolean"?B(o):i.disableCopy,indentation:W(n)?n:i.indentation,mode:we(r)?r:i.mode,title:typeof s=="string"?s.trim():i.title}}export{Ce as CodeBlock,i as defaultMeta,N as escapeHtml,he as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,k as normalizeIndentation,ae as parseLanguage,ve as parseMetastring,w as supportedLanguages};
+import{a as z}from"./chunk-X7RUBITL.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as B}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ie}from"@phosphor-icons/react/CaretDown";import{CheckIcon as de}from"@phosphor-icons/react/Check";import{CopyIcon as pe}from"@phosphor-icons/react/Copy";import{FileTextIcon as le}from"@phosphor-icons/react/FileText";import{TerminalIcon as ue}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ce from"clsx";import{createContext as me,forwardRef as y,useContext as A,useEffect as S,useId as ge,useMemo as F,useRef as fe,useState as b}from"react";import P from"tiny-invariant";function N(e){let t="";for(let o of e)switch(o){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=o}return t}import E from"prismjs";import"prismjs/components/prism-bash.js";import"prismjs/components/prism-csharp.js";import"prismjs/components/prism-css.js";import"prismjs/components/prism-go.js";import"prismjs/components/prism-java.js";import"prismjs/components/prism-javascript.js";import"prismjs/components/prism-json.js";import"prismjs/components/prism-jsx.js";import"prismjs/components/prism-markup.js";import"prismjs/components/prism-python.js";import"prismjs/components/prism-ruby.js";import"prismjs/components/prism-rust.js";import"prismjs/components/prism-tsx.js";import"prismjs/components/prism-typescript.js";import"prismjs/components/prism-yaml.js";var te=["tabs","spaces"];function W(e){return te.includes(e)}function $(e,t){return t||(re(e)?"tabs":(ae(e),"spaces"))}var ne=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function re(e){return ne.includes(e)}function ae(e){return oe.includes(e)}function k(e,t){let{indentation:o="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,n=>o==="spaces"?n.replace(/\t/g,"  "):n.replace(/ {2}/g,"	"))}var w=["bash","cs","csharp","css","dotnet","go","html","java","javascript","js","json","jsx","markup","plain","plaintext","py","python","rb","ruby","rust","sh","shell","text","ts","tsx","txt","typescript","xml","yaml","yml"];function se(e){if(!e)return"sh";let t=e.trim().slice(e.indexOf("-")+1);return D(t)?t:"sh"}var D=e=>typeof e=="string"&&w.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as ye,jsx as s,jsxs as j}from"react/jsx-runtime";var M=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...o},n)=>{let[r,a]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),v=F(()=>({codeId:l,copyText:r,hasCodeExpander:d,isCodeExpanded:u,registerCodeId:g=>{c(h=>(P(h==null,"You can only render a single CodeBlockCode within a CodeBlock."),g))},setCopyText:a,setHasCodeExpander:p,setIsCodeExpanded:f,unregisterCodeId:g=>{c(h=>{P(h===g,"You can only render a single CodeBlockCode within a CodeBlock.")})}}),[l,r,d,u]),C=e?x:"div";return s(M.Provider,{value:v,children:s(C,{className:m("text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:n,...o})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...o},n)=>s(e?x:"div",{className:m("relative",t),ref:n,...o}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:o,language:n="text",showLineNumbers:r,style:a,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:v,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(M),T=$(n,o),L=F(()=>k(p,{indentation:T}),[p,T]),[X,Z]=b(N(k(p,{indentation:T})));S(()=>{let _=E.languages[n];P(_,`CodeBlock does not support the language "${n}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${w.join(", ")}.`);let ee=E.highlight(L,_,n);Z(ee)},[L,n]),S(()=>{g(L)},[L,g]),S(()=>(C(l),()=>{h(l)}),[l,C,h]);let R=H(n);return s("pre",{"aria-expanded":c?v:void 0,className:m("scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14","text-mono m-0 font-mono","aria-collapsed:max-h-[13.6rem]",R,e),"data-lang":n,id:l,ref:f,style:{...a,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:s("code",{className:ce("text-inherit",R),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...o},n)=>s(e?x:"div",{className:m("flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700",t),ref:n,...o}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...o},n)=>s(e?x:"h3",{ref:n,className:m("text-mono m-0 font-mono font-normal",t),...o}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:o,onCopyError:n,onClick:r,...a},d)=>{let{copyText:p}=A(M),[,u]=z(),[f,l]=b(!1),c=fe(0);return j(e?x:"button",{type:"button",className:m("focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4",f&&"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent",t),ref:d,onClick:async C=>{try{if(r?.(C),C.defaultPrevented){window.clearTimeout(c.current);return}await u(p),o?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){n?.(g)}},...a,children:[s("span",{className:"sr-only",children:"Copy code"}),f?j(ye,{children:["Copied",s(I,{svg:s(de,{weight:"bold"}),className:"size-4"})]}):s(I,{svg:s(pe,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:o,...n},r)=>{let{codeId:a,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(M);return S(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...n,"aria-controls":a,"aria-expanded":d,className:m("flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100",t),ref:r,type:"button",onClick:l=>{p(c=>!c),o?.(l)},children:[d?"Show less":"Show more"," ",s(I,{svg:s(ie,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function U({className:e,preset:t,svg:o,...n}){let r=o;if(t!=null)switch(t){case"file":r=s(le,{weight:"fill"});break;case"cli":r=s(ue,{weight:"fill"});break;case"traffic-policy":r=s(O,{});break}return s(I,{className:e,svg:r,...n})}U.displayName="CodeBlockIcon";var Ce={Root:V,Body:Y,Code:J,CopyButton:G,ExpanderButton:K,Header:q,Icon:U,Title:Q};function he(e,...t){if(!xe(e)||!Array.isArray(t))throw new Error("It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\n	Example: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')");let o=String.raw({raw:e},...t),n=be(o);return o.trim().split(`
+`).map(a=>/^\S+/.test(a)?a:a.slice(n)).join(`
+`)}function be(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((o,n)=>Math.min(o,n.length),Number.POSITIVE_INFINITY):0}function xe(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var Ie=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ve(e){let t=e?.trim()??"";if(!t)return i;let o=ke(t).reduce((n,r)=>{let[a,d]=r.split("=");if(!a)return n;let p=Le(d);return n[a]=p??!0,n},{});try{let n=Se(o);return{...i,...n}}catch{return i}}function Le(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ke(e){let t=e?.trim()??"",o=[],n="",r=!1;for(let a of t)a===" "&&!r?n&&(o.push(n),n=""):(a==='"'&&(r=!r),n+=a);return n&&o.push(n),o}function we(e){return Ie.includes(e)}function Se(e){let{collapsible:t=i.collapsible,disableCopy:o=i.disableCopy,indentation:n=i.indentation,mode:r=i.mode,title:a=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?B(t):i.collapsible,disableCopy:typeof o=="string"||typeof o=="boolean"?B(o):i.disableCopy,indentation:W(n)?n:i.indentation,mode:we(r)?r:i.mode,title:typeof a=="string"?a.trim():i.title}}export{Ce as CodeBlock,i as defaultMeta,N as escapeHtml,he as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,k as normalizeIndentation,se as parseLanguage,ve as parseMetastring,w as supportedLanguages};
 //# sourceMappingURL=code-block.js.map

package/dist/code-block.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { CopyIcon } from \"@phosphor-icons/react/Copy\";\nimport { FileTextIcon } from \"@phosphor-icons/react/FileText\";\nimport { TerminalIcon } from \"@phosphor-icons/react/Terminal\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as MantleIcon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFileIcon } from \"../icons/traffic-policy-file.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n * `CodeBlock.CopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code\n *       language=\"sh\"\n *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n *     />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst languageClassName = formatLanguageClassName(language);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14\",\n\t\t\t\t\t\"text-size-inherit text-size-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName={clsx(\"text-size-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where things like the\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Title = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-size-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<MantleIcon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<MantleIcon svg={<CopyIcon />} className=\"-ml-px\" />\n\t\t\t\t)}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<MantleIcon\n\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</Component>\n\t);\n});\nExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t  }\n\t);\n\n/**\n * A small icon that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nfunction CodeBlockIconComponent({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileTextIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <TerminalIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFileIcon />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn <MantleIcon className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n *\n * @see https://mantle.ngrok.com/components/code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * Code blocks render and apply syntax highlighting to blocks of code.\n\t * This is the root component for all code block components.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n\t * `CodeBlock.CopyButton` is rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code\n\t *       language=\"sh\"\n\t *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0`}\n\t *     />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to copy the code block contents to their\n\t * clipboard.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tExpanderButton,\n\t/**\n\t * The (optional) header slot of the `CodeBlock`. This is where things like the\n\t * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon that represents the type of code block being displayed,\n\t * rendered as an SVG next to the code block title in the code block header.\n\t *\n\t * You can pass in a custom SVG component or use one of the presets\n\t * (pass only one of `svg` or `preset`).\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n\t * use asChild to render something else.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.js</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp`;\n * - \\< => `&lt`;\n * - \\> => `&gt`;\n * - \\\" => `&quot`;\n * - \\' => `&#39`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet escaped = \"\";\n\tfor (const character of value) {\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst { indentation = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \"  \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst normalizedValue = normalizeValue(value);\n\t\tacc[key] = normalizedValue ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = parseMetaJson(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n *\n * @example\n * ```tsx\n * const normalized = normalizeValue('\"hello world\"');\n * // Returns: \"hello world\"\n *\n * const unchanged = normalizeValue('hello');\n * // Returns: \"hello\"\n * ```\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n *\n * @example\n * ```tsx\n * const tokens = tokenizeMetastring('title=\"My File\" collapsible mode=cli');\n * // Returns: ['title=\"My File\"', 'collapsible', 'mode=cli']\n *\n * const simpleTokens = tokenizeMetastring('collapsible disableCopy');\n * // Returns: ['collapsible', 'disableCopy']\n * ```\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n\n/**\n * Type Predicate: checks if the given value is a valid mode.\n * @private\n */\nfunction isMode(input: unknown): input is Mode {\n\treturn modes.includes(input as Mode);\n}\n\n/**\n * Parses a meta JSON object into a Meta object.\n * @private\n */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation)\n\t\t\t? indentation\n\t\t\t: defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n"],"mappings":"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","names":["CaretDownIcon","CheckIcon","CopyIcon","FileTextIcon","TerminalIcon","Slot","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","isIndentation","input","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","Root","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","Body","Code","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","Header","Title","CopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Icon","CheckIcon","CopyIcon","ExpanderButton","prev","CaretDownIcon","CodeBlockIconComponent","preset","_svgProp","svg","FileTextIcon","TerminalIcon","TrafficPolicyFileIcon","CodeBlock","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","modes","defaultMeta","parseMetastring","input","metastring","metaJson","tokenizeMetastring","acc","token","key","value","normalizedValue","normalizeValue","parsed","parseMetaJson","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char","isMode","modes","parseMetaJson","collapsible","defaultMeta","disableCopy","indentation","mode","title","parseBooleanish","isIndentation"]}
+{"version":3,"sources":["../src/components/code-block/code-block.tsx","../src/components/code-block/escape-html.ts","../src/components/code-block/highlighter.ts","../src/components/code-block/indentation.ts","../src/components/code-block/normalize.ts","../src/components/code-block/supported-languages.ts","../src/components/code-block/fmt-code.ts","../src/components/code-block/parse-metastring.ts"],"sourcesContent":["\"use client\";\n\nimport { CaretDownIcon } from \"@phosphor-icons/react/CaretDown\";\nimport { CheckIcon } from \"@phosphor-icons/react/Check\";\nimport { CopyIcon } from \"@phosphor-icons/react/Copy\";\nimport { FileTextIcon } from \"@phosphor-icons/react/FileText\";\nimport { TerminalIcon } from \"@phosphor-icons/react/Terminal\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport clsx from \"clsx\";\nimport type {\n\tComponentProps,\n\tComponentRef,\n\tDispatch,\n\tHTMLAttributes,\n\tReactNode,\n\tSetStateAction,\n} from \"react\";\nimport {\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n\tuseEffect,\n\tuseId,\n\tuseMemo,\n\tuseRef,\n\tuseState,\n} from \"react\";\nimport assert from \"tiny-invariant\";\nimport { useCopyToClipboard } from \"../../hooks/use-copy-to-clipboard.js\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon as MantleIcon } from \"../icon/icon.js\";\nimport type { SvgAttributes } from \"../icon/types.js\";\nimport { TrafficPolicyFileIcon } from \"../icons/traffic-policy-file.js\";\nimport { escapeHtml } from \"./escape-html.js\";\nimport { Highlighter } from \"./highlighter.js\";\nimport { type Indentation, inferIndentation } from \"./indentation.js\";\nimport type { LineRange } from \"./line-numbers.js\";\nimport { normalizeIndentation } from \"./normalize.js\";\nimport type { Mode } from \"./parse-metastring.js\";\nimport type { SupportedLanguage } from \"./supported-languages.js\";\nimport {\n\tformatLanguageClassName,\n\tsupportedLanguages,\n} from \"./supported-languages.js\";\n\n/**\n * TODO(cody):\n * - fix line numbers, maybe try grid instead of :before and flex?\n * - fix line hightlighting\n * - fix line wrapping? horizontal scrolling has problems w/ line highlighting :(\n */\n\ntype CodeBlockContextType = {\n\tcodeId: string | undefined;\n\tcopyText: string;\n\thasCodeExpander: boolean;\n\tisCodeExpanded: boolean;\n\tregisterCodeId: (id: string) => void;\n\tsetCopyText: (newCopyText: string) => void;\n\tsetHasCodeExpander: (value: boolean) => void;\n\tsetIsCodeExpanded: Dispatch<SetStateAction<boolean>>;\n\tunregisterCodeId: (id: string) => void;\n};\n\nconst CodeBlockContext = createContext<CodeBlockContextType>({\n\tcodeId: undefined,\n\tcopyText: \"\",\n\thasCodeExpander: false,\n\tisCodeExpanded: false,\n\tregisterCodeId: () => {},\n\tsetCopyText: () => {},\n\tsetHasCodeExpander: () => {},\n\tsetIsCodeExpanded: () => {},\n\tunregisterCodeId: () => {},\n});\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n * This is the root component for all code block components.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Root = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst [copyText, setCopyText] = useState(\"\");\n\tconst [hasCodeExpander, setHasCodeExpander] = useState(false);\n\tconst [isCodeExpanded, setIsCodeExpanded] = useState(false);\n\tconst [codeId, setCodeId] = useState<string | undefined>(undefined);\n\n\tconst context: CodeBlockContextType = useMemo(\n\t\t() =>\n\t\t\t({\n\t\t\t\tcodeId,\n\t\t\t\tcopyText,\n\t\t\t\thasCodeExpander,\n\t\t\t\tisCodeExpanded,\n\t\t\t\tregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told == null,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn id;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t\tsetCopyText,\n\t\t\t\tsetHasCodeExpander,\n\t\t\t\tsetIsCodeExpanded,\n\t\t\t\tunregisterCodeId: (id) => {\n\t\t\t\t\tsetCodeId((old) => {\n\t\t\t\t\t\tassert(\n\t\t\t\t\t\t\told === id,\n\t\t\t\t\t\t\t\"You can only render a single CodeBlockCode within a CodeBlock.\",\n\t\t\t\t\t\t);\n\t\t\t\t\t\treturn undefined;\n\t\t\t\t\t});\n\t\t\t\t},\n\t\t\t}) as const,\n\t\t[codeId, copyText, hasCodeExpander, isCodeExpanded],\n\t);\n\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<CodeBlockContext.Provider value={context}>\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"text-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono\",\n\t\t\t\t\t\"[&_svg]:shrink-0\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t</CodeBlockContext.Provider>\n\t);\n});\nRoot.displayName = \"CodeBlock\";\n\n/**\n * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n * `CodeBlock.CopyButton` is rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Body = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component className={cx(\"relative\", className)} ref={ref} {...props} />\n\t);\n});\nBody.displayName = \"CodeBlockBody\";\n\ntype CodeBlockCodeProps = Omit<ComponentProps<\"pre\">, \"children\"> & {\n\t/**\n\t * The code to display in the code block. Should be code formatted as a string. This code will be passed to our syntax highlighter.\n\t */\n\tvalue: string;\n\t/**\n\t * @todo not implemented yet\n\t */\n\thighlightLines?: (LineRange | number)[];\n\t/**\n\t * The type of indentation to use. Can be either \"tabs\" or \"spaces\".\n\t * @default inferred from the given language, fallback to `spaces`\n\t */\n\tindentation?: Indentation;\n\t/**\n\t * The language of the code block. This will be used to determine how to syntax highlight the code.\n\t * @default `\"text\"`.\n\t */\n\tlanguage?: SupportedLanguage;\n\t/**\n\t * @todo not implemented yet\n\t */\n\tshowLineNumbers?: boolean;\n};\n\n/**\n * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code\n *       language=\"sh\"\n *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0 -map 0:a:0 -c:a:0 ac3 -b:a:0 640k -ac:a:1 2 -c:a:1 aac -b:2 128k out.mp4`}\n *     />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Code = forwardRef<ComponentRef<\"pre\">, CodeBlockCodeProps>(\n\t(\n\t\t{\n\t\t\tclassName,\n\t\t\thighlightLines: _unusedHighlightLines, // not implemented yet\n\t\t\tindentation: propIndentation,\n\t\t\tlanguage = \"text\",\n\t\t\tshowLineNumbers: _unusedShowLineNumbers, // not implemented yet\n\t\t\tstyle,\n\t\t\ttabIndex,\n\t\t\tvalue,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst id = useId();\n\t\tconst {\n\t\t\thasCodeExpander,\n\t\t\tisCodeExpanded,\n\t\t\tregisterCodeId,\n\t\t\tsetCopyText,\n\t\t\tunregisterCodeId,\n\t\t} = useContext(CodeBlockContext);\n\t\tconst indentation = inferIndentation(language, propIndentation);\n\n\t\t// trim any leading and trailing whitespace/empty lines, convert leading tabs to spaces\n\t\tconst normalizedAndTrimmedValue = useMemo(\n\t\t\t() => normalizeIndentation(value, { indentation }),\n\t\t\t[value, indentation],\n\t\t);\n\t\tconst [highlightedCodeInnerHtml, setHighlightedCodeInnerHtml] = useState(\n\t\t\t// initialize the <code> inner html with escaped HTML since we are using\n\t\t\t// dangerouslySetInnerHTML to set the inner html of the <code> element\n\t\t\t// and use Prism.js to \"highlight\" the code in a useEffect (client-side only)\n\t\t\tescapeHtml(normalizeIndentation(value, { indentation })),\n\t\t);\n\n\t\tuseEffect(() => {\n\t\t\tconst grammar = Highlighter.languages[language];\n\t\t\tassert(\n\t\t\t\tgrammar,\n\t\t\t\t`CodeBlock does not support the language \"${language}\". The syntax highlighter does not have a grammar for this language. The supported languages are: ${supportedLanguages.join(\", \")}.`,\n\t\t\t);\n\t\t\tconst newHighlightedCodeInnerHtml = Highlighter.highlight(\n\t\t\t\tnormalizedAndTrimmedValue,\n\t\t\t\tgrammar,\n\t\t\t\tlanguage,\n\t\t\t);\n\t\t\tsetHighlightedCodeInnerHtml(newHighlightedCodeInnerHtml);\n\t\t}, [normalizedAndTrimmedValue, language]);\n\n\t\tuseEffect(() => {\n\t\t\tsetCopyText(normalizedAndTrimmedValue);\n\t\t}, [normalizedAndTrimmedValue, setCopyText]);\n\n\t\tuseEffect(() => {\n\t\t\tregisterCodeId(id);\n\n\t\t\treturn () => {\n\t\t\t\tunregisterCodeId(id);\n\t\t\t};\n\t\t}, [id, registerCodeId, unregisterCodeId]);\n\n\t\tconst languageClassName = formatLanguageClassName(language);\n\n\t\treturn (\n\t\t\t<pre\n\t\t\t\taria-expanded={hasCodeExpander ? isCodeExpanded : undefined}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"scrollbar overflow-x-auto overflow-y-hidden p-4 pr-14\",\n\t\t\t\t\t\"text-mono m-0 font-mono\",\n\t\t\t\t\t\"aria-collapsed:max-h-[13.6rem]\",\n\t\t\t\t\tlanguageClassName, // place it last because prism does weird stuff client side, causes hydration mismatches\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-lang={language}\n\t\t\t\tid={id}\n\t\t\t\tref={ref}\n\t\t\t\tstyle={{\n\t\t\t\t\t...style,\n\t\t\t\t\ttabSize: 2,\n\t\t\t\t\tMozTabSize: 2,\n\t\t\t\t}}\n\t\t\t\t// prism.js adds a tabindex of 0 to the pre element by default (unless it's set)\n\t\t\t\t// this is unnecessary, we do not want this automatic behavior!\n\t\t\t\ttabIndex={tabIndex ?? -1}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<code\n\t\t\t\t\tclassName={clsx(\"text-inherit\", languageClassName)}\n\t\t\t\t\tdangerouslySetInnerHTML={{\n\t\t\t\t\t\t__html: highlightedCodeInnerHtml,\n\t\t\t\t\t}}\n\t\t\t\t\t// we need to suppress the hydration warning because we are setting the innerHTML of the code block\n\t\t\t\t\t// and using Prism.js to \"highlight\" the code in a useEffect (client-side only), which does different things on the client and server\n\t\t\t\t\tsuppressHydrationWarning\n\t\t\t\t/>\n\t\t\t</pre>\n\t\t);\n\t},\n);\nCode.displayName = \"CodeBlockCode\";\n\n/**\n * The (optional) header slot of the `CodeBlock`. This is where things like the\n * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Header = forwardRef<\n\tComponentRef<\"div\">,\n\tComponentProps<\"div\"> & WithAsChild\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"div\";\n\n\treturn (\n\t\t<Component\n\t\t\tclassName={cx(\n\t\t\t\t\"flex items-center gap-1 border-b border-gray-300 bg-gray-100 px-4 py-2 text-gray-700\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nHeader.displayName = \"CodeBlockHeader\";\n\n/**\n * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n * use asChild to render something else.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst Title = forwardRef<\n\tHTMLHeadingElement,\n\tHTMLAttributes<HTMLHeadingElement> & { asChild?: boolean }\n>(({ asChild = false, className, ...props }, ref) => {\n\tconst Component = asChild ? Slot : \"h3\";\n\n\treturn (\n\t\t<Component\n\t\t\tref={ref}\n\t\t\tclassName={cx(\"text-mono m-0 font-mono font-normal\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nTitle.displayName = \"CodeBlockTitle\";\n\ntype CodeBlockCopyButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"type\"\n> &\n\tWithAsChild & {\n\t\t/**\n\t\t * Callback fired when the copy button is clicked, passes the copied text as an argument.\n\t\t */\n\t\tonCopy?: (value: string) => void;\n\t\t/**\n\t\t * Callback fired when an error occurs during copying.\n\t\t */\n\t\tonCopyError?: (error: unknown) => void;\n\t};\n\n/**\n * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to copy the code block contents to their\n * clipboard.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CopyButton = forwardRef<ComponentRef<\"button\">, CodeBlockCopyButtonProps>(\n\t(\n\t\t{ asChild = false, className, onCopy, onCopyError, onClick, ...props },\n\t\tref,\n\t) => {\n\t\tconst { copyText } = useContext(CodeBlockContext);\n\t\tconst [, copyToClipboard] = useCopyToClipboard();\n\t\tconst [wasCopied, setWasCopied] = useState(false);\n\t\tconst timeoutHandle = useRef<number>(0);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"focus-visible:border-accent-600 focus-visible:ring-focus-accent absolute right-2.5 top-2.5 z-10 flex size-7 items-center justify-center rounded border border-gray-300 bg-gray-50 shadow-[-1rem_0_0.75rem_-0.375rem_var(--color-gray-50),1rem_0_0_-0.25rem_var(--color-gray-50)] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-hidden focus-visible:ring-4\",\n\t\t\t\t\twasCopied &&\n\t\t\t\t\t\t\"bg-filled-success text-on-filled hover:bg-filled-success focus:bg-filled-success focus-visible:border-success-600 focus-visible:ring-focus-success w-auto gap-1 border-transparent pl-2 pr-1.5 hover:border-transparent\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tref={ref}\n\t\t\t\tonClick={async (event) => {\n\t\t\t\t\ttry {\n\t\t\t\t\t\tonClick?.(event);\n\t\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\n\t\t\t\t\t\tawait copyToClipboard(copyText);\n\t\t\t\t\t\tonCopy?.(copyText);\n\t\t\t\t\t\tsetWasCopied(true);\n\n\t\t\t\t\t\t// Clear any existing timeout\n\t\t\t\t\t\twindow.clearTimeout(timeoutHandle.current);\n\n\t\t\t\t\t\t// Reset the copied state after a short delay\n\t\t\t\t\t\ttimeoutHandle.current = window.setTimeout(() => {\n\t\t\t\t\t\t\tsetWasCopied(false);\n\t\t\t\t\t\t}, 2000);\n\t\t\t\t\t} catch (error) {\n\t\t\t\t\t\tonCopyError?.(error);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t<span className=\"sr-only\">Copy code</span>\n\t\t\t\t{wasCopied ? (\n\t\t\t\t\t<>\n\t\t\t\t\t\tCopied\n\t\t\t\t\t\t<MantleIcon svg={<CheckIcon weight=\"bold\" />} className=\"size-4\" />\n\t\t\t\t\t</>\n\t\t\t\t) : (\n\t\t\t\t\t<MantleIcon svg={<CopyIcon />} className=\"-ml-px\" />\n\t\t\t\t)}\n\t\t\t</Component>\n\t\t);\n\t},\n);\nCopyButton.displayName = \"CodeBlockCopyButton\";\n\ntype CodeBlockExpanderButtonProps = Omit<\n\tComponentProps<\"button\">,\n\t\"children\" | \"aria-controls\" | \"aria-expanded\"\n> &\n\tWithAsChild;\n\n/**\n * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n *\n * @note If this component is preset, the `CodeBlock` will automatically know\n * that it should be collapsible. Don't use this component if you don't want\n * the code block to be collapsible.\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst ExpanderButton = forwardRef<\n\tComponentRef<\"button\">,\n\tCodeBlockExpanderButtonProps\n>(({ asChild = false, className, onClick, ...props }, ref) => {\n\tconst { codeId, isCodeExpanded, setIsCodeExpanded, setHasCodeExpander } =\n\t\tuseContext(CodeBlockContext);\n\n\tuseEffect(() => {\n\t\tsetHasCodeExpander(true);\n\n\t\treturn () => {\n\t\t\tsetHasCodeExpander(false);\n\t\t};\n\t}, [setHasCodeExpander]);\n\n\tconst Component = asChild ? Slot : \"button\";\n\n\treturn (\n\t\t<Component\n\t\t\t{...props}\n\t\t\taria-controls={codeId}\n\t\t\taria-expanded={isCodeExpanded}\n\t\t\tclassName={cx(\n\t\t\t\t\"flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-gray-50 px-4 py-2 font-sans text-gray-700 hover:bg-gray-100\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\ttype=\"button\"\n\t\t\tonClick={(event) => {\n\t\t\t\tsetIsCodeExpanded((prev) => !prev);\n\t\t\t\tonClick?.(event);\n\t\t\t}}\n\t\t>\n\t\t\t{isCodeExpanded ? \"Show less\" : \"Show more\"}{\" \"}\n\t\t\t<MantleIcon\n\t\t\t\tsvg={<CaretDownIcon weight=\"bold\" />}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"size-4\",\n\t\t\t\t\tisCodeExpanded && \"rotate-180\",\n\t\t\t\t\t\"transition-all duration-150\",\n\t\t\t\t)}\n\t\t\t/>\n\t\t</Component>\n\t);\n});\nExpanderButton.displayName = \"CodeBlockExpanderButton\";\n\ntype CodeBlockIconProps = Omit<SvgAttributes, \"children\"> &\n\t(\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg: ReactNode;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset?: undefined | never;\n\t\t  }\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * A custom icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tsvg?: undefined | never;\n\t\t\t\t/**\n\t\t\t\t * A preset icon to display in the code block header.\n\t\t\t\t * (Pass only one of `svg` or `preset`.)\n\t\t\t\t */\n\t\t\t\tpreset: Mode;\n\t\t  }\n\t);\n\n/**\n * A small icon that represents the type of code block being displayed,\n * rendered as an SVG next to the code block title in the code block header.\n *\n * You can pass in a custom SVG component or use one of the presets\n * (pass only one of `svg` or `preset`).\n *\n * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nfunction CodeBlockIconComponent({\n\tclassName,\n\tpreset,\n\tsvg: _svgProp,\n\t...props\n}: CodeBlockIconProps) {\n\tlet svg = _svgProp;\n\tif (preset != null) {\n\t\tswitch (preset) {\n\t\t\tcase \"file\":\n\t\t\t\tsvg = <FileTextIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"cli\":\n\t\t\t\tsvg = <TerminalIcon weight=\"fill\" />;\n\t\t\t\tbreak;\n\t\t\tcase \"traffic-policy\":\n\t\t\t\tsvg = <TrafficPolicyFileIcon />;\n\t\t\t\tbreak;\n\t\t}\n\t}\n\n\treturn <MantleIcon className={className} svg={svg} {...props} />;\n}\nCodeBlockIconComponent.displayName = \"CodeBlockIcon\";\n\n/**\n * Code blocks render and apply syntax highlighting to blocks of code.\n *\n * @see https://mantle.ngrok.com/components/code-block\n *\n * @example\n * ```tsx\n * <CodeBlock.Root>\n *   <CodeBlock.Header>\n *     <CodeBlock.Icon preset=\"file\" />\n *     <CodeBlock.Title>…</CodeBlock.Title>\n *   </CodeBlock.Header>\n *   <CodeBlock.Body>\n *     <CodeBlock.CopyButton />\n *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n *   </CodeBlock.Body>\n *   <CodeBlock.ExpanderButton />\n * </CodeBlock.Root>\n * ```\n */\nconst CodeBlock = {\n\t/**\n\t * Code blocks render and apply syntax highlighting to blocks of code.\n\t * This is the root component for all code block components.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * The body of the `CodeBlock`. This is where the `CodeBlock.Code` and optional\n\t * `CodeBlock.CopyButton` is rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * The `CodeBlock` content. This is where the code is rendered and syntax highlighted.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-code\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code\n\t *       language=\"sh\"\n\t *       value={fmtCode`ffmpeg -i multichannel.mxf -map 0:v:0 -map 0:a:0`}\n\t *     />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCode,\n\t/**\n\t * The (optional) copy button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to copy the code block contents to their\n\t * clipboard.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-copy-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.CopyButton />\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tCopyButton,\n\t/**\n\t * The (optional) expander button of the `CodeBlock`. Render this as a child of the\n\t * `CodeBlock.Body` to allow users to expand/collapse the code block contents.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-expander-button\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t *   <CodeBlock.ExpanderButton />\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tExpanderButton,\n\t/**\n\t * The (optional) header slot of the `CodeBlock`. This is where things like the\n\t * `CodeBlock.Icon` and `CodeBlock.Title` are rendered.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t *   <CodeBlock.Body>\n\t *     <CodeBlock.Code language=\"…\" value={fmtCode\\`…\\`} />\n\t *   </CodeBlock.Body>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * A small icon that represents the type of code block being displayed,\n\t * rendered as an SVG next to the code block title in the code block header.\n\t *\n\t * You can pass in a custom SVG component or use one of the presets\n\t * (pass only one of `svg` or `preset`).\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-icon\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>…</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tIcon: CodeBlockIconComponent,\n\t/**\n\t * The (optional) title of the `CodeBlock`. Default renders as an h3 element,\n\t * use asChild to render something else.\n\t *\n\t * @see https://mantle.ngrok.com/components/code-block#api-code-block-title\n\t *\n\t * @example\n\t * ```tsx\n\t * <CodeBlock.Root>\n\t *   <CodeBlock.Header>\n\t *     <CodeBlock.Icon preset=\"file\" />\n\t *     <CodeBlock.Title>example.js</CodeBlock.Title>\n\t *   </CodeBlock.Header>\n\t * </CodeBlock.Root>\n\t * ```\n\t */\n\tTitle,\n} as const;\n\nexport {\n\t//,\n\tCodeBlock,\n};\n","/**\n * Escapes special HTML characters in a string to their corresponding\n * HTML entities, preventing issues like unintended HTML rendering or\n * cross-site scripting (XSS) when injecting raw strings into the DOM\n * using `dangerouslySetInnerHTML`.\n *\n * Characters escaped:\n * - \\& => `&amp`;\n * - \\< => `&lt`;\n * - \\> => `&gt`;\n * - \\\" => `&quot`;\n * - \\' => `&#39`;\n *\n * @param {string} value The raw string to be escaped.\n *\n * @example\n * escapeHtml('<div>Hello & \"world\"</div>');\n * // Returns: '&lt;div&gt;Hello &amp; &quot;world&quot;&lt;/div&gt;'\n */\nfunction escapeHtml(value: string): string {\n\tlet escaped = \"\";\n\tfor (const character of value) {\n\t\tswitch (character) {\n\t\t\tcase \"&\":\n\t\t\t\tescaped += \"&amp;\";\n\t\t\t\tbreak;\n\t\t\tcase \"<\":\n\t\t\t\tescaped += \"&lt;\";\n\t\t\t\tbreak;\n\t\t\tcase \">\":\n\t\t\t\tescaped += \"&gt;\";\n\t\t\t\tbreak;\n\t\t\tcase '\"':\n\t\t\t\tescaped += \"&quot;\";\n\t\t\t\tbreak;\n\t\t\tcase \"'\":\n\t\t\t\tescaped += \"&#39;\";\n\t\t\t\tbreak;\n\t\t\tdefault:\n\t\t\t\tescaped += character;\n\t\t}\n\t}\n\treturn escaped;\n}\n\nexport {\n\t//,\n\tescapeHtml,\n};\n","import Prism from \"prismjs\";\nimport \"prismjs/components/prism-bash.js\";\nimport \"prismjs/components/prism-csharp.js\";\nimport \"prismjs/components/prism-css.js\";\nimport \"prismjs/components/prism-go.js\";\nimport \"prismjs/components/prism-java.js\";\nimport \"prismjs/components/prism-javascript.js\";\nimport \"prismjs/components/prism-json.js\";\nimport \"prismjs/components/prism-jsx.js\";\nimport \"prismjs/components/prism-markup.js\";\nimport \"prismjs/components/prism-python.js\";\nimport \"prismjs/components/prism-ruby.js\";\nimport \"prismjs/components/prism-rust.js\";\nimport \"prismjs/components/prism-tsx.js\";\nimport \"prismjs/components/prism-typescript.js\";\nimport \"prismjs/components/prism-yaml.js\";\n\nexport {\n\t//,\n\tPrism as Highlighter,\n};\n","import type { SupportedLanguage } from \"./supported-languages.js\";\n\nconst indentations = [\"tabs\", \"spaces\"] as const;\ntype Indentation = (typeof indentations)[number];\n\n/**\n * Type Predicate: checks if the given value is a valid indentation type.\n */\nfunction isIndentation(input: unknown): input is Indentation {\n\treturn indentations.includes(input as Indentation);\n}\n\n/**\n * Infers the indentation type based on the language and preferred indentation.\n *\n * @param language - The language to check.\n * @param preferredIndentation - The preferred indentation type (overrides what is detected).\n */\nfunction inferIndentation(\n\tlanguage: SupportedLanguage,\n\tpreferredIndentation: Indentation | undefined,\n) {\n\t// if the user has a preferred indentation, use that regardless of the language\n\tif (preferredIndentation) {\n\t\treturn preferredIndentation;\n\t}\n\n\tif (isTabIndentedLanguage(language)) {\n\t\treturn \"tabs\";\n\t}\n\n\tif (isSpaceIndentedLanguage(language)) {\n\t\treturn \"spaces\";\n\t}\n\n\treturn \"spaces\";\n}\n\nexport {\n\t//,\n\tindentations,\n\tinferIndentation,\n\tisIndentation,\n};\n\nexport type {\n\t//,\n\tIndentation,\n};\n\n/**\n * Languages that require or strongly prefer tabs\n */\nconst tabIndentedLanguages = [\n\t\"csharp\",\n\t\"css\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"jsx\",\n\t\"ts\",\n\t\"tsx\",\n\t\"typescript\",\n\t\"xml\",\n] as const satisfies SupportedLanguage[];\n\n/**\n * Languages that require or strongly prefer spaces\n */\nconst spaceIndentedLanguages = [\n\t\"python\",\n\t\"py\",\n\t\"yaml\",\n\t\"yml\",\n\t\"ruby\",\n\t\"rb\",\n] as const satisfies SupportedLanguage[];\n\ntype TabIndentedLanguage = (typeof tabIndentedLanguages)[number];\ntype SpaceIndentedLanguage = (typeof spaceIndentedLanguages)[number];\n\n/**\n * Type Predicate: checks if the given value is a required/preferred tab-indented language.\n */\nfunction isTabIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is TabIndentedLanguage {\n\treturn tabIndentedLanguages.includes(value as TabIndentedLanguage);\n}\n\n/**\n * Type Predicate: checks if the given value is a required/preferred space-indented language.\n */\nfunction isSpaceIndentedLanguage(\n\tvalue: SupportedLanguage,\n): value is SpaceIndentedLanguage {\n\treturn spaceIndentedLanguages.includes(value as SpaceIndentedLanguage);\n}\n","import type { Indentation } from \"./indentation.js\";\n\ntype Options = {\n\t/**\n\t * The indentation type to use. Can be either \"tabs\" or \"spaces\".\n\t * @default \"spaces\"\n\t */\n\tindentation?: Indentation;\n};\n\n/**\n * Trim any leading and trailing whitespace/empty lines, convert leading\n * indentation to the given options.indentation\n */\nfunction normalizeIndentation(value: string, options?: Options): string {\n\tconst { indentation = \"spaces\" } = options || {};\n\n\treturn value.trim().replace(/^[ \\t]*(?=\\S)/gm, (match) => {\n\t\t// 1 tab === 2 spaces\n\t\t// convert tabs to spaces and spaces to tabs\n\t\tif (indentation === \"spaces\") {\n\t\t\treturn match.replace(/\\t/g, \"  \");\n\t\t}\n\t\treturn match.replace(/ {2}/g, \"\\t\");\n\t});\n}\n\nexport {\n\t//,\n\tnormalizeIndentation,\n};\n","/**\n * List of supported languages for syntax highlighting.\n * @private\n */\nexport const supportedLanguages = [\n\t\"bash\",\n\t\"cs\",\n\t\"csharp\",\n\t\"css\",\n\t\"dotnet\",\n\t\"go\",\n\t\"html\",\n\t\"java\",\n\t\"javascript\",\n\t\"js\",\n\t\"json\",\n\t\"jsx\",\n\t\"markup\",\n\t\"plain\",\n\t\"plaintext\",\n\t\"py\",\n\t\"python\",\n\t\"rb\",\n\t\"ruby\",\n\t\"rust\",\n\t\"sh\",\n\t\"shell\",\n\t\"text\",\n\t\"ts\",\n\t\"tsx\",\n\t\"txt\",\n\t\"typescript\",\n\t\"xml\",\n\t\"yaml\",\n\t\"yml\",\n] as const;\n\n/**\n * Supported languages for syntax highlighting.\n */\ntype SupportedLanguage = (typeof supportedLanguages)[number];\n\n/**\n * Parses a markdown code block (```) language class into a SupportedLanguage.\n * Defaults to \"sh\" if no supported language is found.\n */\nfunction parseLanguage(\n\tvalue: `language-${string}` | `lang-${string}` | (string & {}) | undefined,\n): SupportedLanguage {\n\tif (!value) {\n\t\treturn \"sh\";\n\t}\n\n\t// remove leading \"language-\" and \"lang-\" prefixes\n\t// find first '-' and slice from there\n\tconst maybeLanguage = value.trim().slice(value.indexOf(\"-\") + 1);\n\n\treturn isSupportedLanguage(maybeLanguage) ? maybeLanguage : \"sh\";\n}\n\n/**\n * Type Predicate: checks if an arbitrary value is a supported syntax highlighting language.\n */\nconst isSupportedLanguage = (value: unknown): value is SupportedLanguage => {\n\treturn (\n\t\ttypeof value === \"string\" &&\n\t\tsupportedLanguages.includes(value as SupportedLanguage)\n\t);\n};\n\n/**\n * A class name for a language that Prism.js can understand.\n */\ntype LanguageClass = `language-${SupportedLanguage}`;\n\n/**\n * Formats a language name into a class name that Prism.js can understand.\n * @default \"language-sh\"\n */\nfunction formatLanguageClassName(\n\tlanguage: SupportedLanguage | undefined = \"sh\",\n) {\n\tconst lang = language ?? \"sh\";\n\tconst className: LanguageClass = `language-${lang}`;\n\treturn className;\n}\n\nexport { isSupportedLanguage, parseLanguage, formatLanguageClassName };\nexport type { SupportedLanguage };\n","type Primitive = string | number | boolean | undefined | null;\n\n/**\n * Tagged template literal to format code blocks and normalize leading indentation\n */\nfunction fmtCode(\n\tstrings: TemplateStringsArray,\n\t...values: Primitive[]\n): string {\n\tif (!isTemplateStringsArray(strings) || !Array.isArray(values)) {\n\t\tthrow new Error(\n\t\t\t\"It looks like you tried to call `fmtCode` as a function. Make sure to use it as a tagged template.\\n\\tExample: fmtCode`SELECT * FROM users`, not fmtCode('SELECT * FROM users')\",\n\t\t);\n\t}\n\n\tconst text = String.raw({ raw: strings }, ...values);\n\n\t// fine the minimum indentation of the code block\n\tconst minIndent = findMinIndent(text);\n\tconst lines = text.trim().split(\"\\n\");\n\n\treturn lines\n\t\t.map((line) => {\n\t\t\t// remove nothing if the line doesn't start with indentation\n\t\t\tif (/^\\S+/.test(line)) {\n\t\t\t\treturn line;\n\t\t\t}\n\t\t\treturn line.slice(minIndent);\n\t\t})\n\t\t.join(\"\\n\");\n}\n\nexport {\n\t//,\n\tfmtCode,\n};\n\n/**\n * Find the shortest indentation of a multiline string\n */\nfunction findMinIndent(value: string): number {\n\tconst match = value.match(/^[ \\t]*(?=\\S)/gm);\n\n\tif (!match) {\n\t\treturn 0;\n\t}\n\n\treturn match.reduce(\n\t\t(acc, curr) => Math.min(acc, curr.length),\n\t\tNumber.POSITIVE_INFINITY,\n\t);\n}\n\n/**\n * Type guard to check if a value is a `TemplateStringsArray`\n */\nfunction isTemplateStringsArray(\n\tstrings: unknown,\n): strings is TemplateStringsArray {\n\treturn (\n\t\tArray.isArray(strings) && \"raw\" in strings && Array.isArray(strings.raw)\n\t);\n}\n","import { parseBooleanish } from \"../../types/booleanish.js\";\nimport { type Indentation, isIndentation } from \"./indentation.js\";\n\nconst modes = [\n\t//,\n\t\"cli\",\n\t\"file\",\n\t\"traffic-policy\",\n] as const;\ntype Mode = (typeof modes)[number];\n\ntype MetaInput = {\n\tcollapsible?: boolean | undefined;\n\tdisableCopy?: boolean | undefined;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\ntype Meta = {\n\tcollapsible: boolean;\n\tdisableCopy: boolean;\n\tindentation?: Indentation | undefined;\n\tmode?: Mode | undefined;\n\ttitle?: string | undefined;\n};\n\nconst defaultMeta = {\n\tcollapsible: false,\n\tdisableCopy: false,\n\tindentation: undefined,\n\tmode: undefined,\n\ttitle: undefined,\n} as const satisfies Meta;\n\ntype DefaultMeta = typeof defaultMeta;\n\n/**\n * Parses a markdown code block (```) metastring into a meta object.\n * Defaults to DefaultMeta if no metastring given or if metastring is invalid.\n * Useful for parsing the metastring from a markdown code block to pass into the\n * CodeBlock components as props.\n */\nfunction parseMetastring(input: string | undefined): Meta {\n\tconst metastring = input?.trim() ?? \"\";\n\tif (!metastring) {\n\t\treturn defaultMeta;\n\t}\n\n\tconst metaJson = tokenizeMetastring(metastring).reduce<\n\t\tRecord<string, unknown>\n\t>((acc, token) => {\n\t\tconst [key, value] = token.split(\"=\");\n\t\tif (!key) {\n\t\t\treturn acc;\n\t\t}\n\t\tconst normalizedValue = normalizeValue(value);\n\t\tacc[key] = normalizedValue ?? true;\n\t\treturn acc;\n\t}, {});\n\n\ttry {\n\t\tconst parsed = parseMetaJson(metaJson);\n\n\t\t// return the parsed meta object, with default values filled in\n\t\treturn {\n\t\t\t...defaultMeta,\n\t\t\t...parsed,\n\t\t};\n\t} catch (_) {\n\t\treturn defaultMeta;\n\t}\n}\n\nexport {\n\t//,\n\tdefaultMeta,\n\tparseMetastring,\n};\nexport type {\n\t//,\n\tMeta,\n\tMetaInput,\n\tMode,\n\tDefaultMeta,\n};\n\n/**\n * Remove leading and trailing `\"` quotes around value\n * @private\n *\n * @example\n * ```tsx\n * const normalized = normalizeValue('\"hello world\"');\n * // Returns: \"hello world\"\n *\n * const unchanged = normalizeValue('hello');\n * // Returns: \"hello\"\n * ```\n */\nexport function normalizeValue(value: string | undefined) {\n\treturn value?.trim().replace(/^\"(.*)\"$/, \"$1\");\n}\n\n/**\n * Splits a metastring into an array of tokens that can be parsed into a meta object.\n * Should allow for quotes and spaces in tokens\n * @private\n *\n * @example\n * ```tsx\n * const tokens = tokenizeMetastring('title=\"My File\" collapsible mode=cli');\n * // Returns: ['title=\"My File\"', 'collapsible', 'mode=cli']\n *\n * const simpleTokens = tokenizeMetastring('collapsible disableCopy');\n * // Returns: ['collapsible', 'disableCopy']\n * ```\n */\nexport function tokenizeMetastring(value: string | undefined): string[] {\n\tconst input = value?.trim() ?? \"\";\n\tconst result: string[] = [];\n\n\tlet currentString = \"\";\n\tlet inQuotes = false;\n\n\tfor (const char of input) {\n\t\tif (char === \" \" && !inQuotes) {\n\t\t\tif (currentString) {\n\t\t\t\tresult.push(currentString);\n\t\t\t\tcurrentString = \"\";\n\t\t\t}\n\t\t} else if (char === '\"') {\n\t\t\tinQuotes = !inQuotes;\n\t\t\tcurrentString += char;\n\t\t} else {\n\t\t\tcurrentString += char;\n\t\t}\n\t}\n\n\tif (currentString) {\n\t\tresult.push(currentString);\n\t}\n\n\treturn result;\n}\n\n/**\n * Type Predicate: checks if the given value is a valid mode.\n * @private\n */\nfunction isMode(input: unknown): input is Mode {\n\treturn modes.includes(input as Mode);\n}\n\n/**\n * Parses a meta JSON object into a Meta object.\n * @private\n */\nfunction parseMetaJson(input: Record<string, unknown>): Meta {\n\tconst {\n\t\tcollapsible = defaultMeta.collapsible,\n\t\tdisableCopy = defaultMeta.disableCopy,\n\t\tindentation = defaultMeta.indentation,\n\t\tmode = defaultMeta.mode,\n\t\ttitle = defaultMeta.title,\n\t} = input;\n\n\treturn {\n\t\tcollapsible:\n\t\t\ttypeof collapsible === \"string\" || typeof collapsible === \"boolean\"\n\t\t\t\t? parseBooleanish(collapsible)\n\t\t\t\t: defaultMeta.collapsible,\n\t\tdisableCopy:\n\t\t\ttypeof disableCopy === \"string\" || typeof disableCopy === \"boolean\"\n\t\t\t\t? parseBooleanish(disableCopy)\n\t\t\t\t: defaultMeta.disableCopy,\n\t\tindentation: isIndentation(indentation)\n\t\t\t? indentation\n\t\t\t: defaultMeta.indentation,\n\t\tmode: isMode(mode) ? mode : defaultMeta.mode,\n\t\ttitle: typeof title === \"string\" ? title.trim() : defaultMeta.title,\n\t};\n}\n"],"mappings":"oOAEA,OAAS,iBAAAA,OAAqB,kCAC9B,OAAS,aAAAC,OAAiB,8BAC1B,OAAS,YAAAC,OAAgB,6BACzB,OAAS,gBAAAC,OAAoB,iCAC7B,OAAS,gBAAAC,OAAoB,iCAC7B,OAAS,QAAAC,MAAY,uBACrB,OAAOC,OAAU,OASjB,OACC,iBAAAC,GACA,cAAAC,EACA,cAAAC,EACA,aAAAC,EACA,SAAAC,GACA,WAAAC,EACA,UAAAC,GACA,YAAAC,MACM,QACP,OAAOC,MAAY,iBCRnB,SAASC,EAAWC,EAAuB,CAC1C,IAAIC,EAAU,GACd,QAAWC,KAAaF,EACvB,OAAQE,EAAW,CAClB,IAAK,IACJD,GAAW,QACX,MACD,IAAK,IACJA,GAAW,OACX,MACD,IAAK,IACJA,GAAW,OACX,MACD,IAAK,IACJA,GAAW,SACX,MACD,IAAK,IACJA,GAAW,QACX,MACD,QACCA,GAAWC,CACb,CAED,OAAOD,CACR,CC3CA,OAAOE,MAAW,UAClB,MAAO,mCACP,MAAO,qCACP,MAAO,kCACP,MAAO,iCACP,MAAO,mCACP,MAAO,yCACP,MAAO,mCACP,MAAO,kCACP,MAAO,qCACP,MAAO,qCACP,MAAO,mCACP,MAAO,mCACP,MAAO,kCACP,MAAO,yCACP,MAAO,mCCbP,IAAMC,GAAe,CAAC,OAAQ,QAAQ,EAMtC,SAASC,EAAcC,EAAsC,CAC5D,OAAOF,GAAa,SAASE,CAAoB,CAClD,CAQA,SAASC,EACRC,EACAC,EACC,CAED,OAAIA,IAIAC,GAAsBF,CAAQ,EAC1B,QAGJG,GAAwBH,CAAQ,EAC5B,UAIT,CAiBA,IAAMI,GAAuB,CAC5B,SACA,MACA,KACA,OACA,OACA,aACA,KACA,MACA,KACA,MACA,aACA,KACD,EAKMC,GAAyB,CAC9B,SACA,KACA,OACA,MACA,OACA,IACD,EAQA,SAASC,GACRC,EAC+B,CAC/B,OAAOH,GAAqB,SAASG,CAA4B,CAClE,CAKA,SAASC,GACRD,EACiC,CACjC,OAAOF,GAAuB,SAASE,CAA8B,CACtE,CCrFA,SAASE,EAAqBC,EAAeC,EAA2B,CACvE,GAAM,CAAE,YAAAC,EAAc,QAAS,EAAID,GAAW,CAAC,EAE/C,OAAOD,EAAM,KAAK,EAAE,QAAQ,kBAAoBG,GAG3CD,IAAgB,SACZC,EAAM,QAAQ,MAAO,IAAI,EAE1BA,EAAM,QAAQ,QAAS,GAAI,CAClC,CACF,CCrBO,IAAMC,EAAqB,CACjC,OACA,KACA,SACA,MACA,SACA,KACA,OACA,OACA,aACA,KACA,OACA,MACA,SACA,QACA,YACA,KACA,SACA,KACA,OACA,OACA,KACA,QACA,OACA,KACA,MACA,MACA,aACA,MACA,OACA,KACD,EAWA,SAASC,GACRC,EACoB,CACpB,GAAI,CAACA,EACJ,MAAO,KAKR,IAAMC,EAAgBD,EAAM,KAAK,EAAE,MAAMA,EAAM,QAAQ,GAAG,EAAI,CAAC,EAE/D,OAAOE,EAAoBD,CAAa,EAAIA,EAAgB,IAC7D,CAKA,IAAMC,EAAuBF,GAE3B,OAAOA,GAAU,UACjBF,EAAmB,SAASE,CAA0B,EAaxD,SAASG,EACRC,EAA0C,KACzC,CAGD,MADiC,YADpBA,GAAY,IACwB,EAElD,CL0DG,OA0WE,YAAAC,GA1WF,OAAAC,EA0WE,QAAAC,MA1WF,oBA9EH,IAAMC,EAAmBC,GAAoC,CAC5D,OAAQ,OACR,SAAU,GACV,gBAAiB,GACjB,eAAgB,GAChB,eAAgB,IAAM,CAAC,EACvB,YAAa,IAAM,CAAC,EACpB,mBAAoB,IAAM,CAAC,EAC3B,kBAAmB,IAAM,CAAC,EAC1B,iBAAkB,IAAM,CAAC,CAC1B,CAAC,EAuBKC,EAAOC,EAGX,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAAQ,CACpD,GAAM,CAACC,EAAUC,CAAW,EAAIC,EAAS,EAAE,EACrC,CAACC,EAAiBC,CAAkB,EAAIF,EAAS,EAAK,EACtD,CAACG,EAAgBC,CAAiB,EAAIJ,EAAS,EAAK,EACpD,CAACK,EAAQC,CAAS,EAAIN,EAA6B,MAAS,EAE5DO,EAAgCC,EACrC,KACE,CACA,OAAAH,EACA,SAAAP,EACA,gBAAAG,EACA,eAAAE,EACA,eAAiBM,GAAO,CACvBH,EAAWI,IACVC,EACCD,GAAO,KACP,gEACD,EACOD,EACP,CACF,EACA,YAAAV,EACA,mBAAAG,EACA,kBAAAE,EACA,iBAAmBK,GAAO,CACzBH,EAAWI,GAAQ,CAClBC,EACCD,IAAQD,EACR,gEACD,CAED,CAAC,CACF,CACD,GACD,CAACJ,EAAQP,EAAUG,EAAiBE,CAAc,CACnD,EAEMS,EAAYlB,EAAUmB,EAAO,MAEnC,OACCzB,EAACE,EAAiB,SAAjB,CAA0B,MAAOiB,EACjC,SAAAnB,EAACwB,EAAA,CACA,UAAWE,EACV,mFACA,mBACAnB,CACD,EACA,IAAKE,EACJ,GAAGD,EACL,EACD,CAEF,CAAC,EACDJ,EAAK,YAAc,YAuBnB,IAAMuB,EAAOtB,EAGX,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAI3CT,EAHiBM,EAAUmB,EAAO,MAGjC,CAAU,UAAWC,EAAG,WAAYnB,CAAS,EAAG,IAAKE,EAAM,GAAGD,EAAO,CAEvE,EACDmB,EAAK,YAAc,gBAkDnB,IAAMC,EAAOvB,EACZ,CACC,CACC,UAAAE,EACA,eAAgBsB,EAChB,YAAaC,EACb,SAAAC,EAAW,OACX,gBAAiBC,EACjB,MAAAC,EACA,SAAAC,EACA,MAAAC,EACA,GAAG3B,CACJ,EACAC,IACI,CACJ,IAAMY,EAAKe,GAAM,EACX,CACL,gBAAAvB,EACA,eAAAE,EACA,eAAAsB,EACA,YAAA1B,EACA,iBAAA2B,CACD,EAAIC,EAAWrC,CAAgB,EACzBsC,EAAcC,EAAiBV,EAAUD,CAAe,EAGxDY,EAA4BtB,EACjC,IAAMuB,EAAqBR,EAAO,CAAE,YAAAK,CAAY,CAAC,EACjD,CAACL,EAAOK,CAAW,CACpB,EACM,CAACI,EAA0BC,CAA2B,EAAIjC,EAI/DkC,EAAWH,EAAqBR,EAAO,CAAE,YAAAK,CAAY,CAAC,CAAC,CACxD,EAEAO,EAAU,IAAM,CACf,IAAMC,EAAUC,EAAY,UAAUlB,CAAQ,EAC9CR,EACCyB,EACA,4CAA4CjB,CAAQ,qGAAqGmB,EAAmB,KAAK,IAAI,CAAC,GACvL,EACA,IAAMC,GAA8BF,EAAY,UAC/CP,EACAM,EACAjB,CACD,EACAc,EAA4BM,EAA2B,CACxD,EAAG,CAACT,EAA2BX,CAAQ,CAAC,EAExCgB,EAAU,IAAM,CACfpC,EAAY+B,CAAyB,CACtC,EAAG,CAACA,EAA2B/B,CAAW,CAAC,EAE3CoC,EAAU,KACTV,EAAehB,CAAE,EAEV,IAAM,CACZiB,EAAiBjB,CAAE,CACpB,GACE,CAACA,EAAIgB,EAAgBC,CAAgB,CAAC,EAEzC,IAAMc,EAAoBC,EAAwBtB,CAAQ,EAE1D,OACC/B,EAAC,OACA,gBAAea,EAAkBE,EAAiB,OAClD,UAAWW,EACV,wDACA,0BACA,iCACA0B,EACA7C,CACD,EACA,YAAWwB,EACX,GAAIV,EACJ,IAAKZ,EACL,MAAO,CACN,GAAGwB,EACH,QAAS,EACT,WAAY,CACb,EAGA,SAAUC,GAAY,GACrB,GAAG1B,EAEJ,SAAAR,EAAC,QACA,UAAWsD,GAAK,eAAgBF,CAAiB,EACjD,wBAAyB,CACxB,OAAQR,CACT,EAGA,yBAAwB,GACzB,EACD,CAEF,CACD,EACAhB,EAAK,YAAc,gBAuBnB,IAAM2B,EAASlD,EAGb,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAI3CT,EAHiBM,EAAUmB,EAAO,MAGjC,CACA,UAAWC,EACV,uFACAnB,CACD,EACA,IAAKE,EACJ,GAAGD,EACL,CAED,EACD+C,EAAO,YAAc,kBAuBrB,IAAMC,EAAQnD,EAGZ,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,GAAGC,CAAM,EAAGC,IAI3CT,EAHiBM,EAAUmB,EAAO,KAGjC,CACA,IAAKhB,EACL,UAAWiB,EAAG,sCAAuCnB,CAAS,EAC7D,GAAGC,EACL,CAED,EACDgD,EAAM,YAAc,iBAuCpB,IAAMC,EAAapD,EAClB,CACC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,OAAAmD,EAAQ,YAAAC,EAAa,QAAAC,EAAS,GAAGpD,CAAM,EACrEC,IACI,CACJ,GAAM,CAAE,SAAAC,CAAS,EAAI6B,EAAWrC,CAAgB,EAC1C,CAAC,CAAE2D,CAAe,EAAIC,EAAmB,EACzC,CAACC,EAAWC,CAAY,EAAIpD,EAAS,EAAK,EAC1CqD,EAAgBC,GAAe,CAAC,EAItC,OACCjE,EAHiBK,EAAUmB,EAAO,SAGjC,CACA,KAAK,SACL,UAAWC,EACV,6WACAqC,GACC,0NACDxD,CACD,EACA,IAAKE,EACL,QAAS,MAAO0D,GAAU,CACzB,GAAI,CAEH,GADAP,IAAUO,CAAK,EACXA,EAAM,iBAAkB,CAE3B,OAAO,aAAaF,EAAc,OAAO,EACzC,MACD,CAEA,MAAMJ,EAAgBnD,CAAQ,EAC9BgD,IAAShD,CAAQ,EACjBsD,EAAa,EAAI,EAGjB,OAAO,aAAaC,EAAc,OAAO,EAGzCA,EAAc,QAAU,OAAO,WAAW,IAAM,CAC/CD,EAAa,EAAK,CACnB,EAAG,GAAI,CACR,OAASI,EAAO,CACfT,IAAcS,CAAK,CACpB,CACD,EACC,GAAG5D,EAEJ,UAAAR,EAAC,QAAK,UAAU,UAAU,qBAAS,EAClC+D,EACA9D,EAAAF,GAAA,CAAE,mBAEDC,EAACqE,EAAA,CAAW,IAAKrE,EAACsE,GAAA,CAAU,OAAO,OAAO,EAAI,UAAU,SAAS,GAClE,EAEAtE,EAACqE,EAAA,CAAW,IAAKrE,EAACuE,GAAA,EAAS,EAAI,UAAU,SAAS,GAEpD,CAEF,CACD,EACAd,EAAW,YAAc,sBAiCzB,IAAMe,EAAiBnE,EAGrB,CAAC,CAAE,QAAAC,EAAU,GAAO,UAAAC,EAAW,QAAAqD,EAAS,GAAGpD,CAAM,EAAGC,IAAQ,CAC7D,GAAM,CAAE,OAAAQ,EAAQ,eAAAF,EAAgB,kBAAAC,EAAmB,mBAAAF,CAAmB,EACrEyB,EAAWrC,CAAgB,EAE5B,OAAA6C,EAAU,KACTjC,EAAmB,EAAI,EAEhB,IAAM,CACZA,EAAmB,EAAK,CACzB,GACE,CAACA,CAAkB,CAAC,EAKtBb,EAHiBK,EAAUmB,EAAO,SAGjC,CACC,GAAGjB,EACJ,gBAAeS,EACf,gBAAeF,EACf,UAAWW,EACV,0IACAnB,CACD,EACA,IAAKE,EACL,KAAK,SACL,QAAU0D,GAAU,CACnBnD,EAAmByD,GAAS,CAACA,CAAI,EACjCb,IAAUO,CAAK,CAChB,EAEC,UAAApD,EAAiB,YAAc,YAAa,IAC7Cf,EAACqE,EAAA,CACA,IAAKrE,EAAC0E,GAAA,CAAc,OAAO,OAAO,EAClC,UAAWhD,EACV,SACAX,GAAkB,aAClB,6BACD,EACD,GACD,CAEF,CAAC,EACDyD,EAAe,YAAc,0BAsD7B,SAASG,EAAuB,CAC/B,UAAApE,EACA,OAAAqE,EACA,IAAKC,EACL,GAAGrE,CACJ,EAAuB,CACtB,IAAIsE,EAAMD,EACV,GAAID,GAAU,KACb,OAAQA,EAAQ,CACf,IAAK,OACJE,EAAM9E,EAAC+E,GAAA,CAAa,OAAO,OAAO,EAClC,MACD,IAAK,MACJD,EAAM9E,EAACgF,GAAA,CAAa,OAAO,OAAO,EAClC,MACD,IAAK,iBACJF,EAAM9E,EAACiF,EAAA,EAAsB,EAC7B,KACF,CAGD,OAAOjF,EAACqE,EAAA,CAAW,UAAW9D,EAAW,IAAKuE,EAAM,GAAGtE,EAAO,CAC/D,CACAmE,EAAuB,YAAc,gBAsBrC,IAAMO,GAAY,CAsBjB,KAAA9E,EAiBA,KAAAuB,EAkBA,KAAAC,EAkBA,WAAA6B,EAiBA,eAAAe,EAoBA,OAAAjB,EAoBA,KAAMoB,EAiBN,MAAAnB,CACD,EMt0BA,SAAS2B,GACRC,KACGC,EACM,CACT,GAAI,CAACC,GAAuBF,CAAO,GAAK,CAAC,MAAM,QAAQC,CAAM,EAC5D,MAAM,IAAI,MACT,gLACD,EAGD,IAAME,EAAO,OAAO,IAAI,CAAE,IAAKH,CAAQ,EAAG,GAAGC,CAAM,EAG7CG,EAAYC,GAAcF,CAAI,EAGpC,OAFcA,EAAK,KAAK,EAAE,MAAM;AAAA,CAAI,EAGlC,IAAKG,GAED,OAAO,KAAKA,CAAI,EACZA,EAEDA,EAAK,MAAMF,CAAS,CAC3B,EACA,KAAK;AAAA,CAAI,CACZ,CAUA,SAASG,GAAcC,EAAuB,CAC7C,IAAMC,EAAQD,EAAM,MAAM,iBAAiB,EAE3C,OAAKC,EAIEA,EAAM,OACZ,CAACC,EAAKC,IAAS,KAAK,IAAID,EAAKC,EAAK,MAAM,EACxC,OAAO,iBACR,EANQ,CAOT,CAKA,SAASC,GACRC,EACkC,CAClC,OACC,MAAM,QAAQA,CAAO,GAAK,QAASA,GAAW,MAAM,QAAQA,EAAQ,GAAG,CAEzE,CC3DA,IAAMC,GAAQ,CAEb,MACA,OACA,gBACD,EAmBMC,EAAc,CACnB,YAAa,GACb,YAAa,GACb,YAAa,OACb,KAAM,OACN,MAAO,MACR,EAUA,SAASC,GAAgBC,EAAiC,CACzD,IAAMC,EAAaD,GAAO,KAAK,GAAK,GACpC,GAAI,CAACC,EACJ,OAAOH,EAGR,IAAMI,EAAWC,GAAmBF,CAAU,EAAE,OAE9C,CAACG,EAAKC,IAAU,CACjB,GAAM,CAACC,EAAKC,CAAK,EAAIF,EAAM,MAAM,GAAG,EACpC,GAAI,CAACC,EACJ,OAAOF,EAER,IAAMI,EAAkBC,GAAeF,CAAK,EAC5C,OAAAH,EAAIE,CAAG,EAAIE,GAAmB,GACvBJ,CACR,EAAG,CAAC,CAAC,EAEL,GAAI,CACH,IAAMM,EAASC,GAAcT,CAAQ,EAGrC,MAAO,CACN,GAAGJ,EACH,GAAGY,CACJ,CACD,MAAY,CACX,OAAOZ,CACR,CACD,CA4BO,SAASc,GAAeC,EAA2B,CACzD,OAAOA,GAAO,KAAK,EAAE,QAAQ,WAAY,IAAI,CAC9C,CAgBO,SAASC,GAAmBD,EAAqC,CACvE,IAAME,EAAQF,GAAO,KAAK,GAAK,GACzBG,EAAmB,CAAC,EAEtBC,EAAgB,GAChBC,EAAW,GAEf,QAAWC,KAAQJ,EACdI,IAAS,KAAO,CAACD,EAChBD,IACHD,EAAO,KAAKC,CAAa,EACzBA,EAAgB,KAEPE,IAAS,MACnBD,EAAW,CAACA,GACZD,GAAiBE,GAMnB,OAAIF,GACHD,EAAO,KAAKC,CAAa,EAGnBD,CACR,CAMA,SAASI,GAAOL,EAA+B,CAC9C,OAAOM,GAAM,SAASN,CAAa,CACpC,CAMA,SAASO,GAAcP,EAAsC,CAC5D,GAAM,CACL,YAAAQ,EAAcC,EAAY,YAC1B,YAAAC,EAAcD,EAAY,YAC1B,YAAAE,EAAcF,EAAY,YAC1B,KAAAG,EAAOH,EAAY,KACnB,MAAAI,EAAQJ,EAAY,KACrB,EAAIT,EAEJ,MAAO,CACN,YACC,OAAOQ,GAAgB,UAAY,OAAOA,GAAgB,UACvDM,EAAgBN,CAAW,EAC3BC,EAAY,YAChB,YACC,OAAOC,GAAgB,UAAY,OAAOA,GAAgB,UACvDI,EAAgBJ,CAAW,EAC3BD,EAAY,YAChB,YAAaM,EAAcJ,CAAW,EACnCA,EACAF,EAAY,YACf,KAAMJ,GAAOO,CAAI,EAAIA,EAAOH,EAAY,KACxC,MAAO,OAAOI,GAAU,SAAWA,EAAM,KAAK,EAAIJ,EAAY,KAC/D,CACD","names":["CaretDownIcon","CheckIcon","CopyIcon","FileTextIcon","TerminalIcon","Slot","clsx","createContext","forwardRef","useContext","useEffect","useId","useMemo","useRef","useState","assert","escapeHtml","value","escaped","character","Prism","indentations","isIndentation","input","inferIndentation","language","preferredIndentation","isTabIndentedLanguage","isSpaceIndentedLanguage","tabIndentedLanguages","spaceIndentedLanguages","isTabIndentedLanguage","value","isSpaceIndentedLanguage","normalizeIndentation","value","options","indentation","match","supportedLanguages","parseLanguage","value","maybeLanguage","isSupportedLanguage","formatLanguageClassName","language","Fragment","jsx","jsxs","CodeBlockContext","createContext","Root","forwardRef","asChild","className","props","ref","copyText","setCopyText","useState","hasCodeExpander","setHasCodeExpander","isCodeExpanded","setIsCodeExpanded","codeId","setCodeId","context","useMemo","id","old","assert","Component","Slot","cx","Body","Code","_unusedHighlightLines","propIndentation","language","_unusedShowLineNumbers","style","tabIndex","value","useId","registerCodeId","unregisterCodeId","useContext","indentation","inferIndentation","normalizedAndTrimmedValue","normalizeIndentation","highlightedCodeInnerHtml","setHighlightedCodeInnerHtml","escapeHtml","useEffect","grammar","Prism","supportedLanguages","newHighlightedCodeInnerHtml","languageClassName","formatLanguageClassName","clsx","Header","Title","CopyButton","onCopy","onCopyError","onClick","copyToClipboard","useCopyToClipboard","wasCopied","setWasCopied","timeoutHandle","useRef","event","error","Icon","CheckIcon","CopyIcon","ExpanderButton","prev","CaretDownIcon","CodeBlockIconComponent","preset","_svgProp","svg","FileTextIcon","TerminalIcon","TrafficPolicyFileIcon","CodeBlock","fmtCode","strings","values","isTemplateStringsArray","text","minIndent","findMinIndent","line","findMinIndent","value","match","acc","curr","isTemplateStringsArray","strings","modes","defaultMeta","parseMetastring","input","metastring","metaJson","tokenizeMetastring","acc","token","key","value","normalizedValue","normalizeValue","parsed","parseMetaJson","normalizeValue","value","tokenizeMetastring","input","result","currentString","inQuotes","char","isMode","modes","parseMetaJson","collapsible","defaultMeta","disableCopy","indentation","mode","title","parseBooleanish","isIndentation"]}

package/dist/data-table.js

@@ -1,2 +1,2 @@
-import{a as r}from"./chunk-4R4RBAKU.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as c}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-[[data-table-header-action]]:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0_/_15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
+import{a as r}from"./chunk-O6OZ2EQY.js";import{a as b}from"./chunk-2PHWBRBD.js";import{m}from"./chunk-GYPSB3OK.js";import"./chunk-MF2QITTY.js";import{a as D}from"./chunk-T5U5KWUW.js";import"./chunk-4LSFAAZW.js";import"./chunk-72TJUKMV.js";import"./chunk-3C5O3AQA.js";import"./chunk-I6T6YV2L.js";import"./chunk-NPTDRQT5.js";import{a as c}from"./chunk-AZ56JGNY.js";export*from"@tanstack/react-table";import{flexRender as S}from"@tanstack/react-table";import{Fragment as g,createContext as E,useContext as M,useMemo as j}from"react";import F from"tiny-invariant";var O=["unsorted","asc","desc"],V=["unsorted","desc","asc"];function f(t,o){return A(o==="alphanumeric"?O:V,t)??"unsorted"}function A(t,o,e){if(t.length===0)return e;let n=t.findIndex(i=>i===o);if(n===-1)return e;let l=(n+1)%t.length;return t.at(l)??e}import{jsx as a,jsxs as y}from"react/jsx-runtime";var C=E(null);function x(){let t=M(C);return F(t,"useDataTableContext should only be used within a DataTable child component"),t}function P({children:t,table:o,...e}){let n=j(()=>({table:o}),[o]);return a(C.Provider,{value:n,children:a(r.Root,{...e,children:a(r.Element,{children:t})})})}function R({children:t,className:o,column:e,disableSorting:n=!1,iconPlacement:l="end",sortingMode:i,sortIcon:B,onClick:v,..._}){let u=e.getIsSorted(),p=!n&&e.getCanSort(),s=p&&typeof u=="string"?u:"unsorted",k=B?.(s)??a(L,{mode:i,direction:s});return y(D,{appearance:"ghost",className:c("flex justify-start w-full h-full rounded-none",o),"data-sort-direction":s,"data-table-header-action":!0,icon:k,iconPlacement:l,onClick:T=>{v?.(T),!T.defaultPrevented&&(!p||n||typeof i>"u"||$(e,i))},priority:"neutral",type:"button",..._,children:[p&&s!=="unsorted"&&y("span",{className:"sr-only",children:["Column sorted in"," ",i==="alphanumeric"?s==="asc"?"ascending":"descending":m(s)," ","order"]}),t]})}function w({children:t,className:o,...e}){return a(r.Header,{className:c("has-[[data-table-header-action]]:px-0",o),...e,children:t})}var d=r.Body;d.displayName="DataTableBody";function h(t){let{table:o}=x();return a(r.Head,{...t,children:o.getHeaderGroups().map(e=>a(r.Row,{children:e.headers.map(n=>a(g,{children:n.isPlaceholder?a(r.Header,{},n.id):S(n.column.columnDef.header,n.getContext())},n.id))},e.id))})}function H({row:t,...o}){return a(r.Row,{...o,children:t.getVisibleCells().map(e=>a(g,{children:S(e.column.columnDef.cell,e.getContext())},e.id))})}function N({children:t,...o}){let{table:e}=x(),n=e.getAllColumns().length;return a(r.Row,{...o,children:a(r.Cell,{colSpan:n,children:t})})}function I({children:t,className:o,...e}){return a(r.Cell,{className:c("sticky z-10 right-0 top-px -bottom-px group-data-[sticky-active]/table:[box-shadow:inset_10px_0_8px_-8px_oklch(0_0_0_/_15%)]",o),...e,children:a("div",{className:"flex justify-end",children:t})})}P.displayName="DataTable";I.displayName="DataTableActionCell";d.displayName="DataTableBody";N.displayName="DataTableEmptyRow";h.displayName="DataTableHead";w.displayName="DataTableHeader";R.displayName="DataTableHeaderSortButton";H.displayName="DataTableRow";var z={Root:P,ActionCell:I,Cell:r.Cell,Body:d,EmptyRow:N,Head:h,Header:w,HeaderSortButton:R,Row:H};function L({direction:t,mode:o,...e}){return t==="unsorted"||!o||!t?a("svg",{"aria-hidden":!0,...e}):a(b,{mode:o,direction:t,...e})}function $(t,o){if(!t.getCanSort())return;let e=t.getIsSorted();switch(f(typeof e=="string"?e:"unsorted",o)){case"unsorted":t.clearSorting();return;case"asc":t.toggleSorting(!1);return;case"desc":t.toggleSorting(!0);return;default:return}}export{z as DataTable};
 //# sourceMappingURL=data-table.js.map

package/dist/table.js

@@ -1,2 +1,2 @@
-import{a as e}from"./chunk-4R4RBAKU.js";import"./chunk-MF2QITTY.js";import"./chunk-AZ56JGNY.js";export{e as Table};
+import{a as e}from"./chunk-O6OZ2EQY.js";import"./chunk-MF2QITTY.js";import"./chunk-AZ56JGNY.js";export{e as Table};
 //# sourceMappingURL=table.js.map

package/package.json

@@ -3,7 +3,7 @@
   "description": "mantle is ngrok's UI library and design system.",
   "author": "ngrok",
   "license": "MIT",
-  "version": "0.57.1",
+  "version": "0.57.2",
   "homepage": "https://mantle.ngrok.com",
   "repository": {
     "type": "git",

package/dist/chunk-4R4RBAKU.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/table/table.tsx"],"sourcesContent":["import type { ComponentProps, ComponentRef } from \"react\";\nimport { forwardRef, useEffect, useMemo, useRef, useState } from \"react\";\nimport { composeRefs } from \"../../utils/compose-refs/compose-refs.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\n\n/**\n * The `<Table.Root>` is the root container element for all `Table`s.\n * It provides styling and additional functionality, such as horizontal overflow\n * detection.\n *\n * Must be used as the parent of a `<Table.Element>`.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst Root = forwardRef<ComponentRef<\"div\">, ComponentProps<\"div\">>(\n\t({ children, className, ...props }, ref) => {\n\t\tconst horizontalOverflow =\n\t\t\tuseHorizontalOverflowObserver<ComponentRef<\"div\">>();\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"group/table scrollbar overflow-x-auto overscroll-x-none rounded-lg border border-card bg-white dark:bg-gray-100 relative w-full\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-sticky-active={\n\t\t\t\t\t(horizontalOverflow.state.hasOverflow &&\n\t\t\t\t\t\t!horizontalOverflow.state.scrolledToEnd) ||\n\t\t\t\t\tundefined\n\t\t\t\t}\n\t\t\t\tdata-x-overflow={horizontalOverflow.state.hasOverflow}\n\t\t\t\tdata-x-scroll-end={\n\t\t\t\t\thorizontalOverflow.state.hasOverflow &&\n\t\t\t\t\thorizontalOverflow.state.scrolledToEnd\n\t\t\t\t}\n\t\t\t\tref={composeRefs(horizontalOverflow.ref, ref)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table.Element>` is a structured way to display data in rows and columns. The API\n * matches the HTML `<table>` element 1:1.\n *\n * Permitted content in this order:\n * 1. optional: `<Table.Caption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<Table.Head>`\n * 4. either one of the following:\n *    - 0 or more: `<Table.Body>`\n *    - 0 or more: `<Table.Row>`\n * 5. optional: `<Table.Foot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table.Element>`\n * generate rectangular boxes. Each box occupies a number of table cells\n * according to the following rules:\n *   1. The row boxes fill the table in the source code order from top to bottom.\n *      Each row box occupies one row of cells.\n *   2. A row group box occupies one or more row boxes.\n *   3. Column boxes are placed next to each other in source code order.\n *      Depending on the value of the dir attribute, the columns are laid in\n *      left-to-right or right-to-left direction. A column box occupies one or\n *      more columns of table cells.\n *   4. A column group box occupies one or more column boxes.\n *   5. A cell box may span over multiple rows and columns. User agents trim\n *      cells to fit in the available number of rows and columns.\n * Table cells do have padding. Boxes that make up a table do not have margins.\n * For more in depth information, see the [MDN documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table).\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Element = forwardRef<ComponentRef<\"table\">, ComponentProps<\"table\">>(\n\t({ children, className, ...props }, ref) => {\n\t\treturn (\n\t\t\t<table\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cx(\n\t\t\t\t\t\"table-auto border-collapse caption-bottom w-full min-w-full text-left\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</table>\n\t\t);\n\t},\n);\nElement.displayName = \"TableElement\";\n\n/**\n * The `<Table.Head>` is a container for the table's column headers.\n * Encapsulates a set of `<Table.Row>`s, indicating that they comprise the head\n * of a table with information about the table's columns. This is usually in the\n * form of column headers (`<Table.Header>`).\n *\n * Must be used as a child of a `<Table.Element>`. It should only come after any\n * `<Table.Caption>` or `<colgroup>` and before any `<Table.Body>` or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Head = forwardRef<ComponentRef<\"thead\">, ComponentProps<\"thead\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<thead\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"border-b border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-strong bg-base\",\n\t\t\t\t\"[&>tr]:bg-base\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</thead>\n\t),\n);\nHead.displayName = \"TableHead\";\n\n/**\n * The `<Table.Body>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the body of a table's (main) data.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, or `<Table.Head>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst Body = forwardRef<ComponentRef<\"tbody\">, ComponentProps<\"tbody\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tbody\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"text-body\",\n\t\t\t\t\"[thead+&]:border-t [thead+&]:border-card-muted\",\n\t\t\t\t\"[&>tr]:bg-card [&>tr]:not-only:hover:bg-card-hover\", // Body row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tref={ref}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tbody>\n\t),\n);\nBody.displayName = \"TableBody\";\n\n/**\n * The `<Table.Foot>` encapsulates a set of `<Table.Row>`s, indicating that they\n * comprise the foot of a table with information about the table's columns. This\n * is usually a summary of the columns, e.g., a sum of the given numbers in a\n * column.\n *\n * Must be used as a child of a `<Table.Element>` and only come after any\n * `<Table.Caption>`, `<colgroup>`, `<Table.Head>`, and `<Table.Body>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Row>` elements\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst Foot = forwardRef<ComponentRef<\"tfoot\">, ComponentProps<\"tfoot\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tfoot\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t//,\n\t\t\t\t\"font-medium text-body\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\t\"divide-y divide-card-muted\",\n\t\t\t\t\"[&>tr]:bg-gray-50/50 [&>tr]:hover:bg-card-hover\", // Row styling\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tfoot>\n\t),\n);\nFoot.displayName = \"TableFoot\";\n\n/**\n * The `<Table.Row>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<Table.Cell>` and `<Table.Header>` components.\n *\n * Must be used as a child of a `<Table.Head>`, `<Table.Body>`, or `<Table.Foot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<Table.Header>` or `<Table.Cell>`\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst Row = forwardRef<ComponentRef<\"tr\">, ComponentProps<\"tr\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<tr\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t// This could be removed, or simplified\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</tr>\n\t),\n);\nRow.displayName = \"TableRow\";\n\n/**\n * The `<Table.Header>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<Table.Row>`. The exact nature of this group\n * is defined by the scope and headers attributes.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content, but with no header, footer, sectioning content, or heading\n * content descendants.\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst Header = forwardRef<ComponentRef<\"th\">, ComponentProps<\"th\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<th\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"h-12 px-4 text-left align-middle text-sm font-medium [&:has([role=checkbox])]:pr-0\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</th>\n\t),\n);\nHeader.displayName = \"TableHeader\";\n\n/**\n * The `<Table.Cell>` defines a cell of a table that contains data and may be\n * used as a child of a `<Table.Row>`.\n *\n * Must be used as a child of a `<Table.Row>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst Cell = forwardRef<ComponentRef<\"td\">, ComponentProps<\"td\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<td\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"p-4 align-middle [&:has([role=checkbox])]:pr-0 font-mono text-size-mono\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</td>\n\t),\n);\nCell.displayName = \"TableCell\";\n\n/**\n * The optional `<Table.Caption>` specifies the caption (or title) of a table,\n * providing the table an accessible description.\n *\n * If used, must be the first child of a `<Table.Element>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst Caption = forwardRef<ComponentRef<\"caption\">, ComponentProps<\"caption\">>(\n\t({ children, className, ...props }, ref) => (\n\t\t<caption\n\t\t\tref={ref}\n\t\t\tclassName={cx(\n\t\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\t\"border-t border-card-muted\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</caption>\n\t),\n);\nCaption.displayName = \"TableCaption\";\n\n/**\n * A structured way to display data in rows and columns. The API matches the\n * HTML table element 1:1.\n *\n * @see https://mantle.ngrok.com/components/table\n *\n * @example\n * ```tsx\n * <Table.Root>\n *   <Table.Element>\n *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n *     <Table.Head>\n *       <Table.Row>\n *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n *         <Table.Header>Status</Table.Header>\n *         <Table.Header>Method</Table.Header>\n *         <Table.Header className=\"text-right\">Amount</Table.Header>\n *       </Table.Row>\n *     </Table.Head>\n *     <Table.Body>\n *       {invoices.map((invoice) => (\n *         <Table.Row key={invoice.invoice}>\n *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n *         </Table.Row>\n *       ))}\n *     </Table.Body>\n *     <Table.Foot>\n *       <Table.Row>\n *         <Table.Cell colSpan={3}>Total</Table.Cell>\n *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n *       </Table.Row>\n *     </Table.Foot>\n *   </Table.Element>\n * </Table.Root>\n * ```\n */\nconst Table = {\n\t/**\n\t * The body section of the table. Encapsulates a set of table rows comprising the body of a table's main data.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-body\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tBody,\n\t/**\n\t * An optional caption that specifies the caption (or title) of a table, providing an accessible description.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-caption\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCaption,\n\t/**\n\t * A cell that contains data and may be used as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-cell\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tCell,\n\t/**\n\t * A structured way to display data in rows and columns. The API matches the HTML table element 1:1.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-element\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tElement,\n\t/**\n\t * The foot section of a table. Encapsulates a set of table rows comprising the foot with summary information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-foot\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tFoot,\n\t/**\n\t * The head section of a table. Contains the table's column headers information.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHead,\n\t/**\n\t * A cell that defines the header of a group of table cells as a child of a table row.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-header\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tHeader,\n\t/**\n\t * The root container element for all tables. Provides styling and additional functionality like horizontal overflow detection.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-root\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRoot,\n\t/**\n\t * Defines a row of cells in a table. Contains a mix of table cells and table headers.\n\t *\n\t * @see https://mantle.ngrok.com/components/table#api-table-row\n\t *\n\t * @example\n\t * ```tsx\n\t * <Table.Root>\n\t *   <Table.Element>\n\t *     <Table.Caption>A list of your recent invoices.</Table.Caption>\n\t *     <Table.Head>\n\t *       <Table.Row>\n\t *         <Table.Header className=\"w-[100px]\">Invoice</Table.Header>\n\t *         <Table.Header>Status</Table.Header>\n\t *         <Table.Header>Method</Table.Header>\n\t *         <Table.Header className=\"text-right\">Amount</Table.Header>\n\t *       </Table.Row>\n\t *     </Table.Head>\n\t *     <Table.Body>\n\t *       {invoices.map((invoice) => (\n\t *         <Table.Row key={invoice.invoice}>\n\t *           <Table.Cell className=\"font-medium\">{invoice.invoice}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentStatus}</Table.Cell>\n\t *           <Table.Cell>{invoice.paymentMethod}</Table.Cell>\n\t *           <Table.Cell className=\"text-right\">{invoice.totalAmount}</Table.Cell>\n\t *         </Table.Row>\n\t *       ))}\n\t *     </Table.Body>\n\t *     <Table.Foot>\n\t *       <Table.Row>\n\t *         <Table.Cell colSpan={3}>Total</Table.Cell>\n\t *         <Table.Cell className=\"text-right\">$2,500.00</Table.Cell>\n\t *       </Table.Row>\n\t *     </Table.Foot>\n\t *   </Table.Element>\n\t * </Table.Root>\n\t * ```\n\t */\n\tRow,\n} as const;\n\nexport {\n\t//,\n\tTable,\n};\n\n/**\n * A custom hook that observes the horizontal overflow of an element and determines\n * if it has overflow and if it is scrolled to the end.\n *\n * @private\n */\nfunction useHorizontalOverflowObserver<T extends HTMLElement>() {\n\tconst ref = useRef<T | null>(null);\n\tconst [state, setState] = useState({\n\t\thasOverflow: false,\n\t\tscrolledToEnd: false,\n\t});\n\n\tuseEffect(() => {\n\t\tconst element = ref.current;\n\t\tif (!element) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst checkState = () => {\n\t\t\tconst hasOverflow = element.scrollWidth > element.clientWidth;\n\t\t\tconst scrolledToEnd =\n\t\t\t\tMath.abs(\n\t\t\t\t\telement.scrollWidth - element.scrollLeft - element.clientWidth,\n\t\t\t\t) < 1;\n\n\t\t\tsetState((previous) => {\n\t\t\t\tif (\n\t\t\t\t\tprevious.hasOverflow !== hasOverflow ||\n\t\t\t\t\tprevious.scrolledToEnd !== scrolledToEnd\n\t\t\t\t) {\n\t\t\t\t\treturn { hasOverflow, scrolledToEnd };\n\t\t\t\t}\n\t\t\t\treturn previous; // No state change\n\t\t\t});\n\t\t};\n\n\t\tconst resizeObserver = new ResizeObserver(checkState);\n\t\tresizeObserver.observe(element);\n\n\t\tconst mutationObserver = new MutationObserver(checkState);\n\t\tmutationObserver.observe(element, { childList: true, subtree: true });\n\n\t\telement.addEventListener(\"scroll\", checkState, { passive: true });\n\n\t\tcheckState();\n\n\t\treturn () => {\n\t\t\tresizeObserver.disconnect();\n\t\t\tmutationObserver.disconnect();\n\t\t\telement.removeEventListener(\"scroll\", checkState);\n\t\t};\n\t}, []);\n\n\treturn useMemo(() => ({ ref, state }), [state]);\n}\n"],"mappings":"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","names":["forwardRef","useEffect","useMemo","useRef","useState","jsx","Root","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Element","Head","Body","Foot","Row","Header","Cell","Caption","Table","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}