@workday/canvas-kit-react 6.3.5 → 7.0.0-alpha.0-next.3

package/dist/commonjs/toast/lib/Toast.js

@@ -21,9 +21,15 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     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 });
-/** @jsx jsx */
-var core_1 = require("@emotion/core");
+var React = __importStar(require("react"));
 var popup_1 = require("@workday/canvas-kit-react/popup");
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var icon_1 = require("@workday/canvas-kit-react/icon");
@@ -42,10 +48,7 @@ var ToastSystemIcon = common_1.styled(icon_1.SystemIcon)({
     alignSelf: 'start',
 });
 var _a = tokens_1.type.levels.subtext.large, color = _a.color, subTextLargeStyles = __rest(_a, ["color"]);
-var actionButtonStyles = __assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: tokens_1.space.xxxs });
-var ActionButton = function (props) {
-    return core_1.jsx(button_1.Hyperlink, __assign({ as: "button", css: actionButtonStyles }, props));
-};
+var StyledActionButton = common_1.styled(button_1.Hyperlink)(__assign(__assign({}, subTextLargeStyles), { display: 'block', backgroundColor: 'transparent', border: 'none', marginTop: tokens_1.space.xxxs }));
 var Message = common_1.styled('div')({
     wordBreak: 'break-word',
     wordWrap: 'break-word',
@@ -57,13 +60,13 @@ exports.Toast = common_1.createComponent('div')({
         _c = _a.iconColor, // needed for TS2742 - https://github.com/microsoft/TypeScript/issues/29808
         iconColor = _c === void 0 ? tokens_1.colors.greenApple400 : _c, onClose = _a.onClose, onActionClick = _a.onActionClick, actionText = _a.actionText, children = _a.children, elemProps = __rest(_a, ["icon", "iconColor", "onClose", "onActionClick", "actionText", "children"]);
         var isInteractive = onClose || onActionClick;
-        return (core_1.jsx(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
-            onClose && core_1.jsx(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
-            core_1.jsx(popup_1.Popup.Body, null,
-                core_1.jsx(ToastContentContainer, { onClose: onClose },
-                    icon && core_1.jsx(ToastSystemIcon, { color: iconColor, colorHover: iconColor, icon: icon }),
-                    core_1.jsx(Message, null,
+        return (React.createElement(popup_1.Popup.Card, __assign({ ref: ref, as: Element, width: toastWidth, padding: "s", role: isInteractive ? 'dialog' : 'status', "aria-live": isInteractive ? 'off' : 'polite', "aria-atomic": !isInteractive }, elemProps),
+            onClose && React.createElement(popup_1.Popup.CloseIcon, { "aria-label": "Close", onClick: onClose, size: "small" }),
+            React.createElement(popup_1.Popup.Body, null,
+                React.createElement(ToastContentContainer, { onClose: onClose },
+                    icon && React.createElement(ToastSystemIcon, { color: iconColor, colorHover: iconColor, icon: icon }),
+                    React.createElement(Message, null,
                         children,
-                        onActionClick && core_1.jsx(ActionButton, { onClick: onActionClick }, actionText))))));
+                        onActionClick && (React.createElement(StyledActionButton, { as: "button", onClick: onActionClick }, actionText)))))));
     },
 });

package/dist/es6/action-bar/index.d.ts

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

package/dist/es6/action-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iBAAiB,CAAC;AAExC,eAAe,SAAS,CAAC;AACzB,OAAO,EAAC,SAAS,EAAC,CAAC;AACnB,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../action-bar/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/dist/es6/action-bar/index.js

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

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

@@ -1,12 +1,7 @@
-import * as React from 'react';
-export interface ActionBarProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * If true, fix the ActionBar to the bottom of the screen.
-     * @default false
-     */
-    fixed?: boolean;
-}
-export default class ActionBar extends React.Component<ActionBarProps> {
-    render(): JSX.Element;
+import { HStackProps, StackSpacing } from '@workday/canvas-kit-labs-react';
+interface ActionBarProps extends Omit<HStackProps, 'spacing'> {
+    spacing?: StackSpacing;
 }
+export declare const ActionBar: import("../../common").ElementComponent<"div", ActionBarProps>;
+export {};
 //# sourceMappingURL=ActionBar.d.ts.map

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":"AAGA,OAAO,EAAS,WAAW,EAAE,YAAY,EAAC,MAAM,gCAAgC,CAAC;AAEjF,UAAU,cAAe,SAAQ,IAAI,CAAC,WAAW,EAAE,SAAS,CAAC;IAC3D,OAAO,CAAC,EAAE,YAAY,CAAC;CACxB;AAWD,eAAO,MAAM,SAAS,gEAkBpB,CAAC"}

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

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -22,78 +9,23 @@ var __assign = (this && this.__assign) || function () {
     };
     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 { styled } from '@workday/canvas-kit-react/common';
-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')] = {
-        padding: space.xxs,
-    }, _b));
-});
-var ChildrenContainer = styled('div')({
-    display: 'inline-block',
-    padding: "0 " + space.m,
-    '*:not(:first-of-type)': {
-        marginLeft: space.s,
-    },
-}, function (_a) {
+import { createComponent, styled } from '@workday/canvas-kit-react/common';
+import { commonColors, colors, space } from '@workday/canvas-kit-react/tokens';
+import { HStack } from '@workday/canvas-kit-labs-react';
+var ResponsiveHStack = styled(HStack)(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',
-            '> *': {
+            padding: space.s,
+            '> *:not(div)': {
                 flex: 1,
-                '&:not(:first-of-type)': {
-                    marginRight: space.s,
-                    marginLeft: 0,
-                },
             },
         },
         _b);
 });
-var ActionBar = /** @class */ (function (_super) {
-    __extends(ActionBar, _super);
-    function ActionBar() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    ActionBar.prototype.render = function () {
-        var _a = this.props, fixed = _a.fixed, children = _a.children, elemProps = __rest(_a, ["fixed", "children"]);
-        return (React.createElement(ActionBarContainer, __assign({}, elemProps, { fixed: fixed }),
-            React.createElement(ChildrenContainer, null, children)));
-    };
-    return ActionBar;
-}(React.Component));
-export default ActionBar;
+export var ActionBar = createComponent('div')({
+    displayName: 'ActionBar',
+    Component: function (elemProps, ref, Element) { return (React.createElement(ResponsiveHStack, __assign({ ref: ref, as: Element, spacing: "s", depth: 1, background: commonColors.background, borderTop: "solid 1px " + colors.soap400, padding: space.s + " " + space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps))); },
+});

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,38 +1,22 @@
 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;
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel, BannerModelConfig } from './hooks';
+export declare const BannerModelContext: React.Context<import("../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>>;
+export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
     /**
-     * The variant of the Banner. Accepts `Full` or `Sticky`.
-     * @default BannerVariant.Full
+     * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
-    variant?: BannerVariant;
-    /**
-     * The type of error associated with the Banner (if applicable).
-     * @default ErrorType.Alert
-     */
-    error?: ErrorType;
-    /**
-     * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
-     * @default 'View All'
-     */
-    actionText?: string;
-}
-declare class Banner extends React.Component<BannerProps> {
-    static Variant: typeof BannerVariant;
-    static ErrorType: typeof ErrorType;
-    render(): JSX.Element;
+    children?: React.ReactNode;
 }
-export default Banner;
+export declare const Banner: import("../../common").ElementComponent<"button", BannerProps> & {
+    Icon: import("../../common").ElementComponent<"span", import("./BannerIcon").BannerIconProps>;
+    Label: import("../../common").ElementComponent<"div", import("./BannerLabel").BannerLabelProps>;
+    ActionText: import("../../common").ElementComponent<"span", import("./BannerActionText").BannerActionTextProps>;
+};
 //# 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,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,MAAM,CAAC,OAAO,uBAAiB;IAC/B,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CA8Bd;AAKD,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,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAE3D,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAA8C,MAAM,SAAS,CAAC;AAMpG,eAAO,MAAM,kBAAkB;;;;OAA8C,CAAC;AAE9E,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;CAqDjB,CAAC"}

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

@@ -1,16 +1,3 @@
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -33,63 +20,52 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+/** @jsxRuntime classic */
+/** @jsx jsx */
+import { jsx } from '@emotion/core';
 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',
-        '&:hover': {
-            backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
-        },
-    });
-});
-var BannerIcon = styled(SystemIcon)({
-    marginRight: space.xs,
+import { borderRadius, space, type } from '@workday/canvas-kit-react/tokens';
+import { createComponent, focusRing, hideMouseFocus, useDefaultModel, useIsRTL, } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { useBanner, useBannerModel, useThemedPalette } from './hooks';
+import { BannerIcon } from './BannerIcon';
+import { BannerLabel } from './BannerLabel';
+import { BannerActionText } from './BannerActionText';
+export var BannerModelContext = React.createContext({});
+// 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 = createComponent('button')({
+    displayName: 'Banner',
+    Component: function (_a, ref, Element) {
+        var _b;
+        var children = _a.children, model = _a.model, props = __rest(_a, ["children", "model"]);
+        var hasError = props.hasError, isSticky = props.isSticky, id = props.id, elemProps = __rest(props, ["hasError", "isSticky", "id"]);
+        var value = useDefaultModel(model, { hasError: hasError, isSticky: isSticky, id: id }, useBannerModel);
+        var palette = useThemedPalette(hasError ? 'error' : 'alert');
+        var 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] = isSticky ? 0 : borderRadius.m,
+            _b[borderTopRightRadius] = isSticky ? 0 : borderRadius.m,
+            _b);
+        var bannerProps = useBanner(value, elemProps, ref);
+        return (jsx(BannerModelContext.Provider, { value: value },
+            jsx(Flex, __assign({ as: Element, width: isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: space.xxs + " " + space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, bannerProps), children)));
+    },
+    subComponents: {
+        Icon: BannerIcon,
+        Label: BannerLabel,
+        ActionText: BannerActionText,
+    },
 });
-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 = /** @class */ (function (_super) {
-    __extends(Banner, _super);
-    function Banner() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Banner.prototype.render = function () {
-        var _a = this.props, _b = _a.actionText, actionText = _b === void 0 ? 'View All' : _b, _c = _a.variant, variant = _c === void 0 ? BannerVariant.Full : _c, _d = _a.error, error = _d === void 0 ? ErrorType.Alert : _d, label = _a.label, onClick = _a.onClick, props = __rest(_a, ["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 }, props),
-            React.createElement(BannerIcon, { icon: bannerIcon, color: iconColor, colorHover: iconColor, size: iconSize }),
-            React.createElement(BannerLabel, null, label),
-            React.createElement(BannerViewAll, { variant: variant }, actionText)));
-    };
-    Banner.Variant = BannerVariant;
-    Banner.ErrorType = ErrorType;
-    return Banner;
-}(React.Component));
-Banner.Variant = BannerVariant;
-Banner.ErrorType = ErrorType;
-export default Banner;

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

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { BannerModel } from './hooks';
+export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner action.
+     * @default 'View All'
+     */
+    children?: React.ReactNode;
+}
+export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
+//# 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,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAG1D,OAAO,EAAC,WAAW,EAAsB,MAAM,SAAS,CAAC;AAEzD,MAAM,WAAW,qBAAsB,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC;IAC5E,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAMD,eAAO,MAAM,gBAAgB,wEAqB3B,CAAC"}

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

@@ -0,0 +1,39 @@
+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 { createComponent, useModelContext, styled, } from '@workday/canvas-kit-react/common';
+import { Box } from '@workday/canvas-kit-labs-react/common';
+import { BannerModelContext } from './Banner';
+import { useBannerActionText } from './hooks';
+var StyledActionBarText = styled(Box.as('span'))({
+    textDecoration: 'underline',
+});
+export var BannerActionText = createComponent('span')({
+    displayName: 'Banner.ActionTextText',
+    Component: function (_a, ref, Element) {
+        var _b = _a.children, children = _b === void 0 ? 'View All' : _b, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = useModelContext(BannerModelContext, model);
+        var props = useBannerActionText(localModel, elemProps, ref);
+        return (React.createElement(StyledActionBarText, __assign({ display: localModel.state.isSticky ? 'none' : 'inline', ref: ref, as: Element }, props), children));
+    },
+});

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

@@ -0,0 +1,14 @@
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { CanvasSystemIcon } from '@workday/design-assets-types';
+import { BannerModel } from './hooks';
+export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
+    model?: BannerModel;
+    /**
+     * Icon to show next to label
+     * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
+     */
+    icon?: CanvasSystemIcon;
+}
+export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
+//# 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;AAE1D,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAC,WAAW,EAAgB,MAAM,SAAS,CAAC;AAEnD,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC3F,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU,kEAUrB,CAAC"}

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

@@ -0,0 +1,42 @@
+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 { createComponent, useModelContext, styled, } from '@workday/canvas-kit-react/common';
+import { SystemIcon } from '@workday/canvas-kit-react/icon';
+import { exclamationTriangleIcon } from '@workday/canvas-system-icons-web';
+import { BannerModelContext } from './Banner';
+import { useBannerIcon } from './hooks';
+var StyledBannerIcon = styled(SystemIcon)({
+    marginRight: space.xs,
+});
+export var BannerIcon = createComponent('span')({
+    displayName: 'Banner.Icon',
+    Component: function (_a, ref) {
+        var _b = _a.icon, icon = _b === void 0 ? exclamationTriangleIcon : _b, model = _a.model, elemProps = __rest(_a, ["icon", "model"]);
+        var localModel = useModelContext(BannerModelContext, model);
+        // SystemIcon is still a class based component so we need to set ref manually.
+        var _c = useBannerIcon(localModel, elemProps, ref), iconRef = _c.ref, defaultIcon = _c.icon, props = __rest(_c, ["ref", "icon"]);
+        return React.createElement(StyledBannerIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconRef: iconRef }, props));
+    },
+});

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import { ExtractProps } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModel } from './hooks';
+export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
+    model?: BannerModel;
+    /**
+     * The text of the Banner.
+     */
+    children: React.ReactNode;
+}
+export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
+//# 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,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAG3D,OAAO,EAAC,WAAW,EAAiB,MAAM,SAAS,CAAC;AAEpD,MAAM,WAAW,gBAAiB,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACxE,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,WAAW,kEAYtB,CAAC"}

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

@@ -0,0 +1,36 @@
+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 { createComponent, useModelContext } from '@workday/canvas-kit-react/common';
+import { Flex } from '@workday/canvas-kit-labs-react/layout';
+import { BannerModelContext } from './Banner';
+import { useBannerLabel } from './hooks';
+export var BannerLabel = createComponent('div')({
+    displayName: 'Banner.Label',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = useModelContext(BannerModelContext, model);
+        var props = useBannerLabel(localModel, elemProps, ref);
+        return (React.createElement(Flex, __assign({ as: Element, flex: "1 1 0%" }, props), 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';