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

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

@@ -1,11 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
     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, { 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 })));
+export const GridExample = () => (_jsxs(Grid, { gridGap: "xs", gridTemplateAreas: "'head head' 'nav main' 'nav foot'", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem", children: [_jsx(Grid.Item, { gridArea: "head", backgroundColor: "cinnamon300", ...baseStyles }), _jsx(Grid.Item, { gridArea: "nav", backgroundColor: "sourLemon300", ...baseStyles }), _jsx(Grid.Item, { gridArea: "main", backgroundColor: "blueberry300", ...baseStyles }), _jsx(Grid.Item, { gridArea: "foot", backgroundColor: "cinnamon300", ...baseStyles })] }));

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

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

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

@@ -1 +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"}
+{"version":3,"file":"GridItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/GridItem.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,QAAQ,+CAWpB,CAAC"}

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

@@ -1,11 +1,7 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Grid } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
     padding: 'xs',
 };
-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 })));
+export const GridItem = () => (_jsxs(Grid, { gridGap: "xs", gridTemplateColumns: "1fr 3fr", gridTemplateRows: "2.5rem minmax(10rem, auto) 2.5rem", children: [_jsx(Grid.Item, { gridColumn: "1 / 3", gridRow: "1", backgroundColor: "cinnamon300", ...baseStyles }), _jsx(Grid.Item, { gridColumn: "1", gridRow: "2 / 4", backgroundColor: "sourLemon300", ...baseStyles }), _jsx(Grid.Item, { gridColumn: "2", gridRow: "2", backgroundColor: "blueberry300", ...baseStyles }), _jsx(Grid.Item, { gridColumn: "2", gridRow: "3", backgroundColor: "cinnamon300", ...baseStyles })] }));

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Layout.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Layout.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,MAAM,+CA8BlB,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Flex } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -7,7 +7,4 @@ const baseStyles = {
     justifyContent: 'center',
     alignItems: 'flex-start',
 };
-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")));
+export const Layout = () => (_jsxs(Flex, { alignItems: "flex-end", children: [_jsx(Flex, { backgroundColor: "cinnamon300", display: "inline-flex", height: "xl", width: "xxxl", ...baseStyles, children: "40 x 80" }), _jsx(Flex, { backgroundColor: "sourLemon300", display: "inline-flex", height: "xxl", width: "xxxl", ...baseStyles, children: "64 x 80" }), _jsx(Flex, { backgroundColor: "blueberry300", display: "inline-flex", height: "xxxl", width: "xxxl", ...baseStyles, children: "80 x 80" })] }));

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Other.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Other.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CA8BjB,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 import { colors } from '@workday/canvas-kit-react/tokens';
 const baseStyles = {
@@ -8,7 +8,4 @@ const baseStyles = {
     minHeight: 'xl',
     padding: 'xs',
 };
-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")));
+export const Other = () => (_jsxs(Box, { children: [_jsx(Box, { backgroundColor: "cinnamon300", cursor: "grab", outline: `2px dashed ${colors.cinnamon300}`, outlineOffset: "2px", ...baseStyles, children: "Cursor Grab" }), _jsx(Box, { backgroundColor: "sourLemon300", cursor: "text", outline: `2px dashed ${colors.sourLemon300}`, outlineOffset: "2px", ...baseStyles, children: "Cursor Text" }), _jsx(Box, { backgroundColor: "blueberry300", cursor: "wait", outline: `2px dashed ${colors.blueberry300}`, outlineOffset: "2px", ...baseStyles, children: "Cursor Wait" })] }));

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Position.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Position.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,QAAQ,+CAsCpB,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     color: 'blackPepper500',
@@ -8,8 +8,5 @@ const baseStyles = {
     padding: 'xs',
 };
 export const Position = () => {
-    return (React.createElement(React.Fragment, null,
-        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")));
+    return (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", left: 0, position: "absolute", top: "calc(50% - 20px)", zIndex: 1, textAlign: "center", ...baseStyles, children: "Left" }), _jsx(Box, { backgroundColor: "sourLemon300", left: `calc(50% - 4rem)`, position: "absolute", top: "calc(50% - 20px)", zIndex: 2, textAlign: "center", ...baseStyles, children: "Center" }), _jsx(Box, { backgroundColor: "blueberry300", position: "absolute", right: 0, top: "calc(50% - 20px)", zIndex: 3, textAlign: "center", ...baseStyles, children: "Right" })] }));
 };

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Space.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Space.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,KAAK,+CAkBjB,CAAC"}

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

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
 const baseStyles = {
     border: 'dotted 2px',
@@ -6,10 +6,4 @@ const baseStyles = {
     display: 'inline-block',
     verticalAlign: 'bottom',
 };
-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, { backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center", ...baseStyles },
-        React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Medium")),
-    React.createElement(Box, { backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center", ...baseStyles },
-        React.createElement(Box, { border: "dotted 2px", borderColor: "blackPepper500" }, "Large"))));
+export const Space = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", margin: "xxs", padding: "s", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Small" }) }), _jsx(Box, { backgroundColor: "sourLemon300", margin: "xxs", padding: "m", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Medium" }) }), _jsx(Box, { backgroundColor: "blueberry300", margin: "xxs", padding: "l", textAlign: "center", ...baseStyles, children: _jsx(Box, { border: "dotted 2px", borderColor: "blackPepper500", children: "Large" }) })] }));

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

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

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

@@ -1 +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"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Text.tsx"],"names":[],"mappings":"AAEA,eAAO,MAAM,IAAI,+CAYhB,CAAC"}

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

@@ -1,6 +1,3 @@
-import * as React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@workday/canvas-kit-react/layout';
-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")));
+export const Text = () => (_jsxs(Box, { padding: "m", border: "solid 4px", borderColor: "blueberry300", color: "blackPepper500", children: [_jsx(Box, { as: "h3", fontSize: "large", fontWeight: "bold", margin: "zero", children: "The Elements of Typographic Style" }), _jsx(Box, { as: "p", fontSize: "medium", fontStyle: "italic", children: "\"Typography is the craft of endowing human language with a durable visual form.\"" }), _jsx(Box, { as: "span", fontSize: "small", fontWeight: "bold", color: "licorice300", children: "\u2015 Robert Bringhurst" })] }));

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

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

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

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

package/dist/es6/mdx/versionsTable.js

@@ -1,39 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Table } from '@workday/canvas-kit-react';
 import { StatusIndicator } from '@workday/canvas-kit-preview-react';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
-// When we release a new version, add the support version before the first item.
-const allVersions = [
-    {
-        versionNumber: version,
-        documentation: 'https://github.com/Workday/canvas-kit',
-    },
-    {
-        versionNumber: 11,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v11/?path=/docs/welcome--page',
-    },
-    {
-        versionNumber: 10,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v10/?path=/docs/welcome--page',
-    },
-    {
-        versionNumber: 9,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v9/?path=/docs/welcome--page',
-    },
-    {
-        versionNumber: 8,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v8/?path=/docs/welcome--page',
-    },
-    {
-        versionNumber: 7,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v7/?path=/story/welcome-getting-started--page',
-    },
-    {
-        versionNumber: 6,
-        documentation: 'https://d2krrudi3mmzzw.cloudfront.net/v7/?path=/story/welcome-getting-started--page',
-    },
-];
 const statusIndicators = {
     stable: {
         variant: 'blue',
@@ -64,22 +34,26 @@ function getVersionStatusIndicator(versionNumber) {
     }
 }
 export const VersionTable = () => {
-    return (React.createElement(Table, null,
-        React.createElement(Table.Head, null,
-            React.createElement(Table.Row, null,
-                React.createElement(Table.Header, { scope: "col" }, "Version"),
-                React.createElement(Table.Header, { scope: "col" }, "Documentation"),
-                React.createElement(Table.Header, { scope: "col" }, "Status"))),
-        React.createElement(Table.Body, null, allVersions.map(item => {
-            const { label, variant } = getVersionStatusIndicator(item.versionNumber);
-            return (React.createElement(Table.Row, null,
-                React.createElement(Table.Cell, null,
-                    "v",
-                    item.versionNumber),
-                React.createElement(Table.Cell, null,
-                    React.createElement("a", { href: item.documentation, target: "_blank", rel: "noreferrer" }, "Documentation")),
-                React.createElement(Table.Cell, null,
-                    React.createElement(StatusIndicator, { variant: variant },
-                        React.createElement(StatusIndicator.Label, null, label)))));
-        }))));
+    const [versions, setVersions] = React.useState([]);
+    const minVersion = 6;
+    const currentMajorVersion = Number(version === null || version === void 0 ? void 0 : version.split('.')[0]);
+    React.useEffect(() => {
+        let arr = [];
+        for (let i = minVersion; i <= currentMajorVersion; i++) {
+            arr.push({
+                versionNumber: i,
+                versionUrl: i === currentMajorVersion
+                    ? 'https://canvas.workday.com/'
+                    : `https://canvas.workday.com/v${i}/`,
+            });
+        }
+        setVersions(arr);
+    }, []);
+    return (_jsxs(Table, { children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "col", children: "Version" }), _jsx(Table.Header, { scope: "col", children: "Documentation" }), _jsx(Table.Header, { scope: "col", children: "Status" })] }) }), _jsx(Table.Body, { children: versions
+                    .slice()
+                    .reverse()
+                    .map(item => {
+                    const { label, variant } = getVersionStatusIndicator(item.versionNumber);
+                    return (_jsxs(Table.Row, { children: [_jsxs(Table.Cell, { children: ["v", item.versionNumber] }), _jsx(Table.Cell, { children: _jsx("a", { href: item.versionUrl, target: "_blank", rel: "noreferrer", children: "Documentation" }) }), _jsx(Table.Cell, { children: _jsx(StatusIndicator, { variant: variant, children: _jsx(StatusIndicator.Label, { children: label }) }) })] }));
+                }) })] }));
 };

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

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

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

@@ -1 +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"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,WAAW,+CAwHvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -1,61 +1,49 @@
-import React from 'react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore: Cannot find module error
-import headerImage from './storybook-welcome-header.png';
+import headerImage from './CK-banner-temp.jpg';
 import { Flex, Grid, Box } from '@workday/canvas-kit-react/layout';
 import { InstallBlock } from './installBlock';
 import { Text, Heading } from '@workday/canvas-kit-react/text';
 import { Card } from '@workday/canvas-kit-react/card';
 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';
+import { system, base } from '@workday/canvas-tokens-web';
+import { createStyles } from '@workday/canvas-kit-styling';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
+const parentFlexStyles = createStyles({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: system.space.x4,
+    marginBottom: system.space.x6,
+});
+const textStyles = createStyles({
+    color: system.color.text.inverse,
+    fontSize: '5vmin',
+    lineHeight: '5vmin',
+});
+const versionStyles = createStyles({
+    fontWeight: base.fontFamily100,
+    marginInlineStart: system.space.x4,
+});
+const imageStyles = createStyles({
+    width: '100%',
+    height: 'auto',
+});
+const borderStyles = createStyles({
+    borderBottom: `1px solid ${base.blueberry200}`,
+    marginBottom: system.space.x2,
+});
+const gridStyles = createStyles({
+    maxHeight: 320,
+    gridTemplateRows: '1fr 1fr 2fr 1fr',
+    display: 'grid',
+});
+const linkStyles = createStyles({
+    alignSelf: 'end',
+    marginTop: system.space.x3,
+});
 export const WelcomePage = () => {
-    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, 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' } })),
-        React.createElement(Text, { typeLevel: "body.medium" },
-            ' ',
-            "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(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 }),
-                React.createElement(Card.Heading, null, "Getting Started"),
-                React.createElement(Card.Body, null,
-                    React.createElement(Text, null, "For all things getting started including helpful guides and docs.")),
-                React.createElement(Grid.Item, { as: Hyperlink, alignSelf: "end", marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs" },
-                    ' ',
-                    "Getting Started Guide")),
-            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
-                React.createElement(SystemIcon, { color: colors.blueberry400, icon: tokensIcon, colorHover: colors.blueberry400, size: 60 }),
-                React.createElement(Card.Heading, null, "Tokens"),
-                React.createElement(Card.Body, null,
-                    React.createElement(Text, null, "Tokens are the smallest pieces of our Design System with the primary function of storing UI information.")),
-                React.createElement(Grid.Item, { alignSelf: "end", as: Hyperlink, marginTop: "xs", href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview" },
-                    ' ',
-                    "View Our Tokens")),
-            React.createElement(Grid, { as: Card, gridTemplateRows: "1fr 1fr 2fr 1fr", depth: "none", display: "grid", maxHeight: 320 },
-                React.createElement(SystemIcon, { color: colors.greenApple400, icon: shapesIcon, size: 60, colorHover: colors.greenApple400 }),
-                React.createElement(Card.Heading, null, "Assets"),
-                React.createElement(Card.Body, null,
-                    React.createElement(Text, null, "Assets are graphics which help communicate meaning or highlight areas of interaction to our users.")),
-                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(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",
-        React.createElement(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react" })));
+    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsxs(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', left: '10%' }, children: [_jsx(Text, { typeLevel: "title.medium", cs: textStyles, children: "Canvas Kit" }), _jsxs(Text, { typeLevel: "title.medium", cs: [textStyles, versionStyles], children: ["v", version] })] }), _jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles })] }), _jsxs(Text, { typeLevel: "body.medium", children: ["This project provides a set of components for the Workday Canvas Design System that can be used to implement user experiences consistent with", _jsx(ExternalHyperlink, { href: "https://canvas.workdaydesign.com/", iconLabel: "Open docs in new window", children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Quick Links" }), _jsxs(Grid, { gridAutoColumns: "auto", gridTemplateColumns: "repeat(auto-fill, minmax(250px, 1fr))", gridGap: "s", children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.cantaloupe400, colorHover: base.cantaloupe400, icon: rocketIcon, size: 60 }), _jsx(Card.Heading, { children: "Getting Started" }), _jsx(Card.Body, { children: _jsx(Text, { children: "For all things getting started including helpful guides and docs." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/guides-getting-started--docs", children: "Getting Started Guide" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.blueberry400, icon: tokensIcon, colorHover: base.blueberry400, size: 60 }), _jsx(Card.Heading, { children: "Tokens" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Tokens are the smallest pieces of our Design System with the primary function of storing UI information." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/tokens--overview", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(SystemIcon, { color: base.greenApple400, icon: shapesIcon, size: 60, colorHover: base.greenApple400 }), _jsx(Card.Heading, { children: "Assets" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Assets are graphics which help communicate meaning or highlight areas of interaction to our users." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/assets-icons--overview", children: "View Assets" })] })] }), _jsx(Heading, { size: "medium", className: borderStyles, children: "Installation" }), _jsx(Text, { children: "To get started using Canvas Kit React first add or install the module to your existing React project" }), _jsx(InstallBlock, { command: "yarn add", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" }), "or", _jsx(InstallBlock, { command: "npm install", packageName: "@workday/canvas-kit-react @workday/canvas-tokens-web" })] }) }));
 };

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

@@ -324,7 +324,7 @@ const MyComboboxInput = createSubcomponent(TextInput)({
 **PRs:** [#2865](https://github.com/Workday/canvas-kit/pull/2865),
 [#2881](https://github.com/Workday/canvas-kit/pull/2881),
 [#2934](https://github.com/Workday/canvas-kit/pull/2934),
-[2973](https://github.com/Workday/canvas-kit/pull/2973)
+[#2973](https://github.com/Workday/canvas-kit/pull/2973)
 
 We've promoted FormField from [Preview](#preview) to [Main](#main). The following changes has been
 made to provide more flexibility and better explicit components when using inputs.