npm - @workday/canvas-kit-docs - Versions diffs - 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0 - Mend

@workday/canvas-kit-docs 12.0.0-alpha.862-next.0 → 12.0.0-alpha.899-next.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (434) hide show

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

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

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

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

package/dist/es6/lib/widgetUtils.js CHANGED Viewed

@@ -47,7 +47,7 @@ export const Heading = createComponent('h4')({
     Component({ headingOffset = 0, ...elemProps }) {
         const headingLevel = React.useContext(HeadingLevelContext);
         const as = `h${headingLevel + headingOffset}`; // Make Typescript happy
-        return React.createElement(MDX, Object.assign({ as: as }, elemProps));
+        return React.createElement(MDX, { as: as, ...elemProps });
     },
 });
 export function renderTypeParameters(typeParameters) {
@@ -233,7 +233,7 @@ export const SymbolDoc = ({ name, fileName, headingStart = 3, hideDescription =
         'callExpression',
     ].includes((doc === null || doc === void 0 ? void 0 : doc.type.kind) || 'notFound');
     const contents = requiresCodeWrapper ? (React.createElement("code", { style: { display: 'block' } }, children)) : (children);
-    const symbolDocContents = (React.createElement(StyledSymbolDoc, Object.assign({}, elemProps),
+    const symbolDocContents = (React.createElement(StyledSymbolDoc, { ...elemProps },
         React.createElement(HeadingLevelContext.Provider, { value: headingStart },
             !hideHeading && React.createElement(Heading, { id: `${name.toLowerCase()}-api` }, name),
             !hideDescription && doc && (React.createElement(MdxJSToJSX, null, descriptionOverride || doc.description)),

package/dist/es6/mdx/installBlock.d.ts CHANGED Viewed

@@ -1,6 +1,7 @@
+import React from 'react';
 export interface InstallBlockProps {
     command?: string;
     packageName?: string;
 }
-export declare const InstallBlock: ({ command, packageName }: InstallBlockProps) => JSX.Element;
+export declare const InstallBlock: ({ command, packageName }: InstallBlockProps) => React.JSX.Element;
 //# sourceMappingURL=installBlock.d.ts.map

package/dist/es6/mdx/installBlock.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"~~AAKA~~,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,~~gBA8BrE~~,CAAC"}
1	+ {"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,sBA8BrE,CAAC"}

package/dist/es6/mdx/style-props/examples/Background.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Background.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Background.tsx"],"names":[],"mappings":"~~AAYA~~,eAAO,MAAM,~~iBAAiB~~,~~mBAqB7B~~,CAAC"}
1	+ {"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Background.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,UAAU,yBActB,CAAC"}

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

@@ -8,7 +8,9 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-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")));
+export const Background = () => {
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Box, { backgroundColor: "cinnamon300", ...baseStyles }, "Cinnamon 300"),
+        React.createElement(Box, { backgroundColor: "sourLemon300", ...baseStyles }, "Sour Lemon 300"),
+        React.createElement(Box, { backgroundColor: "blueberry300", ...baseStyles }, "Blueberry 300")));
+};

package/dist/es6/mdx/style-props/examples/Border.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Border.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Border.tsx"],"names":[],"mappings":"~~AAYA~~,eAAO,MAAM,~~aAAa~~,~~mBA2BzB~~,CAAC"}
1	+ {"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Border.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,MAAM,yBAYlB,CAAC"}

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

@@ -8,7 +8,7 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-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")));
+export const Border = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles }, "Cinnamon 300"),
+    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles }, "Sour Lemon 300"),
+    React.createElement(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles }, "Blueberry 300")));

package/dist/es6/mdx/style-props/examples/Color.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Color.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Color.tsx"],"names":[],"mappings":"~~AAWA~~,eAAO,MAAM,~~YAAY~~,~~mBAwBxB~~,CAAC"}
1	+ {"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Color.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,KAAK,yBAYjB,CAAC"}

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

@@ -7,7 +7,7 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-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")));
+export const Color = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles }, "Cinnamon 300"),
+    React.createElement(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles }, "Sour Lemon 300"),
+    React.createElement(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles }, "Blueberry 300")));

package/dist/es6/mdx/style-props/examples/Depth.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Depth.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Depth.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Depth.tsx"],"names":[],"mappings":"~~AAYA~~,eAAO,MAAM,~~YAAY~~,~~mBAYxB~~,CAAC"}
1	+ {"version":3,"file":"Depth.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Depth.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,KAAK,yBAYjB,CAAC"}

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

@@ -8,7 +8,7 @@ const baseStyles = {
     minWidth: '8rem',
     padding: 'xs',
 };
-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")));
+export const Depth = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles }, "Depth 1"),
+    React.createElement(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles }, "Depth 2"),
+    React.createElement(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles }, "Depth 3")));

package/dist/es6/mdx/style-props/examples/Flex.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Flex.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Flex.tsx"],"names":[],"mappings":"~~AAUA~~,eAAO,MAAM,WAAW,~~mBAkBvB~~,CAAC"}
1	+ {"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Flex.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,WAAW,yBAoCvB,CAAC"}

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

@@ -8,14 +8,14 @@ const baseStyles = {
 };
 export const FlexExample = () => (React.createElement(Flex, { columnGap: "xs" },
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 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.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "1")),
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 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.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "2"),
+        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "2"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "2")),
     React.createElement(Flex, { flexDirection: "column", rowGap: "xs", flex: 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.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles }, "1"))));

package/dist/es6/mdx/style-props/examples/FlexItem.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/FlexItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/FlexItem.tsx"],"names":[],"mappings":"~~AAUA~~,eAAO,MAAM,~~eAAe~~,~~mBAiB3B~~,CAAC"}
1	+ {"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/FlexItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,QAAQ,yBAiCpB,CAAC"}

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

@@ -6,15 +6,15 @@ const baseStyles = {
     minWidth: '2rem',
     padding: 'xs',
 };
-export const FlexItemExample = () => (React.createElement(Flex, { flexDirection: "column", rowGap: "xs" },
+export const FlexItem = () => (React.createElement(Flex, { flexDirection: "column", rowGap: "xs" },
     React.createElement(Flex, { columnGap: "xs" },
-        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.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", flex: 2, textAlign: "center", ...baseStyles }, "2"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles }, "1")),
     React.createElement(Flex, { columnGap: "xs" },
-        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.Item, { backgroundColor: "cinnamon300", flex: 2, textAlign: "center", ...baseStyles }, "2"),
+        React.createElement(Flex.Item, { backgroundColor: "sourLemon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 2, textAlign: "center", ...baseStyles }, "2")),
     React.createElement(Flex, { columnGap: "xs" },
-        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"))));
+        React.createElement(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles }, "1"),
+        React.createElement(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles }, "1"))));

package/dist/es6/mdx/style-props/examples/Grid.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Grid.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Grid.tsx"],"names":[],"mappings":"~~AAQA~~,eAAO,MAAM,WAAW,~~mBAYvB~~,CAAC"}
1	+ {"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,WAAW,yBAYvB,CAAC"}

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

@@ -5,7 +5,7 @@ const baseStyles = {
     padding: 'xs',
 };
 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))));
+    React.createElement(Grid.Item, { gridArea: "head", backgroundColor: "cinnamon300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridArea: "nav", backgroundColor: "sourLemon300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridArea: "main", backgroundColor: "blueberry300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridArea: "foot", backgroundColor: "cinnamon300", ...baseStyles })));

package/dist/es6/mdx/style-props/examples/GridItem.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/GridItem.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/GridItem.tsx"],"names":[],"mappings":"~~AAQA~~,eAAO,MAAM,~~eAAe~~,~~mBAW3B~~,CAAC"}
1	+ {"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/GridItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,QAAQ,yBAWpB,CAAC"}

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

@@ -4,8 +4,8 @@ const baseStyles = {
     color: 'blackPepper500',
     padding: 'xs',
 };
-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))));
+export const GridItem = () => (React.createElement(Grid, { gridGap: "xs", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem" },
+    React.createElement(Grid.Item, { gridColumn: "1 / 3", gridRow: "1", backgroundColor: "cinnamon300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridColumn: "1", gridRow: "2 / 4", backgroundColor: "sourLemon300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridColumn: "2", gridRow: "2", backgroundColor: "blueberry300", ...baseStyles }),
+    React.createElement(Grid.Item, { gridColumn: "2", gridRow: "3", backgroundColor: "cinnamon300", ...baseStyles })));

package/dist/es6/mdx/style-props/examples/Layout.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Layout.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Layout.tsx"],"names":[],"mappings":"~~AAWA~~,eAAO,MAAM,~~aAAa~~,~~mBA8BzB~~,CAAC"}
1	+ {"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Layout.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,MAAM,yBA8BlB,CAAC"}

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

@@ -7,7 +7,7 @@ const baseStyles = {
     justifyContent: 'center',
     alignItems: 'flex-start',
 };
-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")));
+export const Layout = () => (React.createElement(Flex, { alignItems: "flex-end" },
+    React.createElement(Flex, { backgroundColor: "cinnamon300", display: "inline-flex", height: "xl", width: "xxxl", ...baseStyles }, "40 x 80"),
+    React.createElement(Flex, { backgroundColor: "sourLemon300", display: "inline-flex", height: "xxl", width: "xxxl", ...baseStyles }, "64 x 80"),
+    React.createElement(Flex, { backgroundColor: "blueberry300", display: "inline-flex", height: "xxxl", width: "xxxl", ...baseStyles }, "80 x 80")));

package/dist/es6/mdx/style-props/examples/Other.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Other.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Other.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Other.tsx"],"names":[],"mappings":"~~AAYA~~,eAAO,MAAM,~~YAAY~~,~~mBA8BxB~~,CAAC"}
1	+ {"version":3,"file":"Other.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Other.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAY/B,eAAO,MAAM,KAAK,yBA8BjB,CAAC"}

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

@@ -8,7 +8,7 @@ const baseStyles = {
     minHeight: 'xl',
     padding: 'xs',
 };
-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")));
+export const Other = () => (React.createElement(Box, null,
+    React.createElement(Box, { backgroundColor: "cinnamon300", cursor: "grab", outline: `2px dashed ${colors.cinnamon300}`, outlineOffset: "2px", ...baseStyles }, "Cursor Grab"),
+    React.createElement(Box, { backgroundColor: "sourLemon300", cursor: "text", outline: `2px dashed ${colors.sourLemon300}`, outlineOffset: "2px", ...baseStyles }, "Cursor Text"),
+    React.createElement(Box, { backgroundColor: "blueberry300", cursor: "wait", outline: `2px dashed ${colors.blueberry300}`, outlineOffset: "2px", ...baseStyles }, "Cursor Wait")));

package/dist/es6/mdx/style-props/examples/Position.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Position.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Position.tsx"],"names":[],"mappings":"~~AAWA~~,eAAO,MAAM,~~eAAe~~,~~mBAsC3B~~,CAAC"}
1	+ {"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Position.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,eAAO,MAAM,QAAQ,yBAsCpB,CAAC"}

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

@@ -7,9 +7,9 @@ const baseStyles = {
     width: '8rem',
     padding: 'xs',
 };
-export const PositionExample = () => {
+export const Position = () => {
     return (React.createElement(React.Fragment, null,
-        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")));
+        React.createElement(Box, { backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center", ...baseStyles }, "Left"),
+        React.createElement(Box, { backgroundColor: "sourLemon300", left: `calc(50% - 4rem)`, position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center", ...baseStyles }, "Center"),
+        React.createElement(Box, { backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center", ...baseStyles }, "Right")));
 };

package/dist/es6/mdx/style-props/examples/Space.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Space.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Space.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Space.tsx"],"names":[],"mappings":"~~AAUA~~,eAAO,MAAM,~~YAAY~~,~~mBAYxB~~,CAAC"}
1	+ {"version":3,"file":"Space.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Space.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,eAAO,MAAM,KAAK,yBAkBjB,CAAC"}

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

@@ -6,10 +6,10 @@ const baseStyles = {
     display: 'inline-block',
     verticalAlign: 'bottom',
 };
-export const SpaceExample = () => (React.createElement(React.Fragment, null,
-    React.createElement(Box, Object.assign({ backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center" }, baseStyles),
+export const Space = () => (React.createElement(React.Fragment, null,
+    React.createElement(Box, { backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center", ...baseStyles },
         React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Small")),
-    React.createElement(Box, Object.assign({ backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center" }, baseStyles),
+    React.createElement(Box, { backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center", ...baseStyles },
         React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Medium")),
-    React.createElement(Box, Object.assign({ backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center" }, baseStyles),
+    React.createElement(Box, { 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.d.ts CHANGED Viewed

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

package/dist/es6/mdx/style-props/examples/Text.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Text.tsx"],"names":[],"mappings":"~~AAGA~~,eAAO,MAAM,~~WAAW~~,~~mBAYvB~~,CAAC"}
1	+ {"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,eAAO,MAAM,IAAI,yBAYhB,CAAC"}

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Box } from '@workday/canvas-kit-react/layout';
-export const TextExample = () => (React.createElement(Box, { padding: "m", border: "solid 4px", borderColor: "blueberry300", color: "blackPepper500" },
+export const Text = () => (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")));

package/dist/es6/mdx/versionsTable.d.ts CHANGED Viewed

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

package/dist/es6/mdx/versionsTable.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"~~AAkEA~~,eAAO,MAAM,YAAY,~~mBAgCxB~~,CAAC"}
1	+ {"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAkE1B,eAAO,MAAM,YAAY,yBAgCxB,CAAC"}

package/dist/es6/mdx/welcomePage.d.ts CHANGED Viewed

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

package/dist/es6/mdx/welcomePage.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"~~AAcA~~,eAAO,MAAM,WAAW,~~mBA6IvB~~,CAAC"}
1	+ {"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAgB1B,eAAO,MAAM,WAAW,yBA0IvB,CAAC"}

package/dist/es6/mdx/welcomePage.js CHANGED Viewed

@@ -9,14 +9,16 @@ import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
 import { colors } from '@workday/canvas-kit-react/tokens';
 import { rocketIcon, tokensIcon, shapesIcon } from '@workday/canvas-system-icons-web';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { system } from '@workday/canvas-tokens-web';
+import { cssVar } from '@workday/canvas-kit-styling';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
 export const WelcomePage = () => {
-    return (React.createElement(Flex, { flexDirection: "column", gap: "s" },
+    return (React.createElement(Flex, { flexDirection: "column", gap: "s", marginBottom: "m" },
         React.createElement(Box, { borderRadius: "m", overflow: "hidden", position: "relative" },
             React.createElement(Flex, { position: "absolute", flexDirection: "column", top: "30%", left: "10%" },
-                React.createElement(Text, { typeLevel: "title.medium", color: colors.frenchVanilla100, fontSize: "6vmin", marginBottom: "s", style: { lineHeight: '3vmin' } }, "Canvas Kit"),
-                React.createElement(Text, { typeLevel: "body.large", fontSize: "3vmin", style: { lineHeight: '2vw' }, color: colors.frenchVanilla100 },
+                React.createElement(Text, { typeLevel: "title.medium", color: colors.frenchVanilla100, style: { lineHeight: '3vmin', fontSize: '6vmin', marginBottom: cssVar(system.space.x4) } }, "Canvas Kit"),
+                React.createElement(Text, { typeLevel: "body.large", style: { lineHeight: '2vw', fontSize: '3vmin' }, color: colors.frenchVanilla100 },
                     "v",
                     version)),
             React.createElement("img", { src: headerImage, alt: "test", style: { width: '100%', height: 'auto' } })),

package/dist/mdx/11.0-UPGRADE-GUIDE.mdx CHANGED Viewed

@@ -65,9 +65,10 @@ A note to the reader:
 In v11, all the components listed in this guide have started using our new
 [Canvas Tokens Web](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
-In v10, we provided token fallbacks so that a component would not be missing a token/value if the tokens were not defined. In v11 you must add `@workday/canvas-tokens-web` to ensure our
-components are properly styled and the variables are defined. For more information on installing and
-using, please reference our tokens
+In v10, we provided token fallbacks so that a component would not be missing a token/value if the
+tokens were not defined. In v11 you must add `@workday/canvas-tokens-web` to ensure our components
+are properly styled and the variables are defined. For more information on installing and using,
+please reference our tokens
 [docs](https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs).
 ## Codemod
@@ -353,7 +354,7 @@ Components affected:
     <Table.Row>
       <Table.Cell>StatusIndicator (Preview)</Table.Cell>
       <Table.Cell>transparent</Table.Cell>
-      <Table.Cell></Table.Cell>
+      <Table.Cell/>
       <Table.Cell>backgroundColor</Table.Cell>
       <Table.Cell cs={{color: cssVar(base.frenchVanilla100), backgroundColor: cssVar(base.blackPepper500)}}>
         blackPepper600
@@ -365,7 +366,7 @@ Components affected:
     <Table.Row>
       <Table.Cell>StatusIndicator (Preview)</Table.Cell>
       <Table.Cell>transparent</Table.Cell>
-      <Table.Cell></Table.Cell>
+      <Table.Cell/>
       <Table.Cell>opacity</Table.Cell>
       <Table.Cell >0.85</Table.Cell>
       <Table.Cell>
@@ -375,7 +376,7 @@ Components affected:
 		<Table.Row>
       <Table.Cell>Switch</Table.Cell>
       <Table.Cell>Checked and Disabled</Table.Cell>
-      <Table.Cell></Table.Cell>
+      <Table.Cell/>
       <Table.Cell>backgroundColor, opacity</Table.Cell>
       <Table.Cell cs={{backgroundColor: cssVar(base.blueberry200)}}>blueberry200</Table.Cell>
       <Table.Cell cs={{backgroundColor: 'rgba(8,117,225,.3)'}}>
@@ -991,5 +992,4 @@ experimental code and is analagous to code in alpha.
 Breaking changes can be deployed to Labs at any time without triggering a major version update and
 may not be subject to the same rigor in communcation and migration strategies reserved for breaking
-changes in [Preview](#preview) and [Main](#main). import { opacity } from
-"@workday/canvas-tokens-web/dist/es6/system"
+changes in [Preview](#preview) and [Main](#main).