@workday/canvas-kit-docs 13.0.0-alpha.1072-next.0 → 13.0.0-alpha.1075-next.0

package/dist/es6/lib/widgetUtils.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import styled from '@emotion/styled';
 import { createComponent } from '@workday/canvas-kit-react/common';
@@ -47,18 +48,13 @@ export const Heading = createComponent('h4')({
     Component({ headingOffset = 0, ...elemProps }) {
         const headingLevel = React.useContext(HeadingLevelContext);
         const as = `h${headingLevel + headingOffset}`; // Make Typescript happy
-        return React.createElement(MDX, { as: as, ...elemProps });
+        return _jsx(MDX, { as: as, ...elemProps });
     },
 });
 export function renderTypeParameters(typeParameters) {
-    return typeParameters && typeParameters.length ? (React.createElement(RenderContext.Provider, { value: "inline" },
-        React.createElement("span", null, "<"),
-        typeParameters.map((p, index) => {
-            return (React.createElement(React.Fragment, { key: index },
-                index !== 0 && React.createElement("span", { className: "token punctuation" }, ", "),
-                React.createElement(Value, { value: p })));
-        }),
-        React.createElement("span", null, ">"))) : ('');
+    return typeParameters && typeParameters.length ? (_jsxs(RenderContext.Provider, { value: "inline", children: [_jsx("span", { children: "<" }), typeParameters.map((p, index) => {
+                return (_jsxs(React.Fragment, { children: [index !== 0 && _jsx("span", { className: "token punctuation", children: ", " }), _jsx(Value, { value: p })] }, index));
+            }), _jsx("span", { children: ">" })] })) : ('');
 }
 const ButtonHyperLink = Hyperlink.as('button');
 export const SymbolDialog = ({ value }) => {
@@ -89,41 +85,23 @@ export const SymbolDialog = ({ value }) => {
     };
     // If we're inside a nested context, we render a Hyperlink. This button will update the dialog instead of rendering a new one.
     if (nestedContext) {
-        return (React.createElement(ButtonHyperLink, { style: {
+        return (_jsx(ButtonHyperLink, { style: {
                 border: 'none',
                 background: 'transparent',
                 fontSize: 'inherit',
                 fontFamily: 'inherit',
-            }, onClick: handleTargetClick }, value.displayName || value.name));
+            }, onClick: handleTargetClick, children: value.displayName || value.name }));
     }
-    return (React.createElement(NestedContext.Provider, { value: true },
-        React.createElement(Dialog, { model: model },
-            React.createElement(Dialog.Target, { as: ButtonHyperLink, className: "token symbol", onClick: handleTargetClick, style: {
-                    border: 'none',
-                    background: 'transparent',
-                    fontSize: 'inherit',
-                    fontFamily: 'inherit',
-                }, "aria-haspopup": "true" }, value.displayName || value.name),
-            renderTypeParameters(value.typeParameters),
-            React.createElement(Dialog.Popper, null,
-                React.createElement(Dialog.Card, { maxHeight: "50vh", maxWidth: "90vh", minWidth: '600px' },
-                    React.createElement(Dialog.CloseIcon, null),
-                    React.createElement(Dialog.Heading, null,
-                        value.name,
-                        " "),
-                    breadcrumbsList.length > 1 && (React.createElement(Breadcrumbs, { "aria-label": "Breadcrumbs" },
-                        React.createElement(Breadcrumbs.List, { paddingX: "xxs" }, breadcrumbsList.map((item, index) => {
-                            return (React.createElement(React.Fragment, null, index === breadcrumbsList.length - 1 ? (React.createElement(Breadcrumbs.CurrentItem, { key: index }, item)) : (React.createElement(Breadcrumbs.Item, { key: index },
-                                React.createElement(Breadcrumbs.Link, { onClick: e => handleBreadcrumbClick(e, index), href: '#' }, item)))));
-                        })))),
-                    React.createElement(Dialog.Body, null,
-                        React.createElement(RenderContext.Provider, { value: "table" },
-                            React.createElement(IndentLevelContext.Provider, { value: 0 }, symbol ? (React.createElement(SymbolDoc, { name: breadcrumbsList.length >= 1
-                                    ? breadcrumbsList[breadcrumbsList.length - 1]
-                                    : value.name, headingStart: 3, hideHeading: true })) : (React.createElement(React.Fragment, null,
-                                React.createElement("p", null, "Basic type information:"),
-                                React.createElement("pre", null,
-                                    React.createElement("code", null, value.name))))))))))));
+    return (_jsx(NestedContext.Provider, { value: true, children: _jsxs(Dialog, { model: model, children: [_jsx(Dialog.Target, { as: ButtonHyperLink, className: "token symbol", onClick: handleTargetClick, style: {
+                        border: 'none',
+                        background: 'transparent',
+                        fontSize: 'inherit',
+                        fontFamily: 'inherit',
+                    }, "aria-haspopup": "true", children: value.displayName || value.name }), renderTypeParameters(value.typeParameters), _jsx(Dialog.Popper, { children: _jsxs(Dialog.Card, { maxHeight: "50vh", maxWidth: "90vh", minWidth: '600px', children: [_jsx(Dialog.CloseIcon, {}), _jsxs(Dialog.Heading, { children: [value.name, " "] }), breadcrumbsList.length > 1 && (_jsx(Breadcrumbs, { "aria-label": "Breadcrumbs", children: _jsx(Breadcrumbs.List, { paddingX: "xxs", children: breadcrumbsList.map((item, index) => {
+                                        return (_jsx(_Fragment, { children: index === breadcrumbsList.length - 1 ? (_jsx(Breadcrumbs.CurrentItem, { children: item }, index)) : (_jsx(Breadcrumbs.Item, { children: _jsx(Breadcrumbs.Link, { onClick: e => handleBreadcrumbClick(e, index), href: '#', children: item }) }, index)) }));
+                                    }) }) })), _jsx(Dialog.Body, { children: _jsx(RenderContext.Provider, { value: "table", children: _jsx(IndentLevelContext.Provider, { value: 0, children: symbol ? (_jsx(SymbolDoc, { name: breadcrumbsList.length >= 1
+                                                ? breadcrumbsList[breadcrumbsList.length - 1]
+                                                : value.name, headingStart: 3, hideHeading: true })) : (_jsxs(_Fragment, { children: [_jsx("p", { children: "Basic type information:" }), _jsx("pre", { children: _jsx("code", { children: value.name }) })] })) }) }) })] }) })] }) }));
 };
 function createColor(color) {
     return {
@@ -161,15 +139,12 @@ const StyledSymbolDoc = styled('div')({
 function getSymbolDocChildren(doc, meta, name) {
     if (!doc) {
         // We're within  a symbol doc context, but there's no information, so we still want to render the basic type information
-        return (React.createElement(React.Fragment, null,
-            React.createElement("p", null, "Basic type information:"),
-            React.createElement("pre", null,
-                React.createElement("code", null, name))));
+        return (_jsxs(_Fragment, { children: [_jsx("p", { children: "Basic type information:" }), _jsx("pre", { children: _jsx("code", { children: name }) })] }));
     }
     if (doc && doc.type) {
-        return React.createElement(Value, { value: doc.type, doc: doc, meta: meta });
+        return _jsx(Value, { value: doc.type, doc: doc, meta: meta });
     }
-    return React.createElement("div", null, "Not found");
+    return _jsx("div", { children: "Not found" });
 }
 function findDoc({ name, fileName }) {
     const doc = (docs || []).find(d => {
@@ -198,7 +173,7 @@ export const SymbolValue = (props) => {
  */
 export const SymbolDescription = (props) => {
     const doc = useDoc(props);
-    return doc ? React.createElement(MdxJSToJSX, null, doc.description) : null;
+    return doc ? _jsx(MdxJSToJSX, { children: doc.description }) : null;
 };
 /**
  * Renders an exported symbol as a doc object. This will render JSDoc tags, description and setup
@@ -232,15 +207,11 @@ export const SymbolDoc = ({ name, fileName, headingStart = 3, hideDescription =
         'function',
         'callExpression',
     ].includes((doc === null || doc === void 0 ? void 0 : doc.type.kind) || 'notFound');
-    const contents = requiresCodeWrapper ? (React.createElement("code", { style: { display: 'block' } }, children)) : (children);
-    const symbolDocContents = (React.createElement(StyledSymbolDoc, { ...elemProps },
-        React.createElement(HeadingLevelContext.Provider, { value: headingStart },
-            !hideHeading && React.createElement(Heading, { id: `${name.toLowerCase()}-api` }, name),
-            !hideDescription && doc && (React.createElement(MdxJSToJSX, null, descriptionOverride || doc.description)),
-            contents)));
-    return symbolDocBreadcrumb === undefined ? (React.createElement(SymbolDocWrapper, null, symbolDocContents)) : (symbolDocContents);
+    const contents = requiresCodeWrapper ? (_jsx("code", { style: { display: 'block' }, children: children })) : (children);
+    const symbolDocContents = (_jsx(StyledSymbolDoc, { ...elemProps, children: _jsxs(HeadingLevelContext.Provider, { value: headingStart, children: [!hideHeading && _jsx(Heading, { id: `${name.toLowerCase()}-api`, children: name }), !hideDescription && doc && (_jsx(MdxJSToJSX, { children: descriptionOverride || doc.description })), contents] }) }));
+    return symbolDocBreadcrumb === undefined ? (_jsx(SymbolDocWrapper, { children: symbolDocContents })) : (symbolDocContents);
 };
 const SymbolDocWrapper = ({ children }) => {
     const [breadcrumbsList, updateBreadcrumbs] = React.useState([]);
-    return (React.createElement(SymbolDocBreadcrumbsContext.Provider, { value: { breadcrumbsList, updateBreadcrumbs } }, children));
+    return (_jsx(SymbolDocBreadcrumbsContext.Provider, { value: { breadcrumbsList, updateBreadcrumbs }, children: children }));
 };

package/dist/es6/lib/widgets/array.js

@@ -1,8 +1,6 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('array', ({ value }) => {
-    return (React.createElement(RenderContext.Provider, { value: "inline" },
-        React.createElement(Value, { value: value.value }),
-        React.createElement("span", { className: "token punctuation" }, "[]")));
+    return (_jsxs(RenderContext.Provider, { value: "inline", children: [_jsx(Value, { value: value.value }), _jsx("span", { className: "token punctuation", children: "[]" })] }));
 });

package/dist/es6/lib/widgets/callExpression.js

@@ -1,20 +1,8 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { registerWidget, Value } from '../Value';
 import { IndentLevelContext, indent } from '../widgetUtils';
 registerWidget('callExpression', ({ value }) => {
     const level = React.useContext(IndentLevelContext);
-    return (React.createElement(React.Fragment, null,
-        value.name && React.createElement(Value, { value: value.name }),
-        React.createElement("span", { className: "token punctuation" }, "("),
-        React.createElement(React.Fragment, null, value.parameters.map((p, index) => (React.createElement(React.Fragment, { key: index },
-            index !== 0 && React.createElement("span", { className: "token punctuation" }, ", "),
-            value.parameters.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("br", null),
-                indent(level + 1))),
-            value.parameters.length > 1 ? (React.createElement(IndentLevelContext.Provider, { value: level + 1 },
-                React.createElement(Value, { value: p }))) : (React.createElement(Value, { value: p })),
-            index === value.parameters.length - 1 && index > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("br", null),
-                indent(level))))))),
-        React.createElement("span", { className: "token punctuation" }, ")")));
+    return (_jsxs(_Fragment, { children: [value.name && _jsx(Value, { value: value.name }), _jsx("span", { className: "token punctuation", children: "(" }), _jsx(_Fragment, { children: value.parameters.map((p, index) => (_jsxs(React.Fragment, { children: [index !== 0 && _jsx("span", { className: "token punctuation", children: ", " }), value.parameters.length > 1 && (_jsxs(_Fragment, { children: [_jsx("br", {}), indent(level + 1)] })), value.parameters.length > 1 ? (_jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: p }) })) : (_jsx(Value, { value: p })), index === value.parameters.length - 1 && index > 0 && (_jsxs(_Fragment, { children: [_jsx("br", {}), indent(level)] }))] }, index))) }), _jsx("span", { className: "token punctuation", children: ")" })] }));
 });

package/dist/es6/lib/widgets/canvasColor.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { ColorPicker } from '@workday/canvas-kit-preview-react/color-picker';
 import { registerWidget } from '../Value';
 registerWidget('canvasColor', () => {
-    return (React.createElement(ColorPicker, { style: { width: 170 }, colorSet: Object.values(colors), onColorChange: () => { } }));
+    return (_jsx(ColorPicker, { style: { width: 170 }, colorSet: Object.values(colors), onColorChange: () => { } }));
 });

package/dist/es6/lib/widgets/component.js

@@ -1,9 +1,7 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PropertiesTable, registerWidget } from '../Value';
 import { Heading } from '../widgetUtils';
 registerWidget('component', ({ value, doc, meta }) => {
     var _a;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading, { id: `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}-props-api`, headingOffset: 1 }, "Props"),
-        React.createElement(PropertiesTable, { properties: value.props })));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { id: `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}-props-api`, headingOffset: 1, children: "Props" }), _jsx(PropertiesTable, { properties: value.props })] }));
 });

package/dist/es6/lib/widgets/conditional.js

@@ -1,15 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 registerWidget('conditional', ({ value }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Value, { value: value.check }),
-        " ",
-        React.createElement("span", { className: "token keyword" }, "extends"),
-        ' ',
-        React.createElement(Value, { value: value.extends }),
-        " ? ",
-        React.createElement(Value, { value: value.trueType }),
-        " :",
-        ' ',
-        React.createElement(Value, { value: value.falseType })));
+    return (_jsxs(_Fragment, { children: [_jsx(Value, { value: value.check }), " ", _jsx("span", { className: "token keyword", children: "extends" }), ' ', _jsx(Value, { value: value.extends }), " ? ", _jsx(Value, { value: value.trueType }), " :", ' ', _jsx(Value, { value: value.falseType })] }));
 });

package/dist/es6/lib/widgets/enhancedComponent.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Expandable } from '@workday/canvas-kit-labs-react/expandable';
 import { defaultJSDoc } from '../../docgen/docParser';
@@ -42,73 +43,20 @@ registerWidget('enhancedComponent', ({ value, doc, meta }) => {
     // model. If we detect another container, only render the intro and a link to the container
     // component
     if (parentComponentName && value.componentType === 'container') {
-        return (React.createElement(React.Fragment, null,
-            React.createElement(MDX, { as: "p" },
-                "This component references the",
-                ' ',
-                React.createElement(ParentComponentNameContext.Provider, { value: "" },
-                    React.createElement(ParentComponentJSDocContext.Provider, { value: defaultJSDoc },
-                        React.createElement(SymbolDialog, { value: { kind: 'symbol', name: value.displayName || '' } }))),
-                ' ',
-                "component.")));
+        return (_jsx(_Fragment, { children: _jsxs(MDX, { as: "p", children: ["This component references the", ' ', _jsx(ParentComponentNameContext.Provider, { value: "", children: _jsx(ParentComponentJSDocContext.Provider, { value: defaultJSDoc, children: _jsx(SymbolDialog, { value: { kind: 'symbol', name: value.displayName || '' } }) }) }), ' ', "component."] }) }));
     }
-    return (React.createElement(React.Fragment, null,
-        value.styleComponent ? (React.createElement(React.Fragment, null,
-            React.createElement(Heading, { headingOffset: 1, id: parentComponentName
-                    ? `${parentComponentName.toLowerCase()}-layout-component-api`
-                    : `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}-layout-component-api` }, "Layout Component"),
-            React.createElement(MDX, { as: "p" },
-                React.createElement("code", null, value.displayName || parentComponentName),
-                " supports all props from the",
-                React.createElement("code", null,
-                    React.createElement(ParentComponentJSDocContext.Provider, { value: defaultJSDoc },
-                        React.createElement(SymbolDialog, { value: value.styleComponent }))),
-                "layout component."))) : null,
-        React.createElement(Heading, { headingOffset: 1, id: parentComponentName
-                ? `${parentComponentName.toLowerCase()}-props-api`
-                : `${(_b = value.displayName) === null || _b === void 0 ? void 0 : _b.toLowerCase()}-props-api` }, "Props"),
-        value.baseElement && (React.createElement(ParentComponentJSDocContext.Provider, { value: defaultJSDoc },
-            React.createElement(MDX, { as: "p" },
-                "Props extend from ",
-                React.createElement(Value, { value: value.baseElement }),
-                ". Changing the ",
-                React.createElement("code", null, "as"),
-                " prop will change the element interface."))),
-        value.componentType === 'container' && value.model ? (React.createElement(MDX, { as: "p" },
-            "Props extend from ",
-            React.createElement(SymbolDialog, { value: { kind: 'symbol', name: `${value.model}Config` } }),
-            ". If a ",
-            React.createElement("code", null, "model"),
-            " is passed, props from ",
-            React.createElement("code", null,
-                value.model,
-                "Config"),
-            " are ignored.")) : null,
-        Object.keys(groups).map(key => {
-            return (React.createElement(React.Fragment, { key: key }, key === 'Local' ? (React.createElement(PropertiesTable, { properties: groups[key] })) : (React.createElement(Expandable, null,
-                React.createElement(Expandable.Target, { headingLevel: "h5" },
-                    React.createElement(Expandable.Title, null, key),
-                    React.createElement(Expandable.Icon, { iconPosition: "end" })),
-                React.createElement(Expandable.Content, null,
-                    React.createElement(PropertiesTable, { properties: groups[key] }))))));
-        }),
-        value.elemPropsHook ? (React.createElement(SymbolDoc, { name: value.elemPropsHook, headingStart: headingLevel + 1 })) : null,
-        value.subComponents
-            ? value.subComponents.map((c, i) => {
-                var _a;
-                return (React.createElement(React.Fragment, { key: i },
-                    React.createElement(Heading, { id: `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}.${c.name.toLowerCase()}-api` },
-                        parentComponentName ? parentComponentName : value.displayName,
-                        ".",
-                        c.name),
-                    React.createElement(ParentComponentNameContext.Provider, { value: `${parentComponentName ? parentComponentName : value.displayName}.${c.name}` },
-                        React.createElement(ParentComponentJSDocContext.Provider, { value: c },
-                            React.createElement(SymbolDoc, { name: c.symbol, fileName: c.declarations[c.declarations.length - 1].filePath, hideHeading: true, descriptionOverride: c.description })))));
-            })
-            : null,
-        value.componentType === 'container' && value.model ? (React.createElement(React.Fragment, null,
-            React.createElement(Heading, { id: `${(_c = value.displayName) === null || _c === void 0 ? void 0 : _c.toLowerCase()}-model-api`, headingOffset: -1 }, "Model"),
-            React.createElement(SymbolDoc, { name: `use${value.model}` }))) : null));
+    return (_jsxs(_Fragment, { children: [value.styleComponent ? (_jsxs(_Fragment, { children: [_jsx(Heading, { headingOffset: 1, id: parentComponentName
+                            ? `${parentComponentName.toLowerCase()}-layout-component-api`
+                            : `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}-layout-component-api`, children: "Layout Component" }), _jsxs(MDX, { as: "p", children: [_jsx("code", { children: value.displayName || parentComponentName }), " supports all props from the", _jsx("code", { children: _jsx(ParentComponentJSDocContext.Provider, { value: defaultJSDoc, children: _jsx(SymbolDialog, { value: value.styleComponent }) }) }), "layout component."] })] })) : null, _jsx(Heading, { headingOffset: 1, id: parentComponentName
+                    ? `${parentComponentName.toLowerCase()}-props-api`
+                    : `${(_b = value.displayName) === null || _b === void 0 ? void 0 : _b.toLowerCase()}-props-api`, children: "Props" }), value.baseElement && (_jsx(ParentComponentJSDocContext.Provider, { value: defaultJSDoc, children: _jsxs(MDX, { as: "p", children: ["Props extend from ", _jsx(Value, { value: value.baseElement }), ". Changing the ", _jsx("code", { children: "as" }), " prop will change the element interface."] }) })), value.componentType === 'container' && value.model ? (_jsxs(MDX, { as: "p", children: ["Props extend from ", _jsx(SymbolDialog, { value: { kind: 'symbol', name: `${value.model}Config` } }), ". If a ", _jsx("code", { children: "model" }), " is passed, props from ", _jsxs("code", { children: [value.model, "Config"] }), " are ignored."] })) : null, Object.keys(groups).map(key => {
+                return (_jsx(React.Fragment, { children: key === 'Local' ? (_jsx(PropertiesTable, { properties: groups[key] })) : (_jsxs(Expandable, { children: [_jsxs(Expandable.Target, { headingLevel: "h5", children: [_jsx(Expandable.Title, { children: key }), _jsx(Expandable.Icon, { iconPosition: "end" })] }), _jsx(Expandable.Content, { children: _jsx(PropertiesTable, { properties: groups[key] }) })] })) }, key));
+            }), value.elemPropsHook ? (_jsx(SymbolDoc, { name: value.elemPropsHook, headingStart: headingLevel + 1 })) : null, value.subComponents
+                ? value.subComponents.map((c, i) => {
+                    var _a;
+                    return (_jsxs(React.Fragment, { children: [_jsxs(Heading, { id: `${(_a = value.displayName) === null || _a === void 0 ? void 0 : _a.toLowerCase()}.${c.name.toLowerCase()}-api`, children: [parentComponentName ? parentComponentName : value.displayName, ".", c.name] }), _jsx(ParentComponentNameContext.Provider, { value: `${parentComponentName ? parentComponentName : value.displayName}.${c.name}`, children: _jsx(ParentComponentJSDocContext.Provider, { value: c, children: _jsx(SymbolDoc, { name: c.symbol, fileName: c.declarations[c.declarations.length - 1].filePath, hideHeading: true, descriptionOverride: c.description }) }) })] }, i));
+                })
+                : null, value.componentType === 'container' && value.model ? (_jsxs(_Fragment, { children: [_jsx(Heading, { id: `${(_c = value.displayName) === null || _c === void 0 ? void 0 : _c.toLowerCase()}-model-api`, headingOffset: -1, children: "Model" }), _jsx(SymbolDoc, { name: `use${value.model}` })] })) : null] }));
 });
 function groupProps(props) {
     const categories = { Local: [] };

package/dist/es6/lib/widgets/external.js

@@ -1,7 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
 import { renderTypeParameters } from '../widgetUtils';
 import { registerWidget } from '../Value';
-registerWidget('external', ({ value }) => (React.createElement(React.Fragment, null,
-    React.createElement(ExternalHyperlink, { href: value.url, iconLabel: "Open link in new window" }, value.name),
-    renderTypeParameters(value.typeParameters))));
+registerWidget('external', ({ value }) => (_jsxs(_Fragment, { children: [_jsx(ExternalHyperlink, { href: value.url, iconLabel: "Open link in new window", children: value.name }), renderTypeParameters(value.typeParameters)] })));

package/dist/es6/lib/widgets/function.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { DescriptionTooltip } from '../DescriptionTooltip';
 import { MdxJSToJSX } from '../MDXElements';
@@ -5,32 +6,12 @@ import { registerWidget, Value } from '../Value';
 import { RenderContext, IndentLevelContext, indent, renderTypeParameters } from '../widgetUtils';
 registerWidget('function', ({ value }) => {
     const level = React.useContext(IndentLevelContext);
-    return (React.createElement(RenderContext.Provider, { value: "inline" },
-        value.name && React.createElement(Value, { value: value.name }),
-        renderTypeParameters(value.typeParameters),
-        React.createElement("span", { className: "token punctuation" }, "("),
-        React.createElement(React.Fragment, null, value.parameters.map((p, index) => (React.createElement(React.Fragment, { key: index },
-            index !== 0 && React.createElement("span", { className: "token punctuation" }, ", "),
-            value.parameters.length > 1 && (React.createElement(React.Fragment, null,
-                React.createElement("br", null),
-                indent(level + 1))),
-            value.parameters.length > 1 ? (React.createElement(IndentLevelContext.Provider, { value: level + 1 },
-                React.createElement(Value, { value: p }))) : (React.createElement(Value, { value: p })),
-            index === value.parameters.length - 1 && index > 0 && (React.createElement(React.Fragment, null,
-                React.createElement("br", null),
-                indent(level))))))),
-        React.createElement("span", { className: "token operator" }, ")\u00A0=>\u00A0"),
-        React.createElement(Value, { value: value.returnType })));
+    return (_jsxs(RenderContext.Provider, { value: "inline", children: [value.name && _jsx(Value, { value: value.name }), renderTypeParameters(value.typeParameters), _jsx("span", { className: "token punctuation", children: "(" }), _jsx(_Fragment, { children: value.parameters.map((p, index) => (_jsxs(React.Fragment, { children: [index !== 0 && _jsx("span", { className: "token punctuation", children: ", " }), value.parameters.length > 1 && (_jsxs(_Fragment, { children: [_jsx("br", {}), indent(level + 1)] })), value.parameters.length > 1 ? (_jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: p }) })) : (_jsx(Value, { value: p })), index === value.parameters.length - 1 && index > 0 && (_jsxs(_Fragment, { children: [_jsx("br", {}), indent(level)] }))] }, index))) }), _jsx("span", { className: "token operator", children: ")\u00A0=>\u00A0" }), _jsx(Value, { value: value.returnType })] }));
 });
 registerWidget('parameter', ({ value }) => {
-    return (React.createElement(RenderContext.Provider, { value: "inline" },
-        value.description ? (React.createElement(DescriptionTooltip, { style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, value.description) },
-            React.createElement("span", { className: "token property", style: {
-                    cursor: 'pointer',
-                    textDecoration: 'underline',
-                    textDecorationStyle: 'dotted',
-                } }, value.name))) : (React.createElement("span", { className: "token property" }, value.name)),
-        React.createElement("span", { className: "token punctuation" }, ":"),
-        "\u00A0",
-        React.createElement(Value, { value: value.type })));
+    return (_jsxs(RenderContext.Provider, { value: "inline", children: [value.description ? (_jsx(DescriptionTooltip, { style: { maxWidth: '50em' }, title: _jsx(MdxJSToJSX, { children: value.description }), children: _jsx("span", { className: "token property", style: {
+                        cursor: 'pointer',
+                        textDecoration: 'underline',
+                        textDecorationStyle: 'dotted',
+                    }, children: value.name }) })) : (_jsx("span", { className: "token property", children: value.name })), _jsx("span", { className: "token punctuation", children: ":" }), "\u00A0", _jsx(Value, { value: value.type })] }));
 });

package/dist/es6/lib/widgets/intersection.js

@@ -1,8 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { registerWidget, Value } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('intersection', ({ value }) => {
-    return (React.createElement(RenderContext.Provider, { value: "inline" }, value.value.map((v, i) => (React.createElement(React.Fragment, { key: i },
-        i !== 0 && React.createElement("span", { className: "token punctuation" }, " & "),
-        React.createElement(Value, { value: v }))))));
+    return (_jsx(RenderContext.Provider, { value: "inline", children: value.value.map((v, i) => (_jsxs(React.Fragment, { children: [i !== 0 && _jsx("span", { className: "token punctuation", children: " & " }), _jsx(Value, { value: v })] }, i))) }));
 });

package/dist/es6/lib/widgets/model.js

@@ -1,25 +1,9 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { PropertiesTable, registerWidget, Value } from '../Value';
 import { Heading } from '../widgetUtils';
 registerWidget('model', ({ value }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Heading, null, "State"),
-        React.createElement(PropertiesTable, { properties: value.state, showDefault: false }),
-        React.createElement(Heading, null, "Events"),
-        React.createElement(PropertiesTable, { properties: value.events, showDefault: false }),
-        value.modelProperties.length > 0 && (React.createElement(React.Fragment, null,
-            React.createElement(Heading, null, "Additional Properties"),
-            React.createElement(PropertiesTable, { properties: value.modelProperties, showDefault: false })))));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { children: "State" }), _jsx(PropertiesTable, { properties: value.state, showDefault: false }), _jsx(Heading, { children: "Events" }), _jsx(PropertiesTable, { properties: value.events, showDefault: false }), value.modelProperties.length > 0 && (_jsxs(_Fragment, { children: [_jsx(Heading, { children: "Additional Properties" }), _jsx(PropertiesTable, { properties: value.modelProperties, showDefault: false })] }))] }));
 });
 registerWidget('modelHook', ({ value, doc }) => {
-    return (React.createElement("code", null,
-        React.createElement("span", { className: "token symbol" }, value.name),
-        ' ',
-        React.createElement("span", { className: "token punctuation" }, "("),
-        React.createElement("span", { className: "value symbol" }, "config"),
-        ":",
-        ' ',
-        React.createElement(Value, { value: { kind: 'symbol', name: `${value.name.replace('use', '')}Config` } }),
-        React.createElement("span", { className: "token punctuation" }, "): "),
-        React.createElement(Value, { value: { kind: 'symbol', name: `${value.name.replace('use', '')}` } })));
+    return (_jsxs("code", { children: [_jsx("span", { className: "token symbol", children: value.name }), ' ', _jsx("span", { className: "token punctuation", children: "(" }), _jsx("span", { className: "value symbol", children: "config" }), ":", ' ', _jsx(Value, { value: { kind: 'symbol', name: `${value.name.replace('use', '')}Config` } }), _jsx("span", { className: "token punctuation", children: "): " }), _jsx(Value, { value: { kind: 'symbol', name: `${value.name.replace('use', '')}` } })] }));
 });

package/dist/es6/lib/widgets/object.js

@@ -1,8 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { PropertiesInline, PropertiesTable, registerWidget } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('object', ({ value }) => {
     const renderContext = React.useContext(RenderContext);
-    return renderContext === 'inline' ? (React.createElement(PropertiesInline, { properties: value.properties })) : (React.createElement(RenderContext.Provider, { value: "inline" },
-        React.createElement(PropertiesTable, { properties: value.properties })));
+    return renderContext === 'inline' ? (_jsx(PropertiesInline, { properties: value.properties })) : (_jsx(RenderContext.Provider, { value: "inline", children: _jsx(PropertiesTable, { properties: value.properties }) }));
 });

package/dist/es6/lib/widgets/parenthesis.js

@@ -1,8 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 registerWidget('parenthesis', ({ value }) => {
-    return (React.createElement("span", null,
-        React.createElement("span", { className: "token punctuation" }, "("),
-        React.createElement(Value, { value: value.value }),
-        React.createElement("span", { className: "token punctuation" }, ")")));
+    return (_jsxs("span", { children: [_jsx("span", { className: "token punctuation", children: "(" }), _jsx(Value, { value: value.value }), _jsx("span", { className: "token punctuation", children: ")" })] }));
 });

package/dist/es6/lib/widgets/primitives.js

@@ -1,31 +1,13 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 import { renderTypeParameters } from '../widgetUtils';
-registerWidget('primitive', ({ value }) => (React.createElement("span", { className: "token primitive" }, value.value)));
-registerWidget('boolean', ({ value }) => (React.createElement("span", { className: "token primitive" }, String(value.value))));
-registerWidget('string', ({ value }) => (React.createElement("span", { className: "token string" },
-    "'",
-    value.value,
-    "'")));
-registerWidget('number', ({ value }) => (React.createElement("span", { className: "token number" }, value.value)));
-registerWidget('generic', ({ value }) => (React.createElement("span", { className: "token symbol" }, value.name)));
+registerWidget('primitive', ({ value }) => (_jsx("span", { className: "token primitive", children: value.value })));
+registerWidget('boolean', ({ value }) => (_jsx("span", { className: "token primitive", children: String(value.value) })));
+registerWidget('string', ({ value }) => (_jsxs("span", { className: "token string", children: ["'", value.value, "'"] })));
+registerWidget('number', ({ value }) => (_jsx("span", { className: "token number", children: value.value })));
+registerWidget('generic', ({ value }) => (_jsx("span", { className: "token symbol", children: value.name })));
 registerWidget('type', ({ value, doc }) => {
-    return (React.createElement(React.Fragment, null,
-        (doc === null || doc === void 0 ? void 0 : doc.name) && (React.createElement(React.Fragment, null,
-            React.createElement("span", { className: "token keyword" }, "type"),
-            ' ',
-            React.createElement("span", { className: "token symbol" }, (doc === null || doc === void 0 ? void 0 : doc.name) || 'unknown'),
-            renderTypeParameters(value.typeParameters),
-            " ",
-            React.createElement("span", { className: "token operator" }, "="),
-            ' ')),
-        React.createElement(Value, { value: value.value })));
+    return (_jsxs(_Fragment, { children: [(doc === null || doc === void 0 ? void 0 : doc.name) && (_jsxs(_Fragment, { children: [_jsx("span", { className: "token keyword", children: "type" }), ' ', _jsx("span", { className: "token symbol", children: (doc === null || doc === void 0 ? void 0 : doc.name) || 'unknown' }), renderTypeParameters(value.typeParameters), " ", _jsx("span", { className: "token operator", children: "=" }), ' '] })), _jsx(Value, { value: value.value })] }));
 });
-registerWidget('infer', ({ value }) => (React.createElement(React.Fragment, null,
-    React.createElement("span", { className: "token keyword" }, "infer"),
-    " ",
-    React.createElement(Value, { value: value.value }))));
-registerWidget('keyof', ({ value }) => (React.createElement(React.Fragment, null,
-    React.createElement("span", { className: "token keyword" }, "keyof"),
-    " ",
-    React.createElement(Value, { value: value.name }))));
+registerWidget('infer', ({ value }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "token keyword", children: "infer" }), " ", _jsx(Value, { value: value.value })] })));
+registerWidget('keyof', ({ value }) => (_jsxs(_Fragment, { children: [_jsx("span", { className: "token keyword", children: "keyof" }), " ", _jsx(Value, { value: value.name })] })));

package/dist/es6/lib/widgets/qualifiedName.js

@@ -1,8 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 registerWidget('qualifiedName', ({ value }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Value, { value: value.left }),
-        React.createElement("span", { className: "token punctuation" }, "."),
-        React.createElement(Value, { value: value.right })));
+    return (_jsxs(_Fragment, { children: [_jsx(Value, { value: value.left }), _jsx("span", { className: "token punctuation", children: "." }), _jsx(Value, { value: value.right })] }));
 });

package/dist/es6/lib/widgets/symbol.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { registerWidget } from '../Value';
 import { SymbolDialog } from '../widgetUtils';
 registerWidget('symbol', ({ value }) => {
-    return React.createElement(SymbolDialog, { value: value });
+    return _jsx(SymbolDialog, { value: value });
 });

package/dist/es6/lib/widgets/tuple.js

@@ -1,9 +1,6 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('tuple', ({ value }) => {
-    return (React.createElement(RenderContext.Provider, { value: "inline" },
-        React.createElement("span", { className: "token punctuation" }, "["),
-        value.value.map((v, i) => (React.createElement(Value, { key: i, value: v }))),
-        React.createElement("span", { className: "token punctuation" }, "]")));
+    return (_jsxs(RenderContext.Provider, { value: "inline", children: [_jsx("span", { className: "token punctuation", children: "[" }), value.value.map((v, i) => (_jsx(Value, { value: v }, i))), _jsx("span", { className: "token punctuation", children: "]" })] }));
 });

package/dist/es6/lib/widgets/typeParameter.js

@@ -1,16 +1,5 @@
-import React from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { registerWidget, Value } from '../Value';
 registerWidget('typeParameter', ({ value }) => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "token symbol" }, value.name),
-        value.constraint && (React.createElement(React.Fragment, null,
-            ' ',
-            React.createElement("span", { className: "token keyword" }, "extends"),
-            " ",
-            React.createElement(Value, { value: value.constraint }))),
-        value.defaultValue && (React.createElement(React.Fragment, null,
-            ' ',
-            React.createElement("span", { className: "token operator" }, "="),
-            " ",
-            React.createElement(Value, { value: value.defaultValue })))));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "token symbol", children: value.name }), value.constraint && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "token keyword", children: "extends" }), " ", _jsx(Value, { value: value.constraint })] })), value.defaultValue && (_jsxs(_Fragment, { children: [' ', _jsx("span", { className: "token operator", children: "=" }), " ", _jsx(Value, { value: value.defaultValue })] }))] }));
 });

package/dist/es6/lib/widgets/union.js

@@ -1,16 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { registerWidget, Value } from '../Value';
 import { IndentLevelContext, RenderContext, indent } from '../widgetUtils';
 registerWidget('union', ({ value }) => {
     const level = React.useContext(IndentLevelContext);
-    return (React.createElement(RenderContext.Provider, { value: "inline" }, value.value.map((v, index) => {
-        return (React.createElement(React.Fragment, { key: index },
-            ' ',
-            value.value.length > 3 && (React.createElement(React.Fragment, null,
-                React.createElement("br", null),
-                indent(level + 1))),
-            index !== 0 && React.createElement("span", { className: "token punctuation" }, " |\u00A0"),
-            React.createElement(IndentLevelContext.Provider, { value: level + 1 },
-                React.createElement(Value, { value: v }))));
-    })));
+    return (_jsx(RenderContext.Provider, { value: "inline", children: value.value.map((v, index) => {
+            return (_jsxs(React.Fragment, { children: [' ', value.value.length > 3 && (_jsxs(_Fragment, { children: [_jsx("br", {}), indent(level + 1)] })), index !== 0 && _jsx("span", { className: "token punctuation", children: " |\u00A0" }), _jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: v }) })] }, index));
+        }) }));
 });

package/dist/es6/mdx/installBlock.d.ts

@@ -1,7 +1,6 @@
-import React from 'react';
 export interface InstallBlockProps {
     command?: string;
     packageName?: string;
 }
-export declare const InstallBlock: ({ command, packageName }: InstallBlockProps) => React.JSX.Element;
+export declare const InstallBlock: ({ command, packageName }: InstallBlockProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=installBlock.d.ts.map

package/dist/es6/mdx/installBlock.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,sBA8BrE,CAAC"}
+{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAKA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CA8BrE,CAAC"}

package/dist/es6/mdx/installBlock.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { colors } from '@workday/canvas-kit-react/tokens';
@@ -14,10 +15,5 @@ export const InstallBlock = ({ command, packageName }) => {
             navigator.clipboard.writeText(commandRef.current.innerText);
         }
     };
-    return (React.createElement(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap' },
-        React.createElement("pre", { ref: commandRef },
-            React.createElement("span", { style: { color: colors.blueberry200 } }, command),
-            ' ',
-            React.createElement("span", { style: { color: colors.frenchVanilla100 } }, packageName)),
-        React.createElement(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small" }, copied ? 'Copied' : 'Copy')));
+    return (_jsxs(Flex, { padding: "xs", backgroundColor: colors.licorice500, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: 'wrap', children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: { color: colors.blueberry200 }, children: command }), ' ', _jsx("span", { style: { color: colors.frenchVanilla100 }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
 };