@xyd-js/components 0.1.0-xyd.8 → 0.1.0-xyd.94

package/dist/content.d.ts

@@ -1,145 +1,233 @@
-import React from 'react';
+import React, { ReactElement } from 'react';
+import { Settings } from '@xyd-js/core';
 import { Theme } from '@code-hike/lighter';
-
-interface TableV2Props {
-    children: React.ReactNode;
-    className?: string;
-}
-declare function TableV2({ children, className }: TableV2Props): React.JSX.Element;
-declare namespace TableV2 {
-    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, numeric, muted }: TableTdProps) => React.JSX.Element;
-    var Cell: ({ children }: TableCellProps) => React.JSX.Element;
-    var ModelCell: ({ children }: TableModelCellProps) => React.JSX.Element;
-}
-interface TableHeadProps {
-    children: React.ReactNode;
-}
-interface TableThProps {
-    children: React.ReactNode;
-    numeric?: boolean;
-}
-interface TableTrProps {
-    children: React.ReactNode;
-}
-interface TableTdProps {
-    children: React.ReactNode;
-    numeric?: boolean;
-    muted?: boolean;
-}
-interface TableCellProps {
-    children: React.ReactNode;
-}
-interface TableModelCellProps {
-    children: React.ReactNode;
-}
+import { HighlightedCode } from 'codehike/code';
 
 interface BadgeProps {
+    /**
+     * The class name of the badge.
+     */
     className?: string;
+    /**
+     * The children of the badge.
+     */
     children?: React.ReactNode;
-    size?: "sm";
-    kind?: "warning" | "info";
+    /**
+     * The size of the badge.
+     */
+    size?: "sm" | "xs";
+    /**
+     * The kind of the badge.
+     */
+    kind?: "warning" | "info" | "default";
 }
+/**
+ * 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 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";
 }
+/** Union type of all possible Details component variants */
 type DetailsProps = PrimaryDetailsProps | SecondaryDetailsProps | TertiaryDetailsProps;
-declare function Details(props: DetailsProps): React.JSX.Element;
+/**
+ * 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 IconQuote(): 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;
 }
 
-interface TabsProps {
+/**
+ * Props for the Table component
+ */
+interface TableProps {
+    /** The content to be rendered inside the table */
     children: React.ReactNode;
-    items: string[];
-    tabIndex?: number;
+    /** Optional CSS class name to be applied to the table */
+    className?: string;
 }
-declare function Tabs({ children, items, tabIndex }: TabsProps): React.JSX.Element;
-declare namespace Tabs {
-    var Content: ({ children, value }: {
-        children: any;
-        value: any;
-    }) => 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 Head: ({ children }: TableHeadProps) => React.JSX.Element;
+    var Th: ({ children, numeric }: TableThProps) => React.JSX.Element;
+    var Tr: ({ children }: TableTrProps) => 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;
+}
+/**
+ * Props for the TableCell component
+ */
+interface TableCellProps {
+    /** The content to be rendered inside the table cell */
+    children: React.ReactNode;
 }
 
+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. */
     value: string;
@@ -147,145 +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[];
+    codeblocks?: CodeThemeBlockProps[];
+    theme?: Theme;
     size?: "full";
+    lineNumbers?: boolean;
+    descriptionHead?: string;
+    descriptionContent?: string | React.ReactNode;
+    descriptionIcon?: string;
     kind?: "secondary";
-    theme?: Theme;
+    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;
-    IconQuote: typeof IconQuote;
-    Content: typeof Content;
-    Subtitle: typeof Subtitle;
-    Callout: typeof Callout;
-    Details: typeof Details;
-    GuideCard: typeof GuideCard;
-    Steps: typeof Steps;
-    Tabs: typeof Tabs;
-    Table: typeof TableV2;
-    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 TableV2;
-    tr: ({ children }: TableTrProps) => React.JSX.Element;
-    th: ({ children, numeric }: TableThProps) => React.JSX.Element;
-    td: (props: any) => 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 TableV2;
-    tr: ({ children }: TableTrProps) => React.JSX.Element;
-    th: ({ children, numeric }: TableThProps) => 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: 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;
+    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;
-    Table: typeof TableV2;
+    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;
-    IconQuote: typeof IconQuote;
+    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-BBkx4Se1.js";import n,{forwardRef as t}from"react";import{c as r,a,D as o,b as c,H as i,B as s,C as l,s as u,r as d,q as m,p,o as h,n as f,m as b,l as v,k as g,j as E,i as j,h as O,g as C,f as I,e as S,d as N,I as _}from"./index-B0FncPxO.js";import"@radix-ui/react-icons";import{a as k,b as y,S as T,G as w}from"./UnderlineNav-DC3UVmnZ.js";import{c as z}from"./CodeSample-DUSx2KBt.js";import"@code-hike/lighter";import"@radix-ui/react-tabs";import"lucide-react";import"./_rollupPluginBabelHelpers-CxmswfqM.js";import"./coder/themes/cosmo-light.js";function x(e){var t=e.children;return n.createElement("div",{className:"XydComponents-Component-content-Content__ContentHost"},t)}function A(e){var t=e.children;return n.createElement("div",{className:"XydComponents-Component-content-Subtitle-Subtitle_styles_ts__Host"},t)}var B="XydComponents-Component-content-Anchor__AnchorHost",H=t((function(e,t){var r=e.href,a=void 0===r?"":r,o=e.children;return e.newWindow?n.createElement("a",{ref:t,href:a,target:"_blank",rel:"noreferrer",className:B},o):n.createElement("a",{ref:t,href:a,className:B},o)}));H.displayName="Anchor";var D=/https?:\/\//,J=function(t){var r=t.href,a=void 0===r?"":r;t.className;var o=e(t,["href","className"]);return n.createElement(H,Object.assign({href:a,newWindow:D.test(a)},o))};function R(){return Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({},X()),G()),q()),M()),Q()),W())}function X(){return{h1:function(e){return n.createElement("div",null,n.createElement(i,Object.assign({id:e.children},e)))},h2:function(e){return n.createElement("div",null,n.createElement(i,Object.assign({id:e.children,size:2},e)))},h3:function(e){return n.createElement("div",null,n.createElement(i,Object.assign({id:e.children,size:3},e)))},h4:function(e){return n.createElement("div",null,n.createElement(i,Object.assign({id:e.children,size:4},e)))},h5:function(e){return n.createElement("div",null,n.createElement(i,Object.assign({id:e.children,size:5},e)))},h6:function(e){return n.createElement("div",null,n.createElement(i,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:k,tr:k.Tr,th:k.Th,td:function(e){return n.createElement(k.Td,Object.assign({},e),n.createElement(k.Cell,null,e.children))},code:c,pre:function(e){var t,r,a,o,c,i,s=((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:s,description:null===(o=null===(a=null==e?void 0:e.children)||void 0===a?void 0:a.props)||void 0===o?void 0:o.meta,codeblocks:[{value:null===(i=null===(c=null==e?void 0:e.children)||void 0===c?void 0:c.props)||void 0===i?void 0:i.children,lang:s,meta:s}],size:"full"})},details:o,blockquote:a,hr:r,a:J}}function G(){return{Callout:l,Details:o,GuideCard:w,Steps:T,Tabs:y,Table:k,Badge:s}}function W(){return{DirectiveCodeSample:function(e){return n.createElement(z,Object.assign({},e,{codeblocks:JSON.parse(e.codeblocks)}))}}}function q(){return{Content:x,Subtitle:A}}function M(){return{IconSessionReplay:_,IconMetrics:N,IconFunnels:S,IconCode:I,IconCustomEvent:C,IconAlert:O,IconBrowser:j,IconREST:E,IconGraphQL:g,IconWebhooks:v,IconJSBrowser:b,IconJSNode:f,IconStorybook:h,IconReactRouter:p,IconNextJS:m,IconAppTemplate:d,IconQuote:u}}function Q(){return{CodeSample:z}}export{R as MDX,Q as coderContent,R as default,W as directiveContent,q as helperContent,M as iconContent,X as stdContent,G as writerContent};
+import{c as n,_ as e,d as t,a as i,e as r}from"./_rollupPluginBabelHelpers-DZ-ucadG.js";import{a as o}from"./tslib.es6-Hqk-Mdr9.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-BUyomFVz.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-0XruJHjj.js";import{I as U}from"./Icon-xNucOqd2.js";import{T as A}from"./Text-DKycD2zu.js";import{c as H}from"./CodeSample-DLnR-knP.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