@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1 +1 @@
-{"version":3,"file":"useActionBarModel.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/useActionBarModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;IAG1B;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IATH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwEL,CAAC"}
+{"version":3,"file":"useActionBarModel.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/useActionBarModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,iBAAiB;IAG1B;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAhBH;;;OAGG;;IAEH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;IAGH;;;;OAIG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkFL,CAAC"}

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

@@ -1,71 +1,85 @@
-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);
-};
 import React from 'react';
 import { createModelHook } from '@workday/canvas-kit-react/common';
 import { defaultGetId, useOverflowListModel } from '@workday/canvas-kit-react/collection';
 import { useMenuModel } from '@workday/canvas-kit-react/menu';
-export var useActionBarModel = createModelHook({
-    defaultConfig: __assign(__assign({}, useOverflowListModel.defaultConfig), { 
+export const useActionBarModel = createModelHook({
+    defaultConfig: {
+        ...useOverflowListModel.defaultConfig,
         /**
          * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
          * @default useUniqueId()
          */
-        id: '', 
+        id: '',
         /**
          * The default ActionBar sub-components only handle rendering of button group in a horizontal orientation,
          * but the sub-components could be replaced to handle vertical orientations.
          * @default 'horizontal'
          */
-        orientation: 'horizontal', menuConfig: {} }),
+        orientation: 'horizontal',
+        menuConfig: {},
+        /**
+         * The maximum number of actions that can be visible.
+         * Must be greater than 1 and less than items.length.
+         * @default 3
+         */
+        maximumVisible: 3,
+    },
     requiredConfig: useOverflowListModel.requiredConfig,
-})(function (config) {
-    var getId = config.getId || defaultGetId;
-    var items = config.items;
-    var model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+})(config => {
+    const getId = config.getId || defaultGetId;
+    const items = config.items;
+    const model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
         orientation: config.orientation || 'horizontal',
-        items: items,
+        items,
         shouldVirtualize: false,
     }));
-    var hiddenIds = model.state.hiddenIds;
-    var nonInteractiveIds = model.state.nonInteractiveIds;
-    var totalSize = model.state.items.length;
-    // Only show a maximum of 3 buttons
-    if (totalSize - hiddenIds.length >= 3) {
-        hiddenIds = items.slice(3, totalSize).map(getId);
+    let hiddenIds = model.state.hiddenIds;
+    let nonInteractiveIds = model.state.nonInteractiveIds;
+    const totalSize = model.state.items.length;
+    console.log(config.maximumVisible);
+    // Only show maximumVisible buttons
+    const maximumVisible = !config.maximumVisible || config.maximumVisible < 1
+        ? 3 // should fallback to default value
+        : config.maximumVisible > totalSize
+            ? totalSize
+            : config.maximumVisible;
+    console.log('maximumVisible', maximumVisible);
+    if (totalSize - hiddenIds.length >= maximumVisible) {
+        hiddenIds = items.slice(maximumVisible, totalSize).map(getId);
     }
     // Always show the first button and make sure it is interactive
     if (totalSize - hiddenIds.length === 0) {
         hiddenIds = items.slice(1, totalSize).map(getId);
     }
     nonInteractiveIds = hiddenIds;
-    var state = __assign(__assign({}, model.state), { hiddenIds: hiddenIds,
-        nonInteractiveIds: nonInteractiveIds, orientation: config.orientation || 'horizontal' });
-    var overflowItems = React.useMemo(function () { return (items ? items.filter(function (item) { return state.hiddenIds.includes(getId(item)); }) : undefined); }, 
+    const state = {
+        ...model.state,
+        hiddenIds,
+        nonInteractiveIds,
+        orientation: config.orientation || 'horizontal',
+    };
+    const overflowItems = React.useMemo(() => (items ? items.filter(item => state.hiddenIds.includes(getId(item))) : undefined), 
     // eslint-disable-next-line react-hooks/exhaustive-deps
     [state.hiddenIds, items]);
-    var events = __assign({}, model.events);
-    var menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
-        id: "act-bar-menu-" + model.state.id,
+    const events = {
+        ...model.events,
+    };
+    const menu = useMenuModel(useMenuModel.mergeConfig(config.menuConfig, {
+        id: `act-bar-menu-${model.state.id}`,
         items: overflowItems,
-        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
-        onSelect: function () {
+        nonInteractiveIds: state.nonInteractiveIds.filter(key => !state.hiddenIds.includes(key)),
+        onSelect() {
             menu.events.hide();
         },
-        onShow: function () {
+        onShow() {
             // Always select the first item when the menu is opened
             menu.events.goToFirst();
         },
     }));
-    return __assign(__assign({}, model), { state: state,
-        events: events,
-        menu: menu });
+    return {
+        ...model,
+        state,
+        events,
+        menu,
+    };
 });

package/dist/es6/avatar/lib/Avatar.js

@@ -1,25 +1,3 @@
-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 React, { useState } from 'react';
 import { styled, focusRing, hideMouseFocus } from '@workday/canvas-kit-react/common';
 import isPropValid from '@emotion/is-prop-valid';
@@ -31,66 +9,66 @@ export var AvatarVariant;
     AvatarVariant[AvatarVariant["Light"] = 0] = "Light";
     AvatarVariant[AvatarVariant["Dark"] = 1] = "Dark";
 })(AvatarVariant || (AvatarVariant = {}));
-var fadeTransition = 'opacity 150ms linear';
-var StyledContainer = styled('button', {
-    shouldForwardProp: function (prop) { return isPropValid(prop) && prop !== 'size'; },
-})(__assign({ background: colors.soap200, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center', padding: 0, border: 0, boxSizing: 'border-box', overflow: 'hidden', borderRadius: borderRadius.circle, '&:not([disabled])': {
-        '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })),
-    } }, hideMouseFocus), function (_a) {
-    var size = _a.size;
-    return ({
-        height: size,
-        width: size,
-    });
-}, function (_a) {
-    var onClick = _a.onClick;
-    return ({
-        cursor: onClick ? 'pointer' : 'default',
-    });
-});
-var StyledStack = styled('span')({
+const fadeTransition = 'opacity 150ms linear';
+const StyledContainer = styled('button', {
+    shouldForwardProp: prop => isPropValid(prop) && prop !== 'size',
+})({
+    background: colors.soap200,
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 0,
+    border: 0,
+    boxSizing: 'border-box',
+    overflow: 'hidden',
+    borderRadius: borderRadius.circle,
+    '&:not([disabled])': {
+        '&:focus': {
+            outline: 'none',
+            ...focusRing({ separation: 2 }),
+        },
+    },
+    ...hideMouseFocus,
+}, ({ size }) => ({
+    height: size,
+    width: size,
+}), ({ onClick }) => ({
+    cursor: onClick ? 'pointer' : 'default',
+}));
+const StyledStack = styled('span')({
     position: 'absolute',
     top: 0,
     left: 0,
-}, function (_a) {
-    var size = _a.size;
-    return ({
-        height: size,
-        width: size,
-    });
-});
-var StyledIcon = styled(SystemIconCircle)({
+}, ({ size }) => ({
+    height: size,
+    width: size,
+}));
+const StyledIcon = styled(SystemIconCircle)({
     transition: fadeTransition,
-}, function (_a) {
-    var isImageLoaded = _a.isImageLoaded;
-    return ({
-        opacity: isImageLoaded ? 0 : 1,
-    });
-});
-var StyledImage = styled('img')({
+}, ({ isImageLoaded }) => ({
+    opacity: isImageLoaded ? 0 : 1,
+}));
+const StyledImage = styled('img')({
     width: '100%',
     height: '100%',
     borderRadius: borderRadius.circle,
     transition: fadeTransition,
-}, function (_a) {
-    var isLoaded = _a.isLoaded;
-    return ({
-        opacity: isLoaded ? 1 : 0,
-    });
-});
-export var Avatar = React.forwardRef(function (_a, ref) {
-    var _b = _a.variant, variant = _b === void 0 ? AvatarVariant.Light : _b, _c = _a.size, size = _c === void 0 ? SystemIconCircleSize.m : _c, _d = _a.altText, altText = _d === void 0 ? 'Avatar' : _d, url = _a.url, onClick = _a.onClick, elemProps = __rest(_a, ["variant", "size", "altText", "url", "onClick"]);
-    var _e = useState(false), imageLoaded = _e[0], setImageLoaded = _e[1];
-    var loadImage = function () {
+}, ({ isLoaded }) => ({
+    opacity: isLoaded ? 1 : 0,
+}));
+export const Avatar = React.forwardRef(({ variant = AvatarVariant.Light, size = SystemIconCircleSize.m, altText = 'Avatar', url, onClick, ...elemProps }, ref) => {
+    const [imageLoaded, setImageLoaded] = useState(false);
+    const loadImage = () => {
         if (!imageLoaded) {
             setImageLoaded(true);
         }
     };
-    React.useLayoutEffect(function () {
+    React.useLayoutEffect(() => {
         setImageLoaded(false);
     }, [url]);
-    var background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
-    return (React.createElement(StyledContainer, __assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
+    const background = variant === AvatarVariant.Dark ? colors.blueberry400 : colors.soap300;
+    return (React.createElement(StyledContainer, Object.assign({ size: size, "aria-label": altText, onClick: onClick, disabled: onClick ? false : true, ref: ref }, elemProps),
         React.createElement(StyledStack, { size: size },
             React.createElement(StyledIcon, { icon: userIcon, background: background, size: size, isImageLoaded: imageLoaded })),
         url && (React.createElement(StyledStack, { size: size },

package/dist/es6/badge/lib/CountBadge.js

@@ -1,34 +1,8 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-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 { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, colors, fontFamily } from '@workday/canvas-kit-react/tokens';
-var variants = {
+const variants = {
     default: {
         background: colors.cinnamon500,
         color: colors.frenchVanilla100,
@@ -40,14 +14,22 @@ var variants = {
         color: colors.blueberry400,
     },
 };
-var grow = keyframes(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  from {\n    transform: scale(0.85);\n  }\n\n  to {\n    transform: scale(1.0);\n  }\n"], ["\n  from {\n    transform: scale(0.85);\n  }\n\n  to {\n    transform: scale(1.0);\n  }\n"])));
-var Container = styled('span')({
+const grow = keyframes `
+  from {
+    transform: scale(0.85);
+  }
+
+  to {
+    transform: scale(1.0);
+  }
+`;
+const Container = styled('span')({
     alignItems: 'center',
-    animation: grow + " 0.2s ease",
+    animation: `${grow} 0.2s ease`,
     borderRadius: borderRadius.circle,
     boxSizing: 'border-box',
     display: 'inline-flex',
-    fontFamily: fontFamily,
+    fontFamily,
     fontSize: '12px',
     fontWeight: 700,
     height: '20px',
@@ -55,13 +37,11 @@ var Container = styled('span')({
     lineHeight: '20px',
     minWidth: '20px',
     padding: '0 6.5px',
-}, function (_a) {
-    var _b = _a.variant, variant = _b === void 0 ? 'default' : _b;
-    return (__assign({}, variants[variant]));
-});
-export var CountBadge = function (props) {
-    var _a = props.variant, variant = _a === void 0 ? 'default' : _a, _b = props.count, count = _b === void 0 ? 0 : _b, _c = props.limit, limit = _c === void 0 ? 1000 : _c, elemProps = __rest(props, ["variant", "count", "limit"]);
-    var formattedCount = count < limit ? "" + count : limit - 1 + "+";
-    return (React.createElement(Container, __assign({ variant: variant }, elemProps), formattedCount));
+}, ({ variant = 'default' }) => ({
+    ...variants[variant],
+}));
+export const CountBadge = (props) => {
+    const { variant = 'default', count = 0, limit = 1000, ...elemProps } = props;
+    const formattedCount = count < limit ? `${count}` : `${limit - 1}+`;
+    return (React.createElement(Container, Object.assign({ variant: variant }, elemProps), formattedCount));
 };
-var templateObject_1;

package/dist/es6/banner/lib/Banner.d.ts

@@ -7,7 +7,38 @@ export interface BannerProps extends ExtractProps<typeof Flex, never> {
      */
     children?: React.ReactNode;
 }
-export declare const Banner: import("../../common").ElementComponentM<"button", BannerProps & Partial<{
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
+export declare const Banner: import("@workday/canvas-kit-react/common").ElementComponentM<"button", BannerProps & Partial<{
     hasError: boolean;
     isSticky: boolean;
     id: string;
@@ -19,7 +50,15 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
     };
     events: {};
 }> & {
-    Icon: import("../../common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
+    /**
+     * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+     * exclamationCircleIcon when the model's hasError is true.
+     *
+     * ```tsx
+     * <Banner.Icon />
+     * ```
+     */
+    Icon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
         state: {
             id: string;
             hasError: boolean;
@@ -27,7 +66,15 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
         };
         events: {};
     }>;
-    Label: import("../../common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
+    /**
+     * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+     * the aria-describedby on the top level `<button>`.
+     *
+     * ```tsx
+     * <Banner.Label>3 Warnings</Banner.Label>
+     * ```
+     */
+    Label: import("@workday/canvas-kit-react/common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
         state: {
             id: string;
             hasError: boolean;
@@ -35,7 +82,16 @@ export declare const Banner: import("../../common").ElementComponentM<"button",
         };
         events: {};
     }>;
-    ActionText: import("../../common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
+    /**
+     * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+     * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+     * when the model's `isSticky` prop is set to true.
+     *
+     * ```tsx
+     * <Banner.ActionText>Custom call to action</Banner.ActionText>
+     * ```
+     */
+    ActionText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
         state: {
             id: string;
             hasError: boolean;

package/dist/es6/banner/lib/Banner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkDjB,CAAC"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAYD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA8BG;AACH,eAAO,MAAM,MAAM;;;;;;;;;;;;IAKf;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;OAOG;;;;;;;;;IAEH;;;;;;;;OAQG;;;;;;;;;CA4CL,CAAC"}

package/dist/es6/banner/lib/Banner.js

@@ -1,25 +1,3 @@
-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;
-};
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { jsx } from '@emotion/react';
@@ -30,35 +8,97 @@ import { useBanner, useBannerModel, useThemedPalette } from './hooks';
 import { BannerIcon } from './BannerIcon';
 import { BannerLabel } from './BannerLabel';
 import { BannerActionText } from './BannerActionText';
-var styles = __assign({ cursor: 'pointer', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })) }, hideMouseFocus);
-export var Banner = createContainer('button')({
+const styles = {
+    cursor: 'pointer',
+    transition: 'background-color 120ms',
+    '&:focus': {
+        outline: 'none',
+        ...focusRing({ separation: 2 }),
+    },
+    ...hideMouseFocus,
+};
+/**
+ * `Banner` is a container component rendered as a `<button>` element that is responsible for creating
+ * a `BannerModel` and sharing it with its subcomponents using React context.
+ *
+ * ```tsx
+ * <Banner
+ * 	isSticky={true}
+ * 	hasError={true}
+ * 	id='custom-banner-id'
+ * 	onClick={() => console.log('clicked banner')}
+ * >
+ *   {Child components}
+ * </Banner>
+ * ```
+ *
+ * Alternatively, you may pass in a model using the hoisted model pattern.
+ *
+ * ```tsx
+ * const model = useBannerModel({
+ *   isSticky: true,
+ *   hasError: true,
+ *   id: 'custom-banner-id',
+ * });
+ *
+ * return (
+ *   <Banner onClick={() => console.log('clicked banner')} model={model}>
+ *     {Child components}
+ *   </Banner>
+ * );
+ * ```
+ */
+export const Banner = createContainer('button')({
     displayName: 'Banner',
     modelHook: useBannerModel,
     elemPropsHook: useBanner,
     subComponents: {
+        /**
+         * `Banner.Icon` is a styled {@link SystemIcon}. The icon defaults to exclamationTriangleIcon or
+         * exclamationCircleIcon when the model's hasError is true.
+         *
+         * ```tsx
+         * <Banner.Icon />
+         * ```
+         */
         Icon: BannerIcon,
+        /**
+         * `Banner.Label` is a styled {@link Flex}. This component will get an id that will be used for
+         * the aria-describedby on the top level `<button>`.
+         *
+         * ```tsx
+         * <Banner.Label>3 Warnings</Banner.Label>
+         * ```
+         */
         Label: BannerLabel,
+        /**
+         * `Banner.ActionText` is a styled {@link Box}. This component will get an id that will be used
+         * for the aria-labelledby on the top level `<button>`. This component will be visually hidden
+         * when the model's `isSticky` prop is set to true.
+         *
+         * ```tsx
+         * <Banner.ActionText>Custom call to action</Banner.ActionText>
+         * ```
+         */
         ActionText: BannerActionText,
     },
-})(function (_a, Element, model) {
-    var _b;
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    var palette = useThemedPalette(model.state.hasError ? 'error' : 'alert');
-    var themedBackgroundStyles = {
+})(({ children, ...elemProps }, Element, model) => {
+    const palette = useThemedPalette(model.state.hasError ? 'error' : 'alert');
+    const themedBackgroundStyles = {
         '&:hover': {
             backgroundColor: palette.hover,
         },
     };
-    var isRTL = useIsRTL();
-    var borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
-    var borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
-    var borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
-    var borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
-    var borderStyleProps = (_b = {},
-        _b[borderBottomLeftRadius] = borderRadius.m,
-        _b[borderTopLeftRadius] = borderRadius.m,
-        _b[borderBottomRightRadius] = model.state.isSticky ? 0 : borderRadius.m,
-        _b[borderTopRightRadius] = model.state.isSticky ? 0 : borderRadius.m,
-        _b);
-    return (jsx(Flex, __assign({ as: Element }, type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: space.xxs + " " + space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
+    const isRTL = useIsRTL();
+    const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
+    const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
+    const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
+    const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
+    const borderStyleProps = {
+        [borderBottomLeftRadius]: borderRadius.m,
+        [borderTopLeftRadius]: borderRadius.m,
+        [borderBottomRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+        [borderTopRightRadius]: model.state.isSticky ? 0 : borderRadius.m,
+    };
+    return (jsx(Flex, Object.assign({ as: Element }, type.levels.subtext.large, { fontWeight: "medium", textAlign: "left", width: model.state.isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: `${space.xxs} ${space.s}`, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, elemProps), children));
 });

package/dist/es6/banner/lib/BannerActionText.d.ts

@@ -8,7 +8,7 @@ export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
      */
     children?: React.ReactNode;
 }
-export declare const BannerActionText: import("../../common").ElementComponentM<"span", BannerActionTextProps, {
+export declare const BannerActionText: import("@workday/canvas-kit-react/common").ElementComponentM<"span", BannerActionTextProps, {
     state: {
         id: string;
         hasError: boolean;

package/dist/es6/banner/lib/BannerActionText.js

@@ -1,37 +1,14 @@
-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 { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
 import { useBannerActionText, useBannerModel } from './hooks';
-var StyledActionBarText = styled(Box.as('span'))({
+const StyledActionBarText = styled(Box.as('span'))({
     textDecoration: 'underline',
 });
-export var BannerActionText = createSubcomponent('span')({
+export const BannerActionText = createSubcomponent('span')({
     displayName: 'Banner.ActionTextText',
     modelHook: useBannerModel,
     elemPropsHook: useBannerActionText,
-})(function (_a, Element, model) {
-    var _b = _a.children, children = _b === void 0 ? 'View All' : _b, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(StyledActionBarText, __assign({ as: Element, display: model.state.isSticky ? 'none' : 'inline' }, elemProps), children));
+})(({ children = 'View All', ...elemProps }, Element, model) => {
+    return (React.createElement(StyledActionBarText, Object.assign({ as: Element, display: model.state.isSticky ? 'none' : 'inline' }, elemProps), children));
 });