@workday/canvas-kit-docs 15.0.0-alpha.1326-next.0 → 15.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAeA,eAAO,MAAM,GAAG,+CAiBf,CAAC"}
+{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,GAAG,+CAQf,CAAC"}

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

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

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

@@ -1,33 +1,19 @@
-import {
-  CanvasProvider,
-  ContentDirection,
-  PartialEmotionCanvasTheme,
-  useTheme,
-} from '@workday/canvas-kit-react/common';
+import {CanvasProvider} from '@workday/canvas-kit-react/common';
 import {createStyles} from '@workday/canvas-kit-styling';
+import {system} from '@workday/canvas-tokens-web';
 
 import {Demo} from './Demo';
-import {system} from '@workday/canvas-tokens-web';
 
 const mainContentStyles = createStyles({
-  padding: system.space.x4,
+  padding: system.padding.md,
 });
 
 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>
+      <main className={mainContentStyles}>
+        <Demo />
+      </main>
     </CanvasProvider>
   );
 };

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

@@ -1,4 +1,5 @@
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/main.tsx"],"names":[],"mappings":"AAKA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,yDAAyD,CAAC;AACjE,OAAO,sDAAsD,CAAC"}

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

@@ -1,12 +1,13 @@
 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';
 import { injectGlobal } from '@workday/canvas-kit-styling';
-import { App } from './App';
+import { system } from '@workday/canvas-tokens-web';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
+import { App } from './App';
 //@ts-ignore
 injectGlobal({
     ...fonts,
@@ -17,7 +18,7 @@ injectGlobal({
     },
     '#root, #root < div': {
         minHeight: '100vh',
-        ...system.type.body.small,
+        ...system.type.body.sm,
     },
 });
 const container = document.getElementById('root');

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

@@ -1,13 +1,15 @@
 import {createRoot} from 'react-dom/client';
+
 import {fonts} from '@workday/canvas-kit-react-fonts';
-import {system} from '@workday/canvas-tokens-web';
 import {injectGlobal} from '@workday/canvas-kit-styling';
-import {App} from './App';
-
+import {system} from '@workday/canvas-tokens-web';
 import '@workday/canvas-tokens-web/css/base/_variables.css';
 import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/component/_variables.css';
 import '@workday/canvas-tokens-web/css/system/_variables.css';
 
+import {App} from './App';
+
 //@ts-ignore
 injectGlobal({
   ...fonts,
@@ -18,7 +20,7 @@ injectGlobal({
   },
   '#root, #root < div': {
     minHeight: '100vh',
-    ...system.type.body.small,
+    ...system.type.body.sm,
   },
 });
 

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

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

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

@@ -18,13 +18,14 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.10",
-    "@workday/canvas-kit-preview-react": "14.1.10",
-    "@workday/canvas-kit-react": "14.1.10",
-    "@workday/canvas-kit-react-fonts": "^14.1.10",
-    "@workday/canvas-kit-styling": "14.1.10",
-    "@workday/canvas-system-icons-web": "3.0.36",
-    "@workday/canvas-tokens-web": "3.1.2"
+    "@workday/canvas-kit-labs-react": "15.0.0",
+    "@workday/canvas-kit-preview-react": "15.0.0",
+    "@workday/canvas-kit-react": "15.0.0",
+    "@workday/canvas-kit-react-fonts": "^15.0.0",
+    "@workday/canvas-kit-styling": "15.0.0",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-expressive-icons-web": "1.0.1",
+    "@workday/canvas-tokens-web": "4.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

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

@@ -1,5 +1,6 @@
 // @ts-ignore: Cannot find module error
 
+
 export const packageJSONFile = `{
   "name": "vite-react-typescript-starter",
   "private": true,
@@ -18,13 +19,14 @@ export const packageJSONFile = `{
     "@emotion/react": "11.11.4",
     "@types/react": "18.2.60",
     "@types/react-dom": "18.2.19",
-    "@workday/canvas-kit-labs-react": "14.1.10",
-    "@workday/canvas-kit-preview-react": "14.1.10",
-    "@workday/canvas-kit-react": "14.1.10",
-    "@workday/canvas-kit-react-fonts": "^14.1.10",
-    "@workday/canvas-kit-styling": "14.1.10",
-    "@workday/canvas-system-icons-web": "3.0.36",
-    "@workday/canvas-tokens-web": "3.1.2"
+    "@workday/canvas-kit-labs-react": "15.0.0",
+    "@workday/canvas-kit-preview-react": "15.0.0",
+    "@workday/canvas-kit-react": "15.0.0",
+    "@workday/canvas-kit-react-fonts": "^15.0.0",
+    "@workday/canvas-kit-styling": "15.0.0",
+    "@workday/canvas-system-icons-web": "4.0.2",
+    "@workday/canvas-expressive-icons-web": "1.0.1",
+    "@workday/canvas-tokens-web": "4.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.59",

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

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

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

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

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

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

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

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

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,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"}
+{"version":3,"file":"widgetUtils.d.ts","sourceRoot":"","sources":["../../../lib/widgetUtils.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,UAAU,EAAkB,MAAM,kCAAkC,CAAC;AAK7E,OAAO,KAAK,KAAK,MAAM,oBAAoB,CAAC;AAiB5C,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;AAoEF,eAAO,MAAM,MAAM,aAAc,aAAa,kDAM7C,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,14 +1,14 @@
 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';
-import { useDialogModel, Dialog } from '@workday/canvas-kit-react/dialog';
-import { colors, space, type } from '@workday/canvas-kit-react/tokens';
 import { Breadcrumbs } from '@workday/canvas-kit-react/breadcrumbs';
-import { MDX, MdxJSToJSX } from './MDXElements';
 import { Hyperlink } from '@workday/canvas-kit-react/button';
-import { docs } from './docs';
+import { createComponent } from '@workday/canvas-kit-react/common';
+import { Dialog, useDialogModel } from '@workday/canvas-kit-react/dialog';
+import { createStencil, handleCsProp, px2rem } from '@workday/canvas-kit-styling';
+import { base, system } from '@workday/canvas-tokens-web';
+import { MDX, MdxJSToJSX } from './MDXElements';
 import { Value } from './Value';
+import { docs } from './docs';
 /**
  * This context allows us to keep track if we're within a nested stack of dialog
  */
@@ -85,57 +85,56 @@ 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 (_jsx(ButtonHyperLink, { style: {
+        return (_jsx(ButtonHyperLink, { cs: {
                 border: 'none',
                 background: 'transparent',
                 fontSize: 'inherit',
                 fontFamily: 'inherit',
             }, onClick: handleTargetClick, children: value.displayName || 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: {
+    return (_jsx(NestedContext.Provider, { value: true, children: _jsxs(Dialog, { model: model, children: [_jsx(Dialog.Target, { as: ButtonHyperLink, className: "token symbol", onClick: handleTargetClick, cs: {
                         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) => {
+                    }, "aria-haspopup": "true", children: value.displayName || value.name }), renderTypeParameters(value.typeParameters), _jsx(Dialog.Popper, { children: _jsxs(Dialog.Card, { cs: { maxHeight: '50vh', maxWidth: '90vh', minWidth: px2rem(600) }, children: [_jsx(Dialog.CloseIcon, {}), _jsxs(Dialog.Heading, { children: [value.name, " "] }), breadcrumbsList.length > 1 && (_jsx(Breadcrumbs, { "aria-label": "Breadcrumbs", children: _jsx(Breadcrumbs.List, { cs: { paddingInline: system.padding.xs }, 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 {
-        color: colors[color],
-    };
-}
-const StyledSymbolDoc = styled('div')({
-    marginBottom: space.m,
-    'button[data-symbol]': {
-        border: 'none',
-        background: 'transparent',
-        fontSize: 'inherit',
-        fontFamily: 'inherit',
-    },
-    code: {
-        fontSize: type.properties.fontSizes[14],
-        lineHeight: 1.5,
-        fontFamily: type.properties.fontFamilies.monospace,
-        whiteSpace: 'nowrap',
-        '.token': {
-            '&.string': createColor('juicyPear600'),
-            '&.symbol': createColor('grapeSoda600'),
-            '&.property': createColor('berrySmoothie600'),
-            '&.primitive': createColor('pomegranate600'),
-            '&.number': createColor('pomegranate600'),
-            '&.boolean': createColor('pomegranate600'),
-            '&.variable': createColor('pomegranate600'),
-            '&.keyword': createColor('pomegranate600'),
-            '&.punctuation': createColor('blackPepper600'),
-            '&.operator': createColor('blackPepper600'),
-            '&.bold': { fontWeight: 700 },
+const symbolDocStencil = createStencil({
+    base: {
+        marginBottom: system.gap.lg,
+        'button[data-symbol]': {
+            border: 'none',
+            background: 'transparent',
+            fontSize: 'inherit',
+            fontFamily: 'inherit',
+        },
+        code: {
+            ...system.type.subtext.lg,
+            fontFamily: system.fontFamily.mono,
+            whiteSpace: 'nowrap',
+            '.token': {
+                '&.string': { color: base.green700 },
+                '&.symbol': { color: base.purple800 },
+                '&.property': { color: base.blue800 },
+                '&.primitive': { color: base.red800 },
+                '&.number': { color: base.red800 },
+                '&.boolean': { color: base.red800 },
+                '&.variable': { color: base.red800 },
+                '&.keyword': { color: base.red800 },
+                '&.punctuation': { color: base.neutral1000 },
+                '&.operator': { color: base.neutral1000 },
+                '&.bold': { fontWeight: system.fontWeight.bold },
+            },
         },
     },
 });
+const StyledSymbolDoc = (props) => {
+    return _jsx("div", { ...handleCsProp(props, symbolDocStencil()) });
+};
 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
@@ -157,6 +156,7 @@ function findDoc({ name, fileName }) {
 }
 export const useDoc = (criteria) => {
     // Listen to criteria.name and criteria.fileName so that we can re-fetch docs in the dialog
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     const doc = React.useMemo(() => findDoc(criteria), [criteria.name, criteria.fileName || '']);
     return doc;
 };

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { registerWidget, Value } from '../Value';
+import { Value, registerWidget } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('array', ({ value }) => {
     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,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { registerWidget, Value } from '../Value';
+import { Value, registerWidget } from '../Value';
 import { IndentLevelContext, indent } from '../widgetUtils';
 registerWidget('callExpression', ({ value }) => {
     const level = React.useContext(IndentLevelContext);

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

@@ -1,7 +1,8 @@
 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 (_jsx(ColorPicker, { style: { width: 170 }, colorSet: Object.values(colors), onColorChange: () => { } }));
+    return (
+    // eslint-disable-next-line no-empty-function
+    _jsx(ColorPicker, { style: { width: 170 }, onColorChange: () => { } }));
 });

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

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { registerWidget, Value } from '../Value';
+import { Value, registerWidget } from '../Value';
 registerWidget('conditional', ({ value }) => {
     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

@@ -4,7 +4,7 @@ import { Expandable } from '@workday/canvas-kit-react/expandable';
 import { defaultJSDoc } from '../../docgen/docParser';
 import { MDX } from '../MDXElements';
 import { SymbolDoc } from '../SymbolDoc';
-import { PropertiesTable, registerWidget, Value } from '../Value';
+import { PropertiesTable, Value, registerWidget } from '../Value';
 import { Heading, HeadingLevelContext, SymbolDialog } from '../widgetUtils';
 const ParentComponentNameContext = React.createContext('');
 /**
@@ -60,6 +60,7 @@ registerWidget('enhancedComponent', ({ value, doc, meta }) => {
 });
 function groupProps(props) {
     const categories = { Local: [] };
+    // eslint-disable-next-line guard-for-in
     for (const key in fileNameToCategoryMap) {
         categories[key] = [];
     }

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

@@ -1,5 +1,5 @@
 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';
+import { renderTypeParameters } from '../widgetUtils';
 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

@@ -2,8 +2,8 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 import React from 'react';
 import { DescriptionTooltip } from '../DescriptionTooltip';
 import { MdxJSToJSX } from '../MDXElements';
-import { registerWidget, Value } from '../Value';
-import { RenderContext, IndentLevelContext, indent, renderTypeParameters } from '../widgetUtils';
+import { Value, registerWidget } from '../Value';
+import { IndentLevelContext, RenderContext, indent, renderTypeParameters } from '../widgetUtils';
 registerWidget('function', ({ value }) => {
     const level = React.useContext(IndentLevelContext);
     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 })] }));

package/dist/es6/lib/widgets/index.d.ts

@@ -6,9 +6,9 @@ import './conditional';
 import './enhancedComponent';
 import './external';
 import './function';
+import './intersection';
 import './model';
 import './object';
-import './intersection';
 import './parenthesis';
 import './primitives';
 import './symbol';

package/dist/es6/lib/widgets/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,SAAS,CAAC;AACjB,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC;AACxB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,CAAC;AAClB,OAAO,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../lib/widgets/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,CAAC;AACjB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,eAAe,CAAC;AACvB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,cAAc,CAAC;AACtB,OAAO,UAAU,CAAC;AAClB,OAAO,SAAS,CAAC;AACjB,OAAO,iBAAiB,CAAC;AACzB,OAAO,SAAS,CAAC"}

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

@@ -6,9 +6,9 @@ import './conditional';
 import './enhancedComponent';
 import './external';
 import './function';
+import './intersection';
 import './model';
 import './object';
-import './intersection';
 import './parenthesis';
 import './primitives';
 import './symbol';

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { registerWidget, Value } from '../Value';
+import { Value, registerWidget } from '../Value';
 import { RenderContext } from '../widgetUtils';
 registerWidget('intersection', ({ value }) => {
     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,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { PropertiesTable, registerWidget, Value } from '../Value';
+import { PropertiesTable, Value, registerWidget } from '../Value';
 import { Heading } from '../widgetUtils';
 registerWidget('model', ({ value }) => {
     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 })] }))] }));

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

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

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

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

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

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

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

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

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

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

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

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
-import { registerWidget, Value } from '../Value';
+import { Value, registerWidget } from '../Value';
 import { IndentLevelContext, RenderContext, indent } from '../widgetUtils';
 registerWidget('union', ({ value }) => {
     const level = React.useContext(IndentLevelContext);

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.d.ts

@@ -0,0 +1,2 @@
+export declare const CommentBoxWithCharLimit: () => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CommentBoxWithCharLimit.d.ts.map

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CommentBoxWithCharLimit.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,uBAAuB,+CA2CnC,CAAC"}

package/dist/es6/mdx/accessibility/examples/AriaLiveRegions/CommentBoxWithCharLimit.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AccessibleHide, AriaLiveRegion } from '@workday/canvas-kit-react/common';
+import { FormField } from '@workday/canvas-kit-react/form-field';
+import { TextArea } from '@workday/canvas-kit-react/text-area';
+const MAX_CHARACTERS = 200;
+const DEBOUNCE_DELAY = 2000; // 2 seconds after user stops typing
+export const CommentBoxWithCharLimit = () => {
+    const [value, setValue] = React.useState('');
+    const [liveUpdateStr, setLiveUpdateStr] = React.useState('');
+    const hintTextStr = `${value.length} of ${MAX_CHARACTERS} characters`;
+    const handleChange = (event) => {
+        setValue(event.target.value);
+    };
+    const handleBlur = () => {
+        setLiveUpdateStr('');
+    };
+    React.useEffect(() => {
+        // Immediately announce when limit is reached (bypass debounce)
+        if (value.length === MAX_CHARACTERS) {
+            setLiveUpdateStr(`Character limit reached. ${value.length} of ${MAX_CHARACTERS} characters`);
+            return;
+        }
+        // Otherwise, debounce the updates
+        const timer = setTimeout(() => {
+            setLiveUpdateStr(`${value.length} of ${MAX_CHARACTERS} characters`);
+        }, DEBOUNCE_DELAY);
+        return () => clearTimeout(timer);
+    }, [value.length]);
+    return (_jsxs(FormField, { children: [_jsx(FormField.Label, { children: "Comments" }), _jsxs(FormField.Field, { children: [_jsx(FormField.Input, { as: TextArea, onChange: handleChange, onBlur: handleBlur, value: value, maxLength: MAX_CHARACTERS }), _jsx(FormField.Hint, { children: hintTextStr }), _jsx(AriaLiveRegion, { as: AccessibleHide, children: liveUpdateStr })] })] }));
+};