@workday/canvas-kit-docs 16.0.0-alpha.0499-next.0 → 16.0.0

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

@@ -1,89 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-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';
-const selectableRowStencil = createStencil({
-    base: {
-        gridTemplateColumns: '3.5rem repeat(2, 1fr)',
-        transition: 'background-color 200ms',
-    },
-    modifiers: {
-        isSelected: {
-            true: {
-                backgroundColor: system.color.brand.surface.primary.default,
-            },
-        },
-    },
-});
-const tableHeaderStyles = createStyles({
-    backgroundColor: system.color.surface.alt.default,
-});
-const tableCellStyles = createStyles({
-    backgroundColor: 'transparent',
-});
-const SelectableRow = createComponent('tr')({
-    displayName: 'SelectableRow',
-    Component: ({ onSelect, rowData }) => {
-        return (_jsxs(Table.Row, { cs: selectableRowStencil({ isSelected: rowData.checked }), children: [_jsx(Table.Cell, { cs: tableCellStyles, children: _jsx(Tooltip, { title: rowData.name, children: _jsx(Checkbox, { checked: rowData.checked, onChange: onSelect }) }) }), _jsx(Table.Header, { cs: tableCellStyles, scope: "row", children: rowData.name }), _jsx(Table.Cell, { cs: tableCellStyles, children: rowData.amount })] }));
-    },
-});
-const pizzaToppingData = [
-    { name: 'Pepperoni', amount: '2.5 oz.', checked: false },
-    { name: 'Mozzarella', amount: '5 oz.', checked: false },
-    { name: 'Basil', amount: '10 Leaves', checked: false },
-    { name: 'Roasted Red Peppers', amount: '3 oz.', checked: false },
-    { name: 'Mushrooms', amount: '2 oz.', checked: false },
-];
-const headingID = generateUniqueId();
-export const SelectableRows = () => {
-    const [selectAllState, setSelectAllState] = React.useState('unchecked');
-    const [toppings, setToppings] = React.useState(pizzaToppingData);
-    const handleToppingChange = (name) => {
-        // Toggle the selected item's checked state and update state
-        const updatedToppings = toppings.map(topping => {
-            if (topping.name === name) {
-                return { ...topping, checked: !topping.checked };
-            }
-            else {
-                return topping;
-            }
-        });
-        setToppings(updatedToppings);
-        // Update the Select All checkbox state
-        const selectedToppings = updatedToppings.filter(topping => topping.checked === true);
-        // If no toppings are selected, set the Select All checkbox to 'unchecked'
-        if (selectedToppings.length === 0) {
-            setSelectAllState('unchecked');
-            // If all toppings are selected, set the Select All checkbox to 'checked'
-        }
-        else if (selectedToppings.length === updatedToppings.length) {
-            setSelectAllState('checked');
-            // Otherwise, set the Select All checkbox to 'indeterminate'
-        }
-        else {
-            setSelectAllState('indeterminate');
-        }
-    };
-    const handleSelectAll = () => {
-        // If the Select All checkbox is in a checked or indeterminate state,
-        // update it to 'unchecked', and uncheck all topping checkboxes
-        if (selectAllState === 'checked' || selectAllState === 'indeterminate') {
-            setSelectAllState('unchecked');
-            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: false }));
-            setToppings(updatedToppingData);
-        }
-        // If the Select All checkbox is in an unchecked state,
-        // update it to 'checked', and check all topping checkboxes
-        if (selectAllState === 'unchecked') {
-            setSelectAllState('checked');
-            const updatedToppingData = toppings.map(topping => ({ ...topping, checked: true }));
-            setToppings(updatedToppingData);
-        }
-    };
-    return (_jsxs(_Fragment, { children: [_jsx(Heading, { as: "h3", id: headingID, size: "small", children: "Select your pizza toppings" }), _jsxs(Table, { "aria-labelledby": headingID, children: [_jsxs(Table.Row, { gridTemplateColumns: "3.5rem repeat(2, 1fr)", children: [_jsx(Table.Cell, { cs: tableHeaderStyles, children: _jsx(Tooltip, { title: "Select All", children: _jsx(Checkbox, { checked: selectAllState === 'checked', indeterminate: selectAllState === 'indeterminate', onChange: handleSelectAll }) }) }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Toppings" }), _jsx(Table.Header, { scope: "col", cs: tableHeaderStyles, children: "Amount" })] }), _jsx(Table.Body, { children: toppings.map(rowData => (_jsx(SelectableRow, { rowData: rowData, onSelect: () => handleToppingChange(rowData.name) }, rowData.name))) })] })] }));
-};

package/dist/es6/mdx/accessibility/examples/Table/WithSortableColumnHeaders.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"WithSortableColumnHeaders.d.ts","sourceRoot":"","sources":["../../../../../../mdx/accessibility/examples/Table/WithSortableColumnHeaders.tsx"],"names":[],"mappings":"AAwJA,eAAO,MAAM,qBAAqB,+CA4DjC,CAAC"}

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

@@ -1,114 +0,0 @@
-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 { Text } from '@workday/canvas-kit-react/text';
-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 },
-    { country: 'Bahamas', capital: 'Nassau', population: 407906 },
-    { country: 'Canada', capital: 'Ottawa', population: 38250000 },
-    { country: 'Fiji', capital: 'Suva', population: 924610 },
-    { country: 'Ghana', capital: 'Accra', population: 32830000 },
-    { country: 'Hong Kong', capital: 'City of Victoria', population: 7413000 },
-    { country: 'India', capital: 'New Delhi', population: 1408000000 },
-    { country: 'Ireland', capital: 'Dublin', population: 5033000 },
-    { country: 'Jamaica', capital: 'Kingston', population: 2828000 },
-    { country: 'Kenya', capital: 'Nairobi', population: 53010000 },
-    { country: 'Micronesia', capital: 'Palikir', population: 113131 },
-    { country: 'New Zealand', capital: 'Wellington', population: 5123000 },
-    { country: 'Philippines', capital: 'Manila', population: 113900000 },
-    { country: 'Puerto Rico', capital: 'San Juan', population: 3264000 },
-    { country: 'Samoa', capital: 'Apia', population: 218764 },
-    { country: 'Singapore', capital: 'Singapore', population: 5454000 },
-    { country: 'Tanzania', capital: 'Dodoma', population: 63590000 },
-    { country: 'United Kingdom', capital: 'London', population: 67330000 },
-    { country: 'United States', capital: 'Washington, D.C.', population: 331900000 },
-    { country: 'Zimbabwe', capital: 'Harare', population: 15990000 },
-];
-const initialHeaderRowState = {
-    column1SortDirection: 'ascending',
-    column2SortDirection: 'none',
-    column3SortDirection: 'none',
-};
-/**
- * Given the current sort order, return the next sort order
- */
-function getNextSortOrder(sortOrder) {
-    return sortOrder === 'ascending' ? 'descending' : 'ascending';
-}
-function headerRowReducer(state, action) {
-    switch (action.column) {
-        case 'Country':
-            if (state.column1SortDirection === 'ascending') {
-                action.payload.sort((a, b) => b.country.localeCompare(a.country));
-            }
-            else {
-                action.payload.sort((a, b) => a.country.localeCompare(b.country));
-            }
-            return {
-                ...initialHeaderRowState,
-                column1SortDirection: getNextSortOrder(state.column1SortDirection),
-            };
-        case 'Capital':
-            if (state.column2SortDirection === 'ascending') {
-                action.payload.sort((a, b) => b.capital.localeCompare(a.capital));
-            }
-            else {
-                action.payload.sort((a, b) => a.capital.localeCompare(b.capital));
-            }
-            return {
-                ...initialHeaderRowState,
-                column2SortDirection: getNextSortOrder(state.column2SortDirection),
-            };
-        case 'Population':
-            if (state.column3SortDirection === 'ascending') {
-                action.payload.sort((a, b) => b.population - a.population);
-            }
-            else {
-                action.payload.sort((a, b) => a.population - b.population);
-            }
-            return {
-                ...initialHeaderRowState,
-                column3SortDirection: getNextSortOrder(state.column3SortDirection),
-            };
-        default:
-            return initialHeaderRowState;
-    }
-}
-const getSortIcon = (sortOrder) => {
-    if (sortOrder === 'ascending') {
-        return arrowUpSmallIcon;
-    }
-    else if (sortOrder === 'descending') {
-        return arrowDownSmallIcon;
-    }
-    else {
-        return undefined;
-    }
-};
-const SortableColumnHeader = createComponent('th')({
-    displayName: 'SortableColumnHeader',
-    Component: ({ label, sortOrder, onSortAction, children, ...elemProps }, ref) => {
-        return (_jsx(Table.Header, { ref: ref, scope: "col", "aria-sort": sortOrder, ...elemProps, children: _jsx(Tooltip, { type: "description", title: `Sort ${getNextSortOrder(sortOrder)}`, children: _jsx(TertiaryButton, { icon: getSortIcon(sortOrder), iconPosition: "end", onClick: () => onSortAction(label), children: children }) }) }));
-    },
-});
-const textStyles = createStyles({
-    paddingInlineStart: system.padding.sm,
-});
-export const SortableColumnHeaders = () => {
-    const [headerRowState, headerRowDispatch] = React.useReducer(headerRowReducer, initialHeaderRowState);
-    function sortColumnHandler(columnName) {
-        headerRowDispatch({
-            column: columnName,
-            payload: countryData,
-        });
-    }
-    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

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

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

@@ -1 +0,0 @@
-{"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,35 +0,0 @@
-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';
-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);
-    React.useEffect(() => {
-        setTimeout(() => setCopied(false), 600);
-    }, [copied]);
-    const handleCopy = () => {
-        setCopied(true);
-        if (commandRef.current) {
-            navigator.clipboard.writeText(commandRef.current.innerText);
-        }
-    };
-    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/style-props/examples/Background.d.ts

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Background.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Background.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,UAAU,+CActB,CAAC"}

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

@@ -1,13 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    display: 'inline-block',
-    margin: 'xxs',
-    minHeight: 'xl',
-    minWidth: '8rem',
-    padding: 'xs',
-};
-export const Background = () => {
-    return (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));
-};

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Border.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Border.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,MAAM,+CAYlB,CAAC"}

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper300',
-    display: 'inline-block',
-    margin: 'xxs',
-    minHeight: 'xl',
-    minWidth: '8rem',
-    padding: 'xs',
-};
-export const Border = () => (_jsxs("div", { children: [_jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "cinnamon300", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "sourLemon300", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { borderRadius: "m", border: "solid 4px", borderColor: "blueberry300", ...baseStyles, children: "Blueberry 300" })] }));

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Color.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Color.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,KAAK,+CAYjB,CAAC"}

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

@@ -1,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    display: 'inline-block',
-    margin: 'xxs',
-    minHeight: 'xl',
-    minWidth: '8rem',
-    padding: 'xs',
-};
-export const Color = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", color: "blackPepper500", ...baseStyles, children: "Cinnamon 300" }), _jsx(Box, { backgroundColor: "sourLemon300", color: "blackPepper500", ...baseStyles, children: "Sour Lemon 300" }), _jsx(Box, { backgroundColor: "blueberry300", color: "blackPepper500", ...baseStyles, children: "Blueberry 300" })] }));

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Depth.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Depth.tsx"],"names":[],"mappings":"AAWA,eAAO,MAAM,KAAK,+CAYjB,CAAC"}

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

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    display: 'inline-block',
-    margin: 'xxs',
-    minHeight: 'xl',
-    minWidth: '8rem',
-    padding: 'xs',
-};
-export const Depth = () => (_jsxs("div", { children: [_jsx(Box, { backgroundColor: "cinnamon300", depth: 1, ...baseStyles, children: "Depth 1" }), _jsx(Box, { backgroundColor: "sourLemon300", depth: 2, ...baseStyles, children: "Depth 2" }), _jsx(Box, { backgroundColor: "blueberry300", depth: 3, ...baseStyles, children: "Depth 3" })] }));

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Flex.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Flex.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,WAAW,+CAoCvB,CAAC"}

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    minHeight: 'xl',
-    minWidth: '2rem',
-    padding: 'xs',
-};
-export const FlexExample = () => (_jsxs(Flex, { columnGap: "xs", children: [_jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 1, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "1" })] }), _jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 2, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "2" })] }), _jsxs(Flex, { flexDirection: "column", rowGap: "xs", flex: 1, children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", textAlign: "center", ...baseStyles, children: "1" })] })] }));

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"FlexItem.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/FlexItem.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,QAAQ,+CAiCpB,CAAC"}

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

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    minHeight: 'xl',
-    minWidth: '2rem',
-    padding: 'xs',
-};
-export const FlexItem = () => (_jsxs(Flex, { flexDirection: "column", rowGap: "xs", children: [_jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", flex: 2, textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles, children: "1" })] }), _jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 2, textAlign: "center", ...baseStyles, children: "2" }), _jsx(Flex.Item, { backgroundColor: "sourLemon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 2, textAlign: "center", ...baseStyles, children: "2" })] }), _jsxs(Flex, { columnGap: "xs", children: [_jsx(Flex.Item, { backgroundColor: "cinnamon300", flex: 1, textAlign: "center", ...baseStyles, children: "1" }), _jsx(Flex.Item, { backgroundColor: "blueberry300", flex: 1, textAlign: "center", ...baseStyles, children: "1" })] })] }));

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

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

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

@@ -1 +0,0 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../../mdx/style-props/examples/Grid.tsx"],"names":[],"mappings":"AAOA,eAAO,MAAM,WAAW,+CAYvB,CAAC"}

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

@@ -1,7 +0,0 @@
-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 = () => (_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,2 +0,0 @@
-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 +0,0 @@
-{"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,7 +0,0 @@
-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 = () => (_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,2 +0,0 @@
-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 +0,0 @@
-{"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,10 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Flex } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    margin: 'xxs',
-    padding: 'xs',
-    justifyContent: 'center',
-    alignItems: 'flex-start',
-};
-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,2 +0,0 @@
-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 +0,0 @@
-{"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,11 +0,0 @@
-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 = {
-    color: 'blackPepper500',
-    display: 'inline-block',
-    margin: 'xxs',
-    minHeight: 'xl',
-    padding: 'xs',
-};
-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,2 +0,0 @@
-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 +0,0 @@
-{"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,12 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    color: 'blackPepper500',
-    margin: 'xxs',
-    height: 'xl',
-    width: '8rem',
-    padding: 'xs',
-};
-export const Position = () => {
-    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,2 +0,0 @@
-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 +0,0 @@
-{"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,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-const baseStyles = {
-    border: 'dotted 2px',
-    color: 'blackPepper500',
-    display: 'inline-block',
-    verticalAlign: 'bottom',
-};
-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,2 +0,0 @@
-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 +0,0 @@
-{"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,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box } from '@workday/canvas-kit-react/layout';
-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/tokens/StorybookInformationHighlight/index.d.ts

@@ -1,2 +0,0 @@
-export declare const StorybookInformationHighlight: ({ variant, emphasis, title, description, link, linkText, isExternal, }: any) => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=index.d.ts.map

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

@@ -1 +0,0 @@
-{"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,6 +0,0 @@
-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-react/information-highlight';
-export const StorybookInformationHighlight = ({ variant, emphasis, title, description, link, linkText, isExternal, }) => {
-    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

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

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

@@ -1 +0,0 @@
-{"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,60 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } 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';
-// @ts-ignore: Cannot find module error
-import { version } from '../../../lerna.json';
-const statusIndicators = {
-    stable: {
-        variant: 'blue',
-        label: 'Stable',
-    },
-    support: {
-        variant: 'green',
-        label: 'Support',
-    },
-    deprecated: {
-        variant: 'red',
-        label: 'No Longer Supported',
-    },
-};
-function getVersionStatusIndicator(versionNumber) {
-    // version from lerna is a string, so we need to do modify into a number
-    const currentMajorVersion = Number(version.split('.')[0]);
-    const modifiedVersionNumber = typeof versionNumber === 'string' ? Number(versionNumber.split('.')[0]) : versionNumber;
-    // if this is the current version
-    if (modifiedVersionNumber === currentMajorVersion) {
-        return statusIndicators.stable;
-    }
-    else if (modifiedVersionNumber === currentMajorVersion - 1) {
-        return statusIndicators.support;
-    }
-    else {
-        return statusIndicators.deprecated;
-    }
-}
-export const VersionTable = () => {
-    const [versions, setVersions] = React.useState([]);
-    const minVersion = 6;
-    const currentMajorVersion = Number(version === null || version === void 0 ? void 0 : version.split('.')[0]);
-    React.useEffect(() => {
-        const 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);
-        // 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()
-                    .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,2 +0,0 @@
-export declare const WelcomePage: () => import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=welcomePage.d.ts.map