@ngrok/mantle 0.32.0 → 0.32.1

package/dist/{chunk-72UMV3YP.js.map → chunk-JIRNFNH5.js.map}

@@ -1 +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 `<TableRoot>` 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>`.\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst TableRoot = 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 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);\nTableRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table>` 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: `<TableCaption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<TableHead>`\n * 4. either one of the following:\n *    - 0 or more: `<TableBody>`\n *    - 0 or more: `<TableRow>`\n * 5. optional: `<TableFoot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table>`\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 * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Table = 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);\nTable.displayName = \"Table\";\n\n/**\n * The `<TableHead>` is a container for the table's column headers.\n * Encapsulates a set of `<TableRow>`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 (`<TableHeader>`).\n *\n * Must be used as a child of a `<Table>`. It should only come after any\n * `<TableCaption>` or `<colgroup>` and before any `<TableBody>` or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHead = 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\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);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableBody>` encapsulates a set of `<TableRow>`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>` and only come after any\n * `<TableCaption>`, `<colgroup>`, or `<TableHead>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst TableBody = 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\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);\nTableBody.displayName = \"TableBody\";\n\n/**\n * The `<TableFoot>` encapsulates a set of `<TableRow>`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>` and only come after any\n * `<TableCaption>`, `<colgroup>`, `<TableHead>`, and `<TableBody>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>` elements\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst TableFoot = 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\"bg-gray-50/50 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\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);\nTableFoot.displayName = \"TableFoot\";\n\n/**\n * The `<TableRow>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<TableCell>` and `<TableHeader>` components.\n *\n * Must be used as a child of a `<TableHead>`, `<TableBody>`, or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableHeader>` or `<TableCell>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst TableRow = 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// \"data-state-selected:bg-gray-200\",\n\t\t\t\t\"[&>td]:bg-card [tbody:has(tr:not(:only-child))>&>td]:hover:bg-card-hover\",\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);\nTableRow.displayName = \"TableRow\";\n\n/**\n * The `<TableHeader>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<TableRow>`. 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 `<TableRow>`.\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 * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHeader = 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);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableCell>` defines a cell of a table that contains data and may be\n * used as a child of a `<TableRow>`.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst TableCell = 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);\nTableCell.displayName = \"TableCell\";\n\n/**\n * The optional `<TableCaption>` 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>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst TableCaption = forwardRef<\n\tComponentRef<\"caption\">,\n\tComponentProps<\"caption\">\n>(({ children, className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\"border-t border-card-muted\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</caption>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\t//,\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeader,\n\tTableRoot,\n\tTableRow,\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","TableRoot","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Table","TableHead","TableBody","TableFoot","TableRow","TableHeader","TableCell","TableCaption","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}
+{"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 `<TableRoot>` 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>`.\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-root\n */\nconst TableRoot = 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 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);\nTableRoot.displayName = \"TableRoot\";\n\n/**\n * The `<Table>` 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: `<TableCaption>`\n * 2. 0 or more: `<colgroup>` elements\n * 3. optional: `<TableHead>`\n * 4. either one of the following:\n *    - 0 or more: `<TableBody>`\n *    - 0 or more: `<TableRow>`\n * 5. optional: `<TableFoot>`\n *\n * @description\n * Establishes a table formatting context. Elements inside the `<Table>`\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 * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table\n */\nconst Table = 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);\nTable.displayName = \"Table\";\n\n/**\n * The `<TableHead>` is a container for the table's column headers.\n * Encapsulates a set of `<TableRow>`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 (`<TableHeader>`).\n *\n * Must be used as a child of a `<Table>`. It should only come after any\n * `<TableCaption>` or `<colgroup>` and before any `<TableBody>` or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHead = 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\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);\nTableHead.displayName = \"TableHead\";\n\n/**\n * The `<TableBody>` encapsulates a set of `<TableRow>`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>` and only come after any\n * `<TableCaption>`, `<colgroup>`, or `<TableHead>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-body\n */\nconst TableBody = 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\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);\nTableBody.displayName = \"TableBody\";\n\n/**\n * The `<TableFoot>` encapsulates a set of `<TableRow>`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>` and only come after any\n * `<TableCaption>`, `<colgroup>`, `<TableHead>`, and `<TableBody>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableRow>` elements\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-foot\n */\nconst TableFoot = 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\"bg-gray-50/50 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\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);\nTableFoot.displayName = \"TableFoot\";\n\n/**\n * The `<TableRow>` defines a row of cells in a table. The row's cells can then\n * be established using a mix of `<TableCell>` and `<TableHeader>` components.\n *\n * Must be used as a child of a `<TableHead>`, `<TableBody>`, or `<TableFoot>`.\n *\n * Permitted Content:\n * 1. 0 or more: `<TableHeader>` or `<TableCell>`\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-row\n */\nconst TableRow = 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// \"data-state-selected:bg-gray-200\",\n\t\t\t\t\"[&>td]:bg-card [tbody:has(tr:not(:only-child))>&>td]:hover:bg-card-hover\",\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);\nTableRow.displayName = \"TableRow\";\n\n/**\n * The `<TableHeader>` defines a cell as the header of a group of table cells\n * and may be used as a child of a `<TableRow>`. 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 `<TableRow>`.\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 * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-header\n */\nconst TableHeader = 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);\nTableHeader.displayName = \"TableHeader\";\n\n/**\n * The `<TableCell>` defines a cell of a table that contains data and may be\n * used as a child of a `<TableRow>`.\n *\n * Must be used as a child of a `<TableRow>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-cell\n */\nconst TableCell = 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);\nTableCell.displayName = \"TableCell\";\n\n/**\n * The optional `<TableCaption>` 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>`.\n *\n * Permitted Content:\n * 1. Flow content\n *\n * @example\n * ```tsx\n * <TableRoot>\n *   <Table>\n *     <TableCaption>A list of your recent invoices.</TableCaption>\n *     <TableHead>\n *       <TableRow>\n *         <TableHeader className=\"w-[100px]\">Invoice</TableHeader>\n *         <TableHeader>Status</TableHeader>\n *         <TableHeader>Method</TableHeader>\n *         <TableHeader className=\"text-right\">Amount</TableHeader>\n *       </TableRow>\n *     </TableHead>\n *     <TableBody>\n *       {invoices.map((invoice) => (\n *         <TableRow key={invoice.invoice}>\n *           <TableCell className=\"font-medium\">{invoice.invoice}</TableCell>\n *           <TableCell>{invoice.paymentStatus}</TableCell>\n *           <TableCell>{invoice.paymentMethod}</TableCell>\n *           <TableCell className=\"text-right\">{invoice.totalAmount}</TableCell>\n *         </TableRow>\n *       ))}\n *     </TableBody>\n *     <TableFoot>\n *       <TableRow>\n *         <TableCell colSpan={3}>Total</TableCell>\n *         <TableCell className=\"text-right\">$2,500.00</TableCell>\n *       </TableRow>\n *     </TableFoot>\n *   </Table>\n * </TableRoot>\n * ```\n *\n * @see https://mantle.ngrok.com/components/table#api-table-caption\n */\nconst TableCaption = forwardRef<\n\tComponentRef<\"caption\">,\n\tComponentProps<\"caption\">\n>(({ children, className, ...props }, ref) => (\n\t<caption\n\t\tref={ref}\n\t\tclassName={cx(\n\t\t\t\"py-4 text-sm text-gray-500\",\n\t\t\t\"border-t border-card-muted\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t>\n\t\t{children}\n\t</caption>\n));\nTableCaption.displayName = \"TableCaption\";\n\nexport {\n\t//,\n\tTable,\n\tTableBody,\n\tTableCaption,\n\tTableCell,\n\tTableFoot,\n\tTableHead,\n\tTableHeader,\n\tTableRoot,\n\tTableRow,\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","TableRoot","forwardRef","children","className","props","ref","horizontalOverflow","useHorizontalOverflowObserver","cx","composeRefs","Table","TableHead","TableBody","TableFoot","TableRow","TableHeader","TableCell","TableCaption","useHorizontalOverflowObserver","ref","useRef","state","setState","useState","useEffect","element","checkState","hasOverflow","scrolledToEnd","previous","resizeObserver","mutationObserver","useMemo"]}

package/dist/chunk-NPTDRQT5.js

@@ -0,0 +1,2 @@
+import{a as t}from"./chunk-AZ56JGNY.js";import{Children as s,cloneElement as i,forwardRef as l,isValidElement as m}from"react";import a from"tiny-invariant";var y=l(({className:r,style:o,svg:e,...n},p)=>(a(m(e)&&s.only(e),"SvgOnly must be passed a single SVG icon as a JSX tag."),i(e,{...n,className:t("shrink-0",r,e.props.className),style:{...o,...e.props.style},ref:p})));y.displayName="SvgOnly";export{y as a};
+//# sourceMappingURL=chunk-NPTDRQT5.js.map

package/dist/chunk-NPTDRQT5.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/icon/svg-only.tsx"],"sourcesContent":["import type { ComponentRef, ReactNode } from \"react\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport type { SvgAttributes } from \"./types.js\";\n\ntype SvgOnlyProps = Omit<SvgAttributes, \"children\"> & {\n\t/**\n\t * A single SVG icon element.\n\t */\n\tsvg: ReactNode;\n};\n\n/**\n * Accepts a single SVG icon element and decorates it with `shrink-0` class.\n * You probably want to use the `Icon` component instead.\n *\n * @see https://mantle.ngrok.com/components/icon#api-svg-only\n *\n * @example\n * ```tsx\n * import { ShrimpIcon } from \"@phosphor-icons/react/Shrimp\";\n *\n * <SvgOnly svg={<ShrimpIcon />} />\n * ```\n */\nconst SvgOnly = forwardRef<ComponentRef<\"svg\">, SvgOnlyProps>(\n\t({ className, style, svg, ...props }, ref) => {\n\t\tinvariant(\n\t\t\tisValidElement<SvgAttributes>(svg) && Children.only(svg),\n\t\t\t\"SvgOnly must be passed a single SVG icon as a JSX tag.\",\n\t\t);\n\n\t\treturn cloneElement(svg, {\n\t\t\t...props,\n\t\t\tclassName: cx(\n\t\t\t\t\"shrink-0\", // the SvgOnly base classes\n\t\t\t\tclassName, // the SvgOnly className\n\t\t\t\tsvg.props.className, // the svg className\n\t\t\t),\n\t\t\tstyle: { ...style, ...svg.props.style },\n\t\t\tref,\n\t\t});\n\t},\n);\nSvgOnly.displayName = \"SvgOnly\";\n\nexport {\n\t//,\n\tSvgOnly,\n};\n\nexport type {\n\t//,\n\tSvgOnlyProps,\n};\n"],"mappings":"wCACA,OAAS,YAAAA,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QACnE,OAAOC,MAAe,iBAwBtB,IAAMC,EAAUC,EACf,CAAC,CAAE,UAAAC,EAAW,MAAAC,EAAO,IAAAC,EAAK,GAAGC,CAAM,EAAGC,KACrCC,EACCC,EAA8BJ,CAAG,GAAKK,EAAS,KAAKL,CAAG,EACvD,wDACD,EAEOM,EAAaN,EAAK,CACxB,GAAGC,EACH,UAAWM,EACV,WACAT,EACAE,EAAI,MAAM,SACX,EACA,MAAO,CAAE,GAAGD,EAAO,GAAGC,EAAI,MAAM,KAAM,EACtC,IAAAE,CACD,CAAC,EAEH,EACAN,EAAQ,YAAc","names":["Children","cloneElement","forwardRef","isValidElement","invariant","SvgOnly","forwardRef","className","style","svg","props","ref","invariant","isValidElement","Children","cloneElement","cx"]}

package/dist/chunk-NRMIFYYG.js

@@ -0,0 +1,2 @@
+import{l as y}from"./chunk-6RJ2G2DK.js";import{a as p}from"./chunk-I6T6YV2L.js";import{a as i}from"./chunk-AZ56JGNY.js";import{CheckCircleIcon as v}from"@phosphor-icons/react/CheckCircle";import{InfoIcon as h}from"@phosphor-icons/react/Info";import{WarningIcon as C}from"@phosphor-icons/react/Warning";import{WarningDiamondIcon as b}from"@phosphor-icons/react/WarningDiamond";import{Slot as l}from"@radix-ui/react-slot";import{createContext as P,forwardRef as d,useContext as f}from"react";import*as c from"sonner";import{jsx as r,jsxs as k}from"react/jsx-runtime";var x=({className:t,containerAriaLabel:o,dir:e,duration_ms:s=4e3,position:n="top-center",style:a})=>{let m=y();return r(c.Toaster,{className:i("toaster overlay-prompt pointer-events-auto font-sans *:duration-200",t),containerAriaLabel:o,dir:e,duration:s,gap:12,position:n??"top-center",style:a,theme:m,toastOptions:{unstyled:!0}})};x.displayName="Toaster";var T=P("");function z(t,o){return c.toast.custom(e=>r(T.Provider,{value:e,children:t}),{duration:o?.duration_ms,...o?.id?{id:o.id}:{},unstyled:!0})}var g=P({priority:"info"}),w=d(({asChild:t,children:o,className:e,priority:s,...n},a)=>{let m=t?l:"div";return r(g.Provider,{value:{priority:s},children:k(m,{className:i("relative flex items-start gap-2 text-sm","p-3 pl-[0.9375rem]","bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg",e),ref:a,...n,children:[r(S,{priority:s}),o]})})});w.displayName="Toast";var A=d(({className:t,svg:o,...e},s)=>{let n=f(g);switch(n.priority){case"danger":return r(p,{className:i("text-danger-600",t),ref:s,svg:o??r(C,{weight:"fill"}),...e});case"warning":return r(p,{className:i("text-warning-600",t),ref:s,svg:o??r(b,{weight:"fill"}),...e});case"success":return r(p,{className:i("text-success-600",t),ref:s,svg:o??r(v,{weight:"fill"}),...e});case"info":return r(p,{className:i("text-accent-600",t),ref:s,svg:r(h,{weight:"fill"}),...e});default:throw new Error(`Unreachable Case: ${n.priority}`)}});A.displayName="ToastIcon";var I=d(({asChild:t,className:o,onClick:e,...s},n)=>{let a=f(T);return r(t?l:"button",{className:i("shrink-0","data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-sm",o),onClick:u=>{e?.(u),!u.defaultPrevented&&c.toast.dismiss(a)},ref:n,...s})});I.displayName="ToastAction";var N=d(({asChild:t,className:o,...e},s)=>r(t?l:"p",{className:i("text-strong flex-1 text-sm",o),ref:s,...e}));N.displayName="ToastMessage";function F(t){t.target instanceof Element&&t.target.closest(".overlay-prompt")&&t.preventDefault()}var R={info:"bg-accent-600",warning:"bg-warning-600",success:"bg-success-600",danger:"bg-danger-600"};function S({className:t,priority:o,...e}){return r("div",{"aria-hidden":!0,className:i("z-1 absolute -inset-px right-auto w-1.5 rounded-l",R[o],t),...e})}export{x as a,z as b,w as c,A as d,I as e,N as f,F as g};
+//# sourceMappingURL=chunk-NRMIFYYG.js.map

package/dist/chunk-NRMIFYYG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/toast/toast.tsx"],"sourcesContent":["\"use client\";\n\nimport { CheckCircleIcon } from \"@phosphor-icons/react/CheckCircle\";\nimport { InfoIcon } from \"@phosphor-icons/react/Info\";\nimport { WarningIcon } from \"@phosphor-icons/react/Warning\";\nimport { WarningDiamondIcon } from \"@phosphor-icons/react/WarningDiamond\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport {\n\ttype ComponentProps,\n\ttype ComponentRef,\n\ttype ReactNode,\n\tcreateContext,\n\tforwardRef,\n\tuseContext,\n} from \"react\";\nimport * as ToastPrimitive from \"sonner\";\nimport type { WithAsChild } from \"../../types/as-child.js\";\nimport type { WithStyleProps } from \"../../types/with-style-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/icon.js\";\nimport type { SvgOnlyProps } from \"../icon/svg-only.js\";\nimport { useAppliedTheme } from \"../theme-provider/theme-provider.js\";\n\ntype ToasterPrimitiveProps = ComponentProps<typeof ToastPrimitive.Toaster>;\ntype ToasterPrimitiveTheme = ToasterPrimitiveProps[\"theme\"];\n\ntype ToasterProps = WithStyleProps &\n\tPick<ToasterPrimitiveProps, \"containerAriaLabel\" | \"dir\" | \"position\"> & {\n\t\t/**\n\t\t * Time in milliseconds that should elapse before automatically dismissing toasts.\n\t\t * When set here, this will be the default duration for all toasts.\n\t\t * @default 4000\n\t\t */\n\t\tduration_ms?: number;\n\t};\n\n/**\n * A container for displaying all toasts.\n *\n * Only one `<Toaster />` should be rendered in an app a time, preferably at the\n * root level of the app.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toaster\n *\n * @example\n * ```tsx\n * <Toaster\n *   position=\"top-right\"\n *   duration_ms={5000}\n * />\n * ```\n */\nconst Toaster = ({\n\t//,\n\tclassName,\n\tcontainerAriaLabel,\n\tdir,\n\tduration_ms = 4000,\n\tposition = \"top-center\",\n\tstyle,\n}: ToasterProps) => {\n\tconst theme = useAppliedTheme();\n\n\treturn (\n\t\t<ToastPrimitive.Toaster\n\t\t\tclassName={cx(\n\t\t\t\t\"toaster overlay-prompt pointer-events-auto font-sans *:duration-200\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\tcontainerAriaLabel={containerAriaLabel}\n\t\t\tdir={dir}\n\t\t\tduration={duration_ms}\n\t\t\tgap={12}\n\t\t\tposition={position ?? \"top-center\"}\n\t\t\tstyle={style}\n\t\t\ttheme={theme as ToasterPrimitiveTheme} // we have additional themes that are not in the sonner types, so we need to cast for now\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t}}\n\t\t/>\n\t);\n};\nToaster.displayName = \"Toaster\";\n\nconst ToastIdContext = createContext<string | number>(\"\");\n\ntype MakeToastOptions = {\n\t/**\n\t * Time in milliseconds that should elapse before automatically closing the toast.\n\t * Will default to the `<Toaster />`'s `duration_ms` if not provided.\n\t */\n\tduration_ms?: number;\n\t/**\n\t * An optional custom ID for this toast. If not given, a unique ID is provided for you.\n\t */\n\tid?: string;\n};\n\n/**\n * Create a toast. Provide a `<Toast>` component as the `children` to be rendered\n * inside the `<Toaster />` section.\n *\n * @see https://mantle.ngrok.com/components/toast#api-make-toast\n *\n * @example\n * ```tsx\n * makeToast(\n *   <Toast priority=\"success\">\n *     <ToastIcon />\n *     <ToastMessage>Operation completed successfully!</ToastMessage>\n *     <ToastAction>Dismiss</ToastAction>\n *   </Toast>\n * );\n * ```\n */\nfunction makeToast(children: ReactNode, options?: MakeToastOptions) {\n\treturn ToastPrimitive.toast.custom(\n\t\t(toastId) => (\n\t\t\t<ToastIdContext.Provider value={toastId}>\n\t\t\t\t{children}\n\t\t\t</ToastIdContext.Provider>\n\t\t),\n\t\t{\n\t\t\t//\n\t\t\tduration: options?.duration_ms,\n\t\t\t// If a custom ID is provided, use it, else use the toastId provided by the sonner library\n\t\t\t// don't set an ID to `undefined` as it breaks the sonner library\n\t\t\t...(options?.id ? { id: options.id } : {}),\n\t\t\tunstyled: true,\n\t\t},\n\t);\n}\n\nconst priorities = [\n\t//,\n\t\"danger\",\n\t\"info\",\n\t\"success\",\n\t\"warning\",\n] as const;\ntype Priority = (typeof priorities)[number];\n\ntype ToastState = {\n\tpriority: Priority;\n};\n\nconst ToastStateContext = createContext<ToastState>({\n\tpriority: \"info\",\n});\n\ntype ToastProps = ComponentProps<\"div\"> &\n\tWithAsChild & {\n\t\tpriority: Priority;\n\t};\n\n/**\n * A succinct message with a priority that is displayed temporarily.\n * Toasts are used to provide feedback to the user without interrupting their workflow.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast\n *\n * @example\n * ```tsx\n * <Toast priority=\"success\">\n *   <ToastIcon />\n *   <ToastMessage>Changes saved successfully!</ToastMessage>\n *   <ToastAction>Undo</ToastAction>\n * </Toast>\n * ```\n */\nconst Toast = forwardRef<ComponentRef<\"div\">, ToastProps>(\n\t({ asChild, children, className, priority, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"div\";\n\n\t\treturn (\n\t\t\t<ToastStateContext.Provider value={{ priority }}>\n\t\t\t\t<Component\n\t\t\t\t\tclassName={cx(\n\t\t\t\t\t\t\"relative flex items-start gap-2 text-sm\",\n\t\t\t\t\t\t\"p-3 pl-[0.9375rem]\",\n\t\t\t\t\t\t\"bg-popover high-contrast:border-popover rounded rounded-r-[0.3125rem] border border-gray-500/35 shadow-lg\",\n\t\t\t\t\t\t/**\n\t\t\t\t\t\t * Do not apply overflow-hidden because we want the priority bar accent\n\t\t\t\t\t\t * to overlap the toast border, else the border flows over the\n\t\t\t\t\t\t * priority bar.\n\t\t\t\t\t\t */\n\t\t\t\t\t\tclassName,\n\t\t\t\t\t)}\n\t\t\t\t\tref={ref}\n\t\t\t\t\t{...props}\n\t\t\t\t>\n\t\t\t\t\t<PriorityBarAccent priority={priority} />\n\t\t\t\t\t{children}\n\t\t\t\t</Component>\n\t\t\t</ToastStateContext.Provider>\n\t\t);\n\t},\n);\nToast.displayName = \"Toast\";\n\ntype ToastIconProps = Partial<SvgOnlyProps>;\n\n/**\n * An icon that visually represents the priority of the toast.\n * If you do not provide an icon, the default icon and color for the priority is used.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-icon\n *\n * @example\n * ```tsx\n * <Toast priority=\"warning\">\n *   <ToastIcon />\n *   <ToastMessage>Warning message</ToastMessage>\n * </Toast>\n * ```\n */\nconst ToastIcon = forwardRef<ComponentRef<\"svg\">, ToastIconProps>(\n\t({ className, svg, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastStateContext);\n\n\t\tswitch (ctx.priority) {\n\t\t\tcase \"danger\":\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName={cx(\"text-danger-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"warning\":\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName={cx(\"text-warning-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <WarningDiamondIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"success\":\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\tclassName={cx(\"text-success-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={svg ?? <CheckCircleIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tcase \"info\":\n\t\t\t\treturn (\n\t\t\t\t\t<Icon\n\t\t\t\t\t\t//\n\t\t\t\t\t\tclassName={cx(\"text-accent-600\", className)}\n\t\t\t\t\t\tref={ref}\n\t\t\t\t\t\tsvg={<InfoIcon weight=\"fill\" />}\n\t\t\t\t\t\t{...props}\n\t\t\t\t\t/>\n\t\t\t\t);\n\t\t\tdefault:\n\t\t\t\tthrow new Error(`Unreachable Case: ${ctx.priority}`);\n\t\t}\n\t},\n);\nToastIcon.displayName = \"ToastIcon\";\n\ntype ToastActionProps = ComponentProps<\"button\"> & WithAsChild;\n\n/**\n * A button that dismisses the toast when clicked.\n * You can prevent the toast from being dismissed `onClick` by calling `event.preventDefault()`\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-action\n *\n * @example\n * ```tsx\n * <Toast priority=\"info\">\n *   <ToastIcon />\n *   <ToastMessage>File uploaded successfully</ToastMessage>\n *   <ToastAction>View File</ToastAction>\n * </Toast>\n * ```\n */\nconst ToastAction = forwardRef<ComponentRef<\"button\">, ToastActionProps>(\n\t({ asChild, className, onClick, ...props }, ref) => {\n\t\tconst ctx = useContext(ToastIdContext);\n\n\t\tconst Component = asChild ? Slot : \"button\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\tclassName={cx(\n\t\t\t\t\t//,\n\t\t\t\t\t\"shrink-0\",\n\t\t\t\t\t// 👇 wiggle the bits so that icon buttons toast actions are aligned with the toast icon\n\t\t\t\t\t\"data-[icon-button]:-mr-0.5 data-[icon-button]:-mt-0.5 data-[icon-button]:rounded-sm\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={(event) => {\n\t\t\t\t\tonClick?.(event);\n\t\t\t\t\tif (event.defaultPrevented) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tToastPrimitive.toast.dismiss(ctx);\n\t\t\t\t}}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nToastAction.displayName = \"ToastAction\";\n\ntype ToastMessageProps = ComponentProps<\"p\"> & WithAsChild;\n\n/**\n * The message content of the toast.\n *\n * @see https://mantle.ngrok.com/components/toast#api-toast-message\n *\n * @example\n * ```tsx\n * <Toast priority=\"success\">\n *   <ToastIcon />\n *   <ToastMessage>Your changes have been saved</ToastMessage>\n * </Toast>\n * ```\n */\nconst ToastMessage = forwardRef<ComponentRef<\"p\">, ToastMessageProps>(\n\t({ asChild, className, ...props }, ref) => {\n\t\tconst Component = asChild ? Slot : \"p\";\n\n\t\treturn (\n\t\t\t<Component\n\t\t\t\t//\n\t\t\t\tclassName={cx(\"text-strong flex-1 text-sm\", className)}\n\t\t\t\tref={ref}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nToastMessage.displayName = \"ToastMessage\";\n\nexport {\n\t//,\n\tmakeToast,\n\tToast,\n\tToastAction,\n\tToaster,\n\tToastIcon,\n\tToastMessage,\n};\n\nexport type {\n\t//,\n\tPriority,\n};\n\n/**\n * @private\n *\n * Allows any mantle floating prompt (e.g. toasts and notifications) to be interacted with\n * even when a modaled view (e.g. dialog, sheet, etc) is open and a focus trap is active.\n *\n * Without this, interacting with the prompt would close the modaled view.\n */\nexport function preventCloseOnPromptInteraction(\n\tevent: CustomEvent | PointerEvent | MouseEvent | TouchEvent | FocusEvent,\n) {\n\tif (!(event.target instanceof Element)) {\n\t\treturn;\n\t}\n\n\tif (event.target.closest(\".overlay-prompt\")) {\n\t\tevent.preventDefault();\n\t}\n}\n\nconst priorityBackgroundColor = {\n\tinfo: \"bg-accent-600\",\n\twarning: \"bg-warning-600\",\n\tsuccess: \"bg-success-600\",\n\tdanger: \"bg-danger-600\",\n} as const satisfies Record<Priority, string>;\n\ntype PriorityBarAccentProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n\tpriority: Priority;\n};\n\n/**\n * @private\n *\n * A colored bar that visually represents the priority of the toast.\n */\nfunction PriorityBarAccent({\n\tclassName,\n\tpriority,\n\t...props\n}: PriorityBarAccentProps) {\n\treturn (\n\t\t<div\n\t\t\taria-hidden\n\t\t\tclassName={cx(\n\t\t\t\t//\n\t\t\t\t\"z-1 absolute -inset-px right-auto w-1.5 rounded-l\",\n\t\t\t\tpriorityBackgroundColor[priority],\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":"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","names":["CheckCircleIcon","InfoIcon","WarningIcon","WarningDiamondIcon","Slot","createContext","forwardRef","useContext","ToastPrimitive","jsx","jsxs","Toaster","className","containerAriaLabel","dir","duration_ms","position","style","theme","useAppliedTheme","cx","ToastIdContext","createContext","makeToast","children","options","toastId","ToastStateContext","createContext","Toast","forwardRef","asChild","children","className","priority","props","ref","Component","Slot","jsx","jsxs","cx","PriorityBarAccent","ToastIcon","svg","ctx","useContext","Icon","WarningIcon","WarningDiamondIcon","CheckCircleIcon","InfoIcon","ToastAction","onClick","ToastIdContext","event","ToastMessage","preventCloseOnPromptInteraction","event","priorityBackgroundColor","PriorityBarAccent","className","priority","props","jsx","cx"]}

package/dist/{chunk-VTCWSFFJ.js → chunk-PANPBV3Q.js}

@@ -1,2 +1,2 @@
-import{a as g}from"./chunk-3C5O3AQA.js";import{a as u}from"./chunk-XQVVOOLT.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as k}from"@phosphor-icons/react/CircleNotch";import{Slot as I}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import f from"clsx";import{Children as w,cloneElement as E,forwardRef as H,isValidElement as M}from"react";import T from"tiny-invariant";import{jsx as t,jsxs as S}from"react/jsx-runtime";var A=N("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-none",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),L=H(({"aria-disabled":i,appearance:e="outlined",asChild:n,children:r,className:m,disabled:h,icon:x,iconPlacement:o="start",isLoading:a=!1,priority:y="default",type:B,...P},C)=>{let c=g(i??h??a),s=a?t(k,{className:"animate-spin"}):x,l=s&&e!=="link",b={"aria-disabled":c,className:p(A({appearance:e,priority:y,isLoading:a}),l&&o==="start"&&"ps-2.5",l&&o==="end"&&"pe-2.5",m),"data-loading":a,disabled:c,ref:C,...P};if(n){let d=w.only(r);T(M(d),"When using `asChild`, Button must be passed a single child as a JSX tag.");let V=d.props?.children;return t(I,{...b,children:E(d,{},t(v,{appearance:e,icon:s,iconPlacement:o,children:V}))})}return t("button",{...b,type:B,children:t(v,{appearance:e,icon:s,iconPlacement:o,children:r})})});L.displayName="Button";var v=({appearance:i,children:e,icon:n,iconPlacement:r})=>S("span",{className:f("inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none",i==="link"&&"hover:underline group-disabled/button-link:no-underline"),children:[n&&t(u,{svg:n,className:f(r==="end"&&"order-last")}),e]});export{A as a,L as b};
-//# sourceMappingURL=chunk-VTCWSFFJ.js.map
+import{a as g}from"./chunk-3C5O3AQA.js";import{a as u}from"./chunk-I6T6YV2L.js";import{a as p}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as k}from"@phosphor-icons/react/CircleNotch";import{Slot as I}from"@radix-ui/react-slot";import{cva as N}from"class-variance-authority";import f from"clsx";import{Children as w,cloneElement as E,forwardRef as H,isValidElement as M}from"react";import T from"tiny-invariant";import{jsx as t,jsxs as S}from"react/jsx-runtime";var A=N("inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-none",{variants:{appearance:{filled:"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium",ghost:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium",outlined:"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium",link:"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent"},isLoading:{false:"",true:"opacity-50"},priority:{danger:"",default:"",neutral:""}},defaultVariants:{appearance:"outlined",isLoading:!1,priority:"default"},compoundVariants:[{appearance:"ghost",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent"},{appearance:"outlined",priority:"danger",class:"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700"},{appearance:"filled",priority:"danger",class:"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent"},{appearance:"link",priority:"danger",class:"text-danger-600 focus-visible:ring-focus-danger"},{appearance:"ghost",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent"},{appearance:"outlined",priority:"neutral",class:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},{appearance:"filled",priority:"neutral",class:"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600"},{appearance:"link",priority:"neutral",class:"text-strong focus-visible:ring-focus-accent"}]}),L=H(({"aria-disabled":i,appearance:e="outlined",asChild:n,children:r,className:m,disabled:h,icon:x,iconPlacement:o="start",isLoading:a=!1,priority:y="default",type:B,...P},C)=>{let c=g(i??h??a),s=a?t(k,{className:"animate-spin"}):x,l=s&&e!=="link",b={"aria-disabled":c,className:p(A({appearance:e,priority:y,isLoading:a}),l&&o==="start"&&"ps-2.5",l&&o==="end"&&"pe-2.5",m),"data-loading":a,disabled:c,ref:C,...P};if(n){let d=w.only(r);T(M(d),"When using `asChild`, Button must be passed a single child as a JSX tag.");let V=d.props?.children;return t(I,{...b,children:E(d,{},t(v,{appearance:e,icon:s,iconPlacement:o,children:V}))})}return t("button",{...b,type:B,children:t(v,{appearance:e,icon:s,iconPlacement:o,children:r})})});L.displayName="Button";var v=({appearance:i,children:e,icon:n,iconPlacement:r})=>S("span",{className:f("inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none",i==="link"&&"hover:underline group-disabled/button-link:no-underline"),children:[n&&t(u,{svg:n,className:f(r==="end"&&"order-last")}),e]});export{A as a,L as b};
+//# sourceMappingURL=chunk-PANPBV3Q.js.map

package/dist/{chunk-VTCWSFFJ.js.map → chunk-PANPBV3Q.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type {\n\tButtonHTMLAttributes,\n\tComponentProps,\n\tPropsWithChildren,\n\tReactNode,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst buttonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-none\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tfilled:\n\t\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\tghost:\n\t\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t\t * color and styling to communicate its purpose to the user\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"\",\n\t\t\t\tdefault: \"\",\n\t\t\t\tneutral: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tisLoading: false,\n\t\t\tpriority: \"default\",\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-loading\": isLoading,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<ButtonProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<InnerContent\n\t\t\t\t\t\t\tappearance={appearance}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</InnerContent>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<InnerContent\n\t\t\t\t\tappearance={appearance}\n\t\t\t\t\ticon={icon}\n\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InnerContent>\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n\tbuttonVariants,\n};\n\nexport type {\n\t//,\n\tButtonProps,\n\tButtonAppearance,\n\tButtonPriority,\n};\n\ntype InnerContentProps = PropsWithChildren &\n\tPick<ButtonProps, \"appearance\" | \"icon\" | \"iconPlacement\">;\n\nconst InnerContent = ({\n\tappearance,\n\tchildren,\n\ticon,\n\ticonPlacement,\n}: InnerContentProps) => (\n\t<span\n\t\tclassName={clsx(\n\t\t\t\"inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none\",\n\t\t\tappearance === \"link\" &&\n\t\t\t\t\"hover:underline group-disabled/button-link:no-underline\",\n\t\t)}\n\t>\n\t\t{icon && (\n\t\t\t<Icon\n\t\t\t\tsvg={icon}\n\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t/>\n\t\t)}\n\t\t{children}\n\t</span>\n);\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OACjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAOnE,OAAOC,MAAe,iBAyMnB,cAAAC,EAsFF,QAAAC,MAtFE,oBAnMH,IAAMC,EAAiBC,EACtB,yNACA,CACC,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CACD,EAsFMC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACVvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,eAAgBI,EAChB,SAAAK,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMkB,EAAcC,EAAS,KAAKlB,CAAQ,EAC1CmB,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACC1B,EAAC+B,EAAA,CAAM,GAAGP,EACR,SAAAQ,EACAN,EACA,CAAC,EACD1B,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAiB,EACF,CACD,EACD,CAEF,CAEA,OACC9B,EAAC,UAAQ,GAAGwB,EAAa,KAAMR,EAC9B,SAAAhB,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAJ,EACF,EACD,CAEF,CACD,EACAL,EAAO,YAAc,SAkBrB,IAAM8B,EAAe,CAAC,CACrB,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,CACD,IACCC,EAAC,QACA,UAAWC,EACV,wFACAL,IAAe,QACd,yDACF,EAEC,UAAAE,GACAI,EAACC,EAAA,CACA,IAAKL,EACL,UAAWG,EAAKF,IAAkB,OAAS,YAAY,EACxD,EAEAF,GACF","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","InnerContent","InnerContent","appearance","children","icon","iconPlacement","jsxs","clsx","jsx","Icon"]}
+{"version":3,"sources":["../src/components/button/button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport clsx from \"clsx\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type {\n\tButtonHTMLAttributes,\n\tComponentProps,\n\tPropsWithChildren,\n\tReactNode,\n} from \"react\";\nimport invariant from \"tiny-invariant\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport type { VariantProps } from \"../../types/variant-props.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst buttonVariants = cva(\n\t\"inline-flex cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-md focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50 [&>*]:focus-within:outline-none\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tfilled:\n\t\t\t\t\t\"bg-filled-accent text-on-filled focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-filled-accent-hover not-disabled:active:bg-filled-accent-active h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\tghost:\n\t\t\t\t\t\"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border border-transparent px-3 text-sm font-medium\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-accent-600 bg-form text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-accent-700 not-disabled:hover:bg-accent-500/10 not-disabled:hover:text-accent-700 not-disabled:active:border-accent-700 not-disabled:active:bg-accent-500/15 not-disabled:active:text-accent-700 h-9 border px-3 text-sm font-medium\",\n\t\t\t\tlink: \"text-accent-600 focus-visible:ring-focus-accent not-disabled:hover:underline group/button-link border-transparent\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace any `icon` with a spinner, or add one if an icon wasn't given.\n\t\t\t * It will also disable user interaction with the button and set `disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Indicates the importance or impact level of the button, affecting its\n\t\t\t * color and styling to communicate its purpose to the user\n\t\t\t */\n\t\t\tpriority: {\n\t\t\t\tdanger: \"\",\n\t\t\t\tdefault: \"\",\n\t\t\t\tneutral: \"\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tisLoading: false,\n\t\t\tpriority: \"default\",\n\t\t},\n\t\tcompoundVariants: [\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700 border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-danger-600 bg-form text-danger-600 focus-visible:ring-focus-danger not-disabled:hover:border-danger-700 not-disabled:hover:bg-danger-500/10 not-disabled:hover:text-danger-700 not-disabled:active:border-danger-700 not-disabled:active:bg-danger-500/15 not-disabled:active:text-danger-700\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-danger focus-visible:border-danger-600 focus-visible:ring-focus-danger not-disabled:hover:bg-filled-danger-hover not-disabled:active:bg-filled-danger-active border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"danger\",\n\t\t\t\tclass: \"text-danger-600 focus-visible:ring-focus-danger\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"ghost\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"outlined\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"filled\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass:\n\t\t\t\t\t\"bg-filled-neutral focus-visible:ring-focus-neutral not-disabled:hover:bg-filled-neutral-hover not-disabled:active:bg-filled-neutral-active border-transparent focus-visible:border-neutral-600\",\n\t\t\t},\n\t\t\t{\n\t\t\t\tappearance: \"link\",\n\t\t\t\tpriority: \"neutral\",\n\t\t\t\tclass: \"text-strong focus-visible:ring-focus-accent\",\n\t\t\t},\n\t\t],\n\t},\n);\n\ntype ButtonVariants = VariantProps<typeof buttonVariants>;\n\ntype ButtonAppearance = Pick<ButtonVariants, \"appearance\">[\"appearance\"];\ntype ButtonPriority = Pick<ButtonVariants, \"priority\">[\"priority\"];\n\n/**\n * The props for the `Button` component.\n */\ntype ButtonProps = ComponentProps<\"button\"> &\n\tButtonVariants & {\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon?: ReactNode;\n\t\t/**\n\t\t * The side that the icon will render on, if one is present. If `state=\"pending\"`,\n\t\t * then the loading icon will also render on this side.\n\t\t * @default \"start\"\n\t\t */\n\t\ticonPlacement?: \"start\" | \"end\";\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n *\n * @see https://mantle.ngrok.com/components/button#api-button\n *\n * @example\n * ```tsx\n * <Button type=\"button\" appearance=\"filled\" priority=\"default\">\n *   Click me\n * </Button>\n * ```\n */\nconst Button = forwardRef<HTMLButtonElement, ButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance = \"outlined\",\n\t\t\tasChild,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\ticonPlacement = \"start\",\n\t\t\tisLoading = false,\n\t\t\tpriority = \"default\",\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\t/**\n\t\t * If the button has an icon and is not a link, add padding-start or padding-end to the button depending on the icon placement.\n\t\t */\n\t\tconst hasSpecialIconPadding = icon && appearance !== \"link\";\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\tclassName: cx(\n\t\t\t\tbuttonVariants({ appearance, priority, isLoading }),\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"start\" && \"ps-2.5\",\n\t\t\t\thasSpecialIconPadding && iconPlacement === \"end\" && \"pe-2.5\",\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t\"data-loading\": isLoading,\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tinvariant(\n\t\t\t\tisValidElement<ButtonProps>(singleChild),\n\t\t\t\t\"When using `asChild`, Button must be passed a single child as a JSX tag.\",\n\t\t\t);\n\t\t\tconst grandchildren = singleChild.props?.children;\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{cloneElement(\n\t\t\t\t\t\tsingleChild,\n\t\t\t\t\t\t{},\n\t\t\t\t\t\t<InnerContent\n\t\t\t\t\t\t\tappearance={appearance}\n\t\t\t\t\t\t\ticon={icon}\n\t\t\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{grandchildren}\n\t\t\t\t\t\t</InnerContent>,\n\t\t\t\t\t)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<InnerContent\n\t\t\t\t\tappearance={appearance}\n\t\t\t\t\ticon={icon}\n\t\t\t\t\ticonPlacement={iconPlacement}\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</InnerContent>\n\t\t\t</button>\n\t\t);\n\t},\n);\nButton.displayName = \"Button\";\n\nexport {\n\t//,\n\tButton,\n\tbuttonVariants,\n};\n\nexport type {\n\t//,\n\tButtonProps,\n\tButtonAppearance,\n\tButtonPriority,\n};\n\ntype InnerContentProps = PropsWithChildren &\n\tPick<ButtonProps, \"appearance\" | \"icon\" | \"iconPlacement\">;\n\nconst InnerContent = ({\n\tappearance,\n\tchildren,\n\ticon,\n\ticonPlacement,\n}: InnerContentProps) => (\n\t<span\n\t\tclassName={clsx(\n\t\t\t\"inline-flex items-center gap-1.5 focus-within:outline-none focus-visible:outline-none\",\n\t\t\tappearance === \"link\" &&\n\t\t\t\t\"hover:underline group-disabled/button-link:no-underline\",\n\t\t)}\n\t>\n\t\t{icon && (\n\t\t\t<Icon\n\t\t\t\tsvg={icon}\n\t\t\t\tclassName={clsx(iconPlacement === \"end\" && \"order-last\")}\n\t\t\t/>\n\t\t)}\n\t\t{children}\n\t</span>\n);\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAOC,MAAU,OACjB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAOnE,OAAOC,MAAe,iBAgNnB,cAAAC,EAsFF,QAAAC,MAtFE,oBA1MH,IAAMC,EAAiBC,EACtB,yNACA,CACC,SAAU,CAIT,WAAY,CACX,OACC,+OACD,MACC,yPACD,SACC,2UACD,KAAM,mHACP,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAKA,SAAU,CACT,OAAQ,GACR,QAAS,GACT,QAAS,EACV,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,UAAW,GACX,SAAU,SACX,EACA,iBAAkB,CACjB,CACC,WAAY,QACZ,SAAU,SACV,MACC,oNACF,EACA,CACC,WAAY,WACZ,SAAU,SACV,MACC,sSACF,EACA,CACC,WAAY,SACZ,SAAU,SACV,MACC,2LACF,EACA,CACC,WAAY,OACZ,SAAU,SACV,MAAO,iDACR,EACA,CACC,WAAY,QACZ,SAAU,UACV,MACC,0MACF,EACA,CACC,WAAY,WACZ,SAAU,UACV,MACC,wWACF,EACA,CACC,WAAY,SACZ,SAAU,UACV,MACC,gMACF,EACA,CACC,WAAY,OACZ,SAAU,UACV,MAAO,6CACR,CACD,CACD,CACD,EA6FMC,EAASC,EACd,CACC,CACC,gBAAiBC,EACjB,WAAAC,EAAa,WACb,QAAAC,EACA,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,cAAAC,EAAgB,QAChB,UAAAC,EAAY,GACZ,SAAAC,EAAW,UACX,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaG,CAAS,EAClEO,EAAOP,EACZd,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAMKW,EAAwBF,GAAQd,IAAe,OAE/CiB,EAAc,CACnB,gBAAiBL,EACjB,UAAWM,EACVvB,EAAe,CAAE,WAAAK,EAAY,SAAAQ,EAAU,UAAAD,CAAU,CAAC,EAClDS,GAAyBV,IAAkB,SAAW,SACtDU,GAAyBV,IAAkB,OAAS,SACpDH,CACD,EACA,eAAgBI,EAChB,SAAAK,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMkB,EAAcC,EAAS,KAAKlB,CAAQ,EAC1CmB,EACCC,EAA4BH,CAAW,EACvC,0EACD,EACA,IAAMI,EAAgBJ,EAAY,OAAO,SAEzC,OACC1B,EAAC+B,EAAA,CAAM,GAAGP,EACR,SAAAQ,EACAN,EACA,CAAC,EACD1B,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAiB,EACF,CACD,EACD,CAEF,CAEA,OACC9B,EAAC,UAAQ,GAAGwB,EAAa,KAAMR,EAC9B,SAAAhB,EAACiC,EAAA,CACA,WAAY1B,EACZ,KAAMc,EACN,cAAeR,EAEd,SAAAJ,EACF,EACD,CAEF,CACD,EACAL,EAAO,YAAc,SAkBrB,IAAM8B,EAAe,CAAC,CACrB,WAAAC,EACA,SAAAC,EACA,KAAAC,EACA,cAAAC,CACD,IACCC,EAAC,QACA,UAAWC,EACV,wFACAL,IAAe,QACd,yDACF,EAEC,UAAAE,GACAI,EAACC,EAAA,CACA,IAAKL,EACL,UAAWG,EAAKF,IAAkB,OAAS,YAAY,EACxD,EAEAF,GACF","names":["CircleNotchIcon","Slot","cva","clsx","Children","cloneElement","forwardRef","isValidElement","invariant","jsx","jsxs","buttonVariants","cva","Button","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","iconPlacement","isLoading","priority","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","hasSpecialIconPadding","buttonProps","cx","singleChild","Children","invariant","isValidElement","grandchildren","Slot","cloneElement","InnerContent","InnerContent","appearance","children","icon","iconPlacement","jsxs","clsx","jsx","Icon"]}

package/dist/{chunk-BK4P33ZH.js → chunk-RTXWW6ND.js}

@@ -1,2 +1,2 @@
-import{a as l}from"./chunk-3C5O3AQA.js";import{a as o}from"./chunk-XQVVOOLT.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{Slot as V}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as E}from"react";import{jsx as t,jsxs as L}from"react/jsx-runtime";var N=C("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),A=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:p,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:n,type:g,...y},B)=>{let r=l(c??f??e),i=e?t(I,{className:"animate-spin"}):v,s={"aria-disabled":r,"data-icon-button":!0,"data-loading":e,"data-size":n,className:d("icon-button",N({appearance:u,isLoading:e,size:n}),m),disabled:r,ref:B,...y};if(b){let a=H.only(p),x=E(a);return t(V,{...s,children:x&&M(a,{},t(o,{svg:i}))})}return L("button",{...s,type:g,children:[t("span",{className:"sr-only",children:h}),t(o,{svg:i})]})});A.displayName="IconButton";export{A as a};
-//# sourceMappingURL=chunk-BK4P33ZH.js.map
+import{a as l}from"./chunk-3C5O3AQA.js";import{a as o}from"./chunk-I6T6YV2L.js";import{a as d}from"./chunk-AZ56JGNY.js";import{CircleNotchIcon as I}from"@phosphor-icons/react/CircleNotch";import{Slot as V}from"@radix-ui/react-slot";import{cva as C}from"class-variance-authority";import{Children as H,cloneElement as M,forwardRef as T,isValidElement as E}from"react";import{jsx as t,jsxs as L}from"react/jsx-runtime";var N=C("inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50",{variants:{appearance:{ghost:"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent",outlined:"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600"},isLoading:{false:"",true:"opacity-50"},size:{xs:"size-6",sm:"size-7",md:"size-9"}},defaultVariants:{appearance:"outlined",size:"md"}}),A=T(({"aria-disabled":c,appearance:u,asChild:b=!1,children:p,className:m,disabled:f,icon:v,isLoading:e=!1,label:h,size:n,type:g,...y},B)=>{let r=l(c??f??e),i=e?t(I,{className:"animate-spin"}):v,s={"aria-disabled":r,"data-icon-button":!0,"data-loading":e,"data-size":n,className:d("icon-button",N({appearance:u,isLoading:e,size:n}),m),disabled:r,ref:B,...y};if(b){let a=H.only(p),x=E(a);return t(V,{...s,children:x&&M(a,{},t(o,{svg:i}))})}return L("button",{...s,type:g,children:[t("span",{className:"sr-only",children:h}),t(o,{svg:i})]})});A.displayName="IconButton";export{A as a};
+//# sourceMappingURL=chunk-RTXWW6ND.js.map

package/dist/{chunk-BK4P33ZH.js.map → chunk-RTXWW6ND.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-6\",\n\t\t\t\tsm: \"size-7\",\n\t\t\t\tmd: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tclassName: cx(\n\t\t\t\t\"icon-button\",\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport { IconButton, iconButtonVariants };\nexport type { IconButtonProps };\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QAkJhE,cAAAC,EAgCA,QAAAC,MAhCA,oBA3IH,IAAMC,EAAqBC,EAC1B,wNACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EAmFMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZb,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,UAAWS,EACV,cACAtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,SAAAS,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OACCzB,EAAC6B,EAAA,CAAM,GAAGN,EACR,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EACnE,CAEF,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}
+{"version":3,"sources":["../src/components/button/icon-button.tsx"],"sourcesContent":["import { CircleNotchIcon } from \"@phosphor-icons/react/CircleNotch\";\nimport { Slot } from \"@radix-ui/react-slot\";\nimport { cva } from \"class-variance-authority\";\nimport { Children, cloneElement, forwardRef, isValidElement } from \"react\";\nimport type { ButtonHTMLAttributes, ReactNode } from \"react\";\nimport type { VariantProps, WithAsChild } from \"../../types/index.js\";\nimport { parseBooleanish } from \"../../types/index.js\";\nimport { cx } from \"../../utils/cx/cx.js\";\nimport { Icon } from \"../icon/index.js\";\n\nconst iconButtonVariants = cva(\n\t\"inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] border focus-within:outline-none focus-visible:ring-4 disabled:cursor-default disabled:opacity-50\",\n\t{\n\t\tvariants: {\n\t\t\t/**\n\t\t\t * Defines the visual style of the Button.\n\t\t\t */\n\t\t\tappearance: {\n\t\t\t\tghost:\n\t\t\t\t\t\"text-strong focus-visible:ring-focus-accent not-disabled:hover:bg-neutral-500/10 not-disabled:hover:text-strong not-disabled:active:bg-neutral-500/15 not-disabled:active:text-strong border-transparent\",\n\t\t\t\toutlined:\n\t\t\t\t\t\"border-form bg-form text-strong focus-visible:border-accent-600 focus-visible:ring-focus-accent not-disabled:hover:border-neutral-400 not-disabled:hover:bg-form-hover not-disabled:hover:text-strong not-disabled:active:border-neutral-400 not-disabled:active:bg-neutral-500/10 not-disabled:active:text-strong focus-visible:not-disabled:active:border-accent-600\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * Whether or not the button is in a loading state, default `false`. Setting `isLoading` will\n\t\t\t * replace the `icon` with a spinner.\n\t\t\t * It will also disable user interaction with the button and set `aria-disabled`.\n\t\t\t */\n\t\t\tisLoading: {\n\t\t\t\tfalse: \"\",\n\t\t\t\ttrue: \"opacity-50\",\n\t\t\t},\n\t\t\t/**\n\t\t\t * The size of the IconButton.\n\t\t\t */\n\t\t\tsize: {\n\t\t\t\txs: \"size-6\",\n\t\t\t\tsm: \"size-7\",\n\t\t\t\tmd: \"size-9\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\tappearance: \"outlined\",\n\t\t\tsize: \"md\",\n\t\t},\n\t},\n);\n\ntype IconButtonVariants = VariantProps<typeof iconButtonVariants>;\n\n/**\n * The props for the `Button` component.\n */\ntype IconButtonProps = ButtonHTMLAttributes<HTMLButtonElement> &\n\tWithAsChild &\n\tIconButtonVariants & {\n\t\t/**\n\t\t * The accessible label for the icon. This label will be visually hidden but announced to screen reader users, similar to alt text for img tags.\n\t\t */\n\t\tlabel: string;\n\t\t/**\n\t\t * An icon to render inside the button. If the `state` is `\"pending\"`, then\n\t\t * the icon will automatically be replaced with a spinner.\n\t\t */\n\t\ticon: ReactNode;\n\t} & (\n\t\t| {\n\t\t\t\t/**\n\t\t\t\t * Use the `asChild` prop to compose Radix's functionality onto alternative\n\t\t\t\t * element types or your own React components.\n\t\t\t\t *\n\t\t\t\t * When `asChild` is set to `true`, mantle will not render a default DOM\n\t\t\t\t * element, instead cloning the component's child and passing it the props and\n\t\t\t\t * behavior required to make it functional.\n\t\t\t\t *\n\t\t\t\t * asChild can be used as deeply as you need to. This means it is a great way\n\t\t\t\t * to compose multiple primitive's behavior together.\n\t\t\t\t *\n\t\t\t\t * @see https://www.radix-ui.com/docs/primitives/guides/composition#composition\n\t\t\t\t */\n\t\t\t\tasChild: true;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype?: ButtonHTMLAttributes<HTMLButtonElement>[\"type\"];\n\t\t  }\n\t\t| {\n\t\t\t\tasChild?: false | undefined;\n\t\t\t\t/**\n\t\t\t\t * The default behavior of the button. Possible values are: `\"button\"`, `\"submit\"`, and `\"reset\"`.\n\t\t\t\t *\n\t\t\t\t * if `asChild` is NOT used: Unlike the native `<button>` element, this prop is required and has no default value.\n\t\t\t\t *\n\t\t\t\t * If `asChild` IS used: This prop HAS NO EFFECT, is REMOVED, and has no default value. This is because we do not want the `button` `type` to automatically merge with any child anchor `type` attribute because the `anchor` `type` is _strictly different_ than the `button` type, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#type\n\t\t\t\t *\n\t\t\t\t * @enum\n\t\t\t\t * - `\"button\"`: The button has no default behavior, and does nothing when pressed by default. It can have client-side scripts listen to the element's events, which are triggered when the events occur.\n\t\t\t\t * - `\"reset\"`: The button resets all the controls to their initial values.\n\t\t\t\t * - `\"submit\"`: The button submits the form data to the server.\n\t\t\t\t *\n\t\t\t\t * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#type\n\t\t\t\t */\n\t\t\t\ttype: Exclude<\n\t\t\t\t\tButtonHTMLAttributes<HTMLButtonElement>[\"type\"],\n\t\t\t\t\tundefined\n\t\t\t\t>;\n\t\t  }\n\t);\n\n/**\n * Renders a button or a component that looks like a button, an interactive\n * element activated by a user with a mouse, keyboard, finger, voice command, or\n * other assistive technology. Once activated, it then performs an action, such\n * as submitting a form or opening a dialog.\n * Renders only a single icon as children with an accessible, screen-reader-only label.\n *\n * @see https://mantle.ngrok.com/components/button#api-icon-button\n *\n * @example\n * ```tsx\n * <IconButton\n *   type=\"button\"\n *   icon={<TrashIcon />}\n *   label=\"Delete item\"\n *   appearance=\"ghost\"\n *   size=\"sm\"\n * />\n * ```\n */\nconst IconButton = forwardRef<HTMLButtonElement, IconButtonProps>(\n\t(\n\t\t{\n\t\t\t\"aria-disabled\": _ariaDisabled,\n\t\t\tappearance,\n\t\t\tasChild = false,\n\t\t\tchildren,\n\t\t\tclassName,\n\t\t\tdisabled: _disabled,\n\t\t\ticon: propIcon,\n\t\t\tisLoading = false,\n\t\t\tlabel,\n\t\t\tsize,\n\t\t\ttype,\n\t\t\t...props\n\t\t},\n\t\tref,\n\t) => {\n\t\tconst disabled = parseBooleanish(_ariaDisabled ?? _disabled ?? isLoading);\n\t\tconst icon = isLoading ? (\n\t\t\t<CircleNotchIcon className=\"animate-spin\" />\n\t\t) : (\n\t\t\tpropIcon\n\t\t);\n\n\t\tconst buttonProps = {\n\t\t\t\"aria-disabled\": disabled,\n\t\t\t\"data-icon-button\": true,\n\t\t\t\"data-loading\": isLoading,\n\t\t\t\"data-size\": size,\n\t\t\tclassName: cx(\n\t\t\t\t\"icon-button\",\n\t\t\t\ticonButtonVariants({ appearance, isLoading, size }),\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\tdisabled,\n\t\t\tref,\n\t\t\t...props,\n\t\t};\n\n\t\tif (asChild) {\n\t\t\tconst singleChild = Children.only(children);\n\t\t\tconst isValidChild = isValidElement(singleChild);\n\n\t\t\treturn (\n\t\t\t\t<Slot {...buttonProps}>\n\t\t\t\t\t{isValidChild && cloneElement(singleChild, {}, <Icon svg={icon} />)}\n\t\t\t\t</Slot>\n\t\t\t);\n\t\t}\n\n\t\treturn (\n\t\t\t<button {...buttonProps} type={type}>\n\t\t\t\t<span className=\"sr-only\">{label}</span>\n\t\t\t\t<Icon svg={icon} />\n\t\t\t</button>\n\t\t);\n\t},\n);\nIconButton.displayName = \"IconButton\";\n\nexport { IconButton, iconButtonVariants };\nexport type { IconButtonProps };\n"],"mappings":"wHAAA,OAAS,mBAAAA,MAAuB,oCAChC,OAAS,QAAAC,MAAY,uBACrB,OAAS,OAAAC,MAAW,2BACpB,OAAS,YAAAC,EAAU,gBAAAC,EAAc,cAAAC,EAAY,kBAAAC,MAAsB,QA6JhE,cAAAC,EAgCA,QAAAC,MAhCA,oBAtJH,IAAMC,EAAqBC,EAC1B,wNACA,CACC,SAAU,CAIT,WAAY,CACX,MACC,2MACD,SACC,wWACF,EAMA,UAAW,CACV,MAAO,GACP,KAAM,YACP,EAIA,KAAM,CACL,GAAI,SACJ,GAAI,SACJ,GAAI,QACL,CACD,EACA,gBAAiB,CAChB,WAAY,WACZ,KAAM,IACP,CACD,CACD,EA8FMC,EAAaC,EAClB,CACC,CACC,gBAAiBC,EACjB,WAAAC,EACA,QAAAC,EAAU,GACV,SAAAC,EACA,UAAAC,EACA,SAAUC,EACV,KAAMC,EACN,UAAAC,EAAY,GACZ,MAAAC,EACA,KAAAC,EACA,KAAAC,EACA,GAAGC,CACJ,EACAC,IACI,CACJ,IAAMC,EAAWC,EAAgBd,GAAiBK,GAAaE,CAAS,EAClEQ,EAAOR,EACZb,EAACsB,EAAA,CAAgB,UAAU,eAAe,EAE1CV,EAGKW,EAAc,CACnB,gBAAiBJ,EACjB,mBAAoB,GACpB,eAAgBN,EAChB,YAAaE,EACb,UAAWS,EACV,cACAtB,EAAmB,CAAE,WAAAK,EAAY,UAAAM,EAAW,KAAAE,CAAK,CAAC,EAClDL,CACD,EACA,SAAAS,EACA,IAAAD,EACA,GAAGD,CACJ,EAEA,GAAIT,EAAS,CACZ,IAAMiB,EAAcC,EAAS,KAAKjB,CAAQ,EACpCkB,EAAeC,EAAeH,CAAW,EAE/C,OACCzB,EAAC6B,EAAA,CAAM,GAAGN,EACR,SAAAI,GAAgBG,EAAaL,EAAa,CAAC,EAAGzB,EAAC+B,EAAA,CAAK,IAAKV,EAAM,CAAE,EACnE,CAEF,CAEA,OACCpB,EAAC,UAAQ,GAAGsB,EAAa,KAAMP,EAC9B,UAAAhB,EAAC,QAAK,UAAU,UAAW,SAAAc,EAAM,EACjCd,EAAC+B,EAAA,CAAK,IAAKV,EAAM,GAClB,CAEF,CACD,EACAjB,EAAW,YAAc","names":["CircleNotchIcon","Slot","cva","Children","cloneElement","forwardRef","isValidElement","jsx","jsxs","iconButtonVariants","cva","IconButton","forwardRef","_ariaDisabled","appearance","asChild","children","className","_disabled","propIcon","isLoading","label","size","type","props","ref","disabled","parseBooleanish","icon","CircleNotchIcon","buttonProps","cx","singleChild","Children","isValidChild","isValidElement","Slot","cloneElement","Icon"]}

package/dist/{chunk-3MDQ3LC2.js → chunk-W2YQRWR5.js}

@@ -1,2 +1,2 @@
-import{jsx as c,jsxs as t}from"react/jsx-runtime";function s(h){return t("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 256 256",...h,children:[c("path",{fill:"none",d:"M0 0h256v256H0z"}),c("path",{d:"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z"}),c("path",{d:"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z"})]})}export{s as a};
-//# sourceMappingURL=chunk-3MDQ3LC2.js.map
+import{jsx as c,jsxs as s}from"react/jsx-runtime";function t(h){return s("svg",{xmlns:"http://www.w3.org/2000/svg",width:"1em",height:"1em",fill:"currentColor",viewBox:"0 0 256 256",...h,children:[c("path",{fill:"none",d:"M0 0h256v256H0z"}),c("path",{d:"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z"}),c("path",{d:"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z"})]})}t.displayName="TrafficPolicyFileIcon";export{t as a};
+//# sourceMappingURL=chunk-W2YQRWR5.js.map

package/dist/{chunk-3MDQ3LC2.js.map → chunk-W2YQRWR5.js.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\twidth=\"1em\"\n\t\t\theight=\"1em\"\n\t\t\tfill=\"currentColor\"\n\t\t\tviewBox=\"0 0 256 256\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"AAOE,OAQC,OAAAA,EARD,QAAAC,MAAA,oBAFF,SAASC,EAAsBC,EAAsB,CACpD,OACCF,EAAC,OACA,MAAM,6BACN,MAAM,MACN,OAAO,MACP,KAAK,eACL,QAAQ,cACP,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,2OAA2O,EACnPA,EAAC,QAAK,EAAE,6gBAA6gB,GACthB,CAEF","names":["jsx","jsxs","TrafficPolicyFileIcon","props"]}
+{"version":3,"sources":["../src/components/icons/traffic-policy-file.tsx"],"sourcesContent":["import type { SvgAttributes } from \"../icon/types.js\";\n\n/**\n * An icon representing a traffic policy file.\n */\nfunction TrafficPolicyFileIcon(props: SvgAttributes) {\n\treturn (\n\t\t<svg\n\t\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\t\twidth=\"1em\"\n\t\t\theight=\"1em\"\n\t\t\tfill=\"currentColor\"\n\t\t\tviewBox=\"0 0 256 256\"\n\t\t\t{...props}\n\t\t>\n\t\t\t<path fill=\"none\" d=\"M0 0h256v256H0z\" />\n\t\t\t<path d=\"m213.7 82.3-56-56c-1.5-1.5-3.5-2.3-5.7-2.3H56c-8.8 0-16 7.2-16 16v88c0 4.4 3.6 8 8 8s8-3.6 8-8V40h88v48c0 4.4 3.6 8 8 8h48v120h-40c-4.4 0-8 3.6-8 8s3.6 8 8 8h40c8.8 0 16-7.2 16-16V88c0-2.1-.8-4.2-2.3-5.7zm-53.7-31L188.7 80H160V51.3z\" />\n\t\t\t<path d=\"M124.6 194.5h-6.8v-27.3h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4h-6.8v-10.2c0-3.8-3.1-6.8-6.8-6.8H63.3c-3.8 0-6.8 3.1-6.8 6.8v10.2h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v27.3h-6.8c-1.9 0-3.4 1.5-3.4 3.4s1.5 3.4 3.4 3.4h6.8v23.9c0 3.8 3.1 6.8 6.8 6.8H111c3.8 0 6.8-3.1 6.8-6.8v-23.9h6.8c1.9 0 3.4-1.5 3.4-3.4s-1.5-3.4-3.4-3.4zm-37.5-11.9c-6.6 0-11.9-5.3-11.9-11.9s5.3-11.9 11.9-11.9S99 164.1 99 170.7s-5.3 11.9-11.9 11.9zm0 10.2c6.6 0 11.9 5.3 11.9 11.9s-5.3 11.9-11.9 11.9-11.9-5.3-11.9-11.9 5.3-11.9 11.9-11.9z\" />\n\t\t</svg>\n\t);\n}\nTrafficPolicyFileIcon.displayName = \"TrafficPolicyFileIcon\";\n\nexport {\n\t//,\n\tTrafficPolicyFileIcon,\n};\n"],"mappings":"AAOE,OAQC,OAAAA,EARD,QAAAC,MAAA,oBAFF,SAASC,EAAsBC,EAAsB,CACpD,OACCF,EAAC,OACA,MAAM,6BACN,MAAM,MACN,OAAO,MACP,KAAK,eACL,QAAQ,cACP,GAAGE,EAEJ,UAAAH,EAAC,QAAK,KAAK,OAAO,EAAE,kBAAkB,EACtCA,EAAC,QAAK,EAAE,2OAA2O,EACnPA,EAAC,QAAK,EAAE,6gBAA6gB,GACthB,CAEF,CACAE,EAAsB,YAAc","names":["jsx","jsxs","TrafficPolicyFileIcon","props"]}

package/dist/code-block.d.ts

@@ -314,6 +314,9 @@ type CodeBlockIconProps = Omit<SvgAttributes, "children"> & ({
  * ```
  */
 declare function CodeBlockIcon({ className, preset, svg: _svgProp, ...props }: CodeBlockIconProps): react_jsx_runtime.JSX.Element;
+declare namespace CodeBlockIcon {
+    var displayName: string;
+}
 
 /**
  * Escapes special HTML characters in a string to their corresponding

package/dist/code-block.js

@@ -1,4 +1,4 @@
-import{a as _}from"./chunk-IWKI4XHM.js";import{a as O}from"./chunk-3MDQ3LC2.js";import{a as M}from"./chunk-3C5O3AQA.js";import{a as I}from"./chunk-XQVVOOLT.js";import"./chunk-HDPLH5HC.js";import{a as m}from"./chunk-AZ56JGNY.js";import{CaretDownIcon as ae}from"@phosphor-icons/react/CaretDown";import{CheckIcon as ie}from"@phosphor-icons/react/Check";import{CopyIcon as de}from"@phosphor-icons/react/Copy";import{FileTextIcon as pe}from"@phosphor-icons/react/FileText";import{TerminalIcon as le}from"@phosphor-icons/react/Terminal";import{Slot as x}from"@radix-ui/react-slot";import ue from"clsx";import{createContext as ce,forwardRef as y,useContext as A,useEffect as w,useId as me,useMemo as F,useRef as ge,useState as b}from"react";import P from"tiny-invariant";function E(e){let t="";for(let n of e)switch(n){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=n}return t}import N 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 ee=["tabs","spaces"];function W(e){return ee.includes(e)}function $(e,t){return t||(ne(e)?"tabs":(re(e),"spaces"))}var te=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],oe=["python","py","yaml","yml","ruby","rb"];function ne(e){return te.includes(e)}function re(e){return oe.includes(e)}function L(e,t){let{indentation:n="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,o=>n==="spaces"?o.replace(/\t/g,"  "):o.replace(/ {2}/g,"	"))}var B=["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"&&B.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as Ce,jsx as a,jsxs as j}from"react/jsx-runtime";var S=ce({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...n},o)=>{let[r,s]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),k=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(S.Provider,{value:k,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:o,...n})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...n},o)=>a(e?x:"div",{className:m("relative",t),ref:o,...n}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:n,language:o="text",showLineNumbers:r,style:s,tabIndex:d,value:p,...u},f)=>{let l=me(),{hasCodeExpander:c,isCodeExpanded:k,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(S),T=$(o,n),v=F(()=>L(p,{indentation:T}),[p,T]),[U,X]=b(E(L(p,{indentation:T})));w(()=>{let R=N.languages[o];P(R,`CodeBlock does not support the language "${o}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${B.join(", ")}.`);let Z=N.highlight(v,R,o);X(Z)},[v,o]),w(()=>{g(v)},[v,g]),w(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(o);return a("pre",{"aria-expanded":c?k:void 0,className:m("scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] 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":o,id:l,ref:f,style:{...s,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:a("code",{className:ue("text-size-inherit",z),dangerouslySetInnerHTML:{__html:U},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...n},o)=>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:o,...n}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...n},o)=>a(e?x:"h3",{ref:o,className:m("text-size-mono m-0 font-mono font-normal",t),...n}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:n,onCopyError:o,onClick:r,...s},d)=>{let{copyText:p}=A(S),[,u]=_(),[f,l]=b(!1),c=ge(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_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none 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),n?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){o?.(g)}},...s,children:[a("span",{className:"sr-only",children:"Copy code"}),f?j(Ce,{children:["Copied",a(I,{svg:a(ie,{weight:"bold"}),className:"size-4"})]}):a(I,{svg:a(de,{}),className:"-ml-px"})]})});G.displayName="CodeBlockCopyButton";var K=y(({asChild:e=!1,className:t,onClick:n,...o},r)=>{let{codeId:s,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(S);return w(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...o,"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),n?.(l)},children:[d?"Show less":"Show more"," ",a(I,{svg:a(ae,{weight:"bold"}),className:m("size-4",d&&"rotate-180","transition-all duration-150")})]})});K.displayName="CodeBlockExpanderButton";function fe({className:e,preset:t,svg:n,...o}){let r=n;if(t!=null)switch(t){case"file":r=a(pe,{weight:"fill"});break;case"cli":r=a(le,{weight:"fill"});break;case"traffic-policy":r=a(O,{});break}return a(I,{className:e,svg:r,...o})}function ye(e,...t){if(!be(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 n=String.raw({raw:e},...t),o=he(n);return n.trim().split(`
-`).map(s=>/^\S+/.test(s)?s:s.slice(o)).join(`
-`)}function he(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((n,o)=>Math.min(n,o.length),Number.POSITIVE_INFINITY):0}function be(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var xe=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function Ie(e){let t=e?.trim()??"";if(!t)return i;let n=ve(t).reduce((o,r)=>{let[s,d]=r.split("=");if(!s)return o;let p=ke(d);return o[s]=p??!0,o},{});try{let o=Be(n);return{...i,...o}}catch{return i}}function ke(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ve(e){let t=e?.trim()??"",n=[],o="",r=!1;for(let s of t)s===" "&&!r?o&&(n.push(o),o=""):(s==='"'&&(r=!r),o+=s);return o&&n.push(o),n}function Le(e){return xe.includes(e)}function Be(e){let{collapsible:t=i.collapsible,disableCopy:n=i.disableCopy,indentation:o=i.indentation,mode:r=i.mode,title:s=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?M(t):i.collapsible,disableCopy:typeof n=="string"||typeof n=="boolean"?M(n):i.disableCopy,indentation:W(o)?o:i.indentation,mode:Le(r)?r:i.mode,title:typeof s=="string"?s.trim():i.title}}export{V as CodeBlock,Y as CodeBlockBody,J as CodeBlockCode,G as CodeBlockCopyButton,K as CodeBlockExpanderButton,q as CodeBlockHeader,fe as CodeBlockIcon,Q as CodeBlockTitle,i as defaultMeta,E as escapeHtml,ye as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,L as normalizeIndentation,se as parseLanguage,Ie as parseMetastring,B as supportedLanguages};
+import{a as _}from"./chunk-IWKI4XHM.js";import{a as O}from"./chunk-W2YQRWR5.js";import{a as M}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 w,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 n of e)switch(n){case"&":t+="&amp;";break;case"<":t+="&lt;";break;case">":t+="&gt;";break;case'"':t+="&quot;";break;case"'":t+="&#39;";break;default:t+=n}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 oe=["csharp","css","go","html","java","javascript","js","jsx","ts","tsx","typescript","xml"],ne=["python","py","yaml","yml","ruby","rb"];function re(e){return oe.includes(e)}function ae(e){return ne.includes(e)}function L(e,t){let{indentation:n="spaces"}=t||{};return e.trim().replace(/^[ \t]*(?=\S)/gm,o=>n==="spaces"?o.replace(/\t/g,"  "):o.replace(/ {2}/g,"	"))}var B=["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"&&B.includes(e);function H(e="sh"){return`language-${e??"sh"}`}import{Fragment as Ce,jsx as s,jsxs as j}from"react/jsx-runtime";var S=me({codeId:void 0,copyText:"",hasCodeExpander:!1,isCodeExpanded:!1,registerCodeId:()=>{},setCopyText:()=>{},setHasCodeExpander:()=>{},setIsCodeExpanded:()=>{},unregisterCodeId:()=>{}}),V=y(({asChild:e=!1,className:t,...n},o)=>{let[r,a]=b(""),[d,p]=b(!1),[u,f]=b(!1),[l,c]=b(void 0),k=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(S.Provider,{value:k,children:s(C,{className:m("text-size-mono overflow-hidden rounded-md border border-gray-300 bg-gray-50 font-mono","[&_svg]:shrink-0",t),ref:o,...n})})});V.displayName="CodeBlock";var Y=y(({asChild:e=!1,className:t,...n},o)=>s(e?x:"div",{className:m("relative",t),ref:o,...n}));Y.displayName="CodeBlockBody";var J=y(({className:e,highlightLines:t,indentation:n,language:o="text",showLineNumbers:r,style:a,tabIndex:d,value:p,...u},f)=>{let l=ge(),{hasCodeExpander:c,isCodeExpanded:k,registerCodeId:C,setCopyText:g,unregisterCodeId:h}=A(S),T=$(o,n),v=F(()=>L(p,{indentation:T}),[p,T]),[X,Z]=b(N(L(p,{indentation:T})));w(()=>{let R=E.languages[o];P(R,`CodeBlock does not support the language "${o}". The syntax highlighter does not have a grammar for this language. The supported languages are: ${B.join(", ")}.`);let ee=E.highlight(v,R,o);Z(ee)},[v,o]),w(()=>{g(v)},[v,g]),w(()=>(C(l),()=>{h(l)}),[l,C,h]);let z=H(o);return s("pre",{"aria-expanded":c?k:void 0,className:m("scrollbar firefox:after:mr-[3.375rem] firefox:after:inline-block firefox:after:content-[''] 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":o,id:l,ref:f,style:{...a,tabSize:2,MozTabSize:2},tabIndex:d??-1,...u,children:s("code",{className:ce("text-size-inherit",z),dangerouslySetInnerHTML:{__html:X},suppressHydrationWarning:!0})})});J.displayName="CodeBlockCode";var q=y(({asChild:e=!1,className:t,...n},o)=>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:o,...n}));q.displayName="CodeBlockHeader";var Q=y(({asChild:e=!1,className:t,...n},o)=>s(e?x:"h3",{ref:o,className:m("text-size-mono m-0 font-mono font-normal",t),...n}));Q.displayName="CodeBlockTitle";var G=y(({asChild:e=!1,className:t,onCopy:n,onCopyError:o,onClick:r,...a},d)=>{let{copyText:p}=A(S),[,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_hsl(var(--gray-50)),1rem_0_0_-0.25rem_hsl(var(--gray-50))] hover:border-gray-400 hover:bg-gray-200 focus-visible:outline-none 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),n?.(p),l(!0),window.clearTimeout(c.current),c.current=window.setTimeout(()=>{l(!1)},2e3)}catch(g){o?.(g)}},...a,children:[s("span",{className:"sr-only",children:"Copy code"}),f?j(Ce,{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:n,...o},r)=>{let{codeId:a,isCodeExpanded:d,setIsCodeExpanded:p,setHasCodeExpander:u}=A(S);return w(()=>(u(!0),()=>{u(!1)}),[u]),j(e?x:"button",{...o,"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),n?.(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:n,...o}){let r=n;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,...o})}U.displayName="CodeBlockIcon";function ye(e,...t){if(!be(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 n=String.raw({raw:e},...t),o=he(n);return n.trim().split(`
+`).map(a=>/^\S+/.test(a)?a:a.slice(o)).join(`
+`)}function he(e){let t=e.match(/^[ \t]*(?=\S)/gm);return t?t.reduce((n,o)=>Math.min(n,o.length),Number.POSITIVE_INFINITY):0}function be(e){return Array.isArray(e)&&"raw"in e&&Array.isArray(e.raw)}var xe=["cli","file","traffic-policy"],i={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function Ie(e){let t=e?.trim()??"";if(!t)return i;let n=ve(t).reduce((o,r)=>{let[a,d]=r.split("=");if(!a)return o;let p=ke(d);return o[a]=p??!0,o},{});try{let o=Be(n);return{...i,...o}}catch{return i}}function ke(e){return e?.trim().replace(/^"(.*)"$/,"$1")}function ve(e){let t=e?.trim()??"",n=[],o="",r=!1;for(let a of t)a===" "&&!r?o&&(n.push(o),o=""):(a==='"'&&(r=!r),o+=a);return o&&n.push(o),n}function Le(e){return xe.includes(e)}function Be(e){let{collapsible:t=i.collapsible,disableCopy:n=i.disableCopy,indentation:o=i.indentation,mode:r=i.mode,title:a=i.title}=e;return{collapsible:typeof t=="string"||typeof t=="boolean"?M(t):i.collapsible,disableCopy:typeof n=="string"||typeof n=="boolean"?M(n):i.disableCopy,indentation:W(o)?o:i.indentation,mode:Le(r)?r:i.mode,title:typeof a=="string"?a.trim():i.title}}export{V as CodeBlock,Y as CodeBlockBody,J as CodeBlockCode,G as CodeBlockCopyButton,K as CodeBlockExpanderButton,q as CodeBlockHeader,U as CodeBlockIcon,Q as CodeBlockTitle,i as defaultMeta,N as escapeHtml,ye as fmtCode,H as formatLanguageClassName,D as isSupportedLanguage,L as normalizeIndentation,se as parseLanguage,Ie as parseMetastring,B as supportedLanguages};
 //# sourceMappingURL=code-block.js.map