@workday/canvas-kit-docs 9.0.0-alpha.368-next.6 → 9.0.0-alpha.382-next.2

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { registerWidget, Value } from '../Value';
-registerWidget('typeParameter', function (_a) {
-    var value = _a.value;
+registerWidget('typeParameter', ({ value }) => {
     return (React.createElement(React.Fragment, null,
         React.createElement("span", { className: "token symbol" }, value.name),
         value.constraint && (React.createElement(React.Fragment, null,

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

@@ -1,10 +1,9 @@
 import React from 'react';
 import { registerWidget, Value } from '../Value';
 import { IndentLevelContext, RenderContext, indent } from '../widgetUtils';
-registerWidget('union', function (_a) {
-    var value = _a.value;
-    var level = React.useContext(IndentLevelContext);
-    return (React.createElement(RenderContext.Provider, { value: "inline" }, value.value.map(function (v, index) {
+registerWidget('union', ({ value }) => {
+    const level = React.useContext(IndentLevelContext);
+    return (React.createElement(RenderContext.Provider, { value: "inline" }, value.value.map((v, index) => {
         return (React.createElement(React.Fragment, { key: index },
             ' ',
             value.value.length > 3 && (React.createElement(React.Fragment, null,

package/dist/es6/mdx/installBlock.js

@@ -2,14 +2,13 @@ import React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { PrimaryButton } from '@workday/canvas-kit-react/button';
-export var InstallBlock = function (_a) {
-    var command = _a.command, packageName = _a.packageName;
-    var commandRef = React.useRef(null);
-    var _b = React.useState(false), copied = _b[0], setCopied = _b[1];
-    React.useEffect(function () {
-        setTimeout(function () { return setCopied(false); }, 600);
+export const InstallBlock = ({ command, packageName }) => {
+    const commandRef = React.useRef(null);
+    const [copied, setCopied] = React.useState(false);
+    React.useEffect(() => {
+        setTimeout(() => setCopied(false), 600);
     }, [copied]);
-    var handleCopy = function () {
+    const handleCopy = () => {
         setCopied(true);
         if (commandRef.current) {
             navigator.clipboard.writeText(commandRef.current.innerText);

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

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     display: 'inline-block',
     margin: 'xxs',
@@ -19,7 +8,7 @@ var baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export var BackgroundExample = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Box, __assign({ backgroundColor: "cinnamon300" }, baseStyles), "Cinnamon 300"),
-    React.createElement(Box, __assign({ backgroundColor: "sourLemon300" }, baseStyles), "Sour Lemon 300"),
-    React.createElement(Box, __assign({ backgroundColor: "blueberry300" }, baseStyles), "Blueberry 300"))); };
+export const BackgroundExample = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300" }, baseStyles), "Cinnamon 300"),
+    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300" }, baseStyles), "Sour Lemon 300"),
+    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300" }, baseStyles), "Blueberry 300")));

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

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper300',
     display: 'inline-block',
     margin: 'xxs',
@@ -19,7 +8,7 @@ var baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export var BorderExample = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Box, __assign({ borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300" }, baseStyles), "Cinnamon 300"),
-    React.createElement(Box, __assign({ borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300" }, baseStyles), "Sour Lemon 300"),
-    React.createElement(Box, __assign({ borderRadius: "m", border: "solid 4px", borderColor: "blueberry300" }, baseStyles), "Blueberry 300"))); };
+export const BorderExample = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, Object.assign({ borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300" }, baseStyles), "Cinnamon 300"),
+    React.createElement(Box, Object.assign({ borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300" }, baseStyles), "Sour Lemon 300"),
+    React.createElement(Box, Object.assign({ borderRadius: "m", border: "solid 4px", borderColor: "blueberry300" }, baseStyles), "Blueberry 300")));

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

@@ -1,24 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     display: 'inline-block',
     margin: 'xxs',
     minHeight: 'xl',
     minWidth: '8rem',
     padding: 'xs',
 };
-export var ColorExample = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Box, __assign({ backgroundColor: "cinnamon300", color: "blackPepper500" }, baseStyles), "Cinnamon 300"),
-    React.createElement(Box, __assign({ backgroundColor: "sourLemon300", color: "blackPepper500" }, baseStyles), "Sour Lemon 300"),
-    React.createElement(Box, __assign({ backgroundColor: "blueberry300", color: "blackPepper500" }, baseStyles), "Blueberry 300"))); };
+export const ColorExample = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", color: "blackPepper500" }, baseStyles), "Cinnamon 300"),
+    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", color: "blackPepper500" }, baseStyles), "Sour Lemon 300"),
+    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", color: "blackPepper500" }, baseStyles), "Blueberry 300")));

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

@@ -1,17 +1,6 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     display: 'inline-block',
     margin: 'xxs',
@@ -19,7 +8,7 @@ var baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-export var DepthExample = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Box, __assign({ backgroundColor: "cinnamon300", depth: 1 }, baseStyles), "Depth 1"),
-    React.createElement(Box, __assign({ backgroundColor: "sourLemon300", depth: 2 }, baseStyles), "Depth 2"),
-    React.createElement(Box, __assign({ backgroundColor: "blueberry300", depth: 3 }, baseStyles), "Depth 3"))); };
+export const DepthExample = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", depth: 1 }, baseStyles), "Depth 1"),
+    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", depth: 2 }, baseStyles), "Depth 2"),
+    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", depth: 3 }, baseStyles), "Depth 3")));

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

@@ -1,32 +1,21 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     minHeight: 'xl',
     minWidth: '2rem',
     padding: 'xs',
 };
-export var FlexExample = function () { return (React.createElement(Flex, { columnGap: "xs" },
+export const FlexExample = () => (React.createElement(Flex, { columnGap: "xs" },
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 1 },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "1")),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "1")),
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 2 },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "2"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "2"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "2")),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "2"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "2"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "2")),
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 1 },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "1")))); };
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "sourLemon300", textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", textAlign: "center" }, baseStyles), "1"))));

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

@@ -1,31 +1,20 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     minHeight: 'xl',
     minWidth: '2rem',
     padding: 'xs',
 };
-export var FlexItemExample = function () { return (React.createElement(Flex, { flexDirection: "column", rowGap: "xs" },
+export const FlexItemExample = () => (React.createElement(Flex, { flexDirection: "column", rowGap: "xs" },
     React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "sourLemon300", flex: 2, textAlign: "center" }, baseStyles), "2"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", flex: 1, textAlign: "center" }, baseStyles), "1")),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "sourLemon300", flex: 2, textAlign: "center" }, baseStyles), "2"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", flex: 1, textAlign: "center" }, baseStyles), "1")),
     React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", flex: 2, textAlign: "center" }, baseStyles), "2"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "sourLemon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", flex: 2, textAlign: "center" }, baseStyles), "2")),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", flex: 2, textAlign: "center" }, baseStyles), "2"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "sourLemon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", flex: 2, textAlign: "center" }, baseStyles), "2")),
     React.createElement(Flex, { columnGap: "xs" },
-        React.createElement(Flex.Item, __assign({ backgroundColor: "cinnamon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
-        React.createElement(Flex.Item, __assign({ backgroundColor: "blueberry300", flex: 1, textAlign: "center" }, baseStyles), "1")))); };
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "cinnamon300", flex: 1, textAlign: "center" }, baseStyles), "1"),
+        React.createElement(Flex.Item, Object.assign({ backgroundColor: "blueberry300", flex: 1, textAlign: "center" }, baseStyles), "1"))));

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

@@ -1,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Grid } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     padding: 'xs',
 };
-export var GridExample = function () { return (React.createElement(Grid, { gridGap: "xs", gridTemplateAreas: "'head head' 'nav main' 'nav foot'", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
-    React.createElement(Grid.Item, __assign({ gridArea: "head", backgroundColor: "cinnamon300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridArea: "nav", backgroundColor: "sourLemon300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridArea: "main", backgroundColor: "blueberry300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridArea: "foot", backgroundColor: "cinnamon300" }, baseStyles)))); };
+export const GridExample = () => (React.createElement(Grid, { gridGap: "xs", gridTemplateAreas: "'head head' 'nav main' 'nav foot'", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
+    React.createElement(Grid.Item, Object.assign({ gridArea: "head", backgroundColor: "cinnamon300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridArea: "nav", backgroundColor: "sourLemon300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridArea: "main", backgroundColor: "blueberry300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridArea: "foot", backgroundColor: "cinnamon300" }, baseStyles))));

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

@@ -1,22 +1,11 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Grid } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     padding: 'xs',
 };
-export var GridItemExample = function () { return (React.createElement(Grid, { gridGap: "xs", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
-    React.createElement(Grid.Item, __assign({ gridColumn: "1 / 3", gridRow: "1", backgroundColor: "cinnamon300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridColumn: "1", gridRow: "2 / 4", backgroundColor: "sourLemon300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridColumn: "2", gridRow: "2", backgroundColor: "blueberry300" }, baseStyles)),
-    React.createElement(Grid.Item, __assign({ gridColumn: "2", gridRow: "3", backgroundColor: "cinnamon300" }, baseStyles)))); };
+export const GridItemExample = () => (React.createElement(Grid, { gridGap: "xs", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
+    React.createElement(Grid.Item, Object.assign({ gridColumn: "1 / 3", gridRow: "1", backgroundColor: "cinnamon300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridColumn: "1", gridRow: "2 / 4", backgroundColor: "sourLemon300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridColumn: "2", gridRow: "2", backgroundColor: "blueberry300" }, baseStyles)),
+    React.createElement(Grid.Item, Object.assign({ gridColumn: "2", gridRow: "3", backgroundColor: "cinnamon300" }, baseStyles))));

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

@@ -1,24 +1,13 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Flex } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     margin: 'xxs',
     padding: 'xs',
     justifyContent: 'center',
     alignItems: 'flex-start',
 };
-export var LayoutExample = function () { return (React.createElement(Flex, { alignItems: "flex-end" },
-    React.createElement(Flex, __assign({ backgroundColor: "cinnamon300", display: "inline-flex", height: "xl", width: "xxxl" }, baseStyles), "40 x 80"),
-    React.createElement(Flex, __assign({ backgroundColor: "sourLemon300", display: "inline-flex", height: "xxl", width: "xxxl" }, baseStyles), "64 x 80"),
-    React.createElement(Flex, __assign({ backgroundColor: "blueberry300", display: "inline-flex", height: "xxxl", width: "xxxl" }, baseStyles), "80 x 80"))); };
+export const LayoutExample = () => (React.createElement(Flex, { alignItems: "flex-end" },
+    React.createElement(Flex, Object.assign({ backgroundColor: "cinnamon300", display: "inline-flex", height: "xl", width: "xxxl" }, baseStyles), "40 x 80"),
+    React.createElement(Flex, Object.assign({ backgroundColor: "sourLemon300", display: "inline-flex", height: "xxl", width: "xxxl" }, baseStyles), "64 x 80"),
+    React.createElement(Flex, Object.assign({ backgroundColor: "blueberry300", display: "inline-flex", height: "xxxl", width: "xxxl" }, baseStyles), "80 x 80")));

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

@@ -1,25 +1,14 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { colors } from '@workday/canvas-kit-react/tokens';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     display: 'inline-block',
     margin: 'xxs',
     minHeight: 'xl',
     padding: 'xs',
 };
-export var OtherExample = function () { return (React.createElement(Box, null,
-    React.createElement(Box, __assign({ backgroundColor: "cinnamon300", cursor: "grab", outline: "2px dashed " + colors.cinnamon300, outlineOffset: "2px" }, baseStyles), "Cursor Grab"),
-    React.createElement(Box, __assign({ backgroundColor: "sourLemon300", cursor: "text", outline: "2px dashed " + colors.sourLemon300, outlineOffset: "2px" }, baseStyles), "Cursor Text"),
-    React.createElement(Box, __assign({ backgroundColor: "blueberry300", cursor: "wait", outline: "2px dashed " + colors.blueberry300, outlineOffset: "2px" }, baseStyles), "Cursor Wait"))); };
+export const OtherExample = () => (React.createElement(Box, null,
+    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", cursor: "grab", outline: `2px dashed ${colors.cinnamon300}`, outlineOffset: "2px" }, baseStyles), "Cursor Grab"),
+    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", cursor: "text", outline: `2px dashed ${colors.sourLemon300}`, outlineOffset: "2px" }, baseStyles), "Cursor Text"),
+    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", cursor: "wait", outline: `2px dashed ${colors.blueberry300}`, outlineOffset: "2px" }, baseStyles), "Cursor Wait")));

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

@@ -1,26 +1,15 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     color: 'blackPepper500',
     margin: 'xxs',
     height: 'xl',
     width: '8rem',
     padding: 'xs',
 };
-export var PositionExample = function () {
+export const PositionExample = () => {
     return (React.createElement(React.Fragment, null,
-        React.createElement(Box, __assign({ backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center" }, baseStyles), "Left"),
-        React.createElement(Box, __assign({ backgroundColor: "sourLemon300", left: "calc(50% - 4rem)", position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center" }, baseStyles), "Center"),
-        React.createElement(Box, __assign({ backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center" }, baseStyles), "Right")));
+        React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center" }, baseStyles), "Left"),
+        React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", left: `calc(50% - 4rem)`, position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center" }, baseStyles), "Center"),
+        React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center" }, baseStyles), "Right")));
 };

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

@@ -1,26 +1,15 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-var baseStyles = {
+const baseStyles = {
     border: 'dotted 2px',
     color: 'blackPepper500',
     display: 'inline-block',
     verticalAlign: 'bottom',
 };
-export var SpaceExample = function () { return (React.createElement(React.Fragment, null,
-    React.createElement(Box, __assign({ backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center" }, baseStyles),
+export const SpaceExample = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center" }, baseStyles),
         React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Small")),
-    React.createElement(Box, __assign({ backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center" }, baseStyles),
+    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center" }, baseStyles),
         React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Medium")),
-    React.createElement(Box, __assign({ backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center" }, baseStyles),
-        React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Large")))); };
+    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center" }, baseStyles),
+        React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Large"))));

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-export var TextExample = function () { return (React.createElement(Box, { padding: "m", border: "solid 4px", borderColor: "blueberry300", color: "blackPepper500" },
+export const TextExample = () => (React.createElement(Box, { padding: "m", border: "solid 4px", borderColor: "blueberry300", color: "blackPepper500" },
     React.createElement(Box, { as: "h3", fontSize: "large", fontWeight: "bold", margin: "zero" }, "The Elements of Typographic Style"),
     React.createElement(Box, { as: "p", fontSize: "medium", fontStyle: "italic" }, "\"Typography is the craft of endowing human language with a durable visual form.\""),
-    React.createElement(Box, { as: "span", fontSize: "small", fontWeight: "bold", color: "licorice300" }, "\u2015 Robert Bringhurst"))); };
+    React.createElement(Box, { as: "span", fontSize: "small", fontWeight: "bold", color: "licorice300" }, "\u2015 Robert Bringhurst")));

package/dist/es6/mdx/welcomePage.js

@@ -11,7 +11,7 @@ import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
-export var WelcomePage = function () {
+export const WelcomePage = () => {
     return (React.createElement(Flex, { flexDirection: "column", gap: "s" },
         React.createElement(Box, { borderRadius: "m", overflow: "hidden", position: "relative" },
             React.createElement(Flex, { position: "absolute", flexDirection: "column", top: "30%", left: "10%" },
@@ -25,7 +25,7 @@ export var WelcomePage = function () {
             "This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with",
             ' ',
             React.createElement(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/" }, "Workday Design Principles.")),
-        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Quick Links"),
+        React.createElement(Heading, { size: "medium", borderBottom: `1px solid ${colors.blueberry200}`, paddingBottom: "xxs" }, "Quick Links"),
         React.createElement(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s" },
             React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
                 React.createElement(SystemIcon, { color: colors.cantaloupe400, colorHover: colors.cantaloupe400, icon: rocketIcon, size: 60 }),
@@ -51,7 +51,7 @@ export var WelcomePage = function () {
                 React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview" },
                     ' ',
                     "View Assets"))),
-        React.createElement(Heading, { size: "medium", borderBottom: "1px solid " + colors.blueberry200, paddingBottom: "xxs" }, "Installation"),
+        React.createElement(Heading, { size: "medium", borderBottom: `1px solid ${colors.blueberry200}`, paddingBottom: "xxs" }, "Installation"),
         React.createElement(Text, null, "To get started using Canvas kit React first add or install the module to your existing React project"),
         React.createElement(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react" }),
         "or",

package/dist/mdx/9.0-UPGRADE-GUIDE.mdx

@@ -10,12 +10,15 @@ any questions.
   - [Layout and Column](#layout-and-column)
   - [Stack](#stack-hstack-vstack)
 - [Component Updates](#component-updates)
-  - [Buttons](#buttons)
-	- [Toast](#toast)
+  - [Buttons](#buttons) - [Toast](#toast)
 - [Utility Updates](#utility-updates)
   - [focusRing](#focusring)
+  - [useTheme and getTheme](#useTheme-and-getTheme)
+  - [useCanvasTheme and getCanvasTheme](#useCanvasTheme-and-getCanvasTheme)
+  - [useThemedRing](#useThemedRing)
+  - [useThemeRTL](#useThemeRTL)
 - [Token Updates](#token-updates)
-	- [Depth](#depth)
+  - [Depth](#depth)
 
 ## Codemod
 
@@ -169,6 +172,30 @@ We're removing memoization from focus ring. The `memoize` argument passed to `fo
 longer valid and we've removed the exported `memoizedFocusRing`. There is no codemod for this
 change. We couldn't find any example of `memoize` or `memoizedFocusRing` being used.
 
+### useTheme and getTheme
+
+We've updated `useTheme` by adding error handling if this hook has been used outside a functional
+component. Also, `getTheme` method has been added to access a theme from `styled` or class
+components instead of `useTheme`.
+
+### useCanvasTheme and getCanvasTheme
+
+`useCanvasTheme` and `getCanvasTheme` have been removed and can be safely replaced by `useTheme`
+and `getTheme`.
+
+### useThemedRing
+
+We've promoted `useThemedRing` from our Labs package to our Main package. You can use this utility
+to theme focus rings.
+
+🤖 The codemod will update the import for this utility.
+
+### useThemeRTL
+
+We've [soft-deprecated](#soft-deprecation) `useThemeRTL` from our Labs package. Although you may
+still use this utility, we encourage consumers to use
+[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties).
+
 ## Token Updates
 
 ### Depth

package/dist/mdx/preview-react/text-area/examples/Alert.tsx

@@ -3,7 +3,7 @@
 import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextArea} from '@workday/canvas-kit-preview-react/text-area';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {useThemedRing} from '@workday/canvas-kit-react/common';
 import {space, colors} from '@workday/canvas-kit-react/tokens';
 import {Text} from '@workday/canvas-kit-react/text';
 

package/dist/mdx/preview-react/text-input/examples/Alert.tsx

@@ -3,7 +3,7 @@
 import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
+import {useThemedRing} from '@workday/canvas-kit-react/common';
 import {space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {

package/dist/mdx/preview-react/text-input/examples/ThemedAlert.tsx

@@ -3,8 +3,11 @@
 import {jsx} from '@emotion/react';
 import React from 'react';
 import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
-import {useThemedRing} from '@workday/canvas-kit-labs-react/common';
-import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
+import {
+  CanvasProvider,
+  PartialEmotionCanvasTheme,
+  useThemedRing,
+} from '@workday/canvas-kit-react/common';
 import {colors, space} from '@workday/canvas-kit-react/tokens';
 
 export default () => {