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

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

@@ -1,5 +1,6 @@
+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 { Expandable } from '@workday/canvas-kit-react/expandable';
 import { defaultJSDoc } from '../../docgen/docParser';
 import { MDX } from '../MDXElements';
 import { SymbolDoc } from '../SymbolDoc';
@@ -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 }, 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' })] }));
 };

package/dist/es6/mdx/style-props/examples/Background.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const Background: () => React.JSX.Element;
+export declare const Background: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Background.d.ts.map

package/dist/es6/mdx/style-props/examples/Background.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,UAAU,yBActB,CAAC"}
+{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Background.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,+CActB,CAAC"}

package/dist/es6/mdx/style-props/examples/Background.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -9,8 +9,5 @@ const baseStyles = {
     padding: 'xs',
 };
 export const Background = () => {
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Box, { backgroundColor: "cinnamon300", ...baseStyles }, "Cinnamon 300"),
-        React.createElement(Box, { backgroundColor: "sourLemon300", ...baseStyles }, "Sour Lemon 300"),
-        React.createElement(Box, { backgroundColor: "blueberry300", ...baseStyles }, "Blueberry 300")));
+    return (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));
 };

package/dist/es6/mdx/style-props/examples/Border.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const Border: () => React.JSX.Element;
+export declare const Border: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Border.d.ts.map

package/dist/es6/mdx/style-props/examples/Border.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Border.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,MAAM,yBAYlB,CAAC"}
+{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Border.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM,+CAYlB,CAAC"}

package/dist/es6/mdx/style-props/examples/Border.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper300',
@@ -8,7 +8,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Border = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles }, "Cinnamon 300"),
-    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles }, "Sour Lemon 300"),
-    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles }, "Blueberry 300")));
+export const Border = () => (_jsxs("div", { children: [_jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));

package/dist/es6/mdx/style-props/examples/Color.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const Color: () => React.JSX.Element;
+export declare const Color: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Color.d.ts.map

package/dist/es6/mdx/style-props/examples/Color.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Color.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,KAAK,yBAYjB,CAAC"}
+{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Color.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK,+CAYjB,CAAC"}

package/dist/es6/mdx/style-props/examples/Color.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     display: 'inline-block',
@@ -7,7 +7,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Color = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles }, "Cinnamon 300"),
-    React.createElement(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles }, "Sour Lemon 300"),
-    React.createElement(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles }, "Blueberry 300")));
+export const Color = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles, children: "Blueberry 300" })] }));

package/dist/es6/mdx/style-props/examples/Depth.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const Depth: () => React.JSX.Element;
+export declare const Depth: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Depth.d.ts.map

package/dist/es6/mdx/style-props/examples/Depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Depth.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Depth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,KAAK,yBAYjB,CAAC"}
+{"version":3,"file":"Depth.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Depth.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CAYjB,CAAC"}

package/dist/es6/mdx/style-props/examples/Depth.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -8,7 +8,4 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export const Depth = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles }, "Depth 1"),
-    React.createElement(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles }, "Depth 2"),
-    React.createElement(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles }, "Depth 3")));
+export const Depth = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles, children: "Depth 1" }), _jsx(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles, children: "Depth 2" }), _jsx(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles, children: "Depth 3" })] }));

package/dist/es6/mdx/style-props/examples/Flex.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const FlexExample: () => React.JSX.Element;
+export declare const FlexExample: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Flex.d.ts.map

package/dist/es6/mdx/style-props/examples/Flex.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,WAAW,yBAoCvB,CAAC"}
+{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Flex.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW,+CAoCvB,CAAC"}

package/dist/es6/mdx/style-props/examples/Flex.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -6,16 +6,4 @@ const baseStyles = {
     minWidth: '2rem',
     padding: 'xs',
 };
-export const FlexExample = () => (React.createElement(Flex, { columnGap: "xs" },
-    React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 1 },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "1")),
-    React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 2 },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "2"),
-        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "2"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "2")),
-    React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 1 },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "1"))));
+export const FlexExample = () => (_jsxs(Flex, { columnGap: "xs", children: [_jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 1, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "1" })] }), _jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 2, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "2" })] }), _jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 1, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "1" })] })] }));

package/dist/es6/mdx/style-props/examples/FlexItem.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const FlexItem: () => React.JSX.Element;
+export declare const FlexItem: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=FlexItem.d.ts.map

package/dist/es6/mdx/style-props/examples/FlexItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/FlexItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,QAAQ,yBAiCpB,CAAC"}
+{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/FlexItem.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,QAAQ,+CAiCpB,CAAC"}

package/dist/es6/mdx/style-props/examples/FlexItem.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -6,15 +6,4 @@ const baseStyles = {
     minWidth: '2rem',
     padding: 'xs',
 };
-export const FlexItem = () => (React.createElement(Flex, { flexDirection: "column", rowGap: "xs" },
-    React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", flex: 2, textAlign: "center", ...baseStyles }, "2"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles }, "1")),
-    React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", flex: 2, textAlign: "center", ...baseStyles }, "2"),
-        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 2, textAlign: "center", ...baseStyles }, "2")),
-    React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
-        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles }, "1"))));
+export const FlexItem = () => (_jsxs(Flex, { flexDirection: "column", rowGap: "xs", children: [_jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", flex: 2, textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles, children: "1" })] }), _jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 2, textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 2, textAlign: "center", ...baseStyles, children: "2" })] }), _jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles, children: "1" })] })] }));

package/dist/es6/mdx/style-props/examples/Grid.d.ts

@@ -1,3 +1,2 @@
-import * as React from 'react';
-export declare const GridExample: () => React.JSX.Element;
+export declare const GridExample: () => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Grid.d.ts.map

package/dist/es6/mdx/style-props/examples/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,WAAW,yBAYvB,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Grid.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,+CAYvB,CAAC"}