@workday/canvas-kit-react 7.0.0-alpha.100-next.25 → 7.0.0-alpha.103-next.28

package/button/index.ts

@@ -10,4 +10,5 @@ export {ToolbarIconButton, ToolbarIconButtonProps} from './lib/ToolbarIconButton
 export {ToolbarDropdownButton, ToolbarDropdownButtonProps} from './lib/ToolbarDropdownButton';
 export {Hyperlink, HyperlinkProps} from './lib/Hyperlink';
 export {BaseButton, ButtonContainerProps} from './lib/BaseButton';
+export {ExternalHyperlink, ExternalHyperlinkProps} from './lib/ExternalHyperlink';
 export * from './lib/types';

package/button/lib/ExternalHyperlink.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {styled, createComponent, StyledType} from '@workday/canvas-kit-react/common';
+import {extLinkIcon} from '@workday/canvas-system-icons-web';
+import {SystemIcon, systemIconStyles} from '@workday/canvas-kit-react/icon';
+import {Hyperlink, HyperlinkProps} from './Hyperlink';
+
+export interface ExternalHyperlinkProps extends HyperlinkProps {
+  /**
+   * Informs a screen reader user the link will open in a new window. It is read after the link text.
+   * This value will need to be translated.
+   * @default 'Opens link in new window'
+   */
+  iconLabel?: string;
+}
+
+const iconStyles = {
+  ...systemIconStyles({fill: 'currentColor', fillHover: 'currentColor'}),
+};
+
+const Anchor = styled(Hyperlink)<ExternalHyperlinkProps & StyledType>({
+  ...iconStyles,
+  display: 'inline-flex',
+  flexDirection: 'row',
+  alignItems: 'center',
+});
+
+const iconSize = '1em';
+const minIconSize = '16px';
+
+const StyledSystemIcon = styled(SystemIcon)<StyledType>({
+  ...iconStyles,
+  width: `calc(${iconSize} - 1px)`,
+  minWidth: `calc(${minIconSize} - 1px)`,
+  marginLeft: '2px',
+});
+
+export const ExternalHyperlink = createComponent('a')({
+  displayName: 'ExternalHyperlink',
+  Component: (
+    {
+      children,
+      variant,
+      iconLabel = 'Opens link in new window',
+      ...elemProps
+    }: ExternalHyperlinkProps,
+    ref
+  ) => (
+    <Anchor ref={ref} target="_blank" rel="noreferrer" variant={variant} {...elemProps}>
+      <span>{children}</span>
+      <StyledSystemIcon
+        icon={extLinkIcon}
+        role="img"
+        aria-label={iconLabel}
+        size={iconSize}
+        styles={{['& svg']: {minWidth: minIconSize, minHeight: minIconSize}}}
+      />
+    </Anchor>
+  ),
+});

package/dist/commonjs/button/index.d.ts

@@ -7,5 +7,6 @@ export { ToolbarIconButton, ToolbarIconButtonProps } from './lib/ToolbarIconButt
 export { ToolbarDropdownButton, ToolbarDropdownButtonProps } from './lib/ToolbarDropdownButton';
 export { Hyperlink, HyperlinkProps } from './lib/Hyperlink';
 export { BaseButton, ButtonContainerProps } from './lib/BaseButton';
+export { ExternalHyperlink, ExternalHyperlinkProps } from './lib/ExternalHyperlink';
 export * from './lib/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/commonjs/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAClE,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC"}

package/dist/commonjs/button/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.BaseButton = exports.Hyperlink = exports.ToolbarDropdownButton = exports.ToolbarIconButton = exports.deprecated_Button = exports.DeleteButton = exports.TertiaryButton = exports.SecondaryButton = exports.PrimaryButton = void 0;
+exports.ExternalHyperlink = exports.BaseButton = exports.Hyperlink = exports.ToolbarDropdownButton = exports.ToolbarIconButton = exports.deprecated_Button = exports.DeleteButton = exports.TertiaryButton = exports.SecondaryButton = exports.PrimaryButton = void 0;
 var PrimaryButton_1 = require("./lib/PrimaryButton");
 Object.defineProperty(exports, "PrimaryButton", { enumerable: true, get: function () { return PrimaryButton_1.PrimaryButton; } });
 var SecondaryButton_1 = require("./lib/SecondaryButton");
@@ -29,4 +29,6 @@ var Hyperlink_1 = require("./lib/Hyperlink");
 Object.defineProperty(exports, "Hyperlink", { enumerable: true, get: function () { return Hyperlink_1.Hyperlink; } });
 var BaseButton_1 = require("./lib/BaseButton");
 Object.defineProperty(exports, "BaseButton", { enumerable: true, get: function () { return BaseButton_1.BaseButton; } });
+var ExternalHyperlink_1 = require("./lib/ExternalHyperlink");
+Object.defineProperty(exports, "ExternalHyperlink", { enumerable: true, get: function () { return ExternalHyperlink_1.ExternalHyperlink; } });
 __exportStar(require("./lib/types"), exports);

package/dist/commonjs/button/lib/ExternalHyperlink.d.ts

@@ -0,0 +1,11 @@
+import { HyperlinkProps } from './Hyperlink';
+export interface ExternalHyperlinkProps extends HyperlinkProps {
+    /**
+     * Informs a screen reader user the link will open in a new window. It is read after the link text.
+     * This value will need to be translated.
+     * @default 'Opens link in new window'
+     */
+    iconLabel?: string;
+}
+export declare const ExternalHyperlink: import("../../common").ElementComponent<"a", ExternalHyperlinkProps>;
+//# sourceMappingURL=ExternalHyperlink.d.ts.map

package/dist/commonjs/button/lib/ExternalHyperlink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAC,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,iBAAiB,sEAsB5B,CAAC"}

package/dist/commonjs/button/lib/ExternalHyperlink.js

@@ -0,0 +1,48 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExternalHyperlink = void 0;
+var react_1 = __importDefault(require("react"));
+var common_1 = require("@workday/canvas-kit-react/common");
+var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+var icon_1 = require("@workday/canvas-kit-react/icon");
+var Hyperlink_1 = require("./Hyperlink");
+var iconStyles = __assign({}, icon_1.systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }));
+var Anchor = common_1.styled(Hyperlink_1.Hyperlink)(__assign(__assign({}, iconStyles), { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' }));
+var iconSize = '1em';
+var minIconSize = '16px';
+var StyledSystemIcon = common_1.styled(icon_1.SystemIcon)(__assign(__assign({}, iconStyles), { width: "calc(" + iconSize + " - 1px)", minWidth: "calc(" + minIconSize + " - 1px)", marginLeft: '2px' }));
+exports.ExternalHyperlink = common_1.createComponent('a')({
+    displayName: 'ExternalHyperlink',
+    Component: function (_a, ref) {
+        var _b;
+        var children = _a.children, variant = _a.variant, _c = _a.iconLabel, iconLabel = _c === void 0 ? 'Opens link in new window' : _c, elemProps = __rest(_a, ["children", "variant", "iconLabel"]);
+        return (react_1.default.createElement(Anchor, __assign({ ref: ref, target: "_blank", rel: "noreferrer", variant: variant }, elemProps),
+            react_1.default.createElement("span", null, children),
+            react_1.default.createElement(StyledSystemIcon, { icon: canvas_system_icons_web_1.extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: (_b = {}, _b['& svg'] = { minWidth: minIconSize, minHeight: minIconSize }, _b) })));
+    },
+});

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

@@ -2,7 +2,7 @@ import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 export interface IconProps extends SvgProps {
     src: CanvasIcon;
-    size?: number;
+    size?: number | string;
     type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
 }
 export declare const Icon: import("../../common").ElementComponent<"span", IconProps>;

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":"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"}
+{"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,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,4DAyBf,CAAC;AAEH,eAAe,IAAI,CAAC"}

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

@@ -51,13 +51,11 @@ var common_1 = require("@workday/canvas-kit-react/common");
 exports.Icon = common_1.createComponent('span')({
     displayName: 'Icon',
     Component: function (_a, ref, Element) {
+        var _b;
         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'] = {
-                width: size,
-                height: size,
-            };
+            iconStyles['& svg'] = __assign(__assign({}, ((_b = iconStyles['& svg']) !== null && _b !== void 0 ? _b : {})), { width: size, height: size });
         }
         return (React.createElement(Svg_1.default, __assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
     },

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

@@ -47,7 +47,7 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number | undefined;
+    size?: number | string | undefined;
     className?: string;
 }
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;

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":"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"}
+{"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,MAAM,GAAG,SAAS,CAAC;IACnC,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/es6/button/index.d.ts

@@ -7,5 +7,6 @@ export { ToolbarIconButton, ToolbarIconButtonProps } from './lib/ToolbarIconButt
 export { ToolbarDropdownButton, ToolbarDropdownButtonProps } from './lib/ToolbarDropdownButton';
 export { Hyperlink, HyperlinkProps } from './lib/Hyperlink';
 export { BaseButton, ButtonContainerProps } from './lib/BaseButton';
+export { ExternalHyperlink, ExternalHyperlinkProps } from './lib/ExternalHyperlink';
 export * from './lib/types';
 //# sourceMappingURL=index.d.ts.map

package/dist/es6/button/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAClE,cAAc,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAE,kBAAkB,EAAC,MAAM,qBAAqB,CAAC;AACtE,OAAO,EAAC,eAAe,EAAE,oBAAoB,EAAC,MAAM,uBAAuB,CAAC;AAC5E,OAAO,EAAC,cAAc,EAAE,mBAAmB,EAAC,MAAM,sBAAsB,CAAC;AACzE,OAAO,EAAC,YAAY,EAAE,iBAAiB,EAAC,MAAM,oBAAoB,CAAC;AACnE,OAAO,EACL,gBAAgB,IAAI,iBAAiB,EACrC,qBAAqB,GACtB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,OAAO,EAAC,qBAAqB,EAAE,0BAA0B,EAAC,MAAM,6BAA6B,CAAC;AAC9F,OAAO,EAAC,SAAS,EAAE,cAAc,EAAC,MAAM,iBAAiB,CAAC;AAC1D,OAAO,EAAC,UAAU,EAAE,oBAAoB,EAAC,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAC,iBAAiB,EAAE,sBAAsB,EAAC,MAAM,yBAAyB,CAAC;AAClF,cAAc,aAAa,CAAC"}

package/dist/es6/button/index.js

@@ -7,4 +7,5 @@ export { ToolbarIconButton } from './lib/ToolbarIconButton';
 export { ToolbarDropdownButton } from './lib/ToolbarDropdownButton';
 export { Hyperlink } from './lib/Hyperlink';
 export { BaseButton } from './lib/BaseButton';
+export { ExternalHyperlink } from './lib/ExternalHyperlink';
 export * from './lib/types';

package/dist/es6/button/lib/ExternalHyperlink.d.ts

@@ -0,0 +1,11 @@
+import { HyperlinkProps } from './Hyperlink';
+export interface ExternalHyperlinkProps extends HyperlinkProps {
+    /**
+     * Informs a screen reader user the link will open in a new window. It is read after the link text.
+     * This value will need to be translated.
+     * @default 'Opens link in new window'
+     */
+    iconLabel?: string;
+}
+export declare const ExternalHyperlink: import("../../common").ElementComponent<"a", ExternalHyperlinkProps>;
+//# sourceMappingURL=ExternalHyperlink.d.ts.map

package/dist/es6/button/lib/ExternalHyperlink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExternalHyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/ExternalHyperlink.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAY,cAAc,EAAC,MAAM,aAAa,CAAC;AAEtD,MAAM,WAAW,sBAAuB,SAAQ,cAAc;IAC5D;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAuBD,eAAO,MAAM,iBAAiB,sEAsB5B,CAAC"}

package/dist/es6/button/lib/ExternalHyperlink.js

@@ -0,0 +1,42 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React from 'react';
+import { styled, createComponent } from '@workday/canvas-kit-react/common';
+import { extLinkIcon } from '@workday/canvas-system-icons-web';
+import { SystemIcon, systemIconStyles } from '@workday/canvas-kit-react/icon';
+import { Hyperlink } from './Hyperlink';
+var iconStyles = __assign({}, systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }));
+var Anchor = styled(Hyperlink)(__assign(__assign({}, iconStyles), { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' }));
+var iconSize = '1em';
+var minIconSize = '16px';
+var StyledSystemIcon = styled(SystemIcon)(__assign(__assign({}, iconStyles), { width: "calc(" + iconSize + " - 1px)", minWidth: "calc(" + minIconSize + " - 1px)", marginLeft: '2px' }));
+export var ExternalHyperlink = createComponent('a')({
+    displayName: 'ExternalHyperlink',
+    Component: function (_a, ref) {
+        var _b;
+        var children = _a.children, variant = _a.variant, _c = _a.iconLabel, iconLabel = _c === void 0 ? 'Opens link in new window' : _c, elemProps = __rest(_a, ["children", "variant", "iconLabel"]);
+        return (React.createElement(Anchor, __assign({ ref: ref, target: "_blank", rel: "noreferrer", variant: variant }, elemProps),
+            React.createElement("span", null, children),
+            React.createElement(StyledSystemIcon, { icon: extLinkIcon, role: "img", "aria-label": iconLabel, size: iconSize, styles: (_b = {}, _b['& svg'] = { minWidth: minIconSize, minHeight: minIconSize }, _b) })));
+    },
+});

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

@@ -2,7 +2,7 @@ import { CanvasIcon, CanvasIconTypes } from '@workday/design-assets-types';
 import { SvgProps } from './Svg';
 export interface IconProps extends SvgProps {
     src: CanvasIcon;
-    size?: number;
+    size?: number | string;
     type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
 }
 export declare const Icon: import("../../common").ElementComponent<"span", IconProps>;

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

@@ -1 +1 @@
-{"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"}
+{"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,GAAG,MAAM,CAAC;IACvB,IAAI,EAAE,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC;CAChF;AAED,eAAO,MAAM,IAAI,4DAyBf,CAAC;AAEH,eAAe,IAAI,CAAC"}

package/dist/es6/icon/lib/Icon.js

@@ -26,13 +26,11 @@ import { createComponent } from '@workday/canvas-kit-react/common';
 export var Icon = createComponent('span')({
     displayName: 'Icon',
     Component: function (_a, ref, Element) {
+        var _b;
         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'] = {
-                width: size,
-                height: size,
-            };
+            iconStyles['& svg'] = __assign(__assign({}, ((_b = iconStyles['& svg']) !== null && _b !== void 0 ? _b : {})), { width: size, height: size });
         }
         return (React.createElement(Svg, __assign({ src: src, type: type, shouldMirror: shouldMirror, as: Element }, elemProps, { ref: ref, styles: iconStyles })));
     },

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

@@ -47,7 +47,7 @@ export interface SystemIconProps extends SystemIconStyles, Omit<IconProps, 'src'
     /**
      * The size of the SystemIcon in `px`.
      */
-    size?: number | undefined;
+    size?: number | string | undefined;
     className?: string;
 }
 export declare const systemIconStyles: ({ accent, accentHover, background, backgroundHover, color, colorHover, fill, fillHover, }: SystemIconStyles) => CSSObject;

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

@@ -1 +1 @@
-{"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"}
+{"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,MAAM,GAAG,SAAS,CAAC;IACnC,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/icon/lib/Icon.tsx

@@ -6,7 +6,7 @@ import {createComponent} from '@workday/canvas-kit-react/common';
 
 export interface IconProps extends SvgProps {
   src: CanvasIcon;
-  size?: number;
+  size?: number | string;
   type: CanvasIconTypes.Accent | CanvasIconTypes.Applet | CanvasIconTypes.System;
 }
 
@@ -17,6 +17,7 @@ export const Icon = createComponent('span')({
 
     if (size) {
       iconStyles['& svg'] = {
+        ...((iconStyles['& svg'] as CSSObject) ?? {}),
         width: size,
         height: size,
       };

package/icon/lib/SystemIcon.tsx

@@ -54,7 +54,7 @@ export interface SystemIconProps
   /**
    * The size of the SystemIcon in `px`.
    */
-  size?: number | undefined;
+  size?: number | string | undefined;
   className?: string; //investigate more
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-react",
-  "version": "7.0.0-alpha.100-next.25+911bfad3",
+  "version": "7.0.0-alpha.103-next.28+a55aeef9",
   "description": "The parent module that contains all Workday Canvas Kit React components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -48,9 +48,9 @@
     "@emotion/styled": "^11.6.0",
     "@popperjs/core": "^2.5.4",
     "@workday/canvas-colors-web": "^2.0.0",
-    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.100-next.25+911bfad3",
-    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.100-next.25+911bfad3",
-    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.100-next.25+911bfad3",
+    "@workday/canvas-kit-labs-react": "^7.0.0-alpha.103-next.28+a55aeef9",
+    "@workday/canvas-kit-popup-stack": "^7.0.0-alpha.103-next.28+a55aeef9",
+    "@workday/canvas-kit-preview-react": "^7.0.0-alpha.103-next.28+a55aeef9",
     "@workday/canvas-system-icons-web": "^3.0.0",
     "@workday/design-assets-types": "^0.2.4",
     "chroma-js": "^2.1.0",
@@ -69,5 +69,5 @@
     "@workday/canvas-accent-icons-web": "^3.0.0",
     "@workday/canvas-applet-icons-web": "^2.0.0"
   },
-  "gitHead": "911bfad34147c054ac08fd77845d0a0339fd3f95"
+  "gitHead": "a55aeef97c5138c9b1144584287afa8cac6fe17f"
 }