@workday/canvas-kit-react 6.0.0-alpha.0-next.36 → 6.0.0-alpha.0-next.37

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

@@ -1,17 +1,4 @@
 "use strict";
-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++) {
@@ -42,63 +29,51 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
 var common_1 = require("@workday/canvas-kit-react/common");
-var BannerVariant;
-(function (BannerVariant) {
-    BannerVariant[BannerVariant["Full"] = 0] = "Full";
-    BannerVariant[BannerVariant["Sticky"] = 1] = "Sticky";
-})(BannerVariant = exports.BannerVariant || (exports.BannerVariant = {}));
-var BannerWrapper = common_1.styled('button')(__assign(__assign({}, tokens_1.type.levels.subtext.large), { fontWeight: tokens_1.type.properties.fontWeights.medium, backgroundColor: tokens_1.colors.cantaloupe400, boxSizing: 'border-box', color: tokens_1.colors.blackPepper400, padding: tokens_1.space.xxs + " " + tokens_1.space.s, textAlign: 'left', border: 0, display: 'flex', alignItems: 'center', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })), '&:hover': {
-        cursor: 'pointer',
-    } }), function (_a) {
-    var error = _a.error, variant = _a.variant;
-    return ({
-        backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon500 : tokens_1.colors.cantaloupe400,
-        color: error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.colors.blackPepper400,
-        borderRadius: variant === BannerVariant.Sticky ? tokens_1.borderRadius.m + " 0 0 " + tokens_1.borderRadius.m : tokens_1.borderRadius.m,
-        width: variant === BannerVariant.Sticky ? '222px' : '328px',
-        '&:hover': {
-            backgroundColor: error === common_1.ErrorType.Error ? tokens_1.colors.cinnamon600 : tokens_1.colors.cantaloupe500,
-        },
-    });
-});
-var BannerIcon = common_1.styled(icon_1.SystemIcon)({
-    marginRight: tokens_1.space.xs,
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var hooks_1 = require("./hooks");
+var BannerIcon_1 = require("./BannerIcon");
+var BannerLabel_1 = require("./BannerLabel");
+var BannerActionText_1 = require("./BannerActionText");
+exports.BannerModelContext = React.createContext({});
+// Remove color from our type since it is set on the Flex style attribute
+var _a = tokens_1.type.levels.subtext.large, _color = _a.color, typeLevelsSubtextLarge = __rest(_a, ["color"]);
+var styles = __assign(__assign(__assign({}, typeLevelsSubtextLarge), { cursor: 'pointer', fontWeight: tokens_1.type.properties.fontWeights.medium, textAlign: 'left', transition: 'background-color 120ms', '&:focus': __assign({ outline: 'none' }, common_1.focusRing({ separation: 2 })) }), common_1.hideMouseFocus);
+exports.Banner = common_1.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 = common_1.useDefaultModel(model, { hasError: hasError, isSticky: isSticky, id: id }, hooks_1.useBannerModel);
+        var palette = hooks_1.useThemedPalette(hasError ? 'error' : 'alert');
+        var themedBackgroundStyles = {
+            '&:hover': {
+                backgroundColor: palette.hover,
+            },
+        };
+        var isRTL = common_1.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] = tokens_1.borderRadius.m,
+            _b[borderTopLeftRadius] = tokens_1.borderRadius.m,
+            _b[borderBottomRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b[borderTopRightRadius] = isSticky ? 0 : tokens_1.borderRadius.m,
+            _b);
+        var bannerProps = hooks_1.useBanner(value, elemProps, ref);
+        return (core_1.jsx(exports.BannerModelContext.Provider, { value: value },
+            core_1.jsx(layout_1.Flex, __assign({ as: Element, width: isSticky ? '222px' : '328px', backgroundColor: palette.normal, color: palette.contrast, padding: tokens_1.space.xxs + " " + tokens_1.space.s, border: "0", display: "flex", alignItems: "center" }, borderStyleProps, { css: [styles, themedBackgroundStyles] }, bannerProps), children)));
+    },
+    subComponents: {
+        Icon: BannerIcon_1.BannerIcon,
+        Label: BannerLabel_1.BannerLabel,
+        ActionText: BannerActionText_1.BannerActionText,
+    },
 });
-var BannerLabel = common_1.styled('div')({
-    flex: 1,
-});
-var BannerViewAll = common_1.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 ? common_1.ErrorType.Alert : _d, label = _a.label, onClick = _a.onClick, props = __rest(_a, ["actionText", "variant", "error", "label", "onClick"]);
-        var bannerIcon = error === common_1.ErrorType.Error ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon;
-        var iconColor = error === common_1.ErrorType.Error ? tokens_1.colors.frenchVanilla100 : tokens_1.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 = common_1.ErrorType;
-    return Banner;
-}(React.Component));
-Banner.Variant = BannerVariant;
-Banner.ErrorType = common_1.ErrorType;
-exports.default = Banner;

package/dist/commonjs/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/commonjs/banner/lib/BannerActionText.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerActionText.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerActionText.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAChG,OAAO,EAAC,GAAG,EAAC,MAAM,uCAAuC,CAAC;AAI1D,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/commonjs/banner/lib/BannerActionText.js

@@ -0,0 +1,42 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    textDecoration: 'underline',
+};
+exports.BannerActionText = common_1.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 = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        var props = hooks_1.useBannerActionText(localModel, elemProps, ref);
+        return (core_1.jsx(common_2.Box, __assign({ display: localModel.state.isSticky ? 'none' : 'inline', as: Element, css: [styles] }, props), children));
+    },
+});

package/dist/commonjs/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/commonjs/banner/lib/BannerIcon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BannerIcon.d.ts","sourceRoot":"","sources":["../../../../banner/lib/BannerIcon.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAC,YAAY,EAAmC,MAAM,kCAAkC,CAAC;AAEhG,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,kEAarB,CAAC"}

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

@@ -0,0 +1,47 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/** @jsx jsx */
+var core_1 = require("@emotion/core");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var common_1 = require("@workday/canvas-kit-react/common");
+var common_2 = require("@workday/canvas-kit-labs-react/common");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+var styles = {
+    marginRight: tokens_1.space.xs,
+};
+exports.BannerIcon = common_1.createComponent('span')({
+    displayName: 'Banner.Icon',
+    Component: function (_a, ref) {
+        var _b = _a.icon, icon = _b === void 0 ? canvas_system_icons_web_1.exclamationTriangleIcon : _b, model = _a.model, elemProps = __rest(_a, ["icon", "model"]);
+        var themeRTL = common_2.useThemeRTL().themeRTL;
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        // SystemIcon is still a class based component so we need to set ref manually.
+        var _c = hooks_1.useBannerIcon(localModel, elemProps, ref), iconRef = _c.ref, defaultIcon = _c.icon, props = __rest(_c, ["ref", "icon"]);
+        return (core_1.jsx(icon_1.SystemIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, iconRef: iconRef, css: themeRTL(styles) }, props)));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/banner/lib/BannerLabel.js

@@ -0,0 +1,45 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
+    result["default"] = mod;
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var React = __importStar(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var layout_1 = require("@workday/canvas-kit-labs-react/layout");
+var Banner_1 = require("./Banner");
+var hooks_1 = require("./hooks");
+exports.BannerLabel = common_1.createComponent('div')({
+    displayName: 'Banner.Label',
+    Component: function (_a, ref, Element) {
+        var children = _a.children, model = _a.model, elemProps = __rest(_a, ["children", "model"]);
+        var localModel = common_1.useModelContext(Banner_1.BannerModelContext, model);
+        var props = hooks_1.useBannerLabel(localModel, elemProps, ref);
+        return (React.createElement(layout_1.Flex, __assign({ as: Element, flex: "1 1 0%" }, props), children));
+    },
+});

package/dist/commonjs/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/commonjs/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/commonjs/banner/lib/hooks/index.js

@@ -0,0 +1,11 @@
+"use strict";
+function __export(m) {
+    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
+}
+Object.defineProperty(exports, "__esModule", { value: true });
+__export(require("./useBannerModel"));
+__export(require("./useThemedPalette"));
+__export(require("./useBannerIcon"));
+__export(require("./useBannerLabel"));
+__export(require("./useBannerActionText"));
+__export(require("./useBanner"));

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

@@ -0,0 +1,16 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+export declare const useBanner: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, 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/commonjs/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/commonjs/banner/lib/hooks/useBanner.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+/**
+ * Adds the necessary props to a `Banner` component.
+ * Used by the Banner component
+ */
+exports.useBanner = common_1.createHook(function (_a) {
+    var state = _a.state;
+    return {
+        'aria-describedby': "label-" + state.id,
+        'aria-labelledby': "action-" + state.id,
+    };
+});

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

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+export declare const useBannerActionText: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, 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/commonjs/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/commonjs/banner/lib/hooks/useBannerActionText.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+/**
+ * Adds the necessary props to a `ActionText` component.
+ * Used by the Banner.ActionText subcomponent
+ */
+exports.useBannerActionText = common_1.createHook(function (_a) {
+    var state = _a.state;
+    return {
+        id: "action-" + state.id,
+    };
+});

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

@@ -0,0 +1,18 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+export declare const useBannerIcon: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, 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/commonjs/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/commonjs/banner/lib/hooks/useBannerIcon.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var useThemedPalette_1 = require("./useThemedPalette");
+/**
+ * Adds the necessary props to a `Icon` component.
+ * Used by the Banner.Icon subcomponent
+ */
+exports.useBannerIcon = common_1.createHook(function (_a) {
+    var state = _a.state;
+    var palette = useThemedPalette_1.useThemedPalette(state.hasError ? 'error' : 'alert');
+    return {
+        icon: state.hasError ? canvas_system_icons_web_1.exclamationCircleIcon : canvas_system_icons_web_1.exclamationTriangleIcon,
+        color: palette.contrast,
+        colorHover: palette.contrast,
+        size: 24,
+    };
+});

package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts

@@ -0,0 +1,15 @@
+/// <reference types="@emotion/core" />
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the Banner.Label subcomponent
+ */
+export declare const useBannerLabel: <P extends {}, R>(model: import("../../../common").Model<{
+    hasError?: boolean | undefined;
+    isSticky?: boolean | undefined;
+    id?: string | undefined;
+}, {}>, 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=useBannerLabel.d.ts.map

package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts.map

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

package/dist/commonjs/banner/lib/hooks/useBannerLabel.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+/**
+ * Adds the necessary props to a `Label` component.
+ * Used by the Banner.Label subcomponent
+ */
+exports.useBannerLabel = common_1.createHook(function (_a) {
+    var state = _a.state;
+    return {
+        id: "label-" + state.id,
+    };
+});

package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts

@@ -0,0 +1,37 @@
+import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
+declare type BannerState = {
+    /**
+     * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
+     * will be `exclamationCircleIcon`, and a themed error color will be applied.
+     * @default false
+     */
+    hasError?: boolean;
+    /**
+     * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
+     * will be hidden, and some basic styles will be applied.
+     * You will still need to manually set the css `position` value.
+     * @default false
+     */
+    isSticky?: boolean;
+    /**
+     * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
+     * - `Banner` will set `aria-describedby` to `label-${id}`
+     * - `Banner` will set `aria-label` to `action-${id}`
+     * - `Banner.Label` will set `id` to `label-${id}`
+     * - `Banner.ActionText` will set `id` to `action-${id}`
+     *
+     * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
+     * @default `useUniqueId()`
+     */
+    id?: string;
+};
+declare type BannerEvents = {};
+export declare type BannerModel = Model<BannerState, BannerEvents>;
+declare const BannerEventMap: {
+    guards: {};
+    callbacks: {};
+};
+export declare type BannerModelConfig = BannerState & Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
+export declare const useBannerModel: (config?: BannerModelConfig) => Model<BannerState, BannerEvents>;
+export {};
+//# sourceMappingURL=useBannerModel.d.ts.map

package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useBannerModel.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useBannerModel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,aAAK,WAAW,GAAG;IACjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;;;;OASG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC;AAEF,aAAK,YAAY,GAAG,EAAE,CAAC;AAEvB,oBAAY,WAAW,GAAG,KAAK,CAAC,WAAW,EAAE,YAAY,CAAC,CAAC;AAE3D,QAAA,MAAM,cAAc;;;CAGlB,CAAC;AAEH,oBAAY,iBAAiB,GAAG,WAAW,GACzC,OAAO,CAAC,aAAa,CAAC,WAAW,EAAE,YAAY,EAAE,OAAO,cAAc,CAAC,CAAC,CAAC;AAE3E,eAAO,MAAM,cAAc,kEAe1B,CAAC"}

package/dist/commonjs/banner/lib/hooks/useBannerModel.js

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+var BannerEventMap = common_1.createEventMap()({
+    guards: {},
+    callbacks: {},
+});
+exports.useBannerModel = function (config) {
+    if (config === void 0) { config = {}; }
+    var _a, _b;
+    var id = common_1.useUniqueId(config.id);
+    var state = {
+        hasError: (_a = config.hasError) !== null && _a !== void 0 ? _a : false,
+        isSticky: (_b = config.isSticky) !== null && _b !== void 0 ? _b : false,
+        id: id,
+    };
+    var events = common_1.useEventMap(BannerEventMap, state, config, {});
+    return {
+        state: state,
+        events: events,
+    };
+};

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts

@@ -0,0 +1,11 @@
+import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
+declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
+interface BackgroundColors {
+    normal?: string;
+    hover?: string;
+    contrast?: string;
+}
+export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): BackgroundColors;
+export declare const useThemedPalette: (type: "alert" | "error" | "primary" | "success" | "neutral") => BackgroundColors;
+export {};
+//# sourceMappingURL=useThemedPalette.d.ts.map

package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,gBAAgB,CAclB;AAED,eAAO,MAAM,gBAAgB,mFAI5B,CAAC"}

package/dist/commonjs/banner/lib/hooks/useThemedPalette.js

@@ -0,0 +1,39 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var common_1 = require("@workday/canvas-kit-react/common");
+var tokens_1 = require("@workday/canvas-kit-react/tokens");
+var chroma_js_1 = __importDefault(require("chroma-js"));
+var isAccessible = function (foreground, background) {
+    return chroma_js_1.default.contrast(foreground, background) >= 3;
+};
+var getPaletteColorsFromTheme = function (palette, fallbackColors) {
+    return {
+        hover: palette.dark,
+        normal: palette.main,
+        contrast: isAccessible(palette.contrast, palette.main)
+            ? palette.contrast
+            : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast,
+    };
+};
+function getPaletteColors(type, theme) {
+    var palette = theme.canvas.palette[type];
+    switch (type) {
+        case 'error': {
+            return getPaletteColorsFromTheme(palette, { contrast: tokens_1.colors.frenchVanilla100 });
+        }
+        case 'alert': {
+            return getPaletteColorsFromTheme(palette, { contrast: tokens_1.colors.blackPepper400 });
+        }
+        default: {
+            return getPaletteColorsFromTheme(palette);
+        }
+    }
+}
+exports.getPaletteColors = getPaletteColors;
+exports.useThemedPalette = function (type) {
+    var theme = common_1.useTheme();
+    return getPaletteColors(type, theme);
+};

package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts

@@ -1,8 +1,9 @@
-import { CSSObject, Interpolation } from '@emotion/core';
+import { Interpolation } from '@emotion/core';
+import { CSSProperties } from '@workday/canvas-kit-react/tokens';
 /**
  * A utility to hide the default canvas style focus ring when using mouse input.
  * Requires wrapping your components in an InputProvider component.
  */
-export declare const hideMouseFocus: CSSObject;
+export declare const hideMouseFocus: CSSProperties;
 export declare const mouseFocusBehavior: (selectors: Record<string, Interpolation<undefined>>) => Record<string, Interpolation<undefined>>;
 //# sourceMappingURL=hideMouseFocus.d.ts.map