@workday/canvas-kit-docs 12.4.2 → 12.4.4

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":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiE1B,eAAO,MAAM,gBAAgB,aAAY,GAAG,sBAwG3C,CAAC"}

package/dist/es6/lib/ExampleCodeBlock.js

@@ -6,7 +6,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 +29,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,21 +76,43 @@ 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]);
+    /**
+     * `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 =`);
+    };
+    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 (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')))),
+                code && (React.createElement("div", { "data-part": "code-toggle-stackblitz-btn-container" },
+                    React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz() }, "\u26A1\uFE0F Edit in Stackblitz"),
+                    React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed) }, !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 },

package/dist/es6/lib/docs.js

@@ -145259,12 +145259,53 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
     }
   },
   {
-    "name": "isFocusable",
+    "name": "isMouseFocusable",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts",
-    "description": "Is an element focusable? This function performs various tests to see if the element in question\ncan receive focus. Should skip disabled elements as they are not focusable.",
+    "description": "Is an element focusable? This function performs various tests to see if the element in question\ncan receive focus via a pointer. Should skip disabled elements as they are not focusable.",
     "declarations": [
       {
-        "name": "isFocusable",
+        "name": "isMouseFocusable",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts"
+      }
+    ],
+    "tags": {},
+    "type": {
+      "kind": "function",
+      "parameters": [
+        {
+          "kind": "parameter",
+          "name": "element",
+          "type": {
+            "kind": "external",
+            "name": "Element",
+            "url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
+          },
+          "required": true,
+          "rest": false,
+          "description": "",
+          "declarations": [
+            {
+              "name": "element",
+              "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts"
+            }
+          ],
+          "tags": {}
+        }
+      ],
+      "members": [],
+      "returnType": {
+        "kind": "primitive",
+        "value": "boolean"
+      }
+    }
+  },
+  {
+    "name": "isKeyboardFocusable",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts",
+    "description": "Is an element focusable? This function performs various tests to see if the element in question\ncan receive focus via the keyboard. Should skip disabled elements as they are not focusable.",
+    "declarations": [
+      {
+        "name": "isKeyboardFocusable",
         "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts"
       }
     ],
@@ -145299,6 +145340,25 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
       }
     }
   },
+  {
+    "name": "isFocusable",
+    "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts",
+    "description": "",
+    "declarations": [
+      {
+        "name": "isFocusable",
+        "filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts"
+      }
+    ],
+    "tags": {
+      "deprecated": "Use `isMouseFocusable` for mouse events and `isKeyboardFocusable` for keyboard\nevents. `isFocusable` is an alias to `isKeyboardFocusable`"
+    },
+    "type": {
+      "kind": "symbol",
+      "name": "isKeyboardFocusable",
+      "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts"
+    }
+  },
   {
     "name": "getFirstFocusableElement",
     "fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/utils/elements.ts",

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,eAAO,MAAM,GAAG,yBAiBf,CAAC"}

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

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { CanvasProvider, ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { Demo } from './Demo';
+import { system } from '@workday/canvas-tokens-web';
+const mainContentStyles = createStyles({
+    padding: system.space.x4,
+});
+export const App = () => {
+    // useTheme is filling in the Canvas theme object if any keys are missing
+    const canvasTheme = useTheme({
+        canvas: {
+            direction: ContentDirection.LTR,
+        },
+    });
+    return (React.createElement(CanvasProvider, { theme: canvasTheme },
+        React.createElement(React.Fragment, null,
+            React.createElement("main", { className: mainContentStyles },
+                React.createElement(Demo, null)))));
+};

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

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

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

@@ -0,0 +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"}

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

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

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

@@ -0,0 +1,4 @@
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+//# sourceMappingURL=main.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,25 @@
+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';
+import { cssVar, injectGlobal } from '@workday/canvas-kit-styling';
+import { App } from './App';
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+//@ts-ignore
+injectGlobal({
+    ...fonts,
+    'html, body': {
+        fontFamily: cssVar(system.fontFamily.default),
+        margin: 0,
+        minHeight: '100vh',
+    },
+    '#root, #root < div': {
+        minHeight: '100vh',
+        ...system.type.body.small,
+    },
+});
+const container = document.getElementById('root');
+const root = createRoot(container);
+root.render(React.createElement(App, null));

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

@@ -0,0 +1,2 @@
+export declare const packageJSONFile: string;
+//# sourceMappingURL=packageJSONFile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"packageJSONFile.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/packageJSONFile.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAuC3B,CAAC"}

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

@@ -0,0 +1,42 @@
+// @ts-ignore: Cannot find module error
+import { version } from '../../../../lerna.json';
+export const packageJSONFile = `{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@emotion/css": "11.11.2",
+    "@emotion/react": "11.11.4",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
+    "@workday/canvas-kit-labs-react": "${version}",
+    "@workday/canvas-kit-preview-react": "${version}",
+    "@workday/canvas-kit-react": "${version}",
+    "@workday/canvas-kit-react-fonts": "^${version}",
+    "@workday/canvas-kit-styling": "${version}",
+    "@workday/canvas-system-icons-web": "3.0.22",
+    "@workday/canvas-tokens-web": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}
+`;

package/dist/es6/lib/stackblitzFiles/vite.config.d.ts

@@ -0,0 +1,4 @@
+/// <reference path="../../../../lib/stackblitzFiles/types/custom-imports.d.ts" />
+declare const _default: any;
+export default _default;
+//# sourceMappingURL=vite.config.d.ts.map

package/dist/es6/lib/stackblitzFiles/vite.config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/vite.config.ts"],"names":[],"mappings":";;AAOA,wBAEG"}

package/dist/es6/lib/stackblitzFiles/vite.config.js

@@ -0,0 +1,7 @@
+/// <reference path="./types/custom-imports.d.ts" />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+    plugins: [react()],
+});

package/dist/mdx/react/popup/examples/ReturnFocusTest.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 
 import {TextInput} from '@workday/canvas-kit-react/text-input';
 import {FormField} from '@workday/canvas-kit-react/form-field';
-import {TertiaryButton} from '@workday/canvas-kit-react/button';
+import {SecondaryButton, TertiaryButton} from '@workday/canvas-kit-react/button';
+import {Flex} from '@workday/canvas-kit-react/layout';
 import {
   Popup,
   useCloseOnOutsideClick,
@@ -33,9 +34,12 @@ export default () => {
             <FormField.Label>Name</FormField.Label>
             <FormField.Input as={TextInput} />
           </FormField>
-          <Popup.Target style={{marginBottom: 400, marginLeft: 410}} data-testid="target">
-            Open Popup
-          </Popup.Target>
+          <Flex style={{marginBottom: 400, marginLeft: 410}}>
+            <SecondaryButton id="return-focus-button-tabindex" tabIndex={-1}>
+              Button with TabIndex=-1
+            </SecondaryButton>
+            <Popup.Target data-testid="target">Open Popup</Popup.Target>
+          </Flex>
           <Popup.Popper>
             <Popup.Card>
               <Popup.CloseIcon aria-label="Close" />

package/lib/ExampleCodeBlock.tsx

@@ -7,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: {
@@ -21,10 +31,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',
@@ -70,17 +82,40 @@ export const ExampleCodeBlock = ({code}: any) => {
     navigator.clipboard.writeText(textInput.current.textContent);
   };
 
-  // React.useEffect(() => {
-  //   if (copied) {
-  //     const copyCodeTimeout = setTimeout(() => {
-  //       setCopied(false);
-  //     }, 2000);
+  /**
+   * `code` returns our examples. We need to rewrite them so that they export `Demo`.
+   */
+  const handleExampleRewrite = (code: any) => {
+    return code.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`);
+  };
 
-  //     return () => {
-  //       clearTimeout(copyCodeTimeout);
-  //     };
-  //   }
-  // }, [copied]);
+  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 (
     <div {...cardStencil({opened: isCodeDisplayed})}>
@@ -88,13 +123,14 @@ export const ExampleCodeBlock = ({code}: any) => {
         <Card.Body>
           {React.createElement(code)}
           {code && (
-            <TertiaryButton
-              size="extraSmall"
-              onClick={() => setCodeDisplayed(!isCodeDisplayed)}
-              data-part="code-toggle-btn"
-            >
-              {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
-            </TertiaryButton>
+            <div data-part="code-toggle-stackblitz-btn-container">
+              <TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
+                ⚡️ Edit in Stackblitz
+              </TertiaryButton>
+              <TertiaryButton size="extraSmall" onClick={() => setCodeDisplayed(!isCodeDisplayed)}>
+                {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
+              </TertiaryButton>
+            </div>
           )}
         </Card.Body>
       </Card>

package/lib/stackblitzFiles/.eslintrc.cjs.txt

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: {browser: true, es2020: true},
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
+  },
+};

package/lib/stackblitzFiles/App.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+import {Demo} from './Demo';
+import {system} from '@workday/canvas-tokens-web';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+export const App = () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      direction: ContentDirection.LTR,
+    },
+  });
+
+  return (
+    <CanvasProvider theme={canvasTheme}>
+      <>
+        <main className={mainContentStyles}>
+          <Demo />
+        </main>
+      </>
+    </CanvasProvider>
+  );
+};

package/lib/stackblitzFiles/Demo.tsx

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

package/lib/stackblitzFiles/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/lib/stackblitzFiles/main.tsx

@@ -0,0 +1,28 @@
+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';
+import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
+import {App} from './App';
+
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+//@ts-ignore
+injectGlobal({
+  ...fonts,
+  'html, body': {
+    fontFamily: cssVar(system.fontFamily.default),
+    margin: 0,
+    minHeight: '100vh',
+  },
+  '#root, #root < div': {
+    minHeight: '100vh',
+    ...system.type.body.small,
+  },
+});
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(<App />);

package/lib/stackblitzFiles/packageJSONFile.ts

@@ -0,0 +1,42 @@
+// @ts-ignore: Cannot find module error
+import {version} from '../../../../lerna.json';
+export const packageJSONFile = `{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@emotion/css": "11.11.2",
+    "@emotion/react": "11.11.4",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
+    "@workday/canvas-kit-labs-react": "${version}",
+    "@workday/canvas-kit-preview-react": "${version}",
+    "@workday/canvas-kit-react": "${version}",
+    "@workday/canvas-kit-react-fonts": "^${version}",
+    "@workday/canvas-kit-styling": "${version}",
+    "@workday/canvas-system-icons-web": "3.0.22",
+    "@workday/canvas-tokens-web": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}
+`;

package/lib/stackblitzFiles/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite-env"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/lib/stackblitzFiles/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
+

package/lib/stackblitzFiles/types/custom-imports.d.ts

@@ -0,0 +1,13 @@
+declare module '!!raw-loader!*' {
+  const content: string;
+  export default content;
+}
+
+declare module 'vite' {
+  export function defineConfig(config: any): any;
+}
+
+declare module '@vitejs/plugin-react' {
+  const react: any;
+  export default react;
+}

package/lib/stackblitzFiles/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />`

package/lib/stackblitzFiles/vite.config.ts

@@ -0,0 +1,10 @@
+/// <reference path="./types/custom-imports.d.ts" />
+
+import {defineConfig} from 'vite';
+
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "12.4.2",
+  "version": "12.4.4",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -44,10 +44,10 @@
   "dependencies": {
     "@emotion/styled": "^11.6.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^12.4.2",
-    "@workday/canvas-kit-preview-react": "^12.4.2",
-    "@workday/canvas-kit-react": "^12.4.2",
-    "@workday/canvas-kit-styling": "^12.4.2",
+    "@workday/canvas-kit-labs-react": "^12.4.4",
+    "@workday/canvas-kit-preview-react": "^12.4.4",
+    "@workday/canvas-kit-react": "^12.4.4",
+    "@workday/canvas-kit-styling": "^12.4.4",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
@@ -60,5 +60,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "ecb807038e0bd4de48181cb58108ddafc271299e"
+  "gitHead": "921fb688382b24c47999ab26d6045b0e182e3064"
 }