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

package/dist/es6/mdx/accessibility/examples/SidePanelWithNavigation.js

@@ -1,16 +1,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from 'react';
-import { system } from '@workday/canvas-tokens-web';
 import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
-import { Flex } from '@workday/canvas-kit-react/layout';
-import { Heading, Subtext } from '@workday/canvas-kit-react/text';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { Expandable } from '@workday/canvas-kit-react/expandable';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Flex } from '@workday/canvas-kit-react/layout';
 import { Menu } from '@workday/canvas-kit-react/menu';
-import { birthdayIcon, checkIcon, ribbonIcon } from '@workday/canvas-system-icons-web';
-import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { Heading, Subtext } from '@workday/canvas-kit-react/text';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { birthdayIcon, checkIcon, ribbonIcon, } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 const data = {
     bestsellers: {
         icon: ribbonIcon,
@@ -32,37 +32,37 @@ const stylesOverride = {
         backgroundColor: system.color.bg.alt.default,
     }),
     heading: createStyles({
-        margin: system.space.zero,
+        margin: '0',
     }),
     toggleBtn: createStyles({
-        top: system.space.zero,
+        top: '0',
     }),
     accordionContainer: createStyles({
         listStyle: 'none',
         flexDirection: 'column',
-        rowGap: system.space.zero,
-        paddingInlineStart: system.space.zero,
+        rowGap: '0',
+        paddingInlineStart: '0',
     }),
     accordionIcon: createStyles({
         verticalAlign: 'middle',
-        padding: system.space.x1,
+        padding: system.padding.xxs,
     }),
     accordionSubText: createStyles({
-        margin: system.space.zero,
+        margin: '0',
     }),
     listContainer: createStyles({
         listStyle: 'none',
-        padding: system.space.x4,
+        padding: system.padding.md,
     }),
     compactListContainer: createStyles({
         listStyle: 'none',
-        padding: system.space.x4,
+        padding: system.padding.md,
         flexDirection: 'column',
-        marginTop: system.space.x8,
+        marginTop: system.gap.xl,
     }),
     links: createStyles({
         textDecoration: 'none',
-        padding: system.space.x4,
+        padding: system.padding.md,
     }),
     linkCheck: createStyles({
         marginLeft: 'auto',

package/dist/es6/mdx/accessibility/examples/SidePanelWithOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SidePanelWithOverlay.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithOverlay.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW,+CAgBvB,CAAC"}
+{"version":3,"file":"SidePanelWithOverlay.d.ts","sourceRoot":"","sources":["../../../../../mdx/accessibility/examples/SidePanelWithOverlay.tsx"],"names":[],"mappings":"AA2BA,eAAO,MAAM,WAAW,+CAgBvB,CAAC"}

package/dist/es6/mdx/accessibility/examples/SidePanelWithOverlay.js

@@ -1,26 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SidePanel, useSidePanel } from '@workday/canvas-kit-preview-react/side-panel';
-import { Flex, Box } from '@workday/canvas-kit-react/layout';
+import { Box, Flex } from '@workday/canvas-kit-react/layout';
 import { Heading } from '@workday/canvas-kit-react/text';
 import { createStyles, px2rem } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
 const stylesOverride = {
     panelContainer: createStyles({
         height: px2rem(320),
-        backgroundColor: system.color.bg.alt.soft,
+        backgroundColor: system.color.surface.alt.default,
         position: 'relative',
     }),
     panelContent: createStyles({
         alignItems: 'center',
-        paddingY: system.space.x4,
-        paddingX: system.space.x4,
+        padding: system.padding.md,
     }),
     panel: createStyles({
         zIndex: 1,
     }),
     overlay: createStyles({
         position: 'absolute',
-        background: system.color.bg.overlay,
+        background: system.color.surface.overlay.scrim,
         height: '100%',
         width: '100%',
     }),

package/dist/es6/mdx/accessibility/examples/Table/WithColumnHeaderFilters.js

@@ -1,18 +1,18 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { PrimaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
 import { AriaLiveRegion, createComponent, useUniqueId } from '@workday/canvas-kit-react/common';
-import { Flex } from '@workday/canvas-kit-react/layout';
 import { FormField } from '@workday/canvas-kit-react/form-field';
-import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
-import { Popup, usePopupModel, useCloseOnOutsideClick, useCloseOnEscape, useInitialFocus, useReturnFocus, useFocusRedirect, } from '@workday/canvas-kit-react/popup';
-import { PrimaryButton, TertiaryButton } from '@workday/canvas-kit-react/button';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { Popup, useCloseOnEscape, useCloseOnOutsideClick, useFocusRedirect, useInitialFocus, usePopupModel, useReturnFocus, } from '@workday/canvas-kit-react/popup';
 import { Table } from '@workday/canvas-kit-react/table';
 import { Text } from '@workday/canvas-kit-react/text';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { InputGroup, TextInput } from '@workday/canvas-kit-react/text-input';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { createStyles } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
 import { filterIcon, searchIcon } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 const countryData = [
     { country: 'Australia', capital: 'Canberra', population: 25690000 },
     { country: 'Bahamas', capital: 'Nassau', population: 407906 },
@@ -36,7 +36,7 @@ const countryData = [
     { country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
 ];
 const textStyles = createStyles({
-    paddingInlineStart: system.space.x3,
+    paddingInlineStart: system.padding.md,
 });
 const FilterableColumnHeader = createComponent('th')({
     displayName: 'FilterableColumnHeader',
@@ -95,7 +95,7 @@ export const FilterableColumnHeaders = () => {
             });
         }, 400);
     }
-    return (_jsxs(Table, { maxHeight: "40rem", children: [_jsxs(Table.Caption, { children: ["Population Listed by Country (2021)", _jsxs(AriaLiveRegion, { cs: textStyles, children: [filteredData.length, " of ", countryData.length, " items"] })] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(FilterableColumnHeader, { label: "Country", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Capital", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Population", onFilter: handleColFilters })] }) }), _jsx(Table.Body, { children: filteredData.map(item => {
+    return (_jsxs(Table, { cs: { maxHeight: '40rem' }, children: [_jsxs(Table.Caption, { children: ["Population Listed by Country (2021)", _jsxs(AriaLiveRegion, { cs: textStyles, children: [filteredData.length, " of ", countryData.length, " items"] })] }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(FilterableColumnHeader, { label: "Country", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Capital", onFilter: handleColFilters }), _jsx(FilterableColumnHeader, { label: "Population", onFilter: handleColFilters })] }) }), _jsx(Table.Body, { children: filteredData.map(item => {
                     return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
                 }) })] }));
 };

package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithExpandableRows.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithExpandableRows.tsx"],"names":[],"mappings":"AA+LA,eAAO,MAAM,cAAc,+CAwB1B,CAAC"}
+{"version":3,"file":"WithExpandableRows.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithExpandableRows.tsx"],"names":[],"mappings":"AA8LA,eAAO,MAAM,cAAc,+CAwB1B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Table/WithExpandableRows.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
 import { StatusIndicator } from '@workday/canvas-kit-preview-react/status-indicator';
-import { Table } from '@workday/canvas-kit-react/table';
 import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { generateUniqueId } from '@workday/canvas-kit-react/common';
+import { Table } from '@workday/canvas-kit-react/table';
 import { Heading, Subtext } from '@workday/canvas-kit-react/text';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { createStyles } from '@workday/canvas-kit-styling';
@@ -93,8 +93,8 @@ const autoData = [
 const expandableSectionStyles = createStyles({
     alignItems: 'flex-start',
     display: 'flex',
-    gap: system.space.x4,
-    padding: system.space.x8,
+    gap: system.gap.md,
+    padding: system.padding.xxl,
 });
 const expandableHeadingStyles = createStyles({
     margin: 0,
@@ -104,12 +104,12 @@ const expandableListStyles = createStyles({
     listStyle: 'none',
     margin: 0,
     padding: 0,
-    gap: system.space.x2,
+    gap: system.gap.sm,
 });
 function ExpandableRow({ data }) {
     const [rowExpanded, setRowExpanded] = React.useState(false);
-    return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { gridTemplateColumns: "4rem repeat(4, 1fr)", children: [_jsx(Table.Cell, { children: _jsx(Tooltip, { title: `${data.brand} ${data.model}`, children: _jsx(TertiaryButton, { size: "small", icon: rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon, "aria-expanded": rowExpanded, onClick: () => setRowExpanded(!rowExpanded) }) }) }), _jsx(Table.Header, { scope: "row", children: data.brand }), _jsx(Table.Cell, { children: data.model }), _jsx(Table.Cell, { children: data.year }), _jsx(Table.Cell, { children: data.price })] }), rowExpanded && (_jsx(Table.Row, { children: _jsxs(Table.Cell, { colSpan: 5, cs: expandableSectionStyles, children: [_jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Status" }), _jsx(StatusIndicator, { variant: "blue", children: data.orderStatus })] }), _jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Specifications" }), _jsxs("ul", { className: expandableListStyles, children: [_jsxs(Subtext, { as: "li", size: "large", children: ["Engine: ", data.engine] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Transmission: ", data.transmission] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Horsepower: ", data.horsepower] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Torque: ", data.torque] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Curb Weight: ", data.curbWeight] })] })] })] }) }))] }));
+    return (_jsxs(_Fragment, { children: [_jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, { children: _jsx(Tooltip, { title: `${data.brand} ${data.model}`, children: _jsx(TertiaryButton, { size: "small", icon: rowExpanded ? chevronDownSmallIcon : chevronRightSmallIcon, "aria-expanded": rowExpanded, onClick: () => setRowExpanded(!rowExpanded) }) }) }), _jsx(Table.Header, { scope: "row", children: data.brand }), _jsx(Table.Cell, { children: data.model }), _jsx(Table.Cell, { children: data.year }), _jsx(Table.Cell, { children: data.price })] }), rowExpanded && (_jsx(Table.Row, { children: _jsxs(Table.Cell, { colSpan: 5, cs: expandableSectionStyles, children: [_jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Status" }), _jsx(StatusIndicator, { variant: "blue", children: data.orderStatus })] }), _jsxs("div", { children: [_jsx(Subtext, { as: "h4", size: "large", cs: expandableHeadingStyles, children: "Specifications" }), _jsxs("ul", { className: expandableListStyles, children: [_jsxs(Subtext, { as: "li", size: "large", children: ["Engine: ", data.engine] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Transmission: ", data.transmission] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Horsepower: ", data.horsepower] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Torque: ", data.torque] }), _jsxs(Subtext, { as: "li", size: "large", children: ["Curb Weight: ", data.curbWeight] })] })] })] }) }))] }));
 }
 export const ExpandableRows = () => {
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Showroom Inventory" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { gridTemplateColumns: "4rem repeat(4, 1fr)", children: [_jsx(Table.Cell, {}), _jsx(Table.Header, { scope: "col", children: "Make" }), _jsx(Table.Header, { scope: "col", children: "Model" }), _jsx(Table.Header, { scope: "col", children: "Year" }), _jsx(Table.Header, { scope: "col", children: "Price" })] }) }), _jsx(Table.Body, { children: autoData.map(item => (_jsx(ExpandableRow, { data: item }, item.id))) })] })] }));
+    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Showroom Inventory" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsx(Table.Head, { children: _jsxs(Table.Row, { cs: { gridTemplateColumns: '4rem repeat(4, 1fr)' }, children: [_jsx(Table.Cell, {}), _jsx(Table.Header, { scope: "col", children: "Make" }), _jsx(Table.Header, { scope: "col", children: "Model" }), _jsx(Table.Header, { scope: "col", children: "Year" }), _jsx(Table.Header, { scope: "col", children: "Price" })] }) }), _jsx(Table.Body, { children: autoData.map(item => (_jsx(ExpandableRow, { data: item }, item.id))) })] })] }));
 };

package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"WithFormFields.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithFormFields.tsx"],"names":[],"mappings":"AAwHA,eAAO,MAAM,cAAc,+CAiC1B,CAAC"}
+{"version":3,"file":"WithFormFields.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithFormFields.tsx"],"names":[],"mappings":"AAyHA,eAAO,MAAM,cAAc,+CAiC1B,CAAC"}

package/dist/es6/mdx/accessibility/examples/Table/WithFormFields.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { Checkbox } from '@workday/canvas-kit-react/checkbox';
 import { useUniqueId } from '@workday/canvas-kit-react/common';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { system } from '@workday/canvas-tokens-web';
-import { trashIcon } from '@workday/canvas-system-icons-web';
-import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { Table } from '@workday/canvas-kit-react/table';
-import { Checkbox } from '@workday/canvas-kit-react/checkbox';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
+import { TextInput } from '@workday/canvas-kit-react/text-input';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
+import { createStyles } from '@workday/canvas-kit-styling';
+import { trashIcon } from '@workday/canvas-system-icons-web';
+import { system } from '@workday/canvas-tokens-web';
 const rowStyles = createStyles({
     gridTemplateColumns: '24rem 12rem 7rem 7rem',
 });
@@ -23,16 +23,16 @@ const currencyInputContainer = createStyles({
 });
 const dollarPrefix = createStyles({
     position: 'absolute',
-    left: system.space.x2,
+    left: system.gap.sm,
     top: '50%',
     transform: 'translateY(-50%)',
-    color: system.color.text.default,
+    color: system.color.fg.default,
     pointerEvents: 'none',
     zIndex: 1,
-    ...system.type.subtext.large,
+    ...system.type.subtext.lg,
 });
 const currencyInput = createStyles({
-    paddingLeft: system.space.x4, // Make room for dollar sign
+    paddingInlineStart: system.padding.md, // Make room for dollar sign
 });
 const expensesData = [
     'Rent',

package/dist/es6/mdx/accessibility/examples/Table/WithSelectableRows.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from 'react';
-import { Table } from '@workday/canvas-kit-react/table';
-import { Heading } from '@workday/canvas-kit-react/text';
 import { Checkbox } from '@workday/canvas-kit-react/checkbox';
 import { createComponent, generateUniqueId } from '@workday/canvas-kit-react/common';
+import { Table } from '@workday/canvas-kit-react/table';
+import { Heading } from '@workday/canvas-kit-react/text';
 import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { createStencil, createStyles } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
@@ -15,13 +15,13 @@ const selectableRowStencil = createStencil({
     modifiers: {
         isSelected: {
             true: {
-                backgroundColor: system.color.bg.primary.soft,
+                backgroundColor: system.color.brand.surface.primary.default,
             },
         },
     },
 });
 const tableHeaderStyles = createStyles({
-    backgroundColor: system.color.bg.alt.soft,
+    backgroundColor: system.color.surface.alt.default,
 });
 const tableCellStyles = createStyles({
     backgroundColor: 'transparent',

package/dist/es6/mdx/accessibility/examples/Table/WithSortableColumnHeaders.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { createComponent } from '@workday/canvas-kit-react/common';
 import { Table } from '@workday/canvas-kit-react/table';
-import { Tooltip } from '@workday/canvas-kit-react/tooltip';
-import { TertiaryButton } from '@workday/canvas-kit-react/button';
 import { Text } from '@workday/canvas-kit-react/text';
-import { sortDownIcon, sortUpIcon } from '@workday/canvas-system-icons-web';
+import { Tooltip } from '@workday/canvas-kit-react/tooltip';
 import { createStyles } from '@workday/canvas-kit-styling';
+import { arrowDownSmallIcon, arrowUpSmallIcon } from '@workday/canvas-system-icons-web';
 import { system } from '@workday/canvas-tokens-web';
 const countryData = [
     { country: 'Australia', capital: 'Canberra', population: 25690000 },
@@ -82,10 +82,10 @@ function headerRowReducer(state, action) {
 }
 const getSortIcon = (sortOrder) => {
     if (sortOrder === 'ascending') {
-        return sortUpIcon;
+        return arrowUpSmallIcon;
     }
     else if (sortOrder === 'descending') {
-        return sortDownIcon;
+        return arrowDownSmallIcon;
     }
     else {
         return undefined;
@@ -98,7 +98,7 @@ const SortableColumnHeader = createComponent('th')({
     },
 });
 const textStyles = createStyles({
-    paddingInlineStart: system.space.x3,
+    paddingInlineStart: system.padding.sm,
 });
 export const SortableColumnHeaders = () => {
     const [headerRowState, headerRowDispatch] = React.useReducer(headerRowReducer, initialHeaderRowState);
@@ -108,7 +108,7 @@ export const SortableColumnHeaders = () => {
             payload: countryData,
         });
     }
-    return (_jsxs(Table, { maxHeight: "40rem", children: [_jsx(Table.Caption, { children: "Population Listed by Country (2021)" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(SortableColumnHeader, { label: "Country", sortOrder: headerRowState.column1SortDirection, onSortAction: sortColumnHandler, children: "Country" }), _jsx(SortableColumnHeader, { label: "Capital", sortOrder: headerRowState.column2SortDirection, onSortAction: sortColumnHandler, children: "Capital" }), _jsx(SortableColumnHeader, { label: "Population", sortOrder: headerRowState.column3SortDirection, onSortAction: sortColumnHandler, children: "Population" })] }) }), _jsx(Table.Body, { children: countryData.map(item => {
+    return (_jsxs(Table, { cs: { maxHeight: '40rem' }, children: [_jsx(Table.Caption, { children: "Population Listed by Country (2021)" }), _jsx(Table.Head, { children: _jsxs(Table.Row, { children: [_jsx(SortableColumnHeader, { label: "Country", sortOrder: headerRowState.column1SortDirection, onSortAction: sortColumnHandler, children: "Country" }), _jsx(SortableColumnHeader, { label: "Capital", sortOrder: headerRowState.column2SortDirection, onSortAction: sortColumnHandler, children: "Capital" }), _jsx(SortableColumnHeader, { label: "Population", sortOrder: headerRowState.column3SortDirection, onSortAction: sortColumnHandler, children: "Population" })] }) }), _jsx(Table.Body, { children: countryData.map(item => {
                     return (_jsxs(Table.Row, { children: [_jsx(Table.Header, { scope: "row", children: _jsx(Text, { cs: textStyles, children: item.country }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.capital }) }), _jsx(Table.Cell, { children: _jsx(Text, { cs: textStyles, children: item.population.toLocaleString() }) })] }, item.country));
                 }) })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CAqCrE,CAAC"}
+{"version":3,"file":"installBlock.d.ts","sourceRoot":"","sources":["../../../mdx/installBlock.tsx"],"names":[],"mappings":"AAOA,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAoBD,eAAO,MAAM,YAAY,6BAA4B,iBAAiB,4CAuBrE,CAAC"}

package/dist/es6/mdx/installBlock.js

@@ -1,9 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { PrimaryButton } from '@workday/canvas-kit-react/button';
 import { Flex } from '@workday/canvas-kit-react/layout';
+import { createStyles } from '@workday/canvas-kit-styling';
 import { system } from '@workday/canvas-tokens-web';
-import { PrimaryButton } from '@workday/canvas-kit-react/button';
-import { cssVar } from '@workday/canvas-kit-styling';
+const blockStyles = createStyles({
+    padding: system.padding.xs,
+    backgroundColor: system.color.surface.contrast.default,
+    borderRadius: system.shape.md,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    flexWrap: 'wrap',
+});
+const codeCommandStyles = createStyles({
+    color: system.color.fg.info.default,
+    marginInlineEnd: system.gap.sm,
+});
+const codePackageStyles = createStyles({
+    color: system.color.fg.inverse,
+});
 export const InstallBlock = ({ command, packageName }) => {
     const commandRef = React.useRef(null);
     const [copied, setCopied] = React.useState(false);
@@ -16,8 +31,5 @@ export const InstallBlock = ({ command, packageName }) => {
             navigator.clipboard.writeText(commandRef.current.innerText);
         }
     };
-    return (_jsxs(Flex, { padding: "xs", backgroundColor: system.color.bg.contrast.default, borderRadius: "m", justifyContent: "space-between", alignItems: "center", flexWrap: "wrap", children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { style: {
-                            color: cssVar(system.color.fg.primary.soft),
-                            marginInlineEnd: cssVar(system.space.x2),
-                        }, children: command }), _jsx("span", { style: { color: cssVar(system.color.fg.inverse) }, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
+    return (_jsxs(Flex, { cs: blockStyles, children: [_jsxs("pre", { ref: commandRef, children: [_jsx("span", { className: codeCommandStyles, children: command }), _jsx("span", { className: codePackageStyles, children: packageName })] }), _jsx(PrimaryButton, { variant: "inverse", onClick: handleCopy, size: "small", children: copied ? 'Copied' : 'Copy' })] }));
 };

package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../mdx/tokens/StorybookInformationHighlight/index.tsx"],"names":[],"mappings":"AAIA,eAAO,MAAM,6BAA6B,2EAQvC,GAAG,4CAaL,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../mdx/tokens/StorybookInformationHighlight/index.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,6BAA6B,2EAQvC,GAAG,4CAWL,CAAC"}

package/dist/es6/mdx/tokens/StorybookInformationHighlight/index.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ExternalHyperlink } from '@workday/canvas-kit-react/button';
-import { InformationHighlight } from '@workday/canvas-kit-preview-react/information-highlight';
-import { Unstyled } from '@storybook/blocks';
+import { InformationHighlight } from '@workday/canvas-kit-react/information-highlight';
 export const StorybookInformationHighlight = ({ variant, emphasis, title, description, link, linkText, isExternal, }) => {
-    return (_jsx(Unstyled, { children: _jsxs(InformationHighlight, { variant: variant, emphasis: emphasis, children: [_jsx(InformationHighlight.Icon, {}), _jsx(InformationHighlight.Heading, { children: title }), _jsx(InformationHighlight.Body, { children: description }), _jsx(InformationHighlight.Link, { as: isExternal && ExternalHyperlink, href: link, children: linkText })] }) }));
+    return (_jsxs(InformationHighlight, { className: "sb-unstyled", variant: variant, emphasis: emphasis, children: [_jsx(InformationHighlight.Icon, {}), _jsx(InformationHighlight.Heading, { children: title }), _jsx(InformationHighlight.Body, { children: description }), _jsx(InformationHighlight.Link, { as: isExternal && ExternalHyperlink, href: link, children: linkText })] }));
 };

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

@@ -1 +1 @@
-{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AA0CA,eAAO,MAAM,YAAY,+CAmDxB,CAAC"}
+{"version":3,"file":"versionsTable.d.ts","sourceRoot":"","sources":["../../../mdx/versionsTable.tsx"],"names":[],"mappings":"AA+CA,eAAO,MAAM,YAAY,+CAoDxB,CAAC"}

package/dist/es6/mdx/versionsTable.js

@@ -1,7 +1,7 @@
 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';
+import { StatusIndicator, } from '@workday/canvas-kit-preview-react/status-indicator';
+import { Table } from '@workday/canvas-kit-react/table';
 // @ts-ignore: Cannot find module error
 import { version } from '../../../lerna.json';
 const statusIndicators = {
@@ -38,7 +38,7 @@ export const VersionTable = () => {
     const minVersion = 6;
     const currentMajorVersion = Number(version === null || version === void 0 ? void 0 : version.split('.')[0]);
     React.useEffect(() => {
-        let arr = [];
+        const arr = [];
         for (let i = minVersion; i <= currentMajorVersion; i++) {
             arr.push({
                 versionNumber: i,
@@ -48,6 +48,7 @@ export const VersionTable = () => {
             });
         }
         setVersions(arr);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, []);
     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()

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

@@ -1 +1 @@
-{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAqDA,eAAO,MAAM,WAAW,+CAmGvB,CAAC"}
+{"version":3,"file":"welcomePage.d.ts","sourceRoot":"","sources":["../../../mdx/welcomePage.tsx"],"names":[],"mappings":"AAsDA,eAAO,MAAM,WAAW,+CAqGvB,CAAC"}

package/dist/es6/mdx/welcomePage.js

@@ -1,50 +1,54 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // @ts-ignore: Cannot find module error
-import headerImage from './ck-banner.jpg';
+import { ExternalHyperlink, Hyperlink } from '@workday/canvas-kit-react/button';
+import { Card } from '@workday/canvas-kit-react/card';
+import { Graphic } from '@workday/canvas-kit-react/icon';
+import { Box, Flex, Grid } from '@workday/canvas-kit-react/layout';
+import { Heading, Text } from '@workday/canvas-kit-react/text';
+import { createStyles, px2rem } from '@workday/canvas-kit-styling';
+import { system } from '@workday/canvas-tokens-web';
 // @ts-ignore: Cannot find module error
-import componentsImage from './Components.png';
+import { version } from '../../../lerna.json';
 // @ts-ignore: Cannot find module error
-import tokensImage from './Tokens.png';
+import componentsImage from './Components.png';
 // @ts-ignore: Cannot find module error
 import stylingImage from './Styling.png';
-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 { system } from '@workday/canvas-tokens-web';
-import { createStyles } from '@workday/canvas-kit-styling';
-import { Graphic } from '@workday/canvas-kit-react/icon';
 // @ts-ignore: Cannot find module error
-import { version } from '../../../lerna.json';
+import tokensImage from './Tokens.png';
+import headerImage from './ck-banner.jpg';
+import { InstallBlock } from './installBlock';
 const parentFlexStyles = createStyles({
     display: 'flex',
     flexDirection: 'column',
-    gap: system.space.x4,
-    marginBottom: system.space.x6,
+    gap: system.gap.md,
+    marginBottom: system.gap.lg,
 });
 const bannerTextStyles = createStyles({
-    color: system.color.text.inverse,
+    color: system.color.fg.inverse,
     fontSize: '5vmin',
     lineHeight: '5vmin',
 });
 const versionStyles = createStyles({
-    ...system.type.body.medium,
-    marginInlineStart: system.space.x4,
+    ...system.type.body.md,
+    marginInlineStart: system.gap.md,
 });
 const imageStyles = createStyles({
     width: '100%',
     height: 'auto',
 });
 const gridStyles = createStyles({
-    maxHeight: 400,
+    maxHeight: px2rem(400),
     gridTemplateRows: '1fr 1fr 2fr 1fr',
     display: 'grid',
 });
 const linkStyles = createStyles({
     alignSelf: 'end',
-    marginTop: system.space.x3,
+    marginTop: px2rem(12),
 });
 export const WelcomePage = () => {
-    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _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", cs: { marginInlineStart: system.space.x1 }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", 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(Graphic, { src: { url: componentsImage } }), _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(Graphic, { src: { url: tokensImage } }), _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: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: stylingImage } }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", 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" })] }) }));
+    return (_jsx("div", { className: "sb-unstyled", children: _jsxs("div", { className: parentFlexStyles, children: [_jsxs(Box, { cs: { overflow: 'hidden', position: 'relative' }, children: [_jsx("img", { src: headerImage, alt: "banner with canvas kit logo and version", className: imageStyles }), _jsx(Flex, { cs: { flexDirection: 'row', position: 'absolute', top: '45%', right: '5%' }, children: _jsxs(Text, { typeLevel: "title.medium", cs: [bannerTextStyles, versionStyles], children: ["v", version] }) })] }), _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", cs: { marginInlineStart: system.gap.xs }, children: "Workday Design Principles." })] }), _jsx(Heading, { size: "medium", children: "Quick Links" }), _jsxs(Grid, { cs: {
+                        gridAutoColumns: 'auto',
+                        gridTemplateColumns: 'repeat(auto-fill, minmax(250px, 1fr))',
+                        gridGap: system.gap.sm,
+                    }, children: [_jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: componentsImage } }), _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(Graphic, { src: { url: tokensImage } }), _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: ExternalHyperlink, className: linkStyles, href: "https://workday.github.io/canvas-tokens/?path=/docs/docs-getting-started--docs", children: "View Our Tokens" })] }), _jsxs(Grid, { as: Card, className: gridStyles, children: [_jsx(Graphic, { src: { url: stylingImage } }), _jsx(Card.Heading, { children: "Styling" }), _jsx(Card.Body, { children: _jsx(Text, { children: "Learn how to style Canvas components using tokens, theming, and custom CSS approaches." }) }), _jsx(Grid.Item, { as: Hyperlink, className: linkStyles, href: "https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs", children: "Get Started" })] })] }), _jsx(Heading, { size: "medium", 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/es6/utils/parseSpecFile.d.ts

@@ -0,0 +1,24 @@
+export interface DescribeBlock {
+    type: 'describe';
+    name: string;
+    children: (DescribeBlock | ItBlock)[];
+}
+export interface ItBlock {
+    type: 'it';
+    name: string;
+}
+export interface FileBlock {
+    type: 'file';
+    name: string;
+    children: (DescribeBlock | ItBlock)[];
+}
+/**
+ * Reads a spec file by getting the file contents as a string, passing through the TypeScript
+ * transpiler, setting up custom `describe`, `it`, `beforeEach`, etc functions and runs the file
+ * contents through `eval()` with those custom functions to extract out a JSON object representing
+ * the structure of a Spec file. We use `eval` instead of an AST parser to handle meta coding like
+ * `[a, b].forEach(() => { it('...') })`. Running the contents through a JavaScript context means
+ * the file contents can be extracted via any runtime tricks used in spec files.
+ */
+export declare function parseSpecFile(file: string): Promise<FileBlock | null>;
+//# sourceMappingURL=parseSpecFile.d.ts.map

package/dist/es6/utils/parseSpecFile.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"parseSpecFile.d.ts","sourceRoot":"","sources":["../../../utils/parseSpecFile.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,aAAa,GAAG,OAAO,CAAC,EAAE,CAAC;CACvC;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,IAAI,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,CAAC,aAAa,GAAG,OAAO,CAAC,EAAE,CAAC;CACvC;AAED;;;;;;;GAOG;AACH,wBAAsB,aAAa,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,SAAS,GAAG,IAAI,CAAC,CA+E3E"}

package/dist/es6/utils/parseSpecFile.js

@@ -0,0 +1,82 @@
+import fs from 'node:fs/promises';
+import path from 'node:path';
+import typescript from 'typescript';
+/**
+ * Reads a spec file by getting the file contents as a string, passing through the TypeScript
+ * transpiler, setting up custom `describe`, `it`, `beforeEach`, etc functions and runs the file
+ * contents through `eval()` with those custom functions to extract out a JSON object representing
+ * the structure of a Spec file. We use `eval` instead of an AST parser to handle meta coding like
+ * `[a, b].forEach(() => { it('...') })`. Running the contents through a JavaScript context means
+ * the file contents can be extracted via any runtime tricks used in spec files.
+ */
+export async function parseSpecFile(file) {
+    const [_, fileName] = file.match(/.+(cypress\/.+)$/) || [];
+    if (fileName) {
+        const contents = await fs
+            .readFile(file)
+            .then(contents => contents.toString())
+            .then(contents => contents.replace(/import (.+) from .+/g, (substr, imports) => {
+            if (imports.includes('{')) {
+                return `const ${imports.replace(/[{}]/g, '')} = () => {}`;
+            }
+            if (/react/g.test(imports)) {
+                return `const React = {createElement: () => {}}`;
+            }
+            return '';
+        })) // remove imports
+            .then(contents => typescript.transpile(contents, { jsx: typescript.JsxEmit.React }))
+            .then(contents => {
+            let children = [];
+            // eslint-disable-next-line no-empty-function
+            const noop = () => { };
+            // define for the eval()
+            // @ts-ignore
+            const before = noop;
+            // @ts-ignore
+            const beforeEach = noop;
+            // @ts-ignore
+            const after = noop;
+            // @ts-ignore
+            const afterEach = noop;
+            const describe = (name, optionsOrCb, cb) => {
+                const childrenBefore = children;
+                const obj = {
+                    type: 'describe',
+                    name,
+                    children: [],
+                };
+                children.push(obj);
+                children = obj.children;
+                if (typeof optionsOrCb === 'function') {
+                    optionsOrCb();
+                }
+                else if (typeof cb === 'function') {
+                    cb();
+                }
+                children = childrenBefore;
+            };
+            describe.skip = noop;
+            describe.only = noop;
+            // @ts-ignore
+            const context = describe;
+            const it = (name) => {
+                const obj = {
+                    type: 'it',
+                    name,
+                };
+                children.push(obj);
+            };
+            it.skip = noop;
+            it.only = noop;
+            // eslint-disable-next-line no-eval
+            eval(contents);
+            return {
+                type: 'file',
+                name: path.basename(file).replace(`.spec${path.extname(file)}`, ''),
+                children,
+            };
+        });
+        return contents;
+    }
+    return null;
+}