@workday/canvas-kit-react 6.8.10 → 6.9.0-next.3

package/dist/commonjs/common/lib/theming/createCanvasTheme.d.ts

@@ -1,15 +1,3 @@
-/// <reference types="lodash/common/common" />
-/// <reference types="lodash/common/array" />
-/// <reference types="lodash/common/collection" />
-/// <reference types="lodash/common/date" />
-/// <reference types="lodash/common/function" />
-/// <reference types="lodash/common/lang" />
-/// <reference types="lodash/common/math" />
-/// <reference types="lodash/common/number" />
-/// <reference types="lodash/common/object" />
-/// <reference types="lodash/common/seq" />
-/// <reference types="lodash/common/string" />
-/// <reference types="lodash/common/util" />
 import { CanvasTheme, PartialCanvasTheme } from './types';
 export declare enum ColorDirection {
     Darken = 0,

package/dist/commonjs/common/lib/theming/createCanvasTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":";;;;;;;;;;;;AAMA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAIjB,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,QAAQ,IAAA;CACT;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,UA4BrE;AAuCD,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED,eAAO,MAAM,iBAAiB,iEAAmE,CAAC"}
+{"version":3,"file":"createCanvasTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/createCanvasTheme.ts"],"names":[],"mappings":"AAMA,OAAO,EACL,WAAW,EACX,kBAAkB,EAInB,MAAM,SAAS,CAAC;AAIjB,oBAAY,cAAc;IACxB,MAAM,IAAA;IACN,QAAQ,IAAA;CACT;AAED,wBAAgB,UAAU,CAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,cAAc,UA4BrE;AAuCD,iBAAS,oBAAoB,CAAC,YAAY,EAAE,kBAAkB,GAAG,WAAW,CAkB3E;AAED,eAAO,MAAM,iBAAiB,iEAAmE,CAAC"}

package/dist/commonjs/common/lib/theming/createCanvasTheme.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.createCanvasTheme = exports.shiftColor = exports.ColorDirection = void 0;
 var chroma_js_1 = __importDefault(require("chroma-js"));
 var merge_1 = __importDefault(require("lodash/merge"));
 var memoize_1 = __importDefault(require("lodash/memoize"));

package/dist/commonjs/common/lib/theming/index.js

@@ -1,14 +1,25 @@
 "use strict";
-function __export(m) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
+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 __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);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-__export(require("./breakpoints"));
+exports.styled = exports.createCanvasTheme = void 0;
+__exportStar(require("./breakpoints"), exports);
 var createCanvasTheme_1 = require("./createCanvasTheme");
-exports.createCanvasTheme = createCanvasTheme_1.createCanvasTheme;
-__export(require("./types"));
+Object.defineProperty(exports, "createCanvasTheme", { enumerable: true, get: function () { return createCanvasTheme_1.createCanvasTheme; } });
+__exportStar(require("./types"), exports);
 var styled_1 = require("./styled");
-exports.styled = styled_1.default;
-__export(require("./theme"));
-__export(require("./useTheme"));
-__export(require("./useIsRTL"));
+Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return __importDefault(styled_1).default; } });
+__exportStar(require("./theme"), exports);
+__exportStar(require("./useTheme"), exports);
+__exportStar(require("./useIsRTL"), exports);

package/dist/commonjs/common/lib/theming/styled.d.ts

@@ -1,5 +1,4 @@
 import { CreateStyled } from '@emotion/styled';
-import { EmotionCanvasTheme } from './index';
-declare const _default: CreateStyled<EmotionCanvasTheme>;
+declare const _default: CreateStyled;
 export default _default;
 //# sourceMappingURL=styled.d.ts.map

package/dist/commonjs/common/lib/theming/styled.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;AACjG,OAAO,EAAW,kBAAkB,EAAmB,MAAM,SAAS,CAAC;;AAiCvE,wBAA0D"}
+{"version":3,"file":"styled.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/styled.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,YAAY,EAA2B,MAAM,iBAAiB,CAAC;;AAkCjG,wBAAsC"}

package/dist/commonjs/common/lib/theming/theme.js

@@ -3,6 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.defaultCanvasTheme = void 0;
 var canvas_colors_web_1 = __importDefault(require("@workday/canvas-colors-web"));
 var types_1 = require("./types");
 var breakpoints_1 = require("./breakpoints");

package/dist/commonjs/common/lib/theming/types.d.ts

@@ -248,6 +248,11 @@ export declare type PartialCanvasThemePalette = RecursivePartial<CanvasThemePale
 export declare type PartialEmotionCanvasTheme = {
     canvas?: PartialCanvasTheme;
 };
+declare module '@emotion/react' {
+    interface Theme {
+        canvas: CanvasTheme;
+    }
+}
 export declare type EmotionCanvasTheme = {
     canvas: CanvasTheme;
 };

package/dist/commonjs/common/lib/theming/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AACH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,iBAAiB,EAAE,iBAAiB,EAAC,MAAM,eAAe,CAAC;AAEnE;;GAEG;AAEH,oBAAY,kBAAkB,GAAG;IAC/B,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,aAAK,wBAAwB,GAAG;IAC9B,YAAY,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF;;GAEG;AACH,oBAAY,gBAAgB;IAC1B,GAAG,QAAQ;IACX,GAAG,QAAQ;CACZ;AAED;;GAEG;AAEH,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAE;QACP,MAAM,EAAE,wBAAwB,CAAC;QACjC,OAAO,EAAE,kBAAkB,CAAC;QAC5B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,KAAK,EAAE,kBAAkB,CAAC;QAC1B,OAAO,EAAE,kBAAkB,CAAC;QAC5B,OAAO,EAAE,kBAAkB,CAAC;KAC7B,CAAC;IACF;;;;;;;;OAQG;IACH,WAAW,EAAE;QACX;;;;;;;;;;;;;;;;;;;;;WAqBG;QACH,MAAM,EAAE,iBAAiB,CAAC;QAC1B;;;;;;;;;;;;;;;;;;;;;;WAsBG;QACH,EAAE,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACvC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACzC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA6CG;QACH,OAAO,EAAE,CAAC,KAAK,EAAE,iBAAiB,EAAE,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;QACtE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;WA4CG;QACH,IAAI,EAAE,CAAC,GAAG,EAAE,iBAAiB,KAAK,MAAM,CAAC;KAC1C,CAAC;IACF,SAAS,EAAE,gBAAgB,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,SAAS;IACxB,KAAK,CAAC,EAAE,kBAAkB,CAAC;CAC5B;AAED;;GAEG;AACH,aAAK,gBAAgB,CAAC,CAAC,IAAI;KACxB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACxC,CAAC;AAEF,oBAAY,kBAAkB,GAAG,gBAAgB,CAAC,WAAW,CAAC,CAAC;AAC/D,oBAAY,yBAAyB,GAAG,gBAAgB,CAAC,kBAAkB,CAAC,CAAC;AAC7E,oBAAY,yBAAyB,GAAG;IAAC,MAAM,CAAC,EAAE,kBAAkB,CAAA;CAAC,CAAC;AACtE,OAAO,QAAQ,gBAAgB,CAAC;IAC9B,UAAiB,KAAK;QACpB,MAAM,EAAE,WAAW,CAAC;KACrB;CACF;AACD,oBAAY,kBAAkB,GAAG;IAAC,MAAM,EAAE,WAAW,CAAA;CAAC,CAAC"}

package/dist/commonjs/common/lib/theming/types.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentDirection = void 0;
 /**
  * Direction of page content for internationalization
  */

package/dist/commonjs/common/lib/theming/useIsRTL.js

@@ -1,14 +1,27 @@
 "use strict";
+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 (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
+    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;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsRTL = void 0;
 var React = __importStar(require("react"));
-var core_1 = require("@emotion/core");
+var react_1 = require("@emotion/react");
 var types_1 = require("./types");
 function useDefaultTheme(theme, config, fn) {
     return theme || fn(config);
@@ -19,7 +32,8 @@ function useDefaultTheme(theme, config, fn) {
  * @example
  * const isRTL = useIsRTL();
  */
-exports.useIsRTL = function (partialTheme) {
-    var theme = useDefaultTheme(partialTheme, core_1.ThemeContext, React.useContext);
+var useIsRTL = function (partialTheme) {
+    var theme = useDefaultTheme(partialTheme, react_1.ThemeContext, React.useContext);
     return (theme && theme.canvas && theme.canvas.direction) === types_1.ContentDirection.RTL;
 };
+exports.useIsRTL = useIsRTL;

package/dist/commonjs/common/lib/theming/useTheme.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAGA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAqB9E"}
+{"version":3,"file":"useTheme.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useTheme.ts"],"names":[],"mappings":"AAEA,OAAO,EAGL,kBAAkB,EAClB,yBAAyB,EAC1B,MAAM,SAAS,CAAC;AAOjB;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,CAAC,EAAE,yBAAyB,GAAG,kBAAkB,CAqB9E"}

package/dist/commonjs/common/lib/theming/useTheme.js

@@ -10,20 +10,13 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-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;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-var React = __importStar(require("react"));
+exports.useTheme = void 0;
 var get_1 = __importDefault(require("lodash/get"));
-var core_1 = require("@emotion/core");
+var react_1 = require("@emotion/react");
 var index_1 = require("./index");
 var getFilledTheme = function (theme) { return (__assign(__assign({}, theme), { canvas: index_1.createCanvasTheme(theme.canvas) })); };
 /**
@@ -50,7 +43,7 @@ function useTheme(theme) {
     }
     try {
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        var contextTheme = React.useContext(core_1.ThemeContext);
+        var contextTheme = react_1.useTheme();
         if (contextTheme && contextTheme.canvas) {
             return getFilledTheme(contextTheme);
         }

package/dist/commonjs/common/lib/types.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.ErrorType = void 0;
 /**
  * Error types
  */

package/dist/commonjs/common/lib/utils/StaticStates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,yBAAyB,EAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,gEAmBjC,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAC5F,WAAW,CACZ,CASA,CAAC"}
+{"version":3,"file":"StaticStates.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/StaticStates.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAIL,yBAAyB,EAC1B,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D,eAAO,MAAM,qBAAqB,uCAA0B,aAAa,GAAG,SAoB3E,CAAC;AAEF,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC;IAAC,KAAK,CAAC,EAAE,yBAAyB,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAC5F,WAAW,CACZ,CASA,CAAC"}

package/dist/commonjs/common/lib/utils/StaticStates.js

@@ -10,6 +10,25 @@ 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)
@@ -21,17 +40,11 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result["default"] = mod;
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.StaticStates = exports.convertToStaticStates = void 0;
 var React = __importStar(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-exports.convertToStaticStates = function (obj) {
+var convertToStaticStates = function (obj) {
     if (!obj) {
         return obj;
     }
@@ -40,16 +53,21 @@ exports.convertToStaticStates = function (obj) {
         var newKey = key
             .replace(/^:/, '&:') // handle shorthand like ":focus"
             .replace(/,(\s+):/g, ',$1&:') // handle selectors like ":focus, :hover"
-            .replace(/:(focus|hover|active)/g, '.$1')
-            .replace(/\[data\-whatinput=("|')?(mouse|touch|keyboard|pointer)("|')?]/g, '[data-whatinput="noop"]');
+            .replace(/:(focus|hover|active)/g, '.$1');
+        // Remove any selectors that use data-whatinput. Leaving them in would cause focus rings to disappear when the user clicks with a mouse.
+        if (/data-whatinput/.test(key)) {
+            return result;
+        }
         var value = typeof obj[key] === 'object' ? exports.convertToStaticStates(obj[key]) : obj[key];
         var newObj = __assign(__assign({}, result), (_a = {}, _a[newKey] = value, _a));
         return newObj;
     }, {});
 };
-exports.StaticStates = function (_a) {
+exports.convertToStaticStates = convertToStaticStates;
+var StaticStates = function (_a) {
     var children = _a.children, theme = _a.theme, elemProps = __rest(_a, ["children", "theme"]);
     var localTheme = common_1.useTheme(theme);
     localTheme._staticStates = true;
     return (React.createElement(common_1.CanvasProvider, __assign({ theme: localTheme }, elemProps), children));
 };
+exports.StaticStates = StaticStates;

package/dist/commonjs/common/lib/utils/assert.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.assert = void 0;
 function assert(value, message) {
     if (value === false || value === null || typeof value === 'undefined') {
         throw new Error(message || 'Assertion failed');

package/dist/commonjs/common/lib/utils/changeFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,4BAmBvB,CAAC"}
+{"version":3,"file":"changeFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/changeFocus.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,eAAO,MAAM,WAAW,YAAa,OAAO,SAmB3C,CAAC"}

package/dist/commonjs/common/lib/utils/changeFocus.js

@@ -1,10 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.changeFocus = void 0;
 /**
  * Programmatically change focus in a way that causes a focus ring around the new element.
  * @param element Element that should be focused
  */
-exports.changeFocus = function (element) {
+var changeFocus = function (element) {
     // Normally the browser will ignore calls to `focus` on an element that already has focus, but we
     // don't want to accidentally show the focus ring in this case, so we'll detect and bail early.
     // We'll also bail if there is no element
@@ -21,3 +22,4 @@ exports.changeFocus = function (element) {
         element.focus();
     }
 };
+exports.changeFocus = changeFocus;

package/dist/commonjs/common/lib/utils/colorUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,yBAKrB,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,6GAqB/B,CAAC"}
+{"version":3,"file":"colorUtils.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/colorUtils.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,SAAS,QAAS,MAAM,WAKpC,CAAC;AAWF;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,eAClB,MAAM,wFAoBnB,CAAC"}

package/dist/commonjs/common/lib/utils/colorUtils.js

@@ -3,15 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.pickForegroundColor = exports.expandHex = void 0;
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var chroma_js_1 = __importDefault(require("chroma-js"));
 // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
-exports.expandHex = function (hex) {
+var expandHex = function (hex) {
     var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
     return hex.replace(shorthandRegex, function (m, r, g, b) {
         return r + r + g + g + b + b;
     });
 };
+exports.expandHex = expandHex;
 // Used to as a fallback to determine foreground color
 var colorPriority = [
     tokens_1.colors.frenchVanilla100,
@@ -28,7 +30,7 @@ var colorPriority = [
  * [frenchVanilla100, blackPepper300, blackPepper400, blackPepper500, blackPepper600]
  * (https://www.w3.org/TR/WCAG20-TECHS/G18.html)
  */
-exports.pickForegroundColor = function (background, darkColor, lightColor) {
+var pickForegroundColor = function (background, darkColor, lightColor) {
     if (chroma_js_1.default.valid(background)) {
         if (lightColor && chroma_js_1.default.contrast(background, lightColor) >= 4.5) {
             return lightColor;
@@ -47,3 +49,4 @@ exports.pickForegroundColor = function (background, darkColor, lightColor) {
     }
     return;
 };
+exports.pickForegroundColor = pickForegroundColor;

package/dist/commonjs/common/lib/utils/components.d.ts

@@ -2,7 +2,6 @@ import React from 'react';
 import { Model } from './models';
 /**
  * Adds the `as` to the style interface to support `as` in styled components
- * This type and usage should be removed with Emotion 11
  */
 export declare type StyledType = {
     as?: React.ElementType;
@@ -21,7 +20,7 @@ declare type ExtractRef<T> = T extends undefined ? never : React.Ref<T extends k
  * @template P Additional props
  * @template ElementType React component or string element
  */
-export declare type PropsWithAs<P, ElementType extends React.ElementType> = P & Omit<React.ComponentProps<ElementType>, 'as' | 'state' | keyof P> & {
+export declare type PropsWithoutAs<P, ElementType extends React.ElementType> = P & Omit<React.ComponentProps<ElementType>, 'as' | keyof P> & {
     /**
      * Optional ref. If the component represents an element, this ref will be a reference to the
      * real DOM element of the component. If `as` is set to an element, it will be that element.
@@ -61,15 +60,36 @@ declare type ExtractHTMLAttributes<T extends React.DetailedHTMLProps<any, any>>
  * ExtractProps<typeof Card, 'aside'>; // CardProps & React.HTMLAttributes<HTMLElement>
  * ExtractProps<typeof Card, never>; // CardProps
  */
-export declare type ExtractProps<TComponent, TElement extends keyof JSX.IntrinsicElements | ElementComponent<any, any> | Component<any> | React.ComponentType<any> | undefined | never = undefined> = TComponent extends ElementComponent<infer E, infer P> ? [TElement] extends [never] ? P : TElement extends undefined ? E extends keyof JSX.IntrinsicElements ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[E]> : P & ExtractPropsFromComponent<E> : TElement extends keyof JSX.IntrinsicElements ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[TElement]> : P & ExtractPropsFromComponent<TElement> : ExtractPropsFromComponent<TComponent>;
-declare type ExtractPropsFromComponent<TComponent> = TComponent extends ElementComponent<infer E, infer P> ? E extends keyof JSX.IntrinsicElements ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[E]> : P : TComponent extends Component<infer P> ? P : TComponent extends React.ComponentType<infer P> ? P : {};
+export declare type ExtractProps<TComponent, TElement extends keyof JSX.IntrinsicElements | ElementComponent<any, any> | Component<any> | React.ComponentType<any> | undefined | never = undefined> = ExtractMaybeModel<TComponent, TComponent extends {
+    __element: infer E;
+    __props: infer P;
+} ? [TElement] extends [never] ? P : TElement extends undefined ? E extends keyof JSX.IntrinsicElements ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[E]> : P & ExtractProps<E> : TElement extends keyof JSX.IntrinsicElements ? P & ExtractHTMLAttributes<JSX.IntrinsicElements[TElement]> : P & ExtractProps<TElement> : TComponent extends Component<infer P> ? P : TComponent extends React.ComponentType<infer P> ? P : {}>;
+declare type ExtractMaybeModel<TComponent, P> = TComponent extends {
+    __model: infer M;
+} ? P & PropsWithModel<M> : P;
+export declare type PropsWithModel<TModel = never> = {
+    /**
+     * Optional model to pass to the component. This will override the default model created for the
+     * component. This can be useful if you want to access to the state and events of the model, or if
+     * you have nested components of the same type and you need to override the model provided by
+     * React Context.
+     */
+    model?: TModel;
+    /**
+     * Optional hook that receives the model and all props to be applied to the element. If you use
+     * this, it is your responsibility to return props, merging as appropriate. For example, returning
+     * an empty object will disable all elemProps hooks associated with this component. This allows
+     * finer control over a component without creating a new one.
+     */
+    elemPropsHook?: <TProps>(model: TModel, elemProps: TProps) => any;
+};
 /**
  * Component type that allows for `as` to change the element or component type.
  * Passing `as` will correctly change the allowed interface of the JSX element
  */
-export declare type ElementComponent<T extends React.ElementType, P> = {
-    __type: 'ElementComponent';
-    <ElementType extends React.ElementType>(props: PropsWithAs<P, ElementType> & {
+export declare type ElementComponent<E extends React.ElementType, P> = {
+    displayName?: string;
+    <ElementType extends React.ElementType>(props: PropsWithoutAs<P, ElementType> & {
         /**
          * Optional override of the default element used by the component. Any valid tag or Component.
          * If you provided a Component, this component should forward the ref using `React.forwardRef`
@@ -77,18 +97,54 @@ export declare type ElementComponent<T extends React.ElementType, P> = {
          */
         as: ElementType;
     }): JSX.Element;
-    (props: PropsWithAs<P, T>): JSX.Element;
-    displayName?: string;
+    (props: PropsWithoutAs<P, E>): JSX.Element;
     as<E extends React.ElementType>(as: E): ElementComponent<E, P>;
+    /** @private Only used internally to hold the element type for extraction */
+    __element: E;
+    /** @private Only used internally to hold the element type for extraction */
+    __props: P;
+};
+/**
+ * Component type that allows for `as` to change the element or component type.
+ * Passing `as` will correctly change the allowed interface of the JSX element.
+ * Same as `ElementComponent`, but adds a model to the interface.
+ */
+export declare type ElementComponentM<E extends React.ElementType, P, TModel> = {
+    displayName?: string;
+    <ElementType extends React.ElementType>(props: PropsWithoutAs<P, ElementType> & PropsWithModel<TModel> & {
+        /**
+         * Optional override of the default element used by the component. Any valid tag or Component.
+         * If you provided a Component, this component should forward the ref using `React.forwardRef`
+         * and spread extra props to a root element.
+         */
+        as: ElementType;
+    }): JSX.Element;
+    (props: PropsWithoutAs<P, E> & PropsWithModel<TModel>): JSX.Element;
+    as<E extends React.ElementType>(as: E): ElementComponentM<E, P, TModel>;
+    /** @private Only used internally to hold the element type for extraction */
+    __element: E;
+    /** @private Only used internally to hold the element type for extraction */
+    __props: P;
+    /** @private Only used internally to hold the element type for extraction */
+    __model: TModel;
+};
+export declare type ComponentM<P, TModel> = {
+    displayName?: string;
+    (props: P & PropsWithModel<TModel>): JSX.Element;
+    /** @private Only used internally to hold the element type for extraction */
+    __props: P;
+    /** @private Only used internally to hold the element type for extraction */
+    __model: TModel;
 };
 export declare type Component<P> = {
-    __type: 'Component';
-    (props: P): JSX.Element;
     displayName?: string;
+    (props: P): JSX.Element;
+    /** @private Only used internally to hold the element type for extraction */
+    __props: P;
 };
 interface RefForwardingComponent<T, P = {}> {
     (props: React.PropsWithChildren<P> & {
-        as?: React.ReactElement<any>;
+        as?: React.ElementType;
     }, 
     /**
      * A ref to be forwarded. Pass it along to the root element. If no element was passed, this
@@ -102,6 +158,51 @@ interface RefForwardingComponent<T, P = {}> {
      */
     Element: T extends undefined ? never : T): React.ReactElement | null;
 }
+export declare const createContainer: <E extends "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | ElementComponentM<any, any, any> | undefined = undefined>(as?: E | undefined) => <TModelHook extends ((config: any) => {
+    state: any;
+    events: any;
+}) & {
+    Context?: React.Context<any> | undefined;
+} & {
+    defaultConfig?: Record<string, any> | undefined;
+}, TDefaultContext extends {
+    state: Record<string, any>;
+    events: Record<string, any>;
+}, TElemPropsHook extends (...args: any) => any, SubComponents = {}>({ displayName, modelHook, elemPropsHook, defaultContext, subComponents, }: {
+    displayName?: string | undefined;
+    modelHook: TModelHook;
+    elemPropsHook?: TElemPropsHook | undefined;
+    defaultContext?: TDefaultContext | undefined;
+    subComponents?: SubComponents | undefined;
+}) => <Props>(Component: (props: Props & RemoveNull<ReturnType<TElemPropsHook>> & {
+    ref: ExtractRef<E>;
+}, Element: E extends undefined ? never : E, model: TModelHook extends (config: infer TConfig) => infer TModel ? TModel : never) => React.ReactElement | null) => (TModelHook extends (config: infer TConfig_1) => infer TModel_1 ? E extends undefined ? ComponentM<Props & TConfig_1, TModel_1> : ElementComponentM<E extends undefined ? React.FC<{}> : E, Props & TConfig_1, TModel_1> & {
+    Context: React.Context<TModel_1>;
+} : never) & SubComponents;
+declare type RemoveNull<T> = {
+    [K in keyof T]: Exclude<T[K], null>;
+};
+export declare const createSubcomponent: <E extends "symbol" | "object" | "s" | "big" | "link" | "small" | "sub" | "sup" | "circle" | "stop" | "path" | "style" | "map" | "filter" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "main" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "samp" | "slot" | "script" | "section" | "select" | "source" | "span" | "strong" | "summary" | "table" | "template" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | React.ComponentClass<{}, any> | React.FunctionComponent<{}> | ElementComponentM<any, any, any> | undefined = undefined>(as?: E | undefined) => <TElemPropsHook, TModelHook extends ((config: any) => {
+    state: any;
+    events: any;
+}) & {
+    Context?: React.Context<any> | undefined;
+}, SubComponents = {}>({ displayName, modelHook, elemPropsHook, subComponents, }: {
+    displayName?: string | undefined;
+    modelHook: TModelHook;
+    elemPropsHook?: TElemPropsHook | undefined;
+    subComponents?: SubComponents | undefined;
+}) => <Props = {}>(Component: (props: Props & (TElemPropsHook extends (...args: any[]) => infer TProps ? TProps extends {
+    ref: infer R;
+} ? TProps : TProps & {
+    ref: ExtractRef<E>;
+} : {
+    ref: ExtractRef<E>;
+}) & (Props extends {
+    children: any;
+} ? {} : {
+    children?: React.ReactNode;
+}), Element: E extends undefined ? never : E, model: TModelHook extends (...args: any[]) => infer TModel ? TModel : never) => React.ReactElement | null) => (TModelHook extends (...args: any[]) => infer TModel_1 ? ElementComponentM<E extends undefined ? React.FC<{}> : E, Props, TModel_1> : never) & SubComponents;
 /**
  * Factory function that creates components to be exported. It enforces React ref forwarding, `as`
  * prop, display name, and sub-components, and handles proper typing without much boiler plate. The
@@ -136,6 +237,18 @@ export declare const createComponent: <E extends "symbol" | "object" | "s" | "bi
      */
     subComponents?: SubComponents | undefined;
 }) => (E extends undefined ? Component<P> : ElementComponent<E extends undefined ? React.FC<{}> : E, P>) & SubComponents;
+export declare const createElemPropsHook: <TModelHook extends (config: any) => {
+    state: Record<string, any>;
+    events: Record<string, any>;
+}>(modelHook: TModelHook) => <PO extends {}, PI extends {}>(fn: (model: TModelHook extends (config: any) => infer TModel ? TModel : {
+    state: Record<string, any>;
+    events: Record<string, any>;
+}, ref?: ((instance: any) => void) | React.RefObject<any> | null | undefined, elemProps?: PI | undefined) => PO) => <P extends {}, R>(model: TModelHook extends (config: any) => infer TModel_1 ? TModel_1 : {
+    state: Record<string, any>;
+    events: Record<string, any>;
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => PO & P & (R extends HTMLOrSVGElement ? {
+    ref: React.Ref<R>;
+} : {});
 /**
  * Factory function to crate a behavior hook with correct generic types. It takes a function that
  * return props and returns a function that will also require `elemProps` and will call `mergeProps` for
@@ -175,8 +288,8 @@ export declare const createHook: <M extends Model<any, any>, PO extends {}, PI e
 } : {});
 export declare const subModelHook: <M extends Model<any, any>, SM extends Model<any, any>, O extends {}>(fn: (model: M) => SM, hook: <P extends {}, R>(model: SM, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => O & P & (R extends HTMLOrSVGElement ? {
     ref: React.Ref<R>;
-} : {})) => <P_1 extends {}, R_1>(model: M, elemProps?: P_1 | undefined, ref?: ((instance: R_1 | null) => void) | React.RefObject<R_1> | null | undefined) => O & P_1 & (R_1 extends HTMLOrSVGElement ? {
-    ref: React.Ref<R_1>;
+} : {})) => <P_2 extends {}, R_2>(model: M, elemProps?: P_2 | undefined, ref?: ((instance: R_2 | null) => void) | React.RefObject<R_2> | null | undefined) => O & P_2 & (R_2 extends HTMLOrSVGElement ? {
+    ref: React.Ref<R_2>;
 } : {});
 export declare type BehaviorHook<M extends Model<any, any>, O extends {}> = {
     bivarianceHack<P extends {}, R>(model: M, elemProps?: P, ref?: React.Ref<R>): O & P & (R extends HTMLOrSVGElement ? {
@@ -274,5 +387,25 @@ export declare function composeHooks<M extends Model<any, any>, O1 extends {}, O
 export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>): BehaviorHook<M, O1 & O2 & O3>;
 export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>): BehaviorHook<M, O1 & O2 & O3 & O4>;
 export declare function composeHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>, hook5: BehaviorHook<M, O5>): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
+/**
+ * Compose many hooks together. Assumes hooks are using `mergeProps`. Returns a function that will
+ * receive a model and return props to be applied to a component. These props should always be
+ * applied last on the Component. The props will override as follows: rightmost hook props override
+ * leftmost hook props which are overridden by props passed to the composeHooks function.
+ *
+ * A `ref` should be passed for hooks that require a ref. Each hook should fork the ref using
+ * `useLocalRef`, passing the `elementRef` in the returned props object. This ref will be passed to
+ * the next hook.
+ *
+ * @example
+ * const MyComponent = React.forwardRef(({ children, model, ...elemProps }, ref) => {
+ *   const props = composeModelHooks(useModel)(useHook1, useHook2)(model, elemProps, ref)
+ *
+ *   return <div id="foo" {...props}>{children}</div>
+ * })
+ */
+export declare function composeModelHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>): BehaviorHook<M, O1 & O2 & O3>;
+export declare function composeModelHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>): BehaviorHook<M, O1 & O2 & O3 & O4>;
+export declare function composeModelHooks<M extends Model<any, any>, R, P extends {}, O1 extends {}, O2 extends {}, O3 extends {}, O4 extends {}, O5 extends {}>(hook1: BehaviorHook<M, O1>, hook2: BehaviorHook<M, O2>, hook3: BehaviorHook<M, O3>, hook4: BehaviorHook<M, O4>, hook5: BehaviorHook<M, O5>): BehaviorHook<M, O1 & O2 & O3 & O4 & O5>;
 export {};
 //# sourceMappingURL=components.d.ts.map