@workday/canvas-kit-react 7.0.0-alpha.0-next.7 → 7.0.0-alpha.100-next.25

package/dist/commonjs/dialog/lib/hooks/useDialogModel.js

@@ -2,8 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogModel = void 0;
 var popup_1 = require("@workday/canvas-kit-react/popup");
-var useDialogModel = function (config) {
-    if (config === void 0) { config = {}; }
+var common_1 = require("@workday/canvas-kit-react/common");
+exports.useDialogModel = common_1.createModelHook({
+    defaultConfig: popup_1.usePopupModel.defaultConfig,
+    requiredConfig: popup_1.usePopupModel.requiredConfig,
+    contextOverride: popup_1.usePopupModel.Context,
+})(function (config) {
     var model = popup_1.usePopupModel(config);
     popup_1.useInitialFocus(model);
     popup_1.useReturnFocus(model);
@@ -11,5 +15,4 @@ var useDialogModel = function (config) {
     popup_1.useCloseOnEscape(model);
     popup_1.useFocusRedirect(model);
     return model;
-};
-exports.useDialogModel = useDialogModel;
+});

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.d.ts

@@ -1,5 +1,22 @@
 import { CSSProperties } from 'react';
-export declare const useDialogPopper: <P extends {}, R>(model: import("../../../common").Model<import("../../../popup").PopupState, import("../../../popup").PopupEvents>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
+export declare const useDialogPopper: <P extends {}, R>(model: {
+    state: {
+        stackRef: import("react").RefObject<HTMLDivElement>;
+        targetRef: import("react").RefObject<HTMLButtonElement>;
+        initialFocusRef: import("react").RefObject<any> | undefined;
+        returnFocusRef: import("react").RefObject<any> | undefined;
+        placement: import("@popperjs/core").Placement;
+        id: string;
+        visibility: import("../../..").Visibility;
+    };
+    events: {
+        updatePlacement(data: {
+            placement: import("@popperjs/core").Placement;
+        }): void;
+        show(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+        hide(event?: Event | import("react").SyntheticEvent<Element, Event> | undefined): void;
+    };
+}, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
     'aria-owns': string;
     style: CSSProperties;
 } & P & (R extends HTMLOrSVGElement ? {

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDialogPopper.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogPopper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,eAAe;;;;;OAK1B,CAAC"}
+{"version":3,"file":"useDialogPopper.d.ts","sourceRoot":"","sources":["../../../../../dialog/lib/hooks/useDialogPopper.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,aAAa,EAAC,MAAM,OAAO,CAAC;AAEpC,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;OAK1B,CAAC"}

package/dist/commonjs/dialog/lib/hooks/useDialogPopper.js

@@ -2,7 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDialogPopper = void 0;
 var common_1 = require("@workday/canvas-kit-react/common");
-exports.useDialogPopper = common_1.createHook(function (_a) {
+var popup_1 = require("@workday/canvas-kit-react/popup");
+exports.useDialogPopper = common_1.createElemPropsHook(popup_1.usePopupModel)(function (_a) {
     var state = _a.state;
     return {
         'aria-owns': "dialog-" + state.id,

package/dist/commonjs/disclosure/lib/useDisclosureModel.d.ts

@@ -1,62 +1,128 @@
 import React from 'react';
-import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
-export declare type DisclosureState = {
+export declare type Visibility = 'hidden' | 'visible';
+export declare const useDisclosureModel: (<TT_Special_Generic>(config?: (Partial<{
     /** 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 declare 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.
+     * The initial visibility of the disclosed content
+     * @default 'hidden'
      */
-    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 declare type DisclosureModel = Model<DisclosureState, DisclosureEvents>;
-export declare const disclosureEventMap: {
-    guards: {
+    initialVisibility: Visibility;
+}> & {
+    onShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        /** 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: Visibility;
+    }) => void) | undefined;
+    onHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, prevState: {
+        /** 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: Visibility;
+    }) => void) | undefined;
+} & {
+    shouldShow?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        /** 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: Visibility;
+    }) => boolean) | undefined;
+    shouldHide?: ((data: Event | React.SyntheticEvent<Element, Event> | undefined, state: {
+        /** ID reference of the list. Children ids can be derived from this id */
+        id: string;
         /**
-         * 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.
+         * 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'`
          */
-        shouldShow: "show";
+        visibility: Visibility;
+    }) => boolean) | undefined;
+}) | undefined) => {
+    state: {
+        /** ID reference of the list. Children ids can be derived from this id */
+        id: string;
         /**
-         * Determines if a Disclosure component should hide. Returning false will prevent the
-         * contents from hiding.
+         * 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'`
          */
-        shouldHide: "hide";
+        visibility: Visibility;
     };
-    callbacks: {
+    events: {
         /**
-         * Called when disclosed contents start showing. 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.
          */
-        onShow: "show";
+        show(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
         /**
-         * Called when disclosed contents start hiding. It is safe to update state inside this callback
+         * 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.
          */
-        onHide: "hide";
+        hide(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
     };
-};
-export declare type BaseDisclosureModelConfig = {
+}) & import("../../common").ModelExtras<{
     /** ID reference of the list. Children ids can be derived from this id */
-    id?: string;
-    /** The initial visibility of the disclosed content
+    id: string;
+    /**
+     * The initial visibility of the disclosed content
      * @default 'hidden'
      */
-    initialVisibility?: DisclosureState['visibility'];
-};
-export declare type DisclosureModelConfig = BaseDisclosureModelConfig & Partial<ToModelConfig<DisclosureState, DisclosureEvents, typeof disclosureEventMap>>;
-export declare const useDisclosureModel: (config?: DisclosureModelConfig) => DisclosureModel;
+    initialVisibility: Visibility;
+}, {}, {
+    /** 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: Visibility;
+}, {
+    /**
+     * 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(event?: Event | React.SyntheticEvent<Element, Event> | undefined): 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(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+}, {
+    state: {
+        /** 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: Visibility;
+    };
+    events: {
+        /**
+         * 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(event?: Event | React.SyntheticEvent<Element, Event> | undefined): 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(event?: Event | React.SyntheticEvent<Element, Event> | undefined): void;
+    };
+}>;
 //# sourceMappingURL=useDisclosureModel.d.ts.map

package/dist/commonjs/disclosure/lib/useDisclosureModel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDisclosureModel.d.ts","sourceRoot":"","sources":["../../../../disclosure/lib/useDisclosureModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,KAAK,EACL,aAAa,EAGd,MAAM,kCAAkC,CAAC;AAE1C,oBAAY,eAAe,GAAG;IAC5B,yEAAyE;IACzE,EAAE,EAAE,MAAM,CAAC;IACX;;0DAEsD;IACtD,UAAU,EAAE,QAAQ,GAAG,SAAS,CAAC;CAClC,CAAC;AAEF,oBAAY,gBAAgB,GAAG;IAC7B;;;OAGG;IACH,IAAI,CAAC,IAAI,CAAC,EAAE;QAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,cAAc,CAAA;KAAC,GAAG,IAAI,CAAC;IACzD;;yEAEqE;IACrE,IAAI,CAAC,IAAI,CAAC,EAAE;QAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAC,cAAc,CAAA;KAAC,GAAG,IAAI,CAAC;CAC1D,CAAC;AAEF,oBAAY,eAAe,GAAG,KAAK,CAAC,eAAe,EAAE,gBAAgB,CAAC,CAAC;AAEvE,eAAO,MAAM,kBAAkB;;QAE3B;;;;WAIG;;QAEH;;;WAGG;;;;QAIH;;WAEG;;QAEH;;WAEG;;;CAGL,CAAC;AAEH,oBAAY,yBAAyB,GAAG;IACtC,yEAAyE;IACzE,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;OAEG;IACH,iBAAiB,CAAC,EAAE,eAAe,CAAC,YAAY,CAAC,CAAC;CACnD,CAAC;AAEF,oBAAY,qBAAqB,GAAG,yBAAyB,GAC3D,OAAO,CAAC,aAAa,CAAC,eAAe,EAAE,gBAAgB,EAAE,OAAO,kBAAkB,CAAC,CAAC,CAAC;AAEvF,eAAO,MAAM,kBAAkB,YAAY,qBAAqB,KAAQ,eAkBvE,CAAC"}
+{"version":3,"file":"useDisclosureModel.d.ts","sourceRoot":"","sources":["../../../../disclosure/lib/useDisclosureModel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,oBAAY,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAE9C,eAAO,MAAM,kBAAkB;IAE3B,yEAAyE;;IAEzE;;;OAGG;;;;QAQH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;;QANH,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;;QAIH;;;WAGG;;;;IAlCH,yEAAyE;;IAEzE;;;OAGG;;;IAQH,yEAAyE;;IAEzE;;;;OAIG;;;IAKH;;;OAGG;;IAIH;;;OAGG;;;;QArBH,yEAAyE;;QAEzE;;;;WAIG;;;;QAKH;;;WAGG;;QAIH;;;WAGG;;;EAOL,CAAC"}

package/dist/commonjs/disclosure/lib/useDisclosureModel.js

@@ -3,47 +3,47 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useDisclosureModel = exports.disclosureEventMap = void 0;
+exports.useDisclosureModel = void 0;
 var react_1 = __importDefault(require("react"));
 var common_1 = require("@workday/canvas-kit-react/common");
-exports.disclosureEventMap = common_1.createEventMap()({
-    guards: {
+exports.useDisclosureModel = common_1.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',
     },
-    callbacks: {
+})(function (config) {
+    var id = common_1.useUniqueId(config.id);
+    var _a = react_1.default.useState(config.initialVisibility || 'hidden'), visibility = _a[0], setVisibility = _a[1];
+    var state = {
+        /** ID reference of the list. Children ids can be derived from this id */
+        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: visibility,
+    };
+    var 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',
-    },
-});
-var useDisclosureModel = function (config) {
-    if (config === void 0) { config = {}; }
-    var id = common_1.useUniqueId(config.id);
-    var _a = react_1.default.useState(config.initialVisibility || 'hidden'), visibility = _a[0], setVisibility = _a[1];
-    var state = { id: id, visibility: visibility };
-    var events = common_1.useEventMap(exports.disclosureEventMap, state, config, {
-        show: function () {
+        show: function (event) {
             setVisibility('visible');
         },
-        hide: function () {
+        /**
+         * 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: function (event) {
             setVisibility('hidden');
         },
-    });
+    };
     return { state: state, events: events };
-};
-exports.useDisclosureModel = useDisclosureModel;
+});

package/dist/commonjs/icon/lib/AccentIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasAccentIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
@@ -14,7 +13,7 @@ export interface AccentIconStyles {
      */
     transparent?: boolean;
 }
-export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src' | 'type' | 'color'> {
     /**
      *  The icon to display from `@workday/canvas-accent-icons-web`.
      */
@@ -26,7 +25,6 @@ export interface AccentIconProps extends AccentIconStyles, Omit<IconProps, 'src'
     size?: number;
 }
 export declare const accentIconStyles: ({ color, transparent, }: AccentIconStyles) => CSSObject;
-export default class AccentIcon extends React.Component<AccentIconProps> {
-    render(): JSX.Element;
-}
+declare const AccentIcon: import("../../common").ElementComponent<"span", AccentIconProps>;
+export default AccentIcon;
 //# sourceMappingURL=AccentIcon.d.ts.map

package/dist/commonjs/icon/lib/AccentIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAuBP"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,CAAC;IAC3C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,QAAA,MAAM,UAAU,kEAoBd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/commonjs/icon/lib/AccentIcon.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -62,6 +49,7 @@ var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var design_assets_types_1 = require("@workday/design-assets-types");
 var Icon_1 = __importDefault(require("./Icon"));
+var common_1 = require("@workday/canvas-kit-react/common");
 var accentIconStyles = function (_a) {
     var _b = _a.color, color = _b === void 0 ? tokens_1.colors.blueberry500 : _b, _c = _a.transparent, transparent = _c === void 0 ? false : _c;
     return ({
@@ -74,15 +62,11 @@ var accentIconStyles = function (_a) {
     });
 };
 exports.accentIconStyles = accentIconStyles;
-var AccentIcon = /** @class */ (function (_super) {
-    __extends(AccentIcon, _super);
-    function AccentIcon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AccentIcon.prototype.render = function () {
-        var _a = this.props, _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "iconRef", "shouldMirror"]);
-        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, styles: exports.accentIconStyles({ color: color, transparent: transparent }), size: size, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    return AccentIcon;
-}(React.Component));
+var AccentIcon = common_1.createComponent('span')({
+    displayName: 'AccentIcon',
+    Component: function (_a, ref, Element) {
+        var _b = _a.transparent, transparent = _b === void 0 ? false : _b, _c = _a.size, size = _c === void 0 ? 56 : _c, icon = _a.icon, color = _a.color, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "shouldMirror"]);
+        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, styles: exports.accentIconStyles({ color: color, transparent: transparent }), size: size, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    },
+});
 exports.default = AccentIcon;

package/dist/commonjs/icon/lib/AppletIcon.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { BrandingColor } from '@workday/canvas-kit-react/tokens';
 import { CanvasAppletIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
@@ -11,7 +10,7 @@ export interface AppletIconStyles {
     color?: BrandingColor;
 }
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef' | 'shouldMirror'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'shouldMirror'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */
@@ -22,8 +21,8 @@ export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'icon
      */
     size?: number;
 }
-export default class AppletIcon extends React.Component<AppletIconProps> {
-    static Colors: typeof BrandingColor;
-    render(): JSX.Element;
-}
+export declare const AppletIcon: import("../../common").ElementComponent<"span", AppletIconProps> & {
+    Colors: typeof BrandingColor;
+};
+export default AppletIcon;
 //# sourceMappingURL=AppletIcon.d.ts.map

package/dist/commonjs/icon/lib/AppletIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAEvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7C;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,OAAc,MAAM,uBAAiB;IAE9B,MAAM;CAed"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAa,EAAC,SAAS,EAAC,MAAM,QAAQ,CAAC;AAGvC,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,UAAU;;CAuBrB,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/commonjs/icon/lib/AppletIcon.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -57,11 +44,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.appletIconStyles = void 0;
+exports.AppletIcon = exports.appletIconStyles = void 0;
 var React = __importStar(require("react"));
 var tokens_1 = require("@workday/canvas-kit-react/tokens");
 var design_assets_types_1 = require("@workday/design-assets-types");
 var Icon_1 = __importDefault(require("./Icon"));
+var common_1 = require("@workday/canvas-kit-react/common");
 var appletIconStyles = function (_a) {
     var _b = _a.color, color = _b === void 0 ? tokens_1.BrandingColor.Blueberry : _b;
     // Check if valid color
@@ -99,16 +87,14 @@ var appletIconStyles = function (_a) {
     };
 };
 exports.appletIconStyles = appletIconStyles;
-var AppletIcon = /** @class */ (function (_super) {
-    __extends(AppletIcon, _super);
-    function AppletIcon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AppletIcon.prototype.render = function () {
-        var _a = this.props, _b = _a.size, size = _b === void 0 ? 92 : _b, icon = _a.icon, color = _a.color, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["size", "icon", "color", "iconRef", "shouldMirror"]);
-        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, styles: exports.appletIconStyles({ color: color }), size: size, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    AppletIcon.Colors = tokens_1.BrandingColor;
-    return AppletIcon;
-}(React.Component));
-exports.default = AppletIcon;
+exports.AppletIcon = common_1.createComponent('span')({
+    displayName: 'AppletIcon',
+    Component: function (_a, ref, Element) {
+        var _b = _a.size, size = _b === void 0 ? 92 : _b, icon = _a.icon, color = _a.color, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["size", "icon", "color", "shouldMirror"]);
+        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.Applet, styles: exports.appletIconStyles({ color: color }), as: Element, size: size, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    },
+    subComponents: {
+        Colors: tokens_1.BrandingColor,
+    },
+});
+exports.default = exports.AppletIcon;

package/dist/commonjs/icon/lib/Graphic.d.ts

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasGraphic } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { SvgProps } from './Svg';
@@ -19,14 +18,13 @@ export interface GraphicStyles {
      */
     grow?: boolean;
 }
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'shouldMirror'> {
     /**
      * The graphic to display from `@workday/canvas-graphics-web`.
      */
     src: CanvasGraphic;
 }
 export declare const graphicStyles: ({ width, height, grow }: GraphicStyles) => CSSObject;
-export default class Graphic extends React.Component<GraphicProps> {
-    render(): JSX.Element;
-}
+declare const Graphic: import("../../common").ElementComponent<"span", GraphicProps>;
+export default Graphic;
 //# sourceMappingURL=Graphic.d.ts.map

package/dist/commonjs/icon/lib/Graphic.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,GAAG,cAAc,CAAC;IAC7F;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM;CAcP"}
+{"version":3,"file":"Graphic.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Graphic.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,aAAa,EAAkB,MAAM,8BAA8B,CAAC;AAC5E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,aAAa;IAC5B;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,YAAa,SAAQ,aAAa,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,CAAC;IACjF;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF,QAAA,MAAM,OAAO,+DAmBX,CAAC;AAEH,eAAe,OAAO,CAAC"}

package/dist/commonjs/icon/lib/Graphic.js

@@ -1,17 +1,4 @@
 "use strict";
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    };
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -61,6 +48,7 @@ exports.graphicStyles = void 0;
 var React = __importStar(require("react"));
 var design_assets_types_1 = require("@workday/design-assets-types");
 var Svg_1 = __importDefault(require("./Svg"));
+var common_1 = require("@workday/canvas-kit-react/common");
 var graphicStyles = function (_a) {
     var width = _a.width, height = _a.height, grow = _a.grow;
     if (grow) {
@@ -91,15 +79,11 @@ var graphicStyles = function (_a) {
     return {};
 };
 exports.graphicStyles = graphicStyles;
-var Graphic = /** @class */ (function (_super) {
-    __extends(Graphic, _super);
-    function Graphic() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Graphic.prototype.render = function () {
-        var _a = this.props, _b = _a.grow, grow = _b === void 0 ? false : _b, src = _a.src, width = _a.width, height = _a.height, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["grow", "src", "width", "height", "iconRef", "shouldMirror"]);
-        return (React.createElement(Svg_1.default, __assign({ src: src, styles: exports.graphicStyles({ width: width, height: height, grow: grow }), type: design_assets_types_1.CanvasIconTypes.Graphic, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    return Graphic;
-}(React.Component));
+var Graphic = common_1.createComponent('span')({
+    displayName: 'Graphic',
+    Component: function (_a, ref, Element) {
+        var _b = _a.grow, grow = _b === void 0 ? false : _b, src = _a.src, width = _a.width, height = _a.height, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["grow", "src", "width", "height", "shouldMirror"]);
+        return (React.createElement(Svg_1.default, __assign({ src: src, styles: exports.graphicStyles({ width: width, height: height, grow: grow }), type: design_assets_types_1.CanvasIconTypes.Graphic, as: Element, ref: ref, shouldMirror: shouldMirror }, elemProps)));
+    },
+});
 exports.default = Graphic;

package/dist/commonjs/icon/lib/Icon.d.ts

@@ -1,13 +1,10 @@
-import * as React from 'react';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 export interface IconProps extends SvgProps {
     src: CanvasIcon;
     size?: number;
     type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
-    iconRef?: React.Ref<HTMLSpanElement>;
-}
-export default class Icon extends React.Component<IconProps> {
-    render(): JSX.Element;
 }
+export declare const Icon: import("../../common").ElementComponent<"span", IconProps>;
+export default Icon;
 //# sourceMappingURL=Icon.d.ts.map

package/dist/commonjs/icon/lib/Icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAEpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;IAC/E,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;CACtC;AAED,MAAM,CAAC,OAAO,OAAO,IAAK,SAAQ,KAAK,CAAC,SAAS,CAAC,SAAS,CAAC;IACnD,MAAM;CAuBd"}
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AACzE,OAAY,EAAC,QAAQ,EAAC,MAAM,OAAO,CAAC;AAGpC,MAAM,WAAW,SAAU,SAAQ,QAAQ;IACzC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,4DAwBf,CAAC;AAEH,eAAe,IAAI,CAAC"}