@workday/canvas-kit-react 6.8.8 → 6.9.0-next.4

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

@@ -0,0 +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"}

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

@@ -0,0 +1,71 @@
+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), { 
+        /**
+         * Optional id for the whole `ActionBar` group. If not provided, a unique id will be created.
+         * @default useUniqueId()
+         */
+        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: {} }),
+    requiredConfig: useOverflowListModel.requiredConfig,
+})(function (config) {
+    var getId = config.getId || defaultGetId;
+    var items = config.items;
+    var model = useOverflowListModel(useOverflowListModel.mergeConfig(config, {
+        orientation: config.orientation || 'horizontal',
+        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);
+    }
+    // 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); }, 
+    // 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,
+        items: overflowItems,
+        nonInteractiveIds: state.nonInteractiveIds.filter(function (key) { return !state.hiddenIds.includes(key); }),
+        onSelect: function () {
+            menu.events.hide();
+        },
+        onShow: function () {
+            // Always select the first item when the menu is opened
+            menu.events.goToFirst();
+        },
+    }));
+    return __assign(__assign({}, model), { state: state,
+        events: events,
+        menu: menu });
+});

package/dist/es6/badge/lib/CountBadge.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8CD,QAAA,MAAM,UAAU,yCAUf,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"CountBadge.d.ts","sourceRoot":"","sources":["../../../../badge/lib/CountBadge.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,eAAgB,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;CACjC;AA8CD,QAAA,MAAM,UAAU,UAAW,eAAe,gBAUzC,CAAC;AAEF,eAAe,UAAU,CAAC"}

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

@@ -25,7 +25,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import * as React from 'react';
-import { keyframes } from '@emotion/core';
+import { keyframes } from '@emotion/react';
 import styled from '@emotion/styled';
 import { borderRadius, colors, fontFamily } from '@workday/canvas-kit-react/tokens';
 var variants = {

package/dist/es6/banner/index.d.ts

@@ -1,5 +1,3 @@
-import Banner from './lib/Banner';
-export default Banner;
-export { Banner };
 export * from './lib/Banner';
+export * from './lib/hooks/';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/banner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}

package/dist/es6/banner/index.js

@@ -1,4 +1,2 @@
-import Banner from './lib/Banner';
-export default Banner;
-export { Banner };
 export * from './lib/Banner';
+export * from './lib/hooks/';

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

@@ -1,37 +1,56 @@
 import * as React from 'react';
-import { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
-export declare enum BannerVariant {
-    Full = 0,
-    Sticky = 1
-}
-export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
-    /**
-     * The function called when the Banner is clicked.
-     */
-    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    /**
-     * The label of the Banner.
-     */
-    label?: React.ReactNode;
-    /**
-     * The variant of the Banner. Accepts `Full` or `Sticky`.
-     * @default BannerVariant.Full
-     */
-    variant?: BannerVariant;
-    /**
-     * The type of error associated with the Banner (if applicable).
-     * @default ErrorType.Alert
-     */
-    error?: ErrorType;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface BannerProps extends ExtractProps<typeof Flex, never> {
     /**
-     * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-     * @default 'View All'
+     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
-    actionText?: string;
+    children?: React.ReactNode;
 }
-declare const Banner: React.FC<BannerProps> & {
-    Variant: typeof BannerVariant;
-    ErrorType: typeof ErrorType;
+export declare const Banner: import("../../common").ElementComponentM<"button", BannerProps & Partial<{
+    hasError: boolean;
+    isSticky: boolean;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Icon: import("../../common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("../../common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+    ActionText: import("../../common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
 };
-export default Banner;
 //# sourceMappingURL=Banner.d.ts.map

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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAqB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEzF,oBAAY,aAAa;IACvB,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3F;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAoDD,QAAA,MAAM,MAAM;;;CAiCX,CAAC;AAKF,eAAe,MAAM,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;AAkBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAC"}

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

@@ -20,54 +20,47 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import * as React from 'react';
-import { colors, space, borderRadius, type } from '@workday/canvas-kit-react/tokens';
-import { SystemIcon } from '@workday/canvas-kit-react/icon';
-import { exclamationCircleIcon, exclamationTriangleIcon } from '@workday/canvas-system-icons-web';
-import { ErrorType, focusRing, styled } from '@workday/canvas-kit-react/common';
-export var BannerVariant;
-(function (BannerVariant) {
-    BannerVariant[BannerVariant["Full"] = 0] = "Full";
-    BannerVariant[BannerVariant["Sticky"] = 1] = "Sticky";
-})(BannerVariant || (BannerVariant = {}));
-var BannerWrapper = styled('button')(__assign(__assign({}, type.levels.subtext.large), { fontWeight: type.properties.fontWeights.medium, backgroundColor: colors.cantaloupe400, boxSizing: 'border-box', color: colors.blackPepper400, padding: space.xxs + " " + space.s, textAlign: 'left', border: 0, display: 'flex', alignItems: 'center', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })), '&:hover': {
-        cursor: 'pointer',
-    } }), function (_a) {
-    var error = _a.error, variant = _a.variant;
-    return ({
-        backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
-        color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
-        borderRadius: variant === BannerVariant.Sticky ? borderRadius.m + " 0 0 " + borderRadius.m : borderRadius.m,
-        width: variant === BannerVariant.Sticky ? '222px' : '328px',
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { borderRadius, space, type } from '@workday/canvas-kit-react/tokens';
+import { createContainer, focusRing, hideMouseFocus, useIsRTL, } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { useBanner, useBannerModel, useThemedPalette } from './hooks';
+import { BannerIcon } from './BannerIcon';
+import { BannerLabel } from './BannerLabel';
+import { BannerActionText } from './BannerActionText';
+// Remove color from our type since it is set on the Flex style attribute
+var _a = type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
+var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, focusRing({ separation: 2 })) }), hideMouseFocus);
+export var Banner = createContainer('button')({
+    displayName: 'Banner',
+    modelHook: useBannerModel,
+    elemPropsHook: useBanner,
+    subComponents: {
+        Icon: BannerIcon,
+        Label: BannerLabel,
+        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 = {
         '&:hover': {
-            backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
+            backgroundColor: palette.hover,
         },
-    });
-});
-var BannerIcon = styled(SystemIcon)({
-    marginRight: space.xs,
-});
-var BannerLabel = styled('div')({
-    flex: 1,
-});
-var BannerViewAll = styled('span')({
-    textDecoration: 'underline',
-}, function (_a) {
-    var variant = _a.variant;
-    return ({
-        display: variant === BannerVariant.Sticky ? 'none' : undefined,
-    });
-});
-var Banner = React.forwardRef(function (props, ref) {
-    var _a = props.actionText, actionText = _a === void 0 ? 'View All' : _a, _b = props.variant, variant = _b === void 0 ? BannerVariant.Full : _b, _c = props.error, error = _c === void 0 ? ErrorType.Alert : _c, label = props.label, onClick = props.onClick, elemProps = __rest(props, ["actionText", "variant", "error", "label", "onClick"]);
-    var bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
-    var iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
-    var iconSize = 24;
-    return (React.createElement(BannerWrapper, __assign({ "aria-label": actionText + ': ' + label, role: "button", variant: variant, tabIndex: 0, onClick: onClick, error: error, ref: ref }, elemProps),
-        React.createElement(BannerIcon, { icon: bannerIcon, color: iconColor, colorHover: iconColor, size: iconSize }),
-        React.createElement(BannerLabel, null, label),
-        React.createElement(BannerViewAll, { variant: variant }, actionText)));
+    };
+    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, 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));
 });
-Banner.Variant = BannerVariant;
-Banner.ErrorType = ErrorType;
-export default Banner;

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

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-react/layout';
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+    /**
+     * The text of the Banner action.
+     * @default 'View All'
+     */
+    children?: React.ReactNode;
+}
+export declare const BannerActionText: import("../../common").ElementComponentM<"span", BannerActionTextProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=BannerActionText.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerActionText.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerActionText.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,kCAAkC,CAAC;AAIrD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC5E;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,gBAAgB;;;;;;;EAc3B,CAAC"}

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

@@ -0,0 +1,37 @@
+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'))({
+    textDecoration: 'underline',
+});
+export var 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));
+});

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

@@ -0,0 +1,19 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    /**
+     * Icon to show next to label
+     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const BannerIcon: import("../../common").ElementComponentM<"span", BannerIconProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=BannerIcon.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,UAAU,EAAC,MAAM,gCAAgC,CAAC;AAC1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU;;;;;;;EAQrB,CAAC"}

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

@@ -0,0 +1,38 @@
+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 from 'react';
+import { space } from '@workday/canvas-kit-react/tokens';
+import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { useBannerIcon, useBannerModel } from './hooks';
+var StyledBannerIcon = styled(SystemIcon)({
+    marginRight: space.xs,
+});
+export var BannerIcon = createSubcomponent('span')({
+    displayName: 'Banner.Icon',
+    modelHook: useBannerModel,
+    elemPropsHook: useBannerIcon,
+})(function (elemProps, Element, model) {
+    var icon = elemProps.icon, iconButtonProps = __rest(elemProps, ["icon"]);
+    return React.createElement(StyledBannerIcon, __assign({ as: Element, icon: icon }, iconButtonProps));
+});

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

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+    /**
+     * The text of the Banner.
+     */
+    children: React.ReactNode;
+}
+export declare const BannerLabel: import("../../common").ElementComponentM<"div", BannerLabelProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
+//# sourceMappingURL=BannerLabel.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"BannerLabel.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerLabel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAqB,MAAM,kCAAkC,CAAC;AAClF,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAItD,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACxE;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW;;;;;;;EAUtB,CAAC"}

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

@@ -0,0 +1,34 @@
+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 } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-react/layout';
+import { useBannerLabel, useBannerModel } from './hooks';
+export var BannerLabel = createSubcomponent('div')({
+    displayName: 'Banner.Label',
+    modelHook: useBannerModel,
+    elemPropsHook: useBannerLabel,
+})(function (_a, Element) {
+    var children = _a.children, elemProps = __rest(_a, ["children"]);
+    return (React.createElement(Flex, __assign({ as: Element, flex: "1 1 0%" }, elemProps), children));
+});

package/dist/es6/banner/lib/hooks/index.d.ts

@@ -0,0 +1,7 @@
+export * from './useBannerModel';
+export * from './useThemedPalette';
+export * from './useBannerIcon';
+export * from './useBannerLabel';
+export * from './useBannerActionText';
+export * from './useBanner';
+//# sourceMappingURL=index.d.ts.map

package/dist/es6/banner/lib/hooks/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC"}

package/dist/es6/banner/lib/hooks/index.js

@@ -0,0 +1,6 @@
+export * from './useBannerModel';
+export * from './useThemedPalette';
+export * from './useBannerIcon';
+export * from './useBannerLabel';
+export * from './useBannerActionText';
+export * from './useBanner';

package/dist/es6/banner/lib/hooks/useBanner.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export declare const useBanner: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    'aria-describedby': string;
+    'aria-labelledby': string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBanner.d.ts.map

package/dist/es6/banner/lib/hooks/useBanner.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBanner.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBanner.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,SAAS;;;;;;;;;;;;OAKpB,CAAC"}

package/dist/es6/banner/lib/hooks/useBanner.js

@@ -0,0 +1,13 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useBannerModel } from './useBannerModel';
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export var useBanner = createElemPropsHook(useBannerModel)(function (_a) {
+    var state = _a.state;
+    return {
+        'aria-describedby': "label-" + state.id,
+        'aria-labelledby': "action-" + state.id,
+    };
+});

package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+export declare const useBannerActionText: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    id: string;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBannerActionText.d.ts.map

package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBannerActionText.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerActionText.tsx"],"names":[],"mappings":"AAGA;;;GAGG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;OAI9B,CAAC"}

package/dist/es6/banner/lib/hooks/useBannerActionText.js

@@ -0,0 +1,12 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { useBannerModel } from './useBannerModel';
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+export var useBannerActionText = createElemPropsHook(useBannerModel)(function (_a) {
+    var state = _a.state;
+    return {
+        id: "action-" + state.id,
+    };
+});

package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts

@@ -0,0 +1,20 @@
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export declare const useBannerIcon: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+    icon: import("@workday/design-assets-types").CanvasSystemIcon;
+    color: string | undefined;
+    colorHover: string | undefined;
+    size: number;
+} & P & (R extends HTMLOrSVGElement ? {
+    ref: import("react").Ref<R>;
+} : {});
+//# sourceMappingURL=useBannerIcon.d.ts.map

package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBannerIcon.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerIcon.tsx"],"names":[],"mappings":"AAKA;;;GAGG;AACH,eAAO,MAAM,aAAa;;;;;;;;;;;;;;OASxB,CAAC"}

package/dist/es6/banner/lib/hooks/useBannerIcon.js

@@ -0,0 +1,18 @@
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { exclamationCircleIcon, exclamationTriangleIcon } from '@workday/canvas-system-icons-web';
+import { useBannerModel } from './useBannerModel';
+import { useThemedPalette } from './useThemedPalette';
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export var useBannerIcon = createElemPropsHook(useBannerModel)(function (_a) {
+    var state = _a.state;
+    var palette = useThemedPalette(state.hasError ? 'error' : 'alert');
+    return {
+        icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
+        color: palette.contrast,
+        colorHover: palette.contrast,
+        size: 24,
+    };
+});