@workday/canvas-kit-react 7.0.0-alpha.0-next.5 → 7.0.0-alpha.78-next.6

package/dist/commonjs/common/lib/parts/_brand-assets.js

@@ -2,8 +2,8 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.miniWdayLogoBlue = exports.wdayLogoWhite = exports.wdayLogoBlue = exports.dubLogoWhite = exports.dubLogoBlue = void 0;
 var CDN_URI = '//design.workday.com/images/';
-exports.dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\">";
-exports.dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\">";
-exports.wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\">";
-exports.wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\">";
-exports.miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\">";
+exports.dubLogoBlue = "<img src=\"" + CDN_URI + "ck-dub-logo-blue.svg\" alt=\"\">";
+exports.dubLogoWhite = "<img src=\"" + CDN_URI + "ck-dub-logo-white.svg\" alt=\"\">";
+exports.wdayLogoBlue = "<img src=\"" + CDN_URI + "ck-wday-logo-blue.svg\" alt=\"\">";
+exports.wdayLogoWhite = "<img src=\"" + CDN_URI + "ck-wday-logo-white.svg\" alt=\"\">";
+exports.miniWdayLogoBlue = "<img src=\"" + CDN_URI + "ck-mini-wday-logo-blue.svg\" alt=\"\">";

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,uCAA0B,aAAa,GAAG,SAmB3E,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

@@ -53,8 +53,11 @@ var 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;

package/dist/commonjs/dialog/lib/Dialog.d.ts

@@ -15,7 +15,7 @@ export interface DialogProps extends PopupModelConfig {
     model?: PopupModel;
 }
 export declare const Dialog: import("../../common").Component<DialogProps> & {
-    Body: import("../../common").ElementComponent<"div", import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderShorthandStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderColorStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderRadiusStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLineStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderWidthStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/border").BorderLogicalStyleProps & import("@workday/canvas-kit-labs-react").ColorStyleProps & import("@workday/canvas-kit-labs-react").DepthStyleProps & import("@workday/canvas-kit-labs-react").FlexItemStyleProps & import("@workday/canvas-kit-labs-react").LayoutStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/other").OtherStyleProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/position").PositionLogicalProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceStandardProps & import("@workday/canvas-kit-labs-react/common/lib/utils/space").SpaceLogicalProps>;
+    Body: import("../../common").ElementComponent<"div", import("../..").BorderShorthandStyleProps & import("../..").BorderColorStyleProps & import("../..").BorderRadiusStyleProps & import("../..").BorderLineStyleProps & import("../..").BorderWidthStyleProps & import("../..").BorderLogicalStyleProps & import("../..").ColorStyleProps & import("../..").DepthStyleProps & import("../..").FlexItemStyleProps & import("../..").LayoutStyleProps & import("../../layout/lib/utils/other").OtherStyleProps & import("../..").PositionStandardProps & import("../..").PositionLogicalProps & import("../../layout/lib/utils/space").SpaceStandardProps & import("../../layout/lib/utils/space").SpaceLogicalProps>;
     Card: import("../../common").ElementComponent<"div", import("./DialogCard").DialogCardProps>;
     CloseIcon: import("../../common").ElementComponent<"button", import("../../popup/lib/PopupCloseIcon").PopupCloseIconProps>;
     Target: import("../../common").ElementComponent<import("../../common").ElementComponent<"button", import("../..").SecondaryButtonProps>, import("../../popup/lib/PopupTarget").PopupTargetProps>;

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("../../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("../../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("../../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"}

package/dist/commonjs/icon/lib/Icon.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,15 +44,14 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Icon = void 0;
 var React = __importStar(require("react"));
 var Svg_1 = __importDefault(require("./Svg"));
-var Icon = /** @class */ (function (_super) {
-    __extends(Icon, _super);
-    function Icon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Icon.prototype.render = function () {
-        var _a = this.props, src = _a.src, size = _a.size, styles = _a.styles, type = _a.type, iconRef = _a.iconRef, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["src", "size", "styles", "type", "iconRef", "shouldMirror"]);
+var common_1 = require("../../common");
+exports.Icon = common_1.createComponent('span')({
+    displayName: 'Icon',
+    Component: function (_a, ref, Element) {
+        var src = _a.src, size = _a.size, styles = _a.styles, type = _a.type, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["src", "size", "styles", "type", "shouldMirror"]);
         var iconStyles = __assign({}, styles);
         if (size) {
             iconStyles['& svg'] = {
@@ -73,8 +59,7 @@ var Icon = /** @class */ (function (_super) {
                 height: size,
             };
         }
-        return (React.createElement(Svg_1.default, __assign({ src: src, type: type, shouldMirror: shouldMirror }, elemProps, { styles: iconStyles, iconRef: iconRef })));
-    };
-    return Icon;
-}(React.Component));
-exports.default = Icon;
+        return (React.createElement(Svg_1.default, __assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
+    },
+});
+exports.default = exports.Icon;

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

@@ -1,18 +1,16 @@
 import { CSSObject } from '@emotion/styled';
-import * as React from 'react';
 import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
-export interface SvgProps extends React.HTMLAttributes<HTMLSpanElement> {
+import { BoxProps } from '@workday/canvas-kit-react/layout';
+export interface SvgProps extends BoxProps {
     src: CanvasIcon;
     styles?: CSSObject;
     type: CanvasIconTypes;
-    iconRef?: React.Ref<HTMLSpanElement>;
     /**
      * If set to `true`, transform the SVG's x-axis to mirror the graphic
      * @default false
      */
     shouldMirror?: boolean;
 }
-export default class Svg extends React.Component<SvgProps> {
-    render(): JSX.Element | null;
-}
+export declare const Svg: import("../../common").ElementComponent<"span", SvgProps>;
+export default Svg;
 //# sourceMappingURL=Svg.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAIzE,MAAM,WAAW,QAAS,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IACrE,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB,OAAO,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAaD,MAAM,CAAC,OAAO,OAAO,GAAI,SAAQ,KAAK,CAAC,SAAS,CAAC,QAAQ,CAAC;IACjD,MAAM;CAed"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAM,QAAQ,EAAC,MAAM,kCAAkC,CAAC;AAE/D,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAaD,eAAO,MAAM,GAAG,2DAYd,CAAC;AAEH,eAAe,GAAG,CAAC"}

package/dist/commonjs/icon/lib/Svg.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++) {
@@ -54,24 +41,22 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.Svg = void 0;
 var React = __importStar(require("react"));
 var utils_1 = require("./utils");
 var common_1 = require("@workday/canvas-kit-react/common");
-var StyledIconSpan = common_1.styled('span')({
+var layout_1 = require("@workday/canvas-kit-react/layout");
+var StyledIconSpan = common_1.styled(layout_1.Box.as('span'))({
     display: 'inline-block',
     '> svg': { display: 'block' },
 }, function (_a) {
     var shouldMirror = _a.shouldMirror, styles = _a.styles;
     return (__assign({ transform: shouldMirror ? 'scaleX(-1)' : undefined }, styles));
 });
-var Svg = /** @class */ (function (_super) {
-    __extends(Svg, _super);
-    function Svg() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    Svg.prototype.render = function () {
-        var _a = this.props, src = _a.src, type = _a.type, iconRef = _a.iconRef, elemProps = __rest(_a, ["src", "type", "iconRef"]);
-        // Validation for JS
+exports.Svg = common_1.createComponent('span')({
+    displayName: 'Svg',
+    Component: function (_a, ref, Element) {
+        var src = _a.src, type = _a.type, elemProps = __rest(_a, ["src", "type"]);
         try {
             utils_1.validateIconType(src, type);
         }
@@ -79,8 +64,7 @@ var Svg = /** @class */ (function (_super) {
             console.error(e);
             return null;
         }
-        return (React.createElement(StyledIconSpan, __assign({}, elemProps, { dangerouslySetInnerHTML: { __html: src.svg }, ref: iconRef })));
-    };
-    return Svg;
-}(React.Component));
-exports.default = Svg;
+        return React.createElement(StyledIconSpan, __assign({ dangerouslySetInnerHTML: { __html: src.svg } }, elemProps, { ref: ref }));
+    },
+});
+exports.default = exports.Svg;

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 import { CSSObject } from '@emotion/styled';
 import { IconProps } from './Icon';
@@ -40,7 +39,7 @@ export interface SystemIconStyles {
      */
     fillHover?: string;
 }
-export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'type'> {
+export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src' | 'color' | 'type' | 'background'> {
     /**
      * The icon to display from `@workday/canvas-system-icons-web`.
      */
@@ -48,10 +47,10 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number;
+    size?: number | undefined;
+    className?: string;
 }
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;
-export default class SystemIcon extends React.Component<SystemIconProps> {
-    render(): JSX.Element;
-}
+declare const SystemIcon: import("../../common").ElementComponent<"span", SystemIconProps>;
+export default SystemIcon;
 //# sourceMappingURL=SystemIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.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;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,MAAM,CAAC;IACxF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAwCP"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.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;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,SAAS,EAAE,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAAC;IAC1D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAEH,QAAA,MAAM,UAAU,kEA4Cd,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/commonjs/icon/lib/SystemIcon.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("../../common");
 var systemIconStyles = function (_a) {
     var accent = _a.accent, accentHover = _a.accentHover, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, fill = _a.fill, fillHover = _a.fillHover;
     return ({
@@ -86,13 +74,10 @@ var systemIconStyles = function (_a) {
     });
 };
 exports.systemIconStyles = systemIconStyles;
-var SystemIcon = /** @class */ (function (_super) {
-    __extends(SystemIcon, _super);
-    function SystemIcon() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    SystemIcon.prototype.render = function () {
-        var _a = this.props, _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, icon = _a.icon, iconRef = _a.iconRef, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "iconRef", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
+var SystemIcon = common_1.createComponent('span')({
+    displayName: 'SystemIcon',
+    Component: function (_a, ref, Element) {
+        var _b = _a.background, background = _b === void 0 ? 'transparent' : _b, _c = _a.backgroundHover, backgroundHover = _c === void 0 ? 'transparent' : _c, _d = _a.color, color = _d === void 0 ? tokens_1.iconColors.standard : _d, _e = _a.colorHover, colorHover = _e === void 0 ? tokens_1.iconColors.hover : _e, icon = _a.icon, accent = _a.accent, accentHover = _a.accentHover, fill = _a.fill, fillHover = _a.fillHover, size = _a.size, shouldMirror = _a.shouldMirror, elemProps = __rest(_a, ["background", "backgroundHover", "color", "colorHover", "icon", "accent", "accentHover", "fill", "fillHover", "size", "shouldMirror"]);
         var style = exports.systemIconStyles({
             accent: accent,
             accentHover: accentHover,
@@ -103,8 +88,7 @@ var SystemIcon = /** @class */ (function (_super) {
             fill: fill,
             fillHover: fillHover,
         });
-        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, styles: style, iconRef: iconRef, shouldMirror: shouldMirror }, elemProps)));
-    };
-    return SystemIcon;
-}(React.Component));
+        return (React.createElement(Icon_1.default, __assign({ src: icon, type: design_assets_types_1.CanvasIconTypes.System, size: size, as: Element, shouldMirror: shouldMirror, ref: ref, styles: style }, elemProps)));
+    },
+});
 exports.default = SystemIcon;

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

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { SystemIconProps } from './SystemIcon';
 import { CanvasSystemIcon } from '@workday/design-assets-types';
 export declare enum SystemIconCircleSize {
@@ -9,7 +8,7 @@ export declare enum SystemIconCircleSize {
     xl = 64,
     xxl = 120
 }
-export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' | 'shouldMirror'> {
+export interface SystemIconCircleProps extends Pick<SystemIconProps, 'shouldMirror'> {
     /**
      * The background color of the SystemIconCircle from `@workday/canvas-colors-web`.
      * @default colors.soap300
@@ -25,8 +24,6 @@ export interface SystemIconCircleProps extends Pick<SystemIconProps, 'iconRef' |
      */
     size?: SystemIconCircleSize | number;
 }
-export default class SystemIconCircle extends React.Component<SystemIconCircleProps> {
-    static Size: typeof SystemIconCircleSize;
-    render(): JSX.Element;
-}
+declare const SystemIconCircle: import("../../common").ElementComponent<"span", SystemIconCircleProps>;
+export default SystemIconCircle;
 //# sourceMappingURL=SystemIconCircle.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,SAAS,GAAG,cAAc,CAAC;IAC9F;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,KAAK,CAAC,SAAS,CAAC,qBAAqB,CAAC;IAClF,MAAM,CAAC,IAAI,8BAAwB;IAEnC,MAAM;CA0BP"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAIA,OAAmB,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AACzD,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,eAAe,EAAE,cAAc,CAAC;IAClF;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;CACtC;AA4BD,QAAA,MAAM,gBAAgB,wEA8BpB,CAAC;AAEH,eAAe,gBAAgB,CAAC"}