@xyd-js/components 0.1.0-xyd.5 → 0.1.0-xyd.52

package/dist/content.d.ts

@@ -1,121 +1,232 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+import { Settings } from '@xyd-js/core';
 import { Theme } from '@code-hike/lighter';
+import { HighlightedCode } from 'codehike/code';
 
 interface BadgeProps {
-    children: React.ReactNode;
-    size?: "sm";
-    kind?: "warning" | "info";
+    /**
+     * The class name of the badge.
+     */
+    className?: string;
+    /**
+     * The children of the badge.
+     */
+    children?: React.ReactNode;
+    /**
+     * The size of the badge.
+     */
+    size?: "sm" | "xs";
+    /**
+     * The kind of the badge.
+     */
+    kind?: "warning" | "info" | "default";
 }
-declare function Badge({ children, size, kind }: BadgeProps): React.JSX.Element;
+/**
+ * Badge component is used to display a badge.
+ *
+ * @group Components
+ */
+declare function Badge({ className, children, size, kind }: BadgeProps): React.JSX.Element;
 
-interface BlockquoteProps {
-    children: React.ReactNode;
+interface ButtonProps {
+    children?: React.ReactNode;
+    kind?: "primary" | "secondary" | "tertiary" | undefined;
+    theme?: "ghost";
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    icon?: React.ReactElement;
+    iconPosition?: "left" | "right";
+    href?: string;
 }
-declare function Blockquote({ children }: BlockquoteProps): React.JSX.Element;
+declare function Button({ children, kind, theme, size, className, onClick, disabled, icon, iconPosition, href }: ButtonProps): React.JSX.Element;
 
+/**
+ * Props for the Callout component
+ */
 interface CalloutProps {
+    /** Additional CSS class name to be applied to the callout */
+    className?: string;
+    /** Content to be displayed inside the callout */
     children: React.ReactNode;
 }
-declare function Callout({ children }: CalloutProps): React.JSX.Element;
+/**
+ * A Callout component that displays important information or notices in a visually distinct way.
+ * It includes an info icon and a message area for content.
+ *
+ * @category Component
+ */
+declare function Callout({ className, children }: CalloutProps): React.JSX.Element;
 
-interface CodeProps {
-    children: React.ReactNode;
-}
-declare function Code({ children }: CodeProps): React.JSX.Element;
+declare function ColorSchemeButton(): React.JSX.Element;
 
+/**
+ * Base interface for all Details component variants
+ */
 interface BaseDetailsProps {
+    /** Content to be displayed inside the details element */
     children: React.ReactNode;
+    /** Label text displayed in the summary */
     label: string;
+    /** Optional icon element to be displayed in the summary */
+    icon?: React.ReactElement;
+    /** Optional CSS class name for custom styling */
+    className?: string;
 }
+/**
+ * Props for the tertiary variant of the Details component
+ */
+interface TertiaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the tertiary variant */
+    kind: "tertiary";
+    /** Title text or element displayed in the summary */
+    title: string | React.ReactNode;
+}
+/**
+ * Props for the secondary variant of the Details component
+ */
 interface SecondaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the secondary variant */
     kind: "secondary";
-    title: string;
+    /** Title text or element displayed in the summary */
+    title: string | React.ReactNode;
 }
+/**
+ * Props for the primary variant of the Details component
+ */
 interface PrimaryDetailsProps extends BaseDetailsProps {
+    /** Specifies the primary variant (default) */
     kind?: "primary";
 }
-type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps;
-declare function Details(props: DetailsProps): React.JSX.Element;
+/** Union type of all possible Details component variants */
+type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps;
+/**
+ * A collapsible details component that supports three variants: primary, secondary, and tertiary.
+ * Each variant has a different visual style and structure.
+ *
+ * @param props - The component props
+ * @returns A details element with collapsible content
+ *
+ * @category Component
+ */
+declare function Details(props: DetailsProps): React.ReactElement;
 
-interface GuideCardProps {
-    children: React.ReactNode;
-    href: string;
-    title: string;
-    icon?: React.ReactNode;
-    kind?: "secondary";
-    size?: "sm" | "md";
-}
-declare function GuideCard({ children, href, icon, title, kind, size, }: GuideCardProps): React.JSX.Element;
-declare namespace GuideCard {
-    var List: ({ children }: {
-        children: React.ReactNode;
-    }) => React.JSX.Element;
-}
-
-interface HrProps {
-    children: React.ReactNode;
+interface IconProps {
+    name: string;
+    size?: number;
+    color?: string;
 }
-declare function Hr({ children }: HrProps): React.JSX.Element;
-
-declare function IconSessionReplay(): React.JSX.Element;
-declare function IconMetrics(): React.JSX.Element;
-declare function IconFunnels(): React.JSX.Element;
-declare function IconCode(): React.JSX.Element;
-declare function IconCustomEvent(): React.JSX.Element;
-declare function IconAlert(): React.JSX.Element;
-declare function IconBrowser(): React.JSX.Element;
-declare function IconREST(): React.JSX.Element;
-declare function IconGraphQL(): React.JSX.Element;
-declare function IconWebhooks(): React.JSX.Element;
-declare function IconJSBrowser(): React.JSX.Element;
-declare function IconJSNode(): React.JSX.Element;
-declare function IconStorybook(): React.JSX.Element;
-declare function IconReactRouter(): React.JSX.Element;
-declare function IconNextJS(): React.JSX.Element;
-declare function IconAppTemplate(): React.JSX.Element;
+declare function Icon(props: IconProps): ReactElement | null;
 
+/**
+ * Props for the Steps component
+ */
 interface StepsProps {
+    /** Content to be rendered inside the steps list */
     children: React.ReactNode;
+    /** Optional CSS class name to be applied to the steps container */
+    className?: string;
 }
-declare function Steps({ children }: StepsProps): React.JSX.Element;
+/**
+ * Steps component that renders a numbered list of steps or stages.
+ * Use this component to display a sequence of steps in a process or workflow.
+ *
+ * @category Component
+ */
+declare function Steps({ children, className }: StepsProps): React.JSX.Element;
 declare namespace Steps {
-    var Item: ({ children }: StepsItemProps) => React.JSX.Element;
+    var Item: ({ children, className }: StepsItemProps) => React.JSX.Element;
 }
+/**
+ * Props for the Steps.Item component
+ */
 interface StepsItemProps {
+    /** Content to be rendered inside the step item */
     children: React.ReactNode;
+    /** Optional CSS class name to be applied to the step item */
+    className?: string;
 }
 
+/**
+ * Props for the Table component
+ */
 interface TableProps {
+    /** The content to be rendered inside the table */
     children: React.ReactNode;
+    /** Optional CSS class name to be applied to the table */
+    className?: string;
 }
-declare function Table({ children }: TableProps): React.JSX.Element;
+/**
+ * A table component that provides a structured way to display tabular data.
+ * It supports custom styling through className prop and can contain various table elements.
+ *
+ * @category Component
+ */
+declare function Table({ children, className }: TableProps): React.JSX.Element;
 declare namespace Table {
-    var Th: ({ children }: TableThProps) => React.JSX.Element;
+    var Head: ({ children }: TableHeadProps) => React.JSX.Element;
+    var Th: ({ children, numeric }: TableThProps) => React.JSX.Element;
     var Tr: ({ children }: TableTrProps) => React.JSX.Element;
-    var Td: ({ children }: TableTdProps) => React.JSX.Element;
+    var Body: ({ children }: TableBodyProps) => React.JSX.Element;
+    var Td: ({ children, numeric, muted }: TableTdProps) => React.JSX.Element;
+    var Cell: ({ children }: TableCellProps) => React.JSX.Element;
 }
+/**
+ * Props for the TableHead component
+ */
+interface TableHeadProps {
+    /** The content to be rendered inside the table header */
+    children: React.ReactNode;
+}
+/**
+ * Props for the TableTh component
+ */
 interface TableThProps {
+    /** The content to be rendered inside the table header cell */
     children: React.ReactNode;
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
 }
+/**
+ * Props for the TableTr component
+ */
 interface TableTrProps {
+    /** The content to be rendered inside the table row */
+    children: React.ReactNode;
+}
+/**
+ * Props for the TableBody component
+ */
+interface TableBodyProps {
+    /** The content to be rendered inside the table body */
     children: React.ReactNode;
 }
+/**
+ * Props for the TableTd component
+ */
 interface TableTdProps {
+    /** The content to be rendered inside the table cell */
     children: React.ReactNode;
+    /** Whether the cell content should be right-aligned (for numeric values) */
+    numeric?: boolean;
+    /** Whether the cell should have a muted appearance */
+    muted?: boolean;
 }
-
-interface TabsProps {
+/**
+ * Props for the TableCell component
+ */
+interface TableCellProps {
+    /** The content to be rendered inside the table cell */
     children: React.ReactNode;
-    items: string[];
-    tabIndex?: number;
 }
-declare function Tabs({ children, items, tabIndex }: TabsProps): React.JSX.Element;
-declare namespace Tabs {
-    var Content: ({ children, value }: {
-        children: any;
-        value: any;
-    }) => React.JSX.Element;
+
+interface UpdateProps {
+    children: React.ReactNode;
+    version: string;
+    date?: string;
 }
+declare function Update(props: UpdateProps): React.JSX.Element;
 
 interface CodeThemeBlockProps {
     /** This is the raw code. May include annotation comments. */
@@ -124,142 +235,120 @@ interface CodeThemeBlockProps {
     lang: string;
     /** Metadata string (the content after the language name in a markdown codeblock). */
     meta: string;
+    /** The highlighted code. */
+    highlighted?: HighlightedCode;
 }
 
 interface CodeSampleProps {
     name: string;
     description: string;
-    codeblocks: CodeThemeBlockProps[];
-    size?: "full";
+    codeblocks?: CodeThemeBlockProps[];
     theme?: Theme;
+    size?: "full";
+    lineNumbers?: boolean;
+    descriptionHead?: string;
+    descriptionContent?: string | React.ReactNode;
+    descriptionIcon?: string;
+    kind?: "secondary";
+    controlByMeta?: boolean;
 }
 declare function CodeSample(props: CodeSampleProps): React.JSX.Element;
 
-interface ContentProps {
-    children: React.ReactNode;
+interface ReactContentOptions {
+    Link?: React.ElementType;
+    components?: {
+        [component: string]: (props: any) => React.JSX.Element | null;
+    };
+    useLocation?: () => {
+        search: string;
+    };
+    useNavigate?: (to: any) => void;
+    useNavigation?: () => any;
 }
-declare function Content({ children }: ContentProps): React.JSX.Element;
-
-interface SubtitleProps {
-    children: React.ReactNode;
+declare class ReactContent {
+    protected settings?: Settings | undefined;
+    protected options?: ReactContentOptions | undefined;
+    constructor(settings?: Settings | undefined, options?: ReactContentOptions | undefined);
+    components(): {
+        [component: string]: (props: any) => React.JSX.Element | null;
+    };
+    noop(): {
+        React: typeof NoopReactComponent;
+        Steps: typeof NoopComponent;
+        UnderlineNav: typeof NoopComponent;
+        Tabs: typeof NoopComponent;
+        GuideCard: typeof NoopComponent;
+        Table: typeof NoopComponent;
+    };
 }
-declare function Subtitle({ children }: SubtitleProps): React.JSX.Element;
-
-declare function content(): {
-    DirectiveCodeSample: (props: any) => React.JSX.Element;
-    CodeSample: typeof CodeSample;
-    IconSessionReplay: typeof IconSessionReplay;
-    IconMetrics: typeof IconMetrics;
-    IconFunnels: typeof IconFunnels;
-    IconCode: typeof IconCode;
-    IconCustomEvent: typeof IconCustomEvent;
-    IconAlert: typeof IconAlert;
-    IconBrowser: typeof IconBrowser;
-    IconREST: typeof IconREST;
-    IconGraphQL: typeof IconGraphQL;
-    IconWebhooks: typeof IconWebhooks;
-    IconJSBrowser: typeof IconJSBrowser;
-    IconJSNode: typeof IconJSNode;
-    IconStorybook: typeof IconStorybook;
-    IconReactRouter: typeof IconReactRouter;
-    IconNextJS: typeof IconNextJS;
-    IconAppTemplate: typeof IconAppTemplate;
-    Content: typeof Content;
-    Subtitle: typeof Subtitle;
-    Callout: typeof Callout;
-    Details: typeof Details;
-    GuideCard: typeof GuideCard;
-    Steps: typeof Steps;
-    Tabs: typeof Tabs;
-    Table: typeof Table;
-    Badge: typeof Badge;
-    h1: (props: any) => React.JSX.Element;
-    h2: (props: any) => React.JSX.Element;
-    h3: (props: any) => React.JSX.Element;
-    h4: (props: any) => React.JSX.Element;
-    h5: (props: any) => React.JSX.Element;
-    h6: (props: any) => React.JSX.Element;
-    p: (props: any) => React.JSX.Element;
-    ul: (props: any) => React.JSX.Element;
-    ol: (props: any) => React.JSX.Element;
-    li: (props: any) => React.JSX.Element;
-    table: typeof Table;
-    tr: ({ children }: TableTrProps) => React.JSX.Element;
-    th: ({ children }: TableThProps) => React.JSX.Element;
-    td: ({ children }: TableTdProps) => React.JSX.Element;
-    code: typeof Code;
-    pre: (props: any) => React.JSX.Element;
-    details: typeof Details;
-    blockquote: typeof Blockquote;
-    hr: typeof Hr;
-    a: ({ href, className, ...props }: {
-        [x: string]: any;
-        href?: string | undefined;
-        className?: string | undefined;
-    }) => React.JSX.Element;
-};
-declare function stdContent(): {
+declare function NoopComponent(): null;
+declare namespace NoopComponent {
+    var Item: () => null;
+    var Content: () => null;
+    var List: () => null;
+    var Head: () => null;
+    var Td: () => null;
+    var Tr: () => null;
+    var Th: () => null;
+    var Cell: () => null;
+}
+declare function NoopReactComponent(): null;
+declare namespace NoopReactComponent {
+    var Fragment: React.ExoticComponent<React.FragmentProps>;
+}
+declare function stdContent(this: ReactContent): {
     h1: (props: any) => React.JSX.Element;
     h2: (props: any) => React.JSX.Element;
     h3: (props: any) => React.JSX.Element;
     h4: (props: any) => React.JSX.Element;
     h5: (props: any) => React.JSX.Element;
-    h6: (props: any) => React.JSX.Element;
     p: (props: any) => React.JSX.Element;
     ul: (props: any) => React.JSX.Element;
     ol: (props: any) => React.JSX.Element;
     li: (props: any) => React.JSX.Element;
-    table: typeof Table;
-    tr: ({ children }: TableTrProps) => React.JSX.Element;
-    th: ({ children }: TableThProps) => React.JSX.Element;
-    td: ({ children }: TableTdProps) => React.JSX.Element;
-    code: typeof Code;
-    pre: (props: any) => React.JSX.Element;
-    details: typeof Details;
-    blockquote: typeof Blockquote;
-    hr: typeof Hr;
-    a: ({ href, className, ...props }: {
-        [x: string]: any;
-        href?: string | undefined;
-        className?: string | undefined;
-    }) => React.JSX.Element;
+    table: (props: any) => React.JSX.Element;
+    tr: (props: any) => React.JSX.Element;
+    th: (props: any) => React.JSX.Element;
+    td: (props: any) => React.JSX.Element;
+    code: (props: any) => React.JSX.Element;
+    pre: any;
+    details: (props: any) => React.JSX.Element;
+    blockquote: (props: any) => React.JSX.Element;
+    hr: (props: any) => React.JSX.Element;
+    a: (props: any) => React.JSX.Element;
+    br: (props: any) => React.JSX.Element;
+    img: (props: any) => React.JSX.Element;
+    React: typeof NoopReactComponent;
 };
 declare function writerContent(): {
     Callout: typeof Callout;
     Details: typeof Details;
-    GuideCard: typeof GuideCard;
+    GuideCard: any;
     Steps: typeof Steps;
-    Tabs: typeof Tabs;
+    Tabs: any;
     Table: typeof Table;
     Badge: typeof Badge;
-};
-declare function directiveContent(): {
-    DirectiveCodeSample: (props: any) => React.JSX.Element;
-};
-declare function helperContent(): {
-    Content: typeof Content;
-    Subtitle: typeof Subtitle;
+    Button: typeof Button;
+    UnderlineNav: any;
+    Subtitle(props: any): React.JSX.Element;
+    Update: typeof Update;
+    Card: any;
+    ColorSchemeButton: typeof ColorSchemeButton;
 };
 declare function iconContent(): {
-    IconSessionReplay: typeof IconSessionReplay;
-    IconMetrics: typeof IconMetrics;
-    IconFunnels: typeof IconFunnels;
-    IconCode: typeof IconCode;
-    IconCustomEvent: typeof IconCustomEvent;
-    IconAlert: typeof IconAlert;
-    IconBrowser: typeof IconBrowser;
-    IconREST: typeof IconREST;
-    IconGraphQL: typeof IconGraphQL;
-    IconWebhooks: typeof IconWebhooks;
-    IconJSBrowser: typeof IconJSBrowser;
-    IconJSNode: typeof IconJSNode;
-    IconStorybook: typeof IconStorybook;
-    IconReactRouter: typeof IconReactRouter;
-    IconNextJS: typeof IconNextJS;
-    IconAppTemplate: typeof IconAppTemplate;
+    Icon: typeof Icon;
 };
 declare function coderContent(): {
     CodeSample: typeof CodeSample;
 };
+declare function directiveContent(this: ReactContent): {
+    DirectiveCodeGroup: (props: any) => React.JSX.Element;
+};
+
+interface ContentDecoratorProps {
+    children: React.ReactNode;
+    metaComponent?: string;
+}
+declare function ContentDecorator({ children, metaComponent }: ContentDecoratorProps): React.JSX.Element;
 
-export { content as MDX, coderContent, content as default, directiveContent, helperContent, iconContent, stdContent, writerContent };
+export { ContentDecorator, ReactContent, coderContent, directiveContent, iconContent, stdContent, writerContent };

package/dist/content.js

@@ -1,2 +1,2 @@
-import{_ as e}from"./tslib.es6-BJOaQ_lJ.js";import n,{forwardRef as t}from"react";import{H as r,B as a,D as i,C as c,a as s,b as l,c as o,I as u,d,e as m,f as h,g as f,h as v,i as p,j as b,k as g,l as j,m as E,n as O,o as I,p as S,q as N,r as k}from"./index-DcT-QJgO.js";import"@radix-ui/react-icons";import{T as C,a as T,S as w,G as x}from"./UnderlineNav-3vpnAIF7.js";import{b as z}from"./CodeSample-Bkdm9TLb.js";import"@code-hike/lighter";import"@radix-ui/react-tabs";import"lucide-react";import"./_rollupPluginBabelHelpers-Dyp77Dty.js";import"./coder/themes/cosmo-light.js";var B="h1seqss5";function y(e){var t=e.children;return n.createElement("div",{className:B},t)}var D="hmi9h9e";function J(e){var t=e.children;return n.createElement("div",{className:D},t)}var R="htyux6",q=t((function(e,t){var r=e.href,a=void 0===r?"":r,i=e.children;return e.newWindow?n.createElement("a",{ref:t,to:a,href:a,target:"_blank",rel:"noreferrer",className:R},i):n.createElement("a",{ref:t,to:a,href:a,className:R},i)}));q.displayName="Anchor";var A=/https?:\/\//,G=function(t){var r=t.href,a=void 0===r?"":r;t.className;var i=e(t,["href","className"]);return n.createElement(q,Object.assign({href:a,newWindow:A.test(a)},i))};function W(){return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},_()),H()),F()),L()),P()),M())}function _(){return{h1:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children},e)))},h2:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children,size:2},e)))},h3:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children,size:3},e)))},h4:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children,size:4},e)))},h5:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children,size:5},e)))},h6:function(e){return n.createElement("div",null,n.createElement(s,Object.assign({id:e.children,size:6},e)))},p:function(e){return n.createElement("p",Object.assign({},e))},ul:function(e){return n.createElement("ul",Object.assign({},e),e.children)},ol:function(e){return n.createElement("ol",Object.assign({},e),e.children)},li:function(e){return n.createElement("li",Object.assign({},e),e.children)},table:C,tr:C.Tr,th:C.Th,td:C.Td,code:c,pre:function(e){var t,r,a,i,c,s,l=((null===(r=null===(t=null==e?void 0:e.children)||void 0===t?void 0:t.props)||void 0===r?void 0:r.className)||"").replace("language-","");return n.createElement(z,{name:l,description:null===(i=null===(a=null==e?void 0:e.children)||void 0===a?void 0:a.props)||void 0===i?void 0:i.meta,codeblocks:[{value:null===(s=null===(c=null==e?void 0:e.children)||void 0===c?void 0:c.props)||void 0===s?void 0:s.children,lang:l,meta:l}],size:"full"})},details:i,blockquote:a,hr:r,a:G}}function H(){return{Callout:o,Details:i,GuideCard:x,Steps:w,Tabs:T,Table:C,Badge:l}}function M(){return{DirectiveCodeSample:function(e){return n.createElement(z,Object.assign({},e,{codeblocks:JSON.parse(e.codeblocks)}))}}}function F(){return{Content:y,Subtitle:J}}function L(){return{IconSessionReplay:k,IconMetrics:N,IconFunnels:S,IconCode:I,IconCustomEvent:O,IconAlert:E,IconBrowser:j,IconREST:g,IconGraphQL:b,IconWebhooks:p,IconJSBrowser:v,IconJSNode:f,IconStorybook:h,IconReactRouter:m,IconNextJS:d,IconAppTemplate:u}}function P(){return{CodeSample:z}}export{W as MDX,P as coderContent,W as default,M as directiveContent,F as helperContent,L as iconContent,_ as stdContent,H as writerContent};
+import{c as n,_ as e,d as t,a as i,e as r}from"./_rollupPluginBabelHelpers-CV-SOB7x.js";import{a as o}from"./tslib.es6-BJtAe2Ef.js";import l,{useRef as a,useState as c,useEffect as s,createContext as u,useContext as d,useMemo as v}from"react";import{T as h,L as m,a as f,G as p,B as g,S as b,A as j,b as E}from"./VideoGuide-CrW6tvqB.js";import{I as O,H as w,B as C,D as y,C as k,a as L,U as S,b as I,c as T,d as x,e as N}from"./Update-b8FT7xsG.js";import{I as U}from"./Icon-XgHKz5VO.js";import{T as A}from"./Text-K_2YR6jw.js";import{c as H}from"./CodeSample-D1cQIpZA.js";import"@code-hike/lighter";import"radix-ui";import"lucide-react";import"./coder/themes/cosmo-light.js";var R="g1wc20vm";function B(n){var e=n.children,t=n.cols;return l.createElement("xyd-grid-decorator",{className:R,"data-cols":t},e)}var G=function(){return n(function n(e,i){t(this,n),this.settings=e,this.options=i},[{key:"components",value:function(){var n,e=this,t=[F,z,Q,X,Y,Z].map(function(n){return n.bind(e)}).reduce(function(n,e){return Object.assign(Object.assign({},n),e())},{});return Object.assign(Object.assign({},t),(null===(n=this.options)||void 0===n?void 0:n.components)||{})}},{key:"noop",value:function(){var n,t=this.components(),i=[].concat(e(Object.keys(t)),e(Object.keys((null===(n=this.options)||void 0===n?void 0:n.components)||{}))).reduce(function(n,e){return n[e]=function(){return null},n},{}),r={Steps:V,UnderlineNav:V,Tabs:V,GuideCard:V,Table:V};return Object.assign(Object.assign(Object.assign({},i),r),{React:D})}}])}();function V(){return null}function D(){return null}function F(){var n=this,e=$.bind(this),t=P.bind(this);return{h1:function(n){return l.createElement(t,Object.assign({depth:1},n,{noanchor:!0}))},h2:function(n){return l.createElement(t,Object.assign({depth:2},n))},h3:function(n){return l.createElement(t,Object.assign({depth:3},n))},h4:function(n){return l.createElement(t,Object.assign({depth:4},n))},h5:function(n){return l.createElement(t,Object.assign({depth:5},n))},p:function(n){return l.createElement(A,Object.assign({},n))},ul:function(n){return l.createElement(m,Object.assign({},n),n.children)},ol:function(n){return l.createElement(f,Object.assign({},n),n.children)},li:function(n){return l.createElement(m.Item,Object.assign({},n),n.children)},table:function(n){return l.createElement(h,Object.assign({},n))},tr:function(n){return l.createElement(h.Tr,Object.assign({},n))},th:function(n){return l.createElement(h.Th,Object.assign({},n))},td:function(n){return l.createElement(h.Td,Object.assign({},n),l.createElement(h.Cell,null,n.children))},code:function(n){return l.createElement(k,Object.assign({},n))},pre:e,details:function(n){return l.createElement(y,Object.assign({},n))},blockquote:function(n){return l.createElement(C,Object.assign({},n))},hr:function(n){return l.createElement(w,Object.assign({},n))},a:function(e){var t;return l.createElement(en,Object.assign({},e,{as:null===(t=null==n?void 0:n.options)||void 0===t?void 0:t.Link}))},br:function(n){return l.createElement("br",null)},img:function(n){return l.createElement(O,Object.assign({},n))},React:D}}function P(n){var e,t=n.id,r=n.depth,o=n.children,u=n.label,d=n.subtitle,v=n.noanchor,h=n.style,m=null===(e=null==this?void 0:this.options)||void 0===e?void 0:e.useNavigation(),f=a(null),p=c(!1),g=i(p,2),b=g[0],j=g[1];function E(n){var e=window.location.hash==="#".concat(t);j(e)}return s(function(){window.addEventListener("replaceState",E);var n=window.location.hash==="#".concat(t);return j(n),n&&f.current&&"loading"!==(null==m?void 0:m.state)&&f.current.scrollIntoView(),function(){window.removeEventListener("replaceState",E)}},[]),l.createElement(x,{ref:f,id:t,size:r,active:b,onClick:function(){var n,e=new URL(window.location.href);e.hash=t,history.replaceState(null,"",e),null===(n=document.querySelector("#".concat(t)))||void 0===n||n.scrollIntoView()},label:u,subtitle:d,noanchor:v,style:h},o)}function z(){var n=W.bind(this);n.List=p.List;var e=_.bind(this);return e.Content=K.bind(this),e.Item=M.bind(this),e.Item.displayName="UnderlineNav.Item",{Callout:T,Details:y,GuideCard:n,Steps:b,Tabs:e,Table:h,Badge:I,Button:g,UnderlineNav:e,Subtitle:function(n){var e,t,i=null===(t=null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.props)||void 0===t?void 0:t.children;return l.createElement(x,Object.assign({size:4,kind:"muted"},n),i)},Update:S,Card:q.bind(this),ColorSchemeButton:L}}function W(n){var e;return l.createElement(p,Object.assign({},n,{as:null===(e=null==this?void 0:this.options)||void 0===e?void 0:e.Link}))}function q(n){var e;return l.createElement(N,Object.assign({},n,{link:null===(e=null==this?void 0:this.options)||void 0===e?void 0:e.Link}))}V.Item=function(){return null},V.Content=function(){return null},V.List=function(){return null},V.Head=function(){return null},V.Td=function(){return null},V.Tr=function(){return null},V.Th=function(){return null},V.Cell=function(){return null},D.Fragment=l.Fragment;var J=u({value:"",onChange:function(n){}});function _(n){var e=c(n.value),t=i(e,2),r=t[0],o=t[1];return l.createElement(J,{value:{value:r,onChange:o}},l.createElement(E,Object.assign({},n,{value:r,onChange:function(n){o(n)}})))}function K(n){var e,t,i=d(J).onChange,r=null===(t=null===(e=null==this?void 0:this.options)||void 0===e?void 0:e.useLocation)||void 0===t?void 0:t.call(e),o=null==r?void 0:r.search,a=new URLSearchParams(o),c=new URLSearchParams(n.value),u=!0,v=!0;return c.forEach(function(n,e){var t=a.get(e);t!==n&&(u=!1),t||(v=!1)}),s(function(){u&&i(n.value)},[u]),v||(u=void 0),l.createElement(E.Content,Object.assign({},n,{defaultActive:u}))}function M(n){var e,t,i,r=d(J).onChange,o=null===(t=null===(e=null==this?void 0:this.options)||void 0===e?void 0:e.useLocation)||void 0===t?void 0:t.call(e),a=null==o?void 0:o.search,c=new URLSearchParams(a),u=new URLSearchParams(n.value),v=!0;return u.forEach(function(n,e){c.get(e)!==n&&(v=!1)}),s(function(){v&&r(n.value)},[v]),l.createElement(E.Item,Object.assign({},n,{as:null===(i=null==this?void 0:this.options)||void 0===i?void 0:i.Link,defaultActive:v}))}function Q(){return{Icon:U}}function X(){return{CodeSample:H}}function Y(){var n=this;return{DirectiveCodeGroup:function(e){var t,i,r;return l.createElement(H,Object.assign({},e,{theme:(null===(r=null===(i=null===(t=n.settings)||void 0===t?void 0:t.theme)||void 0===i?void 0:i.coder)||void 0===r?void 0:r.syntaxHighlight)||void 0,codeblocks:JSON.parse(e.codeblocks)}))}}}function Z(){return{GridDecorator:B}}function $(n){var e,t,i,r,o,a,c,s,u,d=void 0;if(n.highlighted)try{var h=JSON.parse(n.highlighted);h&&(d=h)}catch(n){console.error("Error parsing highlighted code",n)}var m,f=((null===(t=null===(e=null==n?void 0:n.children)||void 0===e?void 0:e.props)||void 0===t?void 0:t.className)||"").replace("language-",""),p=void 0;if(null==n?void 0:n.descriptionContent){var g=function(n){var e=tn(n);if(!tn)return{};return{component:null==e?void 0:e.default}}(null==n?void 0:n.descriptionContent);if(null==g?void 0:g.component){var b=(m=null==g?void 0:g.component,v(function(){return m||null},[m]));p=l.createElement(b,{components:this.components()})}}return l.createElement(H,{theme:(null===(o=null===(r=null===(i=this.settings)||void 0===i?void 0:i.theme)||void 0===r?void 0:r.coder)||void 0===o?void 0:o.syntaxHighlight)||void 0,name:f,description:null===(c=null===(a=null==n?void 0:n.children)||void 0===a?void 0:a.props)||void 0===c?void 0:c.meta,codeblocks:[{value:null===(u=null===(s=null==n?void 0:n.children)||void 0===s?void 0:s.props)||void 0===u?void 0:u.children,lang:f,meta:f,highlighted:d}],lineNumbers:null==n?void 0:n.lineNumbers,size:null==n?void 0:n.size,descriptionHead:null==n?void 0:n.descriptionHead,descriptionContent:p,descriptionIcon:null==n?void 0:n.descriptionIcon})}var nn=/https?:\/\//;function en(n){var e=n.href,t=void 0===e?"":e,i=n.as,r=n.newWindow,a=n.children,c=o(n,["href","as","newWindow","children"]),s=i||j;return l.createElement(s,Object.assign({href:t,newWindow:r||nn.test(t)},c),a)}function tn(n){var t={Fragment:l.Fragment,jsxs:rn,jsx:rn,jsxDEV:rn};return r(Function,e(Object.keys(t)).concat([n]))(t)}var rn=function(n,e){var t,i=function(n){return n.map(function(n,e){return l.isValidElement(n)&&!n.key?l.cloneElement(n,{key:"mdx-".concat(e)}):Array.isArray(n)?i(n):n})};return t=e&&e.children?Array.isArray(e.children)?i(e.children):l.isValidElement(e.children)&&!e.children.key?l.cloneElement(e.children,{key:"mdx-child"}):e.children:[],l.createElement(n,Object.assign(Object.assign({},e),{children:t}))},on="ca1c472";function ln(n){var e=n.children,t=n.metaComponent;return l.createElement("xyd-content-decorator",{className:on,"meta-component":t||void 0},e)}export{ln as ContentDecorator,G as ReactContent,X as coderContent,Y as directiveContent,Q as iconContent,F as stdContent,z as writerContent};
 //# sourceMappingURL=content.js.map