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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAqD1B,eAAO,MAAM,gBAAgB,aAAY,GAAG,sBAgF3C,CAAC"}
+{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAiEA,eAAO,MAAM,gBAAgB,aAAY,GAAG,4CA0G3C,CAAC"}

package/dist/es6/lib/ExampleCodeBlock.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
@@ -6,7 +7,17 @@ import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling
 import { system } from '@workday/canvas-tokens-web';
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import { checkCircleIcon, copyIcon } from '@workday/canvas-system-icons-web';
-import { Tooltip } from '@workday/canvas-kit-react';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import sdk from '@stackblitz/sdk';
+import tsconfigFile from '!!raw-loader!./stackblitzFiles/tsconfig.json';
+import { packageJSONFile } from './stackblitzFiles/packageJSONFile';
+import indexHTMLFile from '!!raw-loader!./stackblitzFiles/index.html';
+import mainFile from '!!raw-loader!./stackblitzFiles/main.tsx';
+import viteConfigFile from '!!raw-loader!./stackblitzFiles/vite.config.ts';
+import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
+import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
+import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
+import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
 const cardStencil = createStencil({
     base: {
         '[data-part="example-block"]': {
@@ -19,10 +30,12 @@ const cardStencil = createStencil({
             boxShadow: system.depth[1],
             borderRadius: system.shape.x1,
         },
-        '[data-part="code-toggle-btn"]': {
+        '[data-part="code-toggle-stackblitz-btn-container"]': {
             position: 'absolute',
             right: calc.negate(px2rem(1)),
             bottom: calc.negate(px2rem(1)),
+            display: 'flex',
+            gap: system.space.x2,
         },
         '[data-part="copy-btn"]': {
             position: 'absolute',
@@ -64,30 +77,42 @@ export const ExampleCodeBlock = ({ code }) => {
         // @ts-ignore
         navigator.clipboard.writeText(textInput.current.textContent);
     };
-    // React.useEffect(() => {
-    //   if (copied) {
-    //     const copyCodeTimeout = setTimeout(() => {
-    //       setCopied(false);
-    //     }, 2000);
-    //     return () => {
-    //       clearTimeout(copyCodeTimeout);
-    //     };
-    //   }
-    // }, [copied]);
-    return (React.createElement("div", { ...cardStencil({ opened: isCodeDisplayed }) },
-        React.createElement(Card, { "data-part": "example-block", className: "sb-unstyled" },
-            React.createElement(Card.Body, null,
-                React.createElement(code),
-                code && (React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), "data-part": "code-toggle-btn" }, !isCodeDisplayed ? 'Show Code' : 'Hide Code')))),
-        React.createElement(Card, { "data-part": "code-block", padding: 0 },
-            React.createElement(Card.Body, { cs: { position: 'relative' } },
-                code && (React.createElement("div", { ref: textInput },
-                    React.createElement(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
-                            fontSize: cssVar(system.fontSize.subtext.large),
-                            lineHeight: cssVar(system.lineHeight.subtext.large),
-                            margin: '0',
-                            padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
-                        }, children: code.__RAW__ }))),
-                React.createElement(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code' },
-                    React.createElement(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }))))));
+    /**
+     * `code` returns our examples. We need to rewrite them so that they export `Demo`.
+     */
+    const handleExampleRewrite = (code) => {
+        return code
+            .replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
+            .replace(/export default/, 'export const Demo =');
+    };
+    const openProjectInStackblitz = () => {
+        sdk.openProject({
+            files: {
+                'src/Demo.tsx': handleExampleRewrite(code.__RAW__),
+                'src/vite-env-d.ts': viteEnvFile,
+                'src/App.tsx': appFile,
+                'tsconfig.node.json': tsconfigNodeFile,
+                '.eslintrc.js': eslintrc,
+                'vite.config.ts': viteConfigFile,
+                'src/main.tsx': mainFile,
+                'index.html': indexHTMLFile,
+                'tsconfig.json': tsconfigFile,
+                'package.json': packageJSONFile,
+            },
+            template: 'node',
+            title: `Demo`,
+            description: `This is a Canvas Kit Demo. Edit and play around!`,
+        }, 
+        // Options
+        {
+            newWindow: true,
+            openFile: 'src/Demo.tsx',
+        });
+    };
+    return (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsxs(Card.Body, { children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsxs(Card.Body, { cs: { position: 'relative' }, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
+                                    fontSize: cssVar(system.fontSize.subtext.large),
+                                    lineHeight: cssVar(system.lineHeight.subtext.large),
+                                    margin: '0',
+                                    padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
+                                }, children: code.__RAW__ }) })), _jsx(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code', children: _jsx(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }) })] }) })] }));
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 /**
  * Special component that taps into @mdx-js/react components that are used by both Storybook and the
  * Canvas Site. This means our docs can use the same components used in our MDX files without
@@ -10,5 +9,5 @@ export declare const MDX: import("@workday/canvas-kit-react").ElementComponent<"
  */
 export declare const MdxJSToJSX: (props: {
     children: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MDXElements.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MDXElements.d.ts","sourceRoot":"","sources":["../../../lib/MDXElements.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;GAIG;AACH,eAAO,MAAM,GAAG,sEAMd,CAAC;AAwDH;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,sBAQnD,CAAC"}
+{"version":3,"file":"MDXElements.d.ts","sourceRoot":"","sources":["../../../lib/MDXElements.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AACH,eAAO,MAAM,GAAG,sEAMd,CAAC;AAwDH;;GAEG;AACH,eAAO,MAAM,UAAU,UAAW;IAAC,QAAQ,EAAE,MAAM,CAAA;CAAC,4CAQnD,CAAC"}

package/dist/es6/lib/MDXElements.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
 //@ts-ignore
 import { useMDXComponents } from '@mdx-js/react';
 import React from 'react';
@@ -21,14 +22,13 @@ export const MDX = createComponent('div')({
  */
 const Button = (props) => {
     const components = useMDXComponents();
-    if (props['data-symbol'] !== undefined) {
-        return (React.createElement("code", null,
-            React.createElement(SymbolDialog, { value: {
+    if (props['data-symbol'] !== undefined && props.children) {
+        return (_jsx("code", { children: _jsx(SymbolDialog, { value: {
                     kind: 'symbol',
                     name: props.children[0],
                     displayName: props['data-symbol'],
                     value: props.children[0],
-                } })));
+                } }) }));
     }
     return React.createElement(components['button'] || 'button', props, props.children);
 };
@@ -37,7 +37,7 @@ const Button = (props) => {
  * processing. This allows us to convert {@link SymbolName Link Text} to a `<SymbolDialog>`!
  */
 function convertLinkToSymbolLinks(input) {
-    return input.replace(/{@link ([a-z0-9.]+)( [a-z0-9.]+)?}/gi, (substr, symbol, text = '') => `<button href="#" data-symbol="${text.trim()}" class="token symbol">${symbol}</button>`);
+    return input.replace(/{@link ([a-z0-9.]+)( [a-z0-9.]+)?}/gi, (_substr, symbol, text = '') => `<button data-symbol="${text.trim()}" className="token symbol">${symbol}</button>`);
 }
 /**
  * Replace all heading levels in the JSDoc to start at the same heading level as `startingLevel`.
@@ -57,5 +57,5 @@ function rewriteHeadingLevels(input, startingLevel) {
 export const MdxJSToJSX = (props) => {
     const components = useMDXComponents();
     const headingLevel = React.useContext(HeadingLevelContext);
-    return (React.createElement(MarkdownToJSX, { options: { overrides: { ...components, button: Button }, forceBlock: true } }, rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel)));
+    return (_jsx(MarkdownToJSX, { options: { overrides: { ...components, button: Button }, forceBlock: true }, children: rewriteHeadingLevels(convertLinkToSymbolLinks(props.children), headingLevel) }));
 };

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

@@ -16,5 +16,5 @@ export interface MoreTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
      */
     placement?: Placement;
 }
-export declare const MoreTooltip: ({ placement, children, title, ...elemProps }: MoreTooltipProps) => React.JSX.Element;
+export declare const MoreTooltip: ({ placement, children, title, ...elemProps }: MoreTooltipProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=MoreTooltip.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"MoreTooltip.d.ts","sourceRoot":"","sources":["../../../lib/MoreTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAS7F,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AA0BD,eAAO,MAAM,WAAW,iDAKrB,gBAAgB,sBAwClB,CAAC"}
+{"version":3,"file":"MoreTooltip.d.ts","sourceRoot":"","sources":["../../../lib/MoreTooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAA4B,SAAS,EAAS,MAAM,iCAAiC,CAAC;AAS7F,MAAM,WAAW,gBAAiB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC5E;;;;;;;OAOG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAC7B;;;OAGG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;CACvB;AA0BD,eAAO,MAAM,WAAW,iDAKrB,gBAAgB,4CAwClB,CAAC"}

package/dist/es6/lib/MoreTooltip.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
 import { getTransformFromPlacement, Popper } from '@workday/canvas-kit-react/popup';
 import { mergeCallback } from '@workday/canvas-kit-react/common';
@@ -41,16 +42,14 @@ export const MoreTooltip = ({ placement = 'top', children, title, ...elemProps }
             targetProps.onFocus(event);
         }
     };
-    return (React.createElement(React.Fragment, null,
-        React.cloneElement(children, {
-            ...targetProps,
-            onMouseEnter,
-            onFocus,
-            'aria-label': undefined,
-            ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
-        }),
-        React.createElement(Popper, { placement: placement, ...popperProps }, ({ placement }) => {
-            const transformOrigin = getTransformFromPlacement(placement);
-            return (React.createElement(TooltipContainer, { transformOrigin: transformOrigin, ...tooltipProps, ...elemProps }, titleText));
-        })));
+    return (_jsxs(React.Fragment, { children: [React.cloneElement(children, {
+                ...targetProps,
+                onMouseEnter,
+                onFocus,
+                'aria-label': undefined,
+                ...mergeCallbacks({ ...targetProps, onMouseEnter, onFocus }, children.props),
+            }), _jsx(Popper, { placement: placement, ...popperProps, children: ({ placement }) => {
+                    const transformOrigin = getTransformFromPlacement(placement);
+                    return (_jsx(TooltipContainer, { transformOrigin: transformOrigin, ...tooltipProps, ...elemProps, children: titleText }));
+                } })] }));
 };

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

@@ -1,7 +1,6 @@
-import React from 'react';
 export interface SpecificationsProps {
     file: string;
     name?: string;
 }
-export declare const Specifications: ({ file, name }: SpecificationsProps) => React.JSX.Element | null;
+export declare const Specifications: ({ file, name }: SpecificationsProps) => import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=Specifications.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,mBAAkB,mBAAmB,6BAqF/D,CAAC"}
+{"version":3,"file":"Specifications.d.ts","sourceRoot":"","sources":["../../../lib/Specifications.tsx"],"names":[],"mappings":"AASA,MAAM,WAAW,mBAAmB;IAClC,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AA8CD,eAAO,MAAM,cAAc,mBAAkB,mBAAmB,mDAqF/D,CAAC"}

package/dist/es6/lib/Specifications.js

@@ -1,3 +1,4 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-param-reassign */
 import React from 'react';
 import { toId } from '@storybook/csf';
@@ -56,25 +57,7 @@ export const Specifications = ({ file, name }) => {
             return input;
         }
         const [, first, kind, name, last] = matches;
-        return (React.createElement(React.Fragment, null,
-            first.replace(/given /i, ''),
-            React.createElement(Hyperlink, { href: `${storybookBaseUrl}?path=/story/${toId(kind, name.replace('DefaultStory', 'Default Story'))}` }, name.replace('DefaultStory', 'Default')),
-            last));
+        return (_jsxs(_Fragment, { children: [first.replace(/given /i, ''), _jsx(Hyperlink, { href: `${storybookBaseUrl}?path=/story/${toId(kind, name.replace('DefaultStory', 'Default Story'))}`, children: name.replace('DefaultStory', 'Default') }), last] }));
     };
-    return block.type === 'describe' ? (React.createElement(React.Fragment, null,
-        React.createElement(Table, null,
-            React.createElement(Table.Head, null,
-                React.createElement(Table.Row, null,
-                    React.createElement(Table.Header, null, "Given"),
-                    React.createElement(Table.Header, null, "When"),
-                    React.createElement(Table.Header, null, "Then"))),
-            React.createElement(Table.Body, null, block.children.reduce(createTableRows, []).map((row, index) => (React.createElement(Table.Row, { key: index },
-                React.createElement(Table.Cell, null, renderGiven(row.given[0])),
-                React.createElement(Table.Cell, null,
-                    React.createElement("ul", null, row.when.map((item, index) => (React.createElement("li", { key: index }, (index !== 0 ? 'AND THEN ' : '') + item.replace(/[tw]hen /i, '')))))),
-                React.createElement(Table.Cell, null,
-                    React.createElement("ul", null, row.then.map((item, index) => (React.createElement("li", { key: index }, (item.indexOf('should') === 0 ? 'it ' : '') + item)))))))))),
-        "Source:",
-        ' ',
-        React.createElement(Hyperlink, { href: `${githubUrl}blob/${githubBranch}/cypress/integration/${file}` }, file))) : null;
+    return block.type === 'describe' ? (_jsxs(_Fragment, { children: [_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Given" }), _jsx(Table.Header, { children: "When" }), _jsx(Table.Header, { children: "Then" })] }) }), _jsx(Table.Body, { children: block.children.reduce(createTableRows, []).map((row, index) => (_jsxs(Table.Row, { children: [_jsx(Table.Cell, { children: renderGiven(row.given[0]) }), _jsx(Table.Cell, { children: _jsx("ul", { children: row.when.map((item, index) => (_jsx("li", { children: (index !== 0 ? 'AND THEN ' : '') + item.replace(/[tw]hen /i, '') }, index))) }) }), _jsx(Table.Cell, { children: _jsx("ul", { children: row.then.map((item, index) => (_jsx("li", { children: (item.indexOf('should') === 0 ? 'it ' : '') + item }, index))) }) })] }, index))) })] }), "Source:", ' ', _jsx(Hyperlink, { href: `${githubUrl}blob/${githubBranch}/cypress/integration/${file}`, children: file })] })) : null;
 };

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

@@ -1,4 +1,3 @@
-import React from 'react';
 type StyleProp = {
     name: string;
     properties: string[];
@@ -7,6 +6,6 @@ type StyleProp = {
 interface StylePropsTableProps {
     styleProps?: StyleProp[];
 }
-export declare const StylePropsTable: ({ styleProps }: StylePropsTableProps) => React.JSX.Element;
+export declare const StylePropsTable: ({ styleProps }: StylePropsTableProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=StylePropsTable.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"StylePropsTable.d.ts","sourceRoot":"","sources":["../../../lib/StylePropsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;CAC1B;AAMD,eAAO,MAAM,eAAe,mBAAuB,oBAAoB,sBAoCtE,CAAC"}
+{"version":3,"file":"StylePropsTable.d.ts","sourceRoot":"","sources":["../../../lib/StylePropsTable.tsx"],"names":[],"mappings":"AAIA,KAAK,SAAS,GAAG;IACf,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,EAAE,MAAM,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,UAAU,oBAAoB;IAC5B,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;CAC1B;AAMD,eAAO,MAAM,eAAe,mBAAuB,oBAAoB,4CAoCtE,CAAC"}

package/dist/es6/lib/StylePropsTable.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 import { ExternalHyperlink } from '@workday/canvas-kit-react';
 import { Table } from './Table';
@@ -7,19 +7,9 @@ const camelToKebabCase = (name) => {
 };
 export const StylePropsTable = ({ styleProps = [] }) => {
     const sortedStyleProps = styleProps.sort((a, b) => a.name.localeCompare(b.name));
-    return (React.createElement(Table, null,
-        React.createElement(Table.Head, null,
-            React.createElement(Table.Row, null,
-                React.createElement(Table.Header, null, "Prop"),
-                React.createElement(Table.Header, null, "CSS Properties"),
-                React.createElement(Table.Header, null, "System"))),
-        React.createElement(Table.Body, null, sortedStyleProps.map((styleProp, index) => (React.createElement(Table.Row, { key: index },
-            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.name),
-            React.createElement(Table.Data, null, styleProp.properties.map((property, i) => {
-                const formattedName = camelToKebabCase(property);
-                const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
-                return (React.createElement(Box, { display: "inline-block", marginInlineEnd: "xxxs" },
-                    React.createElement(ExternalHyperlink, { href: mdnUrl, key: i }, formattedName)));
-            })),
-            React.createElement(Table.Data, { fontFamily: "monospace" }, styleProp.system === 'none' ? '---' : styleProp.system)))))));
+    return (_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Prop" }), _jsx(Table.Header, { children: "CSS Properties" }), _jsx(Table.Header, { children: "System" })] }) }), _jsx(Table.Body, { children: sortedStyleProps.map((styleProp, index) => (_jsxs(Table.Row, { children: [_jsx(Table.Data, { fontFamily: "monospace", children: styleProp.name }), _jsx(Table.Data, { children: styleProp.properties.map((property, i) => {
+                                const formattedName = camelToKebabCase(property);
+                                const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
+                                return (_jsx(Box, { display: "inline-block", marginInlineEnd: "xxxs", children: _jsx(ExternalHyperlink, { href: mdnUrl, iconLabel: "Open link in new window", children: formattedName }, i) }));
+                            }) }), _jsx(Table.Data, { fontFamily: "monospace", children: styleProp.system === 'none' ? '---' : styleProp.system })] }, index))) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/Table.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AA+D/D,eAAO,MAAM,KAAK;;;;;;CAqBhB,CAAC"}
+{"version":3,"file":"Table.d.ts","sourceRoot":"","sources":["../../../lib/Table.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,SAAS,EAAC,MAAM,gCAAgC,CAAC;AA+D/D,eAAO,MAAM,KAAK;;;;;;CAqBhB,CAAC"}

package/dist/es6/lib/Table.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { jsx as _jsx } from "react/jsx-runtime";
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { Text } from '@workday/canvas-kit-react/text';
@@ -6,22 +6,22 @@ import styled from '@emotion/styled';
 import { type } from '@workday/canvas-kit-react/tokens';
 const TableHead = createComponent('thead')({
     Component: (props, ref, Element) => {
-        return React.createElement(Box, { as: Element, ref: ref, ...props });
+        return _jsx(Box, { as: Element, ref: ref, ...props });
     },
 });
 const TableBody = createComponent('tbody')({
     Component: (props, ref, Element) => {
-        return React.createElement(Box, { as: Element, ref: ref, ...props });
+        return _jsx(Box, { as: Element, ref: ref, ...props });
     },
 });
 const TableRow = createComponent('tr')({
     Component: (props, ref, Element) => {
-        return (React.createElement(Box, { as: Element, ref: ref, borderBottom: "solid 1px", borderBottomColor: "soap400", ...props }));
+        return (_jsx(Box, { as: Element, ref: ref, borderBottom: "solid 1px", borderBottomColor: "soap400", ...props }));
     },
 });
 const TableHeader = createComponent('th')({
     Component: (props, ref, Element) => {
-        return (React.createElement(Text, { as: Element, ref: ref, fontWeight: "medium", paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
+        return (_jsx(Text, { as: Element, ref: ref, fontWeight: "medium", paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
     },
 });
 const StyledText = styled(Text)({
@@ -31,13 +31,13 @@ const StyledText = styled(Text)({
 });
 const TableData = createComponent('td')({
     Component: (props, ref, Element) => {
-        return (React.createElement(StyledText, { as: Element, ref: ref, paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
+        return (_jsx(StyledText, { as: Element, ref: ref, paddingX: "xxs", paddingY: "s", textAlign: "start", typeLevel: "subtext.large", ...props }));
     },
 });
 export const Table = createComponent('table')({
     displayName: 'Table',
     Component: (props, ref, Element) => {
-        return (React.createElement(Box, { as: Element, ref: ref, borderCollapse: "collapse", width: "100%", ...props, marginBottom: "s" }));
+        return (_jsx(Box, { as: Element, ref: ref, borderCollapse: "collapse", width: "100%", ...props, marginBottom: "s" }));
     },
     subComponents: {
         Head: TableHead,

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

@@ -12,13 +12,13 @@ export interface ValueProps<T extends {
 }
 export declare const Value: <T extends {
     kind: string;
-} = types.Value>(props: ValueProps<T>) => React.JSX.Element;
+} = types.Value>(props: ValueProps<T>) => import("react/jsx-runtime").JSX.Element;
 export declare const PropertiesInline: ({ properties }: {
     properties: types.ObjectProperty[];
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const PropertiesTable: ({ properties, showDefault, showRequired, }: {
     properties: types.ObjectProperty[];
     showDefault?: boolean | undefined;
     showRequired?: boolean | undefined;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Value.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAS5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;2DAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;uBAgDjF,CAAC;AAgEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;uBAyBnC,CAAC"}
+{"version":3,"file":"Value.d.ts","sourceRoot":"","sources":["../../../lib/Value.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAS5C,wBAAgB,cAAc,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,EACrD,GAAG,EAAE,CAAC,CAAC,MAAM,CAAC,EACd,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,GAC9B,IAAI,CAGN;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS;IAAC,IAAI,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,KAAK;IAChE,KAAK,EAAE,CAAC,CAAC;IACT,GAAG,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,CAAC,CAAC,CAAC;IAC9B,IAAI,CAAC,EAAE,GAAG,CAAC;CACZ;AAED,eAAO,MAAM,KAAK;UAAqB,MAAM;iFAW5C,CAAC;AAEF,eAAO,MAAM,gBAAgB;gBAA+B,MAAM,cAAc,EAAE;6CAgDjF,CAAC;AAgEF,eAAO,MAAM,eAAe;gBAKd,MAAM,cAAc,EAAE;;;6CAyBnC,CAAC"}

package/dist/es6/lib/Value.js

@@ -1,3 +1,4 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { Text } from '@workday/canvas-kit-react/text';
@@ -16,37 +17,21 @@ export const Value = (props) => {
     if (widgets[props.value.kind]) {
         return React.createElement(widgets[props.value.kind], props);
     }
-    return (React.createElement("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' } },
-        "unknown ",
-        JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))));
+    return (_jsxs("span", { className: "token unknown", style: { whiteSpace: 'pre-wrap' }, children: ["unknown ", JSON.stringify(props.value, null, '  ').replace(/\n/g, '\n' + indent(level))] }));
 };
 export const PropertiesInline = ({ properties }) => {
     if (properties.length === 0) {
-        return React.createElement("span", { className: "token punctuation" }, "{}");
+        return _jsx("span", { className: "token punctuation", children: "{}" });
     }
     const level = React.useContext(IndentLevelContext);
-    return (React.createElement(React.Fragment, null,
-        React.createElement("span", { className: "token punctuation" }, "{"),
-        properties.map((p, index) => {
-            return (React.createElement(React.Fragment, { key: index },
-                React.createElement("br", null),
-                indent(level + 1),
-                p.description || p.tags.deprecated ? (React.createElement(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: React.createElement(MdxJSToJSX, null, p.description || p.tags.deprecated) },
-                    React.createElement("span", { className: "token property", style: {
-                            cursor: 'pointer',
-                            textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
-                            textDecorationStyle: 'dotted',
-                            color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
-                        } }, p.name))) : (React.createElement("span", { className: "token property" }, p.name)),
-                React.createElement("span", { className: "token punctuation" }, ":"),
-                "\u00A0",
-                React.createElement(IndentLevelContext.Provider, { value: level + 1 },
-                    React.createElement(Value, { value: p.type })),
-                React.createElement("span", { className: "token punctuation" }, ";")));
-        }),
-        React.createElement("br", null),
-        indent(level),
-        React.createElement("span", { className: "token punctuation" }, "}")));
+    return (_jsxs(_Fragment, { children: [_jsx("span", { className: "token punctuation", children: "{" }), properties.map((p, index) => {
+                return (_jsxs(React.Fragment, { children: [_jsx("br", {}), indent(level + 1), p.description || p.tags.deprecated ? (_jsx(DescriptionTooltip, { type: "describe", style: { maxWidth: '50em' }, title: _jsx(MdxJSToJSX, { children: p.description || p.tags.deprecated }), children: _jsx("span", { className: "token property", style: {
+                                    cursor: 'pointer',
+                                    textDecoration: p.tags.deprecated ? 'line-through' : 'underline',
+                                    textDecorationStyle: 'dotted',
+                                    color: p.tags.deprecated ? colors.cinnamon600 : colors.plum600,
+                                }, children: p.name }) })) : (_jsx("span", { className: "token property", children: p.name })), _jsx("span", { className: "token punctuation", children: ":" }), "\u00A0", _jsx(IndentLevelContext.Provider, { value: level + 1, children: _jsx(Value, { value: p.type }) }), _jsx("span", { className: "token punctuation", children: ";" })] }, index));
+            }), _jsx("br", {}), indent(level), _jsx("span", { className: "token punctuation", children: "}" })] }));
 };
 function getTableRows(properties, showDefault = true, showRequired = false, level, index) {
     return properties.flatMap((property, i) => {
@@ -55,37 +40,17 @@ function getTableRows(properties, showDefault = true, showRequired = false, leve
             return [];
         }
         const title = (_b = (_a = property.declarations) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.filePath;
-        const propName = (React.createElement(Text, { as: "code", whiteSpace: 'nowrap !important' },
-            indent(level),
-            level > 0 && '\u2514\u00A0',
-            property.name,
-            showRequired && property.required ? React.createElement(Text, { color: "chiliMango600" }, "*") : ''));
+        const propName = (_jsxs(Text, { as: "code", whiteSpace: 'nowrap !important', children: [indent(level), level > 0 && '\u2514\u00A0', property.name, showRequired && property.required ? _jsx(Text, { color: "chiliMango600", children: "*" }) : ''] }));
         return [
-            React.createElement(Table.Row, { key: index + i },
-                React.createElement(Table.Data, { color: "plum600" }, title ? (React.createElement(Tooltip, { type: "describe", title: title }, propName)) : (propName)),
-                React.createElement(Table.Data, null,
-                    React.createElement("code", null, React.createElement(RenderContext.Provider, { value: "inline" },
-                        React.createElement(Value, { value: property.type })))),
-                React.createElement(Table.Data, null,
-                    React.createElement(MdxJSToJSX, null, property.description || '')),
-                showDefault ? (React.createElement(Table.Data, null, property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
-                    property.defaultValue.value === 'undefined' ? null : (React.createElement("code", null,
-                    React.createElement(Value, { value: property.defaultValue })))) : null)) : null),
+            _jsxs(Table.Row, { children: [_jsx(Table.Data, { color: "plum600", children: title ? (_jsx(Tooltip, { type: "describe", title: title, children: propName })) : (propName) }), _jsx(Table.Data, { children: _jsx("code", { children: _jsx(RenderContext.Provider, { value: "inline", children: _jsx(Value, { value: property.type }) }) }) }), _jsx(Table.Data, { children: _jsx(MdxJSToJSX, { children: property.description || '' }) }), showDefault ? (_jsx(Table.Data, { children: property.defaultValue ? (property.defaultValue.kind === 'primitive' &&
+                            property.defaultValue.value === 'undefined' ? null : (_jsx("code", { children: _jsx(Value, { value: property.defaultValue }) }))) : null })) : null] }, index + i),
         ];
     });
 }
 export const PropertiesTable = ({ properties, showDefault = true, showRequired = false, }) => {
     if (properties.length === 0) {
-        return React.createElement("span", { className: "token punctuation" }, "{}");
+        return _jsx("span", { className: "token punctuation", children: "{}" });
     }
     const tableBody = getTableRows(properties, showDefault, showRequired, 0, 0);
-    return (React.createElement(IndentLevelContext.Provider, { value: 0 },
-        React.createElement(Table, null,
-            React.createElement(Table.Head, null,
-                React.createElement(Table.Row, null,
-                    React.createElement(Table.Header, null, "Name"),
-                    React.createElement(Table.Header, null, "Type"),
-                    React.createElement(Table.Header, null, "Description"),
-                    showDefault ? React.createElement(Table.Header, null, "Default") : null)),
-            React.createElement(Table.Body, null, tableBody))));
+    return (_jsx(IndentLevelContext.Provider, { value: 0, children: _jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { children: "Name" }), _jsx(Table.Header, { children: "Type" }), _jsx(Table.Header, { children: "Description" }), showDefault ? _jsx(Table.Header, { children: "Default" }) : null] }) }), _jsx(Table.Body, { children: tableBody })] }) }));
 };