@workday/canvas-kit-react 7.0.0-alpha.89-next.16 → 7.0.0-alpha.92-next.19

package/disclosure/lib/useDisclosureModel.tsx

@@ -1,89 +1,49 @@
 import React from 'react';
-import {
-  createEventMap,
-  Model,
-  ToModelConfig,
-  useEventMap,
-  useUniqueId,
-} from '@workday/canvas-kit-react/common';
+import {createModelHook, useUniqueId} from '@workday/canvas-kit-react/common';
 
-export type DisclosureState = {
-  /** ID reference of the list. Children ids can be derived from this id */
-  id: string;
-  /** Visibility state of the disclosed content. Models are allowed to extend the states to fit
-   * their needs, so if you need to consistently determine "not hidden", use `visibility !==
-   * 'hidden'` rather than `visibility === 'visible'` */
-  visibility: 'hidden' | 'visible';
-};
+export type Visibility = 'hidden' | 'visible';
 
-export type DisclosureEvents = {
-  /**
-   * Start showing the disclosed content. If a DOM event triggered this event, the event data will
-   * be passed along. This data can be used by guards and callbacks.
-   */
-  show(data?: {event: Event | React.SyntheticEvent}): void;
-  /**
-   * Start hiding this disclosed content. If a DOM event triggered this event, the event data will
-   * be passed along. This data can be used by guards and callbacks. */
-  hide(data?: {event: Event | React.SyntheticEvent}): void;
-};
-
-export type DisclosureModel = Model<DisclosureState, DisclosureEvents>;
-
-export const disclosureEventMap = createEventMap<DisclosureEvents>()({
-  guards: {
+export const useDisclosureModel = createModelHook({
+  defaultConfig: {
+    /** ID reference of the list. Children ids can be derived from this id */
+    id: '',
     /**
-     * Determines if a Disclosure component should show. Returning false will prevent the
-     * contents from showing. This might be useful for components like an `OverflowTooltip` where
-     * the contents only need to show if overflow is detected.
+     * The initial visibility of the disclosed content
+     * @default 'hidden'
      */
-    shouldShow: 'show',
-    /**
-     * Determines if a Disclosure component should hide. Returning false will prevent the
-     * contents from hiding.
-     */
-    shouldHide: 'hide',
+    initialVisibility: 'hidden' as Visibility,
   },
-  callbacks: {
+})(config => {
+  const id = useUniqueId(config.id);
+  const [visibility, setVisibility] = React.useState(config.initialVisibility || 'hidden');
+
+  const state = {
+    /** ID reference of the list. Children ids can be derived from this id */
+    id,
     /**
-     * Called when disclosed contents start showing. It is safe to update state inside this callback
+     * Visibility state of the disclosed content. Models are allowed to extend the states to fit
+     * their needs, so if you need to consistently determine "not hidden", use `visibility !==
+     * 'hidden'` rather than `visibility === 'visible'`
      */
-    onShow: 'show',
+    visibility,
+  };
+
+  const events = {
     /**
-     * Called when disclosed contents start hiding. It is safe to update state inside this callback
+     * Start showing the disclosed content. If a DOM event triggered this event, the event data will
+     * be passed along. This data can be used by guards and callbacks.
      */
-    onHide: 'hide',
-  },
-});
-
-export type BaseDisclosureModelConfig = {
-  /** ID reference of the list. Children ids can be derived from this id */
-  id?: string;
-  /** The initial visibility of the disclosed content
-   * @default 'hidden'
-   */
-  initialVisibility?: DisclosureState['visibility'];
-};
-
-export type DisclosureModelConfig = BaseDisclosureModelConfig &
-  Partial<ToModelConfig<DisclosureState, DisclosureEvents, typeof disclosureEventMap>>;
-
-export const useDisclosureModel = (config: DisclosureModelConfig = {}): DisclosureModel => {
-  const id = useUniqueId(config.id);
-  const [visibility, setVisibility] = React.useState<DisclosureState['visibility']>(
-    config.initialVisibility || 'hidden'
-  );
-
-  const state = {id, visibility};
-
-  const events = useEventMap(disclosureEventMap, state, config, {
-    show() {
+    show(data?: {event: Event | React.SyntheticEvent}) {
       setVisibility('visible');
     },
-    hide() {
+    /**
+     * Start hiding this disclosed content. If a DOM event triggered this event, the event data will
+     * be passed along. This data can be used by guards and callbacks.
+     */
+    hide(data?: {event: Event | React.SyntheticEvent}) {
       setVisibility('hidden');
     },
-  });
+  };
 
   return {state, events};
-};
+});

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

@@ -1,22 +1,56 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-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;
+export interface BannerProps extends ExtractProps<typeof Flex, never> {
     /**
      * Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
      */
     children?: React.ReactNode;
 }
-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>;
+export declare const Banner: import("../../common").ElementComponentM<"button", BannerProps & Partial<{
+    hasError: boolean;
+    isSticky: boolean;
+    id: string;
+}> & {} & {}, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}> & {
+    Context: React.Context<{
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+} & {
+    Icon: import("../../common").ElementComponentM<"span", import("./BannerIcon").BannerIconProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+    Label: import("../../common").ElementComponentM<"div", import("./BannerLabel").BannerLabelProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
+    ActionText: import("../../common").ElementComponentM<"span", import("./BannerActionText").BannerActionTextProps, {
+        state: {
+            id: string;
+            hasError: boolean;
+            isSticky: boolean;
+        };
+        events: {};
+    }>;
 };
 //# sourceMappingURL=Banner.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAEtD,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"}
+{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAIb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,kCAAkC,CAAC;AAQtD,MAAM,WAAW,WAAY,SAAQ,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACnE;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+CjB,CAAC"}

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

@@ -10,25 +10,6 @@ var __assign = (this && this.__assign) || function () {
     };
     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]; } });
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __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)
@@ -41,11 +22,10 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Banner = exports.BannerModelContext = void 0;
+exports.Banner = void 0;
 /** @jsxRuntime classic */
 /** @jsx jsx */
 var react_1 = require("@emotion/react");
-var React = __importStar(require("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");
@@ -53,41 +33,37 @@ 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')({
+exports.Banner = common_1.createContainer('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 (react_1.jsx(exports.BannerModelContext.Provider, { value: value },
-            react_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)));
-    },
+    modelHook: hooks_1.useBannerModel,
+    elemPropsHook: hooks_1.useBanner,
     subComponents: {
         Icon: BannerIcon_1.BannerIcon,
         Label: BannerLabel_1.BannerLabel,
         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 = {
+        '&: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));
 });

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

@@ -1,14 +1,19 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Box } from '@workday/canvas-kit-react/layout';
-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>;
+export declare const BannerActionText: import("../../common").ElementComponentM<"span", BannerActionTextProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=BannerActionText.d.ts.map

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

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

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

@@ -45,17 +45,15 @@ 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 Banner_1 = require("./Banner");
 var hooks_1 = require("./hooks");
 var StyledActionBarText = common_1.styled(layout_1.Box.as('span'))({
     textDecoration: 'underline',
 });
-exports.BannerActionText = common_1.createComponent('span')({
+exports.BannerActionText = common_1.createSubcomponent('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 (React.createElement(StyledActionBarText, __assign({ display: localModel.state.isSticky ? 'none' : 'inline', ref: ref, as: Element }, props), children));
-    },
+    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));
 });

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

@@ -1,14 +1,19 @@
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { SystemIcon } from '@workday/canvas-kit-react/icon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
-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>;
+export declare const BannerIcon: import("../../common").ElementComponentM<"span", BannerIconProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=BannerIcon.d.ts.map

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

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

@@ -30,19 +30,15 @@ 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 canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
-var Banner_1 = require("./Banner");
 var hooks_1 = require("./hooks");
 var StyledBannerIcon = common_1.styled(icon_1.SystemIcon)({
     marginRight: tokens_1.space.xs,
 });
-exports.BannerIcon = common_1.createComponent('span')({
+exports.BannerIcon = common_1.createSubcomponent('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 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), defaultIcon = _c.icon, props = __rest(_c, ["icon"]);
-        return react_1.default.createElement(StyledBannerIcon, __assign({ icon: icon !== null && icon !== void 0 ? icon : defaultIcon, ref: ref }, props));
-    },
+    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));
 });

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

@@ -1,13 +1,18 @@
 import * as React from 'react';
 import { ExtractProps } from '@workday/canvas-kit-react/common';
 import { Flex } from '@workday/canvas-kit-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>;
+export declare const BannerLabel: import("../../common").ElementComponentM<"div", BannerLabelProps, {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}>;
 //# sourceMappingURL=BannerLabel.d.ts.map

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

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

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

@@ -45,14 +45,12 @@ 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 Banner_1 = require("./Banner");
 var hooks_1 = require("./hooks");
-exports.BannerLabel = common_1.createComponent('div')({
+exports.BannerLabel = common_1.createSubcomponent('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));
-    },
+    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));
 });

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

@@ -2,11 +2,14 @@
  * 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) => {
+export declare const useBanner: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     'aria-describedby': string;
     'aria-labelledby': string;
 } & P & (R extends HTMLOrSVGElement ? {

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;;;;;;;;;;;;OAKpB,CAAC"}

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

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

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

@@ -2,11 +2,14 @@
  * 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) => {
+export declare const useBannerActionText: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

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;;;;;;;;;;;OAI9B,CAAC"}

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

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

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

@@ -2,11 +2,14 @@
  * 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) => {
+export declare const useBannerIcon: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     icon: import("@workday/design-assets-types").CanvasSystemIcon;
     color: string | undefined;
     colorHover: string | undefined;

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;;;;;;;;;;;;;;OASxB,CAAC"}

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

@@ -3,12 +3,13 @@ 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");
 /**
  * Adds the necessary props to a `Icon` component.
  * Used by the Banner.Icon subcomponent
  */
-exports.useBannerIcon = common_1.createHook(function (_a) {
+exports.useBannerIcon = common_1.createElemPropsHook(useBannerModel_1.useBannerModel)(function (_a) {
     var state = _a.state;
     var palette = useThemedPalette_1.useThemedPalette(state.hasError ? 'error' : 'alert');
     return {

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

@@ -2,11 +2,14 @@
  * 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) => {
+export declare const useBannerLabel: <P extends {}, R>(model: {
+    state: {
+        id: string;
+        hasError: boolean;
+        isSticky: boolean;
+    };
+    events: {};
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     id: string;
 } & P & (R extends HTMLOrSVGElement ? {
     ref: import("react").Ref<R>;

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;;;;;;;;;;;OAIzB,CAAC"}

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

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