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

package/dist/es6/lib/stackblitzFiles/App.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {
   CanvasProvider,
   ContentDirection,

package/dist/es6/lib/stackblitzFiles/Demo.d.ts

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

package/dist/es6/lib/stackblitzFiles/Demo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI,+BAAsB,CAAC"}
+{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/Demo.tsx"],"names":[],"mappings":"AAAA,eAAO,MAAM,IAAI,qDAAsB,CAAC"}

package/dist/es6/lib/stackblitzFiles/Demo.js

@@ -1,2 +1,2 @@
-import React from 'react';
-export const Demo = ({}) => React.createElement("div", null);
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Demo = ({}) => _jsx("div", {});

package/dist/es6/lib/stackblitzFiles/Demo.tsx

@@ -1,3 +1 @@
-import React from 'react';
-
 export const Demo = ({}) => <div></div>;

package/dist/es6/lib/stackblitzFiles/main.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/main.tsx"],"names":[],"mappings":"AAOA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,sDAAsD,CAAC"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/main.tsx"],"names":[],"mappings":"AAMA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,sDAAsD,CAAC"}

package/dist/es6/lib/stackblitzFiles/main.js

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
 import { fonts } from '@workday/canvas-kit-react-fonts';
 import { system } from '@workday/canvas-tokens-web';
@@ -22,4 +22,4 @@ injectGlobal({
 });
 const container = document.getElementById('root');
 const root = createRoot(container);
-root.render(React.createElement(App, null));
+root.render(_jsx(App, {}));

package/dist/es6/lib/stackblitzFiles/main.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {createRoot} from 'react-dom/client';
 import {fonts} from '@workday/canvas-kit-react-fonts';
 import {system} from '@workday/canvas-tokens-web';

package/dist/es6/lib/stackblitzFiles/packageJSONFile.js

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "12.5.1",
-    "@workday/canvas-kit-preview-react": "12.5.1",
-    "@workday/canvas-kit-react": "12.5.1",
-    "@workday/canvas-kit-react-fonts": "^12.5.1",
-    "@workday/canvas-kit-styling": "12.5.1",
+    "@workday/canvas-kit-labs-react": "12.5.4",
+    "@workday/canvas-kit-preview-react": "12.5.4",
+    "@workday/canvas-kit-react": "12.5.4",
+    "@workday/canvas-kit-react-fonts": "^12.5.4",
+    "@workday/canvas-kit-styling": "12.5.4",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts

@@ -18,11 +18,11 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "12.5.1",
-    "@workday/canvas-kit-preview-react": "12.5.1",
-    "@workday/canvas-kit-react": "12.5.1",
-    "@workday/canvas-kit-react-fonts": "^12.5.1",
-    "@workday/canvas-kit-styling": "12.5.1",
+    "@workday/canvas-kit-labs-react": "12.5.4",
+    "@workday/canvas-kit-preview-react": "12.5.4",
+    "@workday/canvas-kit-react": "12.5.4",
+    "@workday/canvas-kit-react-fonts": "^12.5.4",
+    "@workday/canvas-kit-styling": "12.5.4",
     "@workday/canvas-system-icons-web": "3.0.22",
     "@workday/canvas-tokens-web": "2.0.0"
   },

package/dist/es6/lib/widgetUtils.d.ts

@@ -27,11 +27,11 @@ interface HeadingProps {
  * relative heading levels.
  */
 export declare const Heading: import("@workday/canvas-kit-react/common").ElementComponent<"h4", HeadingProps>;
-export declare function renderTypeParameters(typeParameters?: types.TypeParameter[]): "" | React.JSX.Element;
+export declare function renderTypeParameters(typeParameters?: types.TypeParameter[]): "" | import("react/jsx-runtime").JSX.Element;
 export interface SymbolDialogProps {
     value: types.SymbolValue;
 }
-export declare const SymbolDialog: ({ value }: SymbolDialogProps) => React.JSX.Element;
+export declare const SymbolDialog: ({ value }: SymbolDialogProps) => import("react/jsx-runtime").JSX.Element;
 export declare const useDoc: (criteria: ValueDocProps) => types.ExportedSymbol<types.Value> | undefined;
 export interface ValueDocProps {
     name: string;
@@ -41,11 +41,11 @@ export interface ValueDocProps {
  * Renders the `<Value>` of a exported symbol without any wrapper. This should be used when nesting
  * inside a `<SymbolDoc>` component.
  */
-export declare const SymbolValue: (props: ValueDocProps) => React.JSX.Element;
+export declare const SymbolValue: (props: ValueDocProps) => import("react/jsx-runtime").JSX.Element;
 /**
  * Renders just the description of an exported symbol.
  */
-export declare const SymbolDescription: (props: ValueDocProps) => React.JSX.Element | null;
+export declare const SymbolDescription: (props: ValueDocProps) => import("react/jsx-runtime").JSX.Element | null;
 export interface SymbolDocProps extends ValueDocProps, StyledType {
     /**
      * `SymbolDoc` can support heading levels inside widgets. The `headingStart` determines the
@@ -76,6 +76,6 @@ export interface SymbolDocProps extends ValueDocProps, StyledType {
  * Renders an exported symbol as a doc object. This will render JSDoc tags, description and setup
  * rendering contexts for headers.
  */
-export declare const SymbolDoc: ({ name, fileName, headingStart, hideDescription, hideHeading, descriptionOverride, meta, ...elemProps }: SymbolDocProps) => React.JSX.Element;
+export declare const SymbolDoc: ({ name, fileName, headingStart, hideDescription, hideHeading, descriptionOverride, meta, ...elemProps }: SymbolDocProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=widgetUtils.d.ts.map

package/dist/es6/lib/widgetUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"widgetUtils.d.ts","sourceRoot":"","sources":["../../../lib/widgetUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAS7E,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAc5C,yFAAyF;AACzF,eAAO,MAAM,aAAa,mCAAmD,CAAC;AAC9E;;;GAGG;AACH,eAAO,MAAM,mBAAmB,uBAAyB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,kBAAkB,uBAAyB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,UAEnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAED,UAAU,YAAY;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD;;;GAGG;AACH,eAAO,MAAM,OAAO,iFAOlB,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,0BAiB1E;AAID,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,cAAa,iBAAiB,sBAkItD,CAAC;AAsEF,eAAO,MAAM,MAAM,aAAc,aAAa,kDAK7C,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,sBAI/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,aAAa,6BAIrD,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,UAAU;IAC/D;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,4GASnB,cAAc,sBAsDhB,CAAC"}
+{"version":3,"file":"widgetUtils.d.ts","sourceRoot":"","sources":["../../../lib/widgetUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,OAAO,EAAkB,UAAU,EAAC,MAAM,kCAAkC,CAAC;AAS7E,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAc5C,yFAAyF;AACzF,eAAO,MAAM,aAAa,mCAAmD,CAAC;AAC9E;;;GAGG;AACH,eAAO,MAAM,mBAAmB,uBAAyB,CAAC;AAE1D;;GAEG;AACH,eAAO,MAAM,kBAAkB,uBAAyB,CAAC;AAEzD;;;;GAIG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,MAAM,UAEnC;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,MAAM,UAEvC;AAED,UAAU,YAAY;IACpB,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AACD;;;GAGG;AACH,eAAO,MAAM,OAAO,iFAOlB,CAAC;AAEH,wBAAgB,oBAAoB,CAAC,cAAc,CAAC,EAAE,KAAK,CAAC,aAAa,EAAE,gDAiB1E;AAID,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,cAAa,iBAAiB,4CAkItD,CAAC;AAsEF,eAAO,MAAM,MAAM,aAAc,aAAa,kDAK7C,CAAC;AAEF,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED;;;GAGG;AACH,eAAO,MAAM,WAAW,UAAW,aAAa,4CAI/C,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,iBAAiB,UAAW,aAAa,mDAIrD,CAAC;AAEF,MAAM,WAAW,cAAe,SAAQ,aAAa,EAAE,UAAU;IAC/D;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,IAAI,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAC;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,4GASnB,cAAc,4CAsDhB,CAAC"}

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: ")" })] }));
 });