@workday/canvas-kit-react 7.1.4 → 7.2.0-427-next.2

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

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

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

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

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,31 +18,19 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 });
 exports.BannerActionText = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
-var StyledActionBarText = common_1.styled(layout_1.Box.as('span'))({
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const hooks_1 = require("./hooks");
+const StyledActionBarText = common_1.styled(layout_1.Box.as('span'))({
     textDecoration: 'underline',
 });
 exports.BannerActionText = common_1.createSubcomponent('span')({
     displayName: 'Banner.ActionTextText',
     modelHook: hooks_1.useBannerModel,
     elemPropsHook: hooks_1.useBannerActionText,
-})(function (_a, Element, model) {
-    var _b = _a.children, children = _b === void 0 ? 'View All' : _b, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(StyledActionBarText, __assign({ as: Element, display: model.state.isSticky ? 'none' : 'inline' }, elemProps), children));
+})(({ children = 'View All', ...elemProps }, Element, model) => {
+    return (React.createElement(StyledActionBarText, Object.assign({ as: Element, display: model.state.isSticky ? 'none' : 'inline' }, elemProps), children));
 });

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

@@ -4,11 +4,10 @@ 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, {
+export declare const BannerIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", BannerIconProps, {
     state: {
         id: string;
         hasError: boolean;

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

@@ -1 +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"}
+{"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;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;CACzB;AAMD,eAAO,MAAM,UAAU;;;;;;;EAQrB,CAAC"}

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

@@ -1,44 +1,22 @@
 "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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.BannerIcon = void 0;
-var react_1 = __importDefault(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var icon_1 = require("@workday/canvas-kit-react/icon");
-var hooks_1 = require("./hooks");
-var StyledBannerIcon = common_1.styled(icon_1.SystemIcon)({
+const react_1 = __importDefault(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const hooks_1 = require("./hooks");
+const StyledBannerIcon = common_1.styled(icon_1.SystemIcon)({
     marginRight: tokens_1.space.xs,
 });
 exports.BannerIcon = common_1.createSubcomponent('span')({
     displayName: 'Banner.Icon',
     modelHook: hooks_1.useBannerModel,
     elemPropsHook: hooks_1.useBannerIcon,
-})(function (elemProps, Element, model) {
-    var icon = elemProps.icon, iconButtonProps = __rest(elemProps, ["icon"]);
-    return react_1.default.createElement(StyledBannerIcon, __assign({ as: Element, icon: icon }, iconButtonProps));
+})((elemProps, Element, model) => {
+    const { icon, ...iconButtonProps } = elemProps;
+    return react_1.default.createElement(StyledBannerIcon, Object.assign({ as: Element, icon: icon }, iconButtonProps));
 });

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

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

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,28 +18,16 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-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 });
 exports.BannerLabel = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var layout_1 = require("@workday/canvas-kit-react/layout");
-var hooks_1 = require("./hooks");
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const layout_1 = require("@workday/canvas-kit-react/layout");
+const hooks_1 = require("./hooks");
 exports.BannerLabel = common_1.createSubcomponent('div')({
     displayName: 'Banner.Label',
     modelHook: hooks_1.useBannerModel,
     elemPropsHook: hooks_1.useBannerLabel,
-})(function (_a, Element) {
-    var children = _a.children, elemProps = __rest(_a, ["children"]);
-    return (React.createElement(layout_1.Flex, __assign({ as: Element, flex: "1 1 0%" }, elemProps), children));
+})(({ children, ...elemProps }, Element) => {
+    return (React.createElement(layout_1.Flex, Object.assign({ as: Element, flex: "1 1 0%" }, elemProps), children));
 });

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

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

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

@@ -1 +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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAC;AACpD,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,iBAAiB,CAAC;AAChC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,OAAO,EAAC,gBAAgB,EAAC,CAAC"}

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

@@ -10,6 +10,9 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPaletteColors = void 0;
+const useThemedPalette_1 = require("./useThemedPalette");
+Object.defineProperty(exports, "getPaletteColors", { enumerable: true, get: function () { return useThemedPalette_1.getPaletteColors; } });
 __exportStar(require("./useBannerModel"), exports);
 __exportStar(require("./useThemedPalette"), exports);
 __exportStar(require("./useBannerIcon"), exports);

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

@@ -2,17 +2,15 @@
  * Adds the necessary props to a `Banner` component.
  * Used by the Banner component
  */
-export declare const useBanner: <P extends {}, R>(model: {
+export declare const useBanner: import("@workday/canvas-kit-react/common").BehaviorHook<{
     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/commonjs/banner/lib/hooks/useBanner.d.ts.map

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

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

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

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

@@ -2,16 +2,14 @@
  * Adds the necessary props to a `ActionText` component.
  * Used by the Banner.ActionText subcomponent
  */
-export declare const useBannerActionText: <P extends {}, R>(model: {
+export declare const useBannerActionText: import("@workday/canvas-kit-react/common").BehaviorHook<{
     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/commonjs/banner/lib/hooks/useBannerActionText.d.ts.map

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

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

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

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

@@ -2,19 +2,17 @@
  * Adds the necessary props to a `Icon` component.
  * Used by the Banner.Icon subcomponent
  */
-export declare const useBannerIcon: <P extends {}, R>(model: {
+export declare const useBannerIcon: import("@workday/canvas-kit-react/common").BehaviorHook<{
     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/commonjs/banner/lib/hooks/useBannerIcon.d.ts.map

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

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

@@ -1,17 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBannerIcon = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
-var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var useBannerModel_1 = require("./useBannerModel");
-var useThemedPalette_1 = require("./useThemedPalette");
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const useBannerModel_1 = require("./useBannerModel");
+const useThemedPalette_1 = require("./useThemedPalette");
 /**
  * Adds the necessary props to a `Icon` component.
  * Used by the Banner.Icon subcomponent
  */
-exports.useBannerIcon = common_1.createElemPropsHook(useBannerModel_1.useBannerModel)(function (_a) {
-    var state = _a.state;
-    var palette = useThemedPalette_1.useThemedPalette(state.hasError ? 'error' : 'alert');
+exports.useBannerIcon = common_1.createElemPropsHook(useBannerModel_1.useBannerModel)(({ state }) => {
+    const 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,

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

@@ -2,16 +2,14 @@
  * Adds the necessary props to a `Label` component.
  * Used by the Banner.Label subcomponent
  */
-export declare const useBannerLabel: <P extends {}, R>(model: {
+export declare const useBannerLabel: import("@workday/canvas-kit-react/common").BehaviorHook<{
     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=useBannerLabel.d.ts.map

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

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

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

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

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

@@ -41,7 +41,7 @@ export declare const useBannerModel: (<TT_Special_Generic>(config?: (Partial<{
         isSticky: boolean;
     };
     events: {};
-}) & import("../../../common").ModelExtras<{
+}) & import("@workday/canvas-kit-react/common").ModelExtras<{
     /**
      * 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.

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

@@ -1,18 +1,7 @@
 "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);
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useBannerModel = void 0;
-var common_1 = require("@workday/canvas-kit-react/common");
+const common_1 = require("@workday/canvas-kit-react/common");
 exports.useBannerModel = common_1.createModelHook({
     defaultConfig: {
         /**
@@ -40,11 +29,14 @@ exports.useBannerModel = common_1.createModelHook({
          */
         id: '',
     },
-})(function (config) {
-    var id = common_1.useUniqueId(config.id);
-    var state = __assign(__assign({}, config), { id: id });
+})(config => {
+    const id = common_1.useUniqueId(config.id);
+    const state = {
+        ...config,
+        id,
+    };
     return {
-        state: state,
+        state,
         events: {},
     };
 });