@workday/canvas-kit-react 5.3.0 → 5.3.1

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

@@ -16,64 +16,51 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-var list_1 = require("./list");
-var menu_1 = require("./menu");
-var overflow_1 = require("./overflow");
+var useCursorModel_1 = require("./cursor/useCursorModel");
+var useListModel_1 = require("./list/useListModel");
 exports.tabEventMap = common_1.createEventMap()({
-    guards: __assign({}, overflow_1.overflowEventMap.guards),
-    callbacks: __assign({}, overflow_1.overflowEventMap.callbacks),
+    guards: __assign(__assign({}, useCursorModel_1.cursorEventMap.guards), { 
+        /**
+         * Should the tab activate? Can prevent the tab from activating. Use this only for advanced
+         * use-cases.
+         */
+        shouldActivate: 'activate' }),
+    callbacks: __assign(__assign({}, useCursorModel_1.cursorEventMap.callbacks), { 
+        /**
+         * This callback will fire whenever a tab is activated. The data will contain the tab's named
+         * passed to the `Tabs.Item` component. If no name was passed, it will be the index of the tab
+         * as a string.
+         */
+        onActivate: 'activate' }),
 });
 exports.useTabsModel = function (config) {
     if (config === void 0) { config = {}; }
-    var _a;
-    var id = common_1.useUniqueId(config.id);
-    var initialSelectedRef = react_1.default.useRef(config.initialTab);
-    var getId = config.getId || list_1.defaultGetId;
-    var items = config.items; // || (emptyItems as T[]);
-    var model = overflow_1.useOverflowModel(__assign(__assign({}, config), { id: id + "-tabs", orientation: config.orientation || 'horizontal', items: items,
-        onRegisterItem: function (_a) {
-            var data = _a.data, prevState = _a.prevState;
-            var _b;
-            (_b = config === null || config === void 0 ? void 0 : config.onRegisterItem) === null || _b === void 0 ? void 0 : _b.call(config, { data: data, prevState: prevState });
-            if (!initialSelectedRef.current) {
-                initialSelectedRef.current = getId(data.item);
-                events.select({ id: initialSelectedRef.current });
-            }
-        }, initialSelectedIds: config.initialTab
-            ? [config.initialTab]
-            : ((_a = config.items) === null || _a === void 0 ? void 0 : _a.length) ? [getId(config.items[0])]
-                : [] }));
-    var panels = list_1.useListModel();
-    var state = __assign(__assign({}, model.state), { id: id,
-        getId: getId, orientation: config.orientation || 'horizontal', panels: panels.state.items, panelIndexRef: panels.state.indexRef });
-    var overflowItems = react_1.default.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [state.hiddenIds, items]);
-    var events = common_1.useEventMap(exports.tabEventMap, state, config, __assign(__assign({}, model.events), { registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
-    var menu = menu_1.useMenuModel({
-        id: id + "-menu",
-        items: overflowItems,
-        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
-        onSelect: function (_a) {
-            var data = _a.data, prevState = _a.prevState;
-            var _b, _c;
-            menu.events.hide();
-            events.select(data);
-            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onSelect) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
+    var initialTabRef = react_1.default.useRef(config.initialTab);
+    var _a = react_1.default.useState(initialTabRef.current || ''), activeTab = _a[0], setActiveTab = _a[1];
+    var cursor = useCursorModel_1.useCursorModel(__assign({ orientation: config.orientation || 'horizontal' }, config));
+    var panels = useListModel_1.useListModel();
+    var state = __assign(__assign({}, cursor.state), { activeTab: activeTab, panels: panels.state.items, panelIndexRef: panels.state.indexRef });
+    var events = common_1.useEventMap(exports.tabEventMap, state, config, __assign(__assign({}, cursor.events), { activate: function (data) {
+            setActiveTab(data.tab);
+            events.goTo({ id: data.tab });
         },
-        onShow: function (_a) {
-            var data = _a.data, prevState = _a.prevState;
-            var _b, _c;
-            // Always select the first item when the menu is opened
-            menu.events.first();
-            (_c = (_b = config.menuConfig) === null || _b === void 0 ? void 0 : _b.onShow) === null || _c === void 0 ? void 0 : _c.call(_b, { data: data, prevState: prevState });
+        registerItem: function (data) {
+            if (!initialTabRef.current) {
+                initialTabRef.current = data.item.id;
+                setActiveTab(initialTabRef.current);
+            }
+            cursor.events.registerItem(data);
         },
-    });
+        unregisterItem: function (data) {
+            // Activate the next tab if the current one is removed
+            if (state.activeTab === data.id && state.items.some(function (i) { return i.ref.current !== null; })) {
+                var item = useCursorModel_1.getNext(state.activeTab, state.items);
+                events.activate({ tab: item.id });
+            }
+            cursor.events.unregisterItem(data);
+        }, registerPanel: panels.events.registerItem, unregisterPanel: panels.events.unregisterItem }));
     return {
         state: state,
         events: events,
-        menu: menu,
-        getId: model.getId,
-        selection: model.selection,
     };
 };

package/dist/commonjs/tokens/index.d.ts

@@ -1,7 +1,7 @@
 import { colors, gradients } from '@workday/canvas-colors-web';
 import { borderRadius, CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues } from './lib/radius';
 import { BrandingColor, CanvasColor } from './lib/colors.types';
-import { depth, CanvasDepth, CanvasDepthValues } from './lib/depth';
+import depth, { CanvasDepth, CanvasDepthValue } from './lib/depth';
 import { space, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, spaceNumbers } from './lib/space';
 import { type, fontFamily, monoFontFamily, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy } from './lib/type';
 import { CSSProperties } from './lib/types';
@@ -326,7 +326,24 @@ declare const canvas: {
         hoverBackground: string;
         divider: string;
     };
-    depth: CanvasDepth;
+    depth: {
+        inset: {
+            boxShadow: "inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)";
+        };
+        1: {
+            boxShadow: "0px 2px 4px 0 rgba(0, 0, 0, 0.08)";
+        };
+        2: {
+            boxShadow: "0px 4px 8px 0 rgba(0, 0, 0, 0.1)";
+        };
+        3: {
+            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
+        };
+        4: {
+            border: "1px solid rgba(218, 226, 230, 1)";
+            boxShadow: "0px 8px 16px 0 rgba(0, 0, 0, 0.12)";
+        };
+    };
     fontFamily: string;
     gradients: {
         [key: string]: string;
@@ -410,7 +427,7 @@ declare const canvas: {
     };
 };
 export * from '@workday/canvas-colors-web';
-export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValues, CSSProperties, };
+export { borderRadius, colors, gradients, depth, space, spaceNumbers, type, fontFamily, monoFontFamily, BrandingColor, CanvasDepth, CanvasDepthValue, CSSProperties, };
 export default canvas;
 export type { CanvasBorderRadius, CanvasBorderRadiusKeys, CanvasBorderRadiusValues, CanvasColor, CanvasSpace, CanvasSpaceKeys, CanvasSpaceValues, CanvasSpaceNumberValues, CanvasSpaceNumbers, CanvasType, CanvasTypeProperties, CanvasTypeVariants, CanvasTypeHierarchy, };
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,EAAC,KAAK,EAAE,WAAW,EAAE,iBAAiB,EAAC,MAAM,aAAa,CAAC;AAClE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,iBAAiB,EACjB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../tokens/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAIL,MAAM,EAEN,SAAS,EAKV,MAAM,4BAA4B,CAAC;AAEpC,OAAO,EAAC,YAAY,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,wBAAwB,EAAC,MAAM,cAAc,CAAC;AAChH,OAAO,EAAC,aAAa,EAAE,WAAW,EAAC,MAAM,oBAAoB,CAAC;AAC9D,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,aAAa,CAAC;AACjE,OAAO,EACL,KAAK,EACL,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,YAAY,EACb,MAAM,aAAa,CAAC;AACrB,OAAO,EAAC,IAAI,EACV,UAAU,EACV,cAAc,EACd,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,EACpB,MAAM,YAAY,CAAC;AACpB,OAAO,EAAC,aAAa,EAAC,MAAM,aAAa,CAAC;AAE1C,QAAA,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBX,CAAC;AAEF,cAAc,4BAA4B,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,KAAK,EACL,YAAY,EACZ,IAAI,EACJ,UAAU,EACV,cAAc,EACd,aAAa,EACb,WAAW,EACX,gBAAgB,EAChB,aAAa,GACd,CAAC;AACF,eAAe,MAAM,CAAC;AAEtB,YAAY,EACV,kBAAkB,EAClB,sBAAsB,EACtB,wBAAwB,EACxB,WAAW,EACX,WAAW,EACX,eAAe,EACf,iBAAiB,EACjB,uBAAuB,EACvB,kBAAkB,EAClB,UAAU,EACV,oBAAoB,EACpB,kBAAkB,EAClB,mBAAmB,GACpB,CAAA"}

package/dist/commonjs/tokens/index.js

@@ -2,6 +2,9 @@
 function __export(m) {
     for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
 }
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 var canvas_colors_web_1 = require("@workday/canvas-colors-web");
 exports.colors = canvas_colors_web_1.colors;
@@ -10,8 +13,8 @@ var radius_1 = require("./lib/radius");
 exports.borderRadius = radius_1.borderRadius;
 var colors_types_1 = require("./lib/colors.types");
 exports.BrandingColor = colors_types_1.BrandingColor;
-var depth_1 = require("./lib/depth");
-exports.depth = depth_1.depth;
+var depth_1 = __importDefault(require("./lib/depth"));
+exports.depth = depth_1.default;
 var space_1 = require("./lib/space");
 exports.space = space_1.space;
 exports.spaceNumbers = space_1.spaceNumbers;
@@ -25,7 +28,7 @@ var canvas = {
     chartingColors: canvas_colors_web_1.chartingColors,
     colors: canvas_colors_web_1.colors,
     commonColors: canvas_colors_web_1.commonColors,
-    depth: depth_1.depth,
+    depth: depth_1.default,
     fontFamily: type_1.fontFamily,
     gradients: canvas_colors_web_1.gradients,
     iconColors: canvas_colors_web_1.iconColors,

package/dist/commonjs/tokens/lib/depth.d.ts

@@ -1,110 +1,4 @@
-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 {};
+import depth, { CanvasDepth, CanvasDepthValue } from '@workday/canvas-depth-web';
+export { CanvasDepth, CanvasDepthValue };
+export default depth;
 //# sourceMappingURL=depth.d.ts.map

package/dist/commonjs/tokens/lib/depth.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW,GAAG;IACxB;;;;;;;;;;;;OAYG;IACH,KAAK,EAAE;QACL,SAAS,EAAE,6CAA6C,CAAC;KAC1D,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,mCAAmC,CAAC;KAChD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,kCAAkC,CAAC;KAC/C,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;IACF;;;;;;;;;;;;OAYG;IACH,CAAC,EAAE;QACD,MAAM,EAAE,kCAAkC,CAAC;QAC3C,SAAS,EAAE,oCAAoC,CAAC;KACjD,CAAC;CACH,CAAC;AAEF,aAAK,OAAO,CAAC,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC;AAC7B,oBAAY,iBAAiB,GAAG,OAAO,CAAC,WAAW,CAAC,CAAC;AAErD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,eAAO,MAAM,KAAK,EAAE,WAiBnB,CAAC"}
+{"version":3,"file":"depth.d.ts","sourceRoot":"","sources":["../../../../tokens/lib/depth.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAC,WAAW,EAAE,gBAAgB,EAAC,MAAM,2BAA2B,CAAC;AAE/E,OAAO,EAAC,WAAW,EAAE,gBAAgB,EAAC,CAAC;AAEvC,eAAe,KAAK,CAAC"}

package/dist/commonjs/tokens/lib/depth.js

@@ -1,42 +1,7 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-/**
- * ### 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>
- *   );
- * }
- * ```
- *
- */
-exports.depth = {
-    inset: {
-        boxShadow: 'inset 0px 0px 8px 0 rgba(82, 97, 115, 0.09)',
-    },
-    1: {
-        boxShadow: '0px 2px 4px 0 rgba(0, 0, 0, 0.08)',
-    },
-    2: {
-        boxShadow: '0px 4px 8px 0 rgba(0, 0, 0, 0.1)',
-    },
-    3: {
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
-    },
-    4: {
-        border: '1px solid rgba(218, 226, 230, 1)',
-        boxShadow: '0px 8px 16px 0 rgba(0, 0, 0, 0.12)',
-    },
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
+Object.defineProperty(exports, "__esModule", { value: true });
+var canvas_depth_web_1 = __importDefault(require("@workday/canvas-depth-web"));
+exports.default = canvas_depth_web_1.default;

package/dist/commonjs/tooltip/lib/useTooltip.d.ts

@@ -33,7 +33,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, Element>) => void;
+        onFocus: (event: React.FocusEvent<Element>) => void;
         onBlur: () => void;
     };
     /** Mix these properties into the `Popper` component */

package/dist/es6/action-bar/lib/ActionBar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAuDD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}
+{"version":3,"file":"ActionBar.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC1E;;;OAGG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AA0CD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,CAAC;IAC7D,MAAM;CASd"}

package/dist/es6/action-bar/lib/ActionBar.js

@@ -34,30 +34,24 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { styled } from '@workday/canvas-kit-react/common';
+import styled from '@emotion/styled';
 import { colors, commonColors, space } from '@workday/canvas-kit-react/tokens';
-function getFixedStyles(fixed) {
-    if (fixed === void 0) { fixed = false; }
-    return fixed
-        ? {
-            position: 'fixed',
-            left: 0,
-            bottom: 0,
-            right: 0,
-        }
-        : {};
-}
 var ActionBarContainer = styled('div')({
     borderTop: "solid 1px " + colors.soap400,
     background: commonColors.background,
     padding: space.s,
     boxShadow: '0 -2px 4px rgba(0, 0, 0, 0.08)',
-}, function (_a) {
-    var _b;
-    var fixed = _a.fixed, theme = _a.theme;
-    return __assign(__assign({}, getFixedStyles(fixed)), (_b = {}, _b[theme.canvas.breakpoints.down('s')] = {
+    '@media (max-width: 575px)': {
         padding: space.xxs,
-    }, _b));
+    },
+}, function (_a) {
+    var fixed = _a.fixed;
+    return fixed && {
+        position: 'fixed',
+        left: 0,
+        bottom: 0,
+        right: 0,
+    };
 });
 var ChildrenContainer = styled('div')({
     display: 'inline-block',
@@ -65,24 +59,19 @@ var ChildrenContainer = styled('div')({
     '*:not(:first-of-type)': {
         marginLeft: space.s,
     },
-}, function (_a) {
-    var _b;
-    var theme = _a.theme;
-    return (_b = {},
-        _b[theme.canvas.breakpoints.down('s')] = {
-            display: 'flex',
-            padding: space.xxs,
-            justifyContent: 'center',
-            flexDirection: 'row-reverse',
-            '> *': {
-                flex: 1,
-                '&:not(:first-of-type)': {
-                    marginRight: space.s,
-                    marginLeft: 0,
-                },
+    '@media (max-width: 575px)': {
+        display: 'flex',
+        padding: space.xxs,
+        justifyContent: 'center',
+        flexDirection: 'row-reverse',
+        '> *': {
+            flex: 1,
+            '&:not(:first-of-type)': {
+                marginRight: space.s,
+                marginLeft: 0,
             },
         },
-        _b);
+    },
 });
 var ActionBar = /** @class */ (function (_super) {
     __extends(ActionBar, _super);

package/dist/es6/button/lib/PrimaryButton.d.ts

@@ -1,20 +1,13 @@
 import * as React from 'react';
 import { GrowthBehavior, Themeable, EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-import { ButtonSizes, IconPositions } from './types';
+import { ButtonColors } from './types';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     /**
-     * The variant of the PrimaryButton.
-     * @default undefined
-     */
-    variant?: 'inverse';
-    /**
-     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
-     * If no size is provided, it will default to `medium`.
-     *
+     * The size of the Button.
      * @default 'medium'
      */
-    size?: ButtonSizes;
+    size?: 'small' | 'medium' | 'large';
     /**
      * The data label of the Button.
      * Note: not displayed at `small` size
@@ -26,11 +19,10 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
      */
     icon?: CanvasSystemIcon;
     /**
-     * Button icon positions can either be `left` or `right`.
-     * If no value is provided, it defaults to `left`.
+     * The position of the TertiaryButton icon.
      * @default 'left'
      */
-    iconPosition?: IconPositions;
+    iconPosition?: 'left' | 'right';
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
      * @default false
@@ -39,71 +31,5 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
     children?: React.ReactNode;
 }
 export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
-export declare const getPrimaryButtonColors: (variant: "inverse" | undefined, theme: EmotionCanvasTheme) => {
-    default: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData?: undefined;
-    };
-    hover: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-    active: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-    focus: {
-        background: string;
-        border?: undefined;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-        focusRing?: undefined;
-    };
-    disabled: {
-        background: string;
-        icon?: undefined;
-        label?: undefined;
-        labelData?: undefined;
-    };
-} | {
-    default: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    hover: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    active: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-    focus: {
-        background: string;
-        border: string;
-        icon: string;
-        label: string;
-        labelData: string;
-        focusRing: import("@emotion/serialize").CSSObject;
-    };
-    disabled: {
-        background: string;
-        icon: string;
-        label: string;
-        labelData: string;
-    };
-};
+export declare const getPrimaryButtonColors: ({ canvas: { palette: { primary: themePrimary }, }, }: EmotionCanvasTheme) => ButtonColors;
 //# sourceMappingURL=PrimaryButton.d.ts.map

package/dist/es6/button/lib/PrimaryButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,aAAa,uEA+CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ElC,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEA6CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}