@workday/canvas-kit-react 8.0.0-alpha.253-next.22 → 8.0.0-alpha.428-next.2

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

@@ -1,48 +1,38 @@
 "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' }));
+const react_1 = __importDefault(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
+const icon_1 = require("@workday/canvas-kit-react/icon");
+const Hyperlink_1 = require("./Hyperlink");
+const iconStyles = {
+    ...icon_1.systemIconStyles({ fill: 'currentColor', fillHover: 'currentColor' }),
+};
+const Anchor = common_1.styled(Hyperlink_1.Hyperlink)({
+    ...iconStyles,
+    display: 'inline-flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+});
+const iconSize = '1em';
+const minIconSize = '16px';
+const StyledSystemIcon = common_1.styled(icon_1.SystemIcon)({
+    ...iconStyles,
+    width: `calc(${iconSize} - 1px)`,
+    minWidth: `calc(${minIconSize} - 1px)`,
+    marginLeft: '2px',
+});
+/**
+ * `ExternalHyperlink`s also have an `inverse` variant. Use this variant when you need to place the
+ * link on a dark or colorful background such as `blueberry400`.
+ */
 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) })));
-    },
+    Component: ({ children, iconLabel = 'Opens link in new window', ...elemProps }, ref) => (react_1.default.createElement(Anchor, Object.assign({ ref: ref, target: "_blank", rel: "noreferrer" }, 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: { ['& svg']: { minWidth: minIconSize, minHeight: minIconSize } } }))),
 });

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

@@ -11,5 +11,9 @@ export interface HyperlinkProps {
     href?: string;
     children?: React.ReactNode;
 }
-export declare const Hyperlink: import("../../common").ElementComponent<"a", HyperlinkProps>;
+/**
+ * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
+ * on the current page.
+ */
+export declare const Hyperlink: import("@workday/canvas-kit-react/common").ElementComponent<"a", HyperlinkProps>;
 //# sourceMappingURL=Hyperlink.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAqDD,eAAO,MAAM,SAAS,8DAOpB,CAAC"}
+{"version":3,"file":"Hyperlink.d.ts","sourceRoot":"","sources":["../../../../button/lib/Hyperlink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,WAAW,cAAc;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAqDD;;;GAGG;AACH,eAAO,MAAM,SAAS,kFAOpB,CAAC"}

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,23 +18,12 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Hyperlink = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var variantStyles = {
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const variantStyles = {
     inverse: {
         color: tokens_1.colors.frenchVanilla100,
         '&:hover': {
@@ -53,7 +31,7 @@ var variantStyles = {
             background: 'rgba(255, 255, 255, 0.1)',
         },
         '&:focus': {
-            boxShadow: "0 0 0 2px " + tokens_1.colors.frenchVanilla100,
+            boxShadow: `0 0 0 2px ${tokens_1.colors.frenchVanilla100}`,
         },
         '&:active': {
             color: tokens_1.colors.blueberry600,
@@ -61,13 +39,13 @@ var variantStyles = {
         },
     },
 };
-var anchorVariants = function (props) {
+const anchorVariants = (props) => {
     if (props.variant === 'inverse') {
         return variantStyles.inverse;
     }
     return {};
 };
-var Anchor = common_1.styled('a')({
+const Anchor = common_1.styled('a')({
     fontFamily: tokens_1.type.properties.fontFamilies.default,
     textDecoration: 'underline',
     color: tokens_1.colors.blueberry400,
@@ -82,7 +60,7 @@ var Anchor = common_1.styled('a')({
         background: tokens_1.colors.soap200,
     },
     '&:focus': {
-        boxShadow: "0 0 0 2px " + tokens_1.colors.blueberry400,
+        boxShadow: `0 0 0 2px ${tokens_1.colors.blueberry400}`,
         outline: 'none',
     },
     '&:active': {
@@ -90,10 +68,11 @@ var Anchor = common_1.styled('a')({
         background: tokens_1.colors.soap300,
     },
 }, anchorVariants);
+/**
+ * `Hyperlink`s should be used when you want to navigate away from the current page or to an anchor
+ * on the current page.
+ */
 exports.Hyperlink = common_1.createComponent('a')({
     displayName: 'Hyperlink',
-    Component: function (_a, ref, Element) {
-        var variant = _a.variant, href = _a.href, children = _a.children, elemProps = __rest(_a, ["variant", "href", "children"]);
-        return (React.createElement(Anchor, __assign({ ref: ref, as: Element, variant: variant, href: href }, elemProps), children));
-    },
+    Component: ({ children, ...elemProps }, ref, Element) => (React.createElement(Anchor, Object.assign({ ref: ref, as: Element }, elemProps), children)),
 });

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

@@ -6,14 +6,11 @@ import { BaseButtonProps } from './BaseButton';
 export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButtonProps {
     /**
      * The variant of the PrimaryButton.
-     * @default undefined
      */
     variant?: 'inverse';
     /**
      * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      * If no size is provided, it will default to `medium`.
-     *
-     * @default 'medium'
      */
     size?: ButtonSizes;
     /**
@@ -24,15 +21,22 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior, BaseButto
     /**
      * Button icon positions can either be `start` or `end`.
      * If no value is provided, it defaults to `start`.
-     * @default 'start'
      */
     iconPosition?: IconPositions;
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
-     * @default false
      */
     shouldMirrorIcon?: boolean;
     children?: React.ReactNode;
 }
-export declare const PrimaryButton: import("../../common").ElementComponent<"button", PrimaryButtonProps>;
+/**
+ * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
+ * action. Multiple primary buttons make it confusing for the user to understand what action they
+ * should take. Not all screens require a Primary Button.
+ *
+ * Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
+export declare const PrimaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", PrimaryButtonProps>;
 //# sourceMappingURL=PrimaryButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EAIV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACnD,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AA0E9F,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACpF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEA+CxB,CAAC"}
+{"version":3,"file":"PrimaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/PrimaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EACL,cAAc,EAEd,SAAS,EAIV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACnD,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AA0E9F,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACpF;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,aAAa,2FA+CxB,CAAC"}

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,25 +18,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.PrimaryButton = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var BaseButton_1 = require("./BaseButton");
-var getPrimaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const BaseButton_1 = require("./BaseButton");
+const getPrimaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:
@@ -107,12 +85,20 @@ var getPrimaryButtonColors = function (variant, theme) {
             };
     }
 };
+/**
+ * Primary Buttons are high emphasis. Use once per screen to draw attention to the highest priority
+ * action. Multiple primary buttons make it confusing for the user to understand what action they
+ * should take. Not all screens require a Primary Button.
+ *
+ * Primary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 exports.PrimaryButton = common_1.createComponent('button')({
     displayName: 'PrimaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, icon = _a.icon, _d = _a.shouldMirrorIcon, shouldMirrorIcon = _d === void 0 ? false : _d, children = _a.children, elemProps = __rest(_a, ["size", "iconPosition", "variant", "icon", "shouldMirrorIcon", "children"]);
-        var theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, __assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: getPrimaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

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

@@ -34,6 +34,15 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior, BaseBut
     shouldMirrorIcon?: boolean;
     children?: React.ReactNode;
 }
-export declare const SecondaryButton: import("../../common").ElementComponent<"button", SecondaryButtonProps>;
+/**
+ * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
+ * Buttons can be used on most pages without restrictions and work well for multiple actions of
+ * equal weight. They can be used in conjunction with a Primary Button or independently.
+ *
+ * Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
+export declare const SecondaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", SecondaryButtonProps>;
 export declare const getSecondaryButtonColors: (variant: 'inverse' | undefined, theme: EmotionCanvasTheme) => ButtonColors;
 //# sourceMappingURL=SecondaryButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AAE9F,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}
+{"version":3,"file":"SecondaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/SecondaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EACL,cAAc,EAEd,SAAS,EACT,kBAAkB,EAGnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAa,eAAe,EAAsC,MAAM,cAAc,CAAC;AAE9F,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc,EAAE,eAAe;IACtF;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,eAAe,6FA+C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,YAC1B,SAAS,GAAG,SAAS,SACvB,kBAAkB,KACxB,YAoFF,CAAC"}

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,36 +18,33 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getSecondaryButtonColors = exports.SecondaryButton = void 0;
-var React = __importStar(require("react"));
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var common_1 = require("@workday/canvas-kit-react/common");
-var BaseButton_1 = require("./BaseButton");
+const React = __importStar(require("react"));
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const common_1 = require("@workday/canvas-kit-react/common");
+const BaseButton_1 = require("./BaseButton");
+/**
+ * Secondary Buttons have a medium level of emphasis. Use them for non-critical actions. Secondary
+ * Buttons can be used on most pages without restrictions and work well for multiple actions of
+ * equal weight. They can be used in conjunction with a Primary Button or independently.
+ *
+ * Secondary Buttons have four sizes: `extraSmall`, `small`, `medium`, and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 exports.SecondaryButton = common_1.createComponent('button')({
     displayName: 'SecondaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, variant = _a.variant, icon = _a.icon, _d = _a.shouldMirrorIcon, shouldMirrorIcon = _d === void 0 ? false : _d, children = _a.children, elemProps = __rest(_a, ["size", "iconPosition", "variant", "icon", "shouldMirrorIcon", "children"]);
-        var theme = common_1.useTheme();
-        return (React.createElement(BaseButton_1.BaseButton, __assign({ ref: ref, size: size, colors: exports.getSecondaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', variant, icon, shouldMirrorIcon = false, children, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        return (React.createElement(BaseButton_1.BaseButton, Object.assign({ ref: ref, size: size, colors: exports.getSecondaryButtonColors(variant, theme), padding: BaseButton_1.getPaddingStyles(children, size, icon, iconPosition), minWidth: BaseButton_1.getMinWidthStyles(children, size), as: Element }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(BaseButton_1.BaseButton.Label, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
-var getSecondaryButtonColors = function (variant, theme) {
-    var themePrimary = theme.canvas.palette.primary;
+const getSecondaryButtonColors = (variant, theme) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     switch (variant) {
         case undefined:
         default:

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

@@ -6,20 +6,16 @@ import { BaseButtonProps } from './BaseButton';
 export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
     /**
      * The variant of the TertiaryButton.
-     * @default undefined
      */
     variant?: 'inverse' | undefined;
     /**
-     * There are three button sizes: `extraSmall`, `small`, and `medium`.
+     * There are four button sizes: `extraSmall`, `small`, `medium`, and `large`.
      * If no size is provided, it will default to `medium`.
-     *
-     * @default 'medium'
      */
     size?: ButtonSizes;
     /**
      * Button icon positions can either be `start` or `end`.
      * If no value is provided, it defaults to `start`.
-     * @default 'start'
      */
     iconPosition?: IconPositions;
     /**
@@ -31,20 +27,27 @@ export interface TertiaryButtonProps extends Themeable, BaseButtonProps {
      */
     /**
      * If set to `true`, transform the icon's x-axis to mirror the graphic
-     * @default false
      */
     shouldMirrorIcon?: boolean;
     /**
      * If set to `true`, transform text to all letters uppercase
-     * @default undefined
      */
     allCaps?: boolean;
     children?: React.ReactNode;
     /**
      * If set to `true`, make icon button available to use theme colors instead of default
-     * @default false
      */
     isThemeable?: boolean;
 }
-export declare const TertiaryButton: import("../../common").ElementComponent<"button", TertiaryButtonProps>;
+/**
+ * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
+ * often be looking to do. Tertiary Buttons have lower prominence as its container is not visible
+ * until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”,
+ * “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
+ *
+ * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
+export declare const TertiaryButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", TertiaryButtonProps>;
 //# sourceMappingURL=TertiaryButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,eAAe;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiJD,eAAO,MAAM,cAAc,wEAoDzB,CAAC"}
+{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAe,aAAa,EAAE,WAAW,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAa,eAAe,EAAC,MAAM,cAAc,CAAC;AAEzD,MAAM,WAAW,mBAAoB,SAAQ,SAAS,EAAE,eAAe;IACrE;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;OAEG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAiJD;;;;;;;;;GASG;AACH,eAAO,MAAM,cAAc,4FAkDzB,CAAC"}

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

@@ -1,15 +1,4 @@
 "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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
@@ -29,25 +18,14 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        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;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TertiaryButton = void 0;
-var React = __importStar(require("react"));
-var common_1 = require("@workday/canvas-kit-react/common");
-var tokens_1 = require("@workday/canvas-kit-react/tokens");
-var BaseButton_1 = require("./BaseButton");
-var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
-    var themePrimary = theme.canvas.palette.primary;
+const React = __importStar(require("react"));
+const common_1 = require("@workday/canvas-kit-react/common");
+const tokens_1 = require("@workday/canvas-kit-react/tokens");
+const BaseButton_1 = require("./BaseButton");
+const getTertiaryButtonColors = (variant, theme, hasThemeStyles) => {
+    const { canvas: { palette: { primary: themePrimary }, }, } = theme;
     if (variant === 'inverse') {
         return {
             default: {
@@ -112,42 +90,39 @@ var getTertiaryButtonColors = function (variant, theme, hasThemeStyles) {
         };
     }
 };
-var StyledButtonLabel = common_1.styled(BaseButton_1.BaseButton.Label)({
+const StyledButtonLabel = common_1.styled(BaseButton_1.BaseButton.Label)({
     textDecoration: 'underline',
 });
-var StyledTertiaryButtonContainer = common_1.styled(BaseButton_1.BaseButton)({
+const StyledTertiaryButtonContainer = common_1.styled(BaseButton_1.BaseButton)({
     border: '0',
-}, function (_a) {
-    var allCaps = _a.allCaps;
-    return ({
-        textTransform: allCaps ? 'uppercase' : undefined,
-    });
-});
-var getPaddingStyles = function (icon, iconPosition, children, size) {
+}, ({ allCaps }) => ({
+    textTransform: allCaps ? 'uppercase' : undefined,
+}));
+const getPaddingStyles = (icon, iconPosition, children, size) => {
     if (children) {
         // if there is an icon on the left, add 4px extra padding to the right for visual balance
         if (icon && iconPosition === 'start') {
             if (size === 'extraSmall') {
-                return "0 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xxxs;
+                return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xxxs}`;
             }
-            return "0 " + tokens_1.space.xs + " 0 " + tokens_1.space.xxs;
+            return `0 ${tokens_1.space.xs} 0 ${tokens_1.space.xxs}`;
         }
         // if there is an icon on the right, add 4px extra padding to the left for visual balance
         if (icon && iconPosition === 'end') {
             if (size === 'extraSmall') {
-                return "0 " + tokens_1.space.xxxs + " 0 " + tokens_1.space.xxs;
+                return `0 ${tokens_1.space.xxxs} 0 ${tokens_1.space.xxs}`;
             }
-            return "0 " + tokens_1.space.xxs + " 0 " + tokens_1.space.xs;
+            return `0 ${tokens_1.space.xxs} 0 ${tokens_1.space.xs}`;
         }
         // if there is no icon, return the default padding
-        return "0 " + tokens_1.space.xxs;
+        return `0 ${tokens_1.space.xxs}`;
     }
     else {
         return '0';
     }
 };
-var getMinWidthStyles = function (children, size) {
-    var minWidthNum;
+const getMinWidthStyles = (children, size) => {
+    let minWidthNum;
     switch (size) {
         case 'large':
             minWidthNum = '48px';
@@ -167,13 +142,22 @@ var getMinWidthStyles = function (children, size) {
     }
     return children ? 'auto' : minWidthNum;
 };
+/**
+ * Tertiary Buttons have the lowest emphasis. Use for less important actions that the user may not
+ * often be looking to do. Tertiary Buttons have lower prominence as its container is not visible
+ * until it is interacted with. Use Tertiary Buttons for supplemental actions such as “View More”,
+ * “Read More” or “Select a File”. Tertiary Buttons are frequently used on Cards.
+ *
+ * Tertiary Buttons have four sizes: `extraSmall`, `small`, `medium` and `large`. Icons are
+ * supported for every size and can be positioned at the `start` or `end` with the `iconPosition`
+ * prop.
+ */
 exports.TertiaryButton = common_1.createComponent('button')({
     displayName: 'TertiaryButton',
-    Component: function (_a, ref, Element) {
-        var _b = _a.size, size = _b === void 0 ? 'medium' : _b, _c = _a.iconPosition, iconPosition = _c === void 0 ? 'start' : _c, _d = _a.isThemeable, isThemeable = _d === void 0 ? false : _d, variant = _a.variant, children = _a.children, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, allCaps = _a.allCaps, elemProps = __rest(_a, ["size", "iconPosition", "isThemeable", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
-        var theme = common_1.useTheme();
-        var hasThemeStyles = !!children || isThemeable;
-        return (React.createElement(StyledTertiaryButtonContainer, __assign({ ref: ref, as: Element, allCaps: allCaps, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle }, elemProps),
+    Component: ({ size = 'medium', iconPosition = 'start', isThemeable = false, variant, children, icon, shouldMirrorIcon = false, ...elemProps }, ref, Element) => {
+        const theme = common_1.useTheme();
+        const hasThemeStyles = !!children || isThemeable;
+        return (React.createElement(StyledTertiaryButtonContainer, Object.assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme, hasThemeStyles), size: size, padding: getPaddingStyles(icon, iconPosition, children, size), minWidth: getMinWidthStyles(children, size), borderRadius: children ? tokens_1.borderRadius.m : tokens_1.borderRadius.circle }, elemProps),
             icon && iconPosition === 'start' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             children && React.createElement(StyledButtonLabel, null, children),
             icon && iconPosition === 'end' && (React.createElement(BaseButton_1.BaseButton.Icon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));

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

@@ -2,5 +2,5 @@ import { Themeable } from '@workday/canvas-kit-react/common';
 import { ToolbarIconButtonProps } from './ToolbarIconButton';
 export interface ToolbarDropdownButtonProps extends Omit<ToolbarIconButtonProps, 'toggled' | 'onToggleChange'>, Themeable {
 }
-export declare const ToolbarDropdownButton: import("../../common").ElementComponent<"button", ToolbarDropdownButtonProps>;
+export declare const ToolbarDropdownButton: import("@workday/canvas-kit-react/common").ElementComponent<"button", ToolbarDropdownButtonProps>;
 //# sourceMappingURL=ToolbarDropdownButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,+EAuChC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAKV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAC;AAE3D,MAAM,WAAW,0BACf,SAAQ,IAAI,CAAC,sBAAsB,EAAE,SAAS,GAAG,gBAAgB,CAAC,EAChE,SAAS;CAAG;AAwBhB,eAAO,MAAM,qBAAqB,mGAuChC,CAAC"}