@workday/canvas-kit-react 5.3.15 → 5.4.0-next.1

package/ts3.5/dist/es6/tokens/lib/depth.d.ts

@@ -1,4 +1,110 @@
-import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
-export { CanvasDepth, CanvasDepthValue };
-export default depth;
+export declare type CanvasDepth = {
+    /**
+     * ### Depth Inset
+     * 	Used for inset containers
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const insetCardStyles = {
+     *   ...depth.inset,
+     * };
+     * ```
+     */
+    inset: {
+        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)';
+    };
+    /**
+     * ### Depth 1
+     * Used for minimal offset
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[1],
+     * };
+     * ```
+     */
+    1: {
+        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)';
+    };
+    /**
+     * ### Depth 2
+     * Used for Cards, Popups, and Menus — our most common depth
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[2],
+     * };
+     * ```
+     */
+    2: {
+        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)';
+    };
+    /**
+     * ### Depth 3
+     * Used for interactive Cards on hover
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[3],
+     * };
+     * ```
+     */
+    3: {
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+    /**
+     * ### Depth 4
+     * Used for Cards on white backgrounds — adds border styles for more contrast
+     *
+     * @example
+     * ```ts
+     * import { depth } from '@workday/canvas-kit-react/tokens';
+     *
+     * const cardStyles = {
+     *   ...depth[4],
+     * };
+     * ```
+     */
+    4: {
+        border: '1px solid rgba(218, 226, 230, 1)';
+        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)';
+    };
+};
+declare type ValueOf<T> = T[keyof T];
+export declare type CanvasDepthValues = ValueOf<CanvasDepth>;
+/**
+ * ### Depth Tokens
+ *
+ * Depth is the relative distance between surfaces in the z-axis.
+ * It provides delineation, focus, and priority with shadows and layering.
+ * There are five depth levels, `inset`, `1`, `2`, `3`, and `4`.
+ * Most levels only apply box-shadow styles, but `depth[4]` also applies border styles.
+ *
+ * @example
+ * ```tsx
+ * import { depth } from '@workday/canvas-kit-react/tokens';
+ *
+ * const CustomCard = () => {
+ *   return (
+ *     <div css={depth[2]}>
+ *       A standard-depth card
+ *     </div>
+ *   );
+ * }
+ * ```
+ *
+ */
+export declare const depth: CanvasDepth;
+export {};
 //# sourceMappingURL=depth.d.ts.map

package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts

@@ -41,7 +41,7 @@ export declare function useTooltip<T extends Element = Element>({ type, titleTex
         onMouseEnter: (event: React.SyntheticEvent<Element, Event>) => void;
         onMouseLeave: () => void;
         onMouseDown: (event: React.MouseEvent<Element, MouseEvent>) => void;
-        onFocus: (event: React.FocusEvent<Element>) => void;
+        onFocus: (event: React.FocusEvent<Element, Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/dist/commonjs/tabs/lib/Tab.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabProps {
-    /**
-     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
-     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
-     * inserted out of order.
-     */
-    index?: number;
-    /**
-     * The label text of the Tab.
-     */
-    children: React.ReactNode;
-    /**
-     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-     * the `name` of the associated tab panel. If this property is not provided, it will default to a
-     * string representation of the the zero-based index of the Tab when it was initialized.
-     */
-    name?: string;
-    /**
-     * Optionally pass a model directly to this component. Default is to implicitly use the same
-     * model as the container component which uses React context. Only use this for advanced use-cases
-     */
-    model?: TabsModel;
-    /**
-     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
-     * index at the end. Only set this for advanced cases.
-     */
-    id?: string;
-    /**
-     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
-     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
-     * This is automatically set by the component and should only be used in advanced cases.
-     */
-    'aria-controls'?: string;
-    /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
-    'aria-selected'?: boolean;
-    /**
-     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
-     * all inactive tabs should have a `tabIndex={-1}`
-     */
-    tabIndex?: number;
-}
-export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
-//# sourceMappingURL=Tab.d.ts.map

package/dist/commonjs/tabs/lib/Tab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}

package/dist/commonjs/tabs/lib/Tab.js

@@ -1,95 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Tabs_1 = require("./Tabs");
-var list_1 = require("./list");
-var cursor_1 = require("./cursor");
-var StyledButton = common_1.styled('button')(__assign(__assign(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', maxWidth: '280px', padding: tokens_1.space.s, boxSizing: 'border-box', cursor: 'pointer', color: tokens_1.colors.licorice300, position: 'relative', marginLeft: "" + tokens_1.space.xxxs, borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease', '&:first-of-type': {
-        marginLeft: 0,
-    } }), common_1.hideMouseFocus), { '&:hover, &:focus': {
-        backgroundColor: tokens_1.colors.soap200,
-        color: tokens_1.colors.blackPepper400,
-    }, '&:focus': __assign({ outline: "none" }, common_1.focusRing({ inset: 'outer', width: 0, separation: 2 })), '&:disabled': {
-        color: tokens_1.colors.licorice100,
-        '&:hover': {
-            cursor: 'auto',
-            backgroundColor: "transparent",
-        },
-    }, '&[aria-selected=true]': {
-        color: tokens_1.colors.blueberry400,
-        cursor: 'default',
-        '&:after': {
-            position: 'absolute',
-            height: tokens_1.space.xxxs,
-            borderRadius: tokens_1.borderRadius.m + " " + tokens_1.borderRadius.m + " 0px 0px",
-            backgroundColor: tokens_1.colors.blueberry400,
-            bottom: 0,
-            content: "''",
-            left: 0,
-            marginTop: '-2px',
-            width: '100%',
-        },
-        '&:hover, &:focus': {
-            backgroundColor: "transparent",
-            color: tokens_1.colors.blueberry400,
-        },
-    } }));
-var useTab = function (model, elemProps, ref) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var _a = common_1.useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
-    var name = list_1.useRegisterItem(model, localRef, elemProps.name, elemProps.index);
-    var state = model.state, events = model.events;
-    var onSelect = function () {
-        events.activate({ tab: name });
-    };
-    var isSelected = !!name && state.activeTab === name;
-    return common_1.mergeProps({
-        id: "tab-" + state.id + "-" + name,
-        tabIndex: !!name && state.cursorId === name ? undefined : -1,
-        'aria-selected': isSelected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
-        onClick: onSelect,
-        isSelected: isSelected,
-        ref: elementRef,
-    }, cursor_1.useRovingFocusItem(model, elemProps));
-};
-exports.Tab = common_1.createComponent('button')({
-    displayName: 'Tabs.Item',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = common_1.useModelContext(Tabs_1.TabsModelContext, model);
-        var props = useTab(localModel, elemProps, ref);
-        return (React.createElement(StyledButton, __assign({ type: "button", role: "tab", as: Element }, props), children));
-    },
-});

package/dist/commonjs/tabs/lib/TabList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,OAAO,8DAkBlB,CAAC"}

package/dist/commonjs/tabs/lib/TabPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabPanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAUD,eAAO,MAAM,QAAQ,+DAiCnB,CAAC"}

package/dist/commonjs/tabs/lib/TabPanel.js

@@ -1,56 +0,0 @@
-"use strict";
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-/** @jsx jsx */
-var react_1 = __importDefault(require("react"));
-var core_1 = require("@emotion/core");
-var common_1 = require("@workday/canvas-kit-react/common");
-var Tabs_1 = require("./Tabs");
-var styles = core_1.css(common_1.mouseFocusBehavior({
-    '&:focus': {
-        outline: 'none',
-    },
-}));
-exports.TabPanel = common_1.createComponent('div')({
-    displayName: 'Tabs.Panel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.name, name = _b === void 0 ? '' : _b, model = _a.model, elemProps = __rest(_a, ["children", "name", "model"]);
-        var _c = common_1.useModelContext(Tabs_1.TabsModelContext, model), state = _c.state, events = _c.events;
-        var _d = react_1.default.useState(name), tabName = _d[0], setTabName = _d[1];
-        var _e = common_1.useLocalRef(ref), localRef = _e.localRef, elementRef = _e.elementRef;
-        common_1.useMountLayout(function () {
-            var index = state.panelIndexRef.current;
-            var tabName = name || String(index);
-            events.registerPanel({ item: { id: tabName, ref: localRef } });
-            setTabName(tabName);
-            return function () {
-                events.unregisterPanel({ id: tabName });
-            };
-        });
-        return (core_1.jsx(Element, __assign({ ref: elementRef, role: "tabpanel", css: styles, "aria-labelledby": "tab-" + state.id + "-" + tabName, hidden: !!tabName && tabName !== state.activeTab, id: "tabpanel-" + state.id + "-" + tabName, tabIndex: 0 }, elemProps), children));
-    },
-});

package/dist/commonjs/tabs/lib/cursor/hooks.d.ts

@@ -1,39 +0,0 @@
-import React from 'react';
-export declare const orientationKeyMap: {
-    readonly horizontal: {
-        readonly ArrowLeft: "previous";
-        readonly Left: "previous";
-        readonly ArrowRight: "next";
-        readonly Right: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-    readonly vertical: {
-        readonly ArrowUp: "previous";
-        readonly Up: "previous";
-        readonly ArrowDown: "next";
-        readonly Down: "next";
-        readonly Home: "first";
-        readonly End: "last";
-    };
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing the list. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusList: (model: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-};
-/**
- * Handles the roving focus behavior of a Cursor model. It should be added to the element
- * representing a list item. It does not handle the tabIndex.
- *
- * @see https://www.w3.org/TR/wai-aria-practices/#kbd_roving_tabindex
- */
-export declare const useRovingFocusItem: ({ state }: import("../../../common").Model<import("./useCursorModel").CursorState, import("./useCursorModel").CursorEvents>, elemProps?: {}) => {
-    onFocus(event: React.FocusEvent<Element>): void;
-    onBlur(event: React.FocusEvent<Element>): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/dist/commonjs/tabs/lib/cursor/hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/cursor/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;CAiBpB,CAAC;AAWX;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;CAmC9B,CAAC;AAEF;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB;;;CAuC9B,CAAC"}

package/dist/commonjs/tabs/lib/hooks.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-/**
- * Reset the cursor to the active tab when the tab list looses focus
- */
-export declare const useResetCursorOnBlur: ({ state, events }: import("../../common").Model<import("./useTabsModel").TabsState, import("./useTabsModel").TabsEvents>, elemProps?: {}) => {
-    onKeyDown(event: React.KeyboardEvent<Element>): void;
-    onFocus(): void;
-    onBlur(): void;
-};
-//# sourceMappingURL=hooks.d.ts.map

package/dist/commonjs/tabs/lib/hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,oBAAoB;;;;CAqBhC,CAAC"}

package/dist/commonjs/tabs/lib/list/hooks.d.ts

@@ -1,11 +0,0 @@
-import React from 'react';
-/**
- * Handle list registration. Returns an identifier used to identify this item in the list
- * @param model A ListModel
- * @param localRef A RefObject that will be used to register an item
- * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
- * in the list
- * @param index (Optional) Specify the position of the item if the order is expected to change
- */
-export declare const useRegisterItem: ({ state, events }: import("../../../common").Model<import("./useListModel").ListState, import("./useListModel").ListEvents>, localRef: React.RefObject<any>, id?: string, index?: number | undefined) => string;
-//# sourceMappingURL=hooks.d.ts.map

package/dist/commonjs/tabs/lib/list/hooks.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"hooks.d.ts","sourceRoot":"","sources":["../../../../../tabs/lib/list/hooks.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,kNA8B3B,CAAC"}

package/dist/commonjs/tabs/lib/list/hooks.js

@@ -1,39 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-var react_1 = __importDefault(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-/**
- * Handle list registration. Returns an identifier used to identify this item in the list
- * @param model A ListModel
- * @param localRef A RefObject that will be used to register an item
- * @param id Desired identifier for the List Model. If not provided, it will fall back to the index
- * in the list
- * @param index (Optional) Specify the position of the item if the order is expected to change
- */
-exports.useRegisterItem = function (_a, localRef, id, index) {
-    var state = _a.state, events = _a.events;
-    if (id === void 0) { id = ''; }
-    var _b = react_1.default.useState(id), localId = _b[0], setLocalId = _b[1];
-    var firstRender = react_1.default.useRef(true);
-    react_1.default.useLayoutEffect(function () {
-        if (index !== undefined && !firstRender.current) {
-            events.updateItemPosition({ id: localId, index: index });
-        }
-        // we only care about the index changing
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [index]);
-    common_1.useMountLayout(function () {
-        var defaultId = state.indexRef.current;
-        var itemId = id || String(defaultId);
-        events.registerItem({ item: { id: itemId, ref: localRef }, index: index });
-        setLocalId(itemId);
-        firstRender.current = false;
-        return function () {
-            events.unregisterItem({ id: itemId });
-        };
-    });
-    return localId;
-};

package/dist/es6/tabs/lib/Tab.d.ts

@@ -1,49 +0,0 @@
-import * as React from 'react';
-import { TabsModel } from './useTabsModel';
-export interface TabProps {
-    /**
-     * Optionally pass index to tab item. This should be done if `Tabs.Item` components were created
-     * via a `Array::map` function. This index will ensure keyboard navigation works even if items are
-     * inserted out of order.
-     */
-    index?: number;
-    /**
-     * The label text of the Tab.
-     */
-    children: React.ReactNode;
-    /**
-     * The name of the tab. This name will be used in change events and for `initialTab`. Must match
-     * the `name` of the associated tab panel. If this property is not provided, it will default to a
-     * string representation of the the zero-based index of the Tab when it was initialized.
-     */
-    name?: string;
-    /**
-     * Optionally pass a model directly to this component. Default is to implicitly use the same
-     * model as the container component which uses React context. Only use this for advanced use-cases
-     */
-    model?: TabsModel;
-    /**
-     * Optional id. If not set, it will inherit the ID passed to the `Tabs` component and append the
-     * index at the end. Only set this for advanced cases.
-     */
-    id?: string;
-    /**
-     * Part of the ARIA specification for tabs. This attributes links a `role=tab` to a
-     * `role=tabpanel`. This value must be the same as the associated `id` attribute of the tab panel.
-     * This is automatically set by the component and should only be used in advanced cases.
-     */
-    'aria-controls'?: string;
-    /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
-    'aria-selected'?: boolean;
-    /**
-     * Part of the ARIA specification for tabs. The currently active tab should not have a `tabIndex` set while
-     * all inactive tabs should have a `tabIndex={-1}`
-     */
-    tabIndex?: number;
-}
-export declare const Tab: import("../../common").ElementComponent<"button", TabProps>;
-//# sourceMappingURL=Tab.d.ts.map

package/dist/es6/tabs/lib/Tab.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tab.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/Tab.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAIzC,MAAM,WAAW,QAAQ;IACvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA6FD,eAAO,MAAM,GAAG,6DAad,CAAC"}

package/dist/es6/tabs/lib/Tab.js

@@ -1,86 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import * as React from 'react';
-import { colors, space, type, borderRadius } from '@workday/canvas-kit-react/tokens';
-import { createComponent, focusRing, hideMouseFocus, mergeProps, styled, useLocalRef, useModelContext, } from '@workday/canvas-kit-react/common';
-import { TabsModelContext } from './Tabs';
-import { useRegisterItem } from './list';
-import { useRovingFocusItem } from './cursor';
-var StyledButton = styled('button')(__assign(__assign(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium, border: 'none', backgroundColor: 'transparent', flex: '0 0 auto', maxWidth: '280px', padding: space.s, boxSizing: 'border-box', cursor: 'pointer', color: colors.licorice300, position: 'relative', marginLeft: "" + space.xxxs, borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px", transition: 'background 150ms ease, color 150ms ease', '&:first-of-type': {
-        marginLeft: 0,
-    } }), hideMouseFocus), { '&:hover, &:focus': {
-        backgroundColor: colors.soap200,
-        color: colors.blackPepper400,
-    }, '&:focus': __assign({ outline: "none" }, focusRing({ inset: 'outer', width: 0, separation: 2 })), '&:disabled': {
-        color: colors.licorice100,
-        '&:hover': {
-            cursor: 'auto',
-            backgroundColor: "transparent",
-        },
-    }, '&[aria-selected=true]': {
-        color: colors.blueberry400,
-        cursor: 'default',
-        '&:after': {
-            position: 'absolute',
-            height: space.xxxs,
-            borderRadius: borderRadius.m + " " + borderRadius.m + " 0px 0px",
-            backgroundColor: colors.blueberry400,
-            bottom: 0,
-            content: "''",
-            left: 0,
-            marginTop: '-2px',
-            width: '100%',
-        },
-        '&:hover, &:focus': {
-            backgroundColor: "transparent",
-            color: colors.blueberry400,
-        },
-    } }));
-var useTab = function (model, elemProps, ref) {
-    if (elemProps === void 0) { elemProps = {}; }
-    var _a = useLocalRef(ref), localRef = _a.localRef, elementRef = _a.elementRef;
-    var name = useRegisterItem(model, localRef, elemProps.name, elemProps.index);
-    var state = model.state, events = model.events;
-    var onSelect = function () {
-        events.activate({ tab: name });
-    };
-    var isSelected = !!name && state.activeTab === name;
-    return mergeProps({
-        id: "tab-" + state.id + "-" + name,
-        tabIndex: !!name && state.cursorId === name ? undefined : -1,
-        'aria-selected': isSelected,
-        'aria-controls': "tabpanel-" + state.id + "-" + name,
-        onClick: onSelect,
-        isSelected: isSelected,
-        ref: elementRef,
-    }, useRovingFocusItem(model, elemProps));
-};
-export var Tab = createComponent('button')({
-    displayName: 'Tabs.Item',
-    Component: function (_a, ref, Element) {
-        var model = _a.model, children = _a.children, elemProps = __rest(_a, ["model", "children"]);
-        var localModel = useModelContext(TabsModelContext, model);
-        var props = useTab(localModel, elemProps, ref);
-        return (React.createElement(StyledButton, __assign({ type: "button", role: "tab", as: Element }, props), children));
-    },
-});

package/dist/es6/tabs/lib/TabList.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabList.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAc/B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,YAAY;IAC3B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAcD,eAAO,MAAM,OAAO,8DAkBlB,CAAC"}

package/dist/es6/tabs/lib/TabPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"TabPanel.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabPanel.tsx"],"names":[],"mappings":"AAAA,eAAe;AACf,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAEzC,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAUD,eAAO,MAAM,QAAQ,+DAiCnB,CAAC"}

package/dist/es6/tabs/lib/TabPanel.js

@@ -1,51 +0,0 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-/** @jsx jsx */
-import React from 'react';
-import { jsx, css } from '@emotion/core';
-import { createComponent, mouseFocusBehavior, useLocalRef, useModelContext, useMountLayout, } from '@workday/canvas-kit-react/common';
-import { TabsModelContext } from './Tabs';
-var styles = css(mouseFocusBehavior({
-    '&:focus': {
-        outline: 'none',
-    },
-}));
-export var TabPanel = createComponent('div')({
-    displayName: 'Tabs.Panel',
-    Component: function (_a, ref, Element) {
-        var children = _a.children, _b = _a.name, name = _b === void 0 ? '' : _b, model = _a.model, elemProps = __rest(_a, ["children", "name", "model"]);
-        var _c = useModelContext(TabsModelContext, model), state = _c.state, events = _c.events;
-        var _d = React.useState(name), tabName = _d[0], setTabName = _d[1];
-        var _e = useLocalRef(ref), localRef = _e.localRef, elementRef = _e.elementRef;
-        useMountLayout(function () {
-            var index = state.panelIndexRef.current;
-            var tabName = name || String(index);
-            events.registerPanel({ item: { id: tabName, ref: localRef } });
-            setTabName(tabName);
-            return function () {
-                events.unregisterPanel({ id: tabName });
-            };
-        });
-        return (jsx(Element, __assign({ ref: elementRef, role: "tabpanel", css: styles, "aria-labelledby": "tab-" + state.id + "-" + tabName, hidden: !!tabName && tabName !== state.activeTab, id: "tabpanel-" + state.id + "-" + tabName, tabIndex: 0 }, elemProps), children));
-    },
-});