@workday/canvas-kit-react 6.0.0-beta.0-next.11 → 6.0.0-beta.0-next.16

package/button/README.md

@@ -43,7 +43,7 @@ line-height, etc.).
 
 ---
 
-### `as: React.ElementType`
+#### `as: React.ElementType`
 
 > The alternative container type for the button. If `as="a"` is provided, We use Emotion's special
 > `as` prop to render an `a` tag instead of a `button`.
@@ -69,6 +69,7 @@ Default: `undefined`
 import * as React from 'react';
 import {ToolbarIconButton} from '@workday/canvas-kit-react/button';
 import {activityStreamIcon} from '@workday/canvas-system-icons-web';
+
 <ToolbarIconButton icon={activityStreamIcon} aria-label="Activity Stream" />;
 ```
 
@@ -114,12 +115,20 @@ Default: `undefined`
 
 ---
 
-### `icon: CanvasSystemIcon`
+#### `icon: CanvasSystemIcon`
 
 > The icon of the button. Optional because ToolbarIconButton can also wrap a SystemIcon component.
 
 ---
 
+#### `shouldMirrorIcon: boolean`
+
+> If set to `true`, transform the SVG's x-axis to mirror the graphic
+
+Default: `false`
+
+---
+
 # ToolbarDropdownButton
 
 > Button containing an icon or custom element. Icon may be a component from
@@ -165,6 +174,14 @@ import {activityStreamIcon} from '@workday/canvas-system-icons-web';
 
 ---
 
+#### `shouldMirrorIcon: boolean`
+
+> If set to `true`, transform the SVG's x-axis to mirror the graphic
+
+Default: `false`
+
+---
+
 ### Deprecated Buttons
 
 > We have rolled out our next iteration of our buttons and will be deprecating the old style (orange

package/button/lib/IconButton.tsx

@@ -43,6 +43,11 @@ export interface IconButtonProps extends Themeable {
    * The icon of the IconButton.
    */
   icon?: CanvasSystemIcon;
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
   /**
    * The function called when the IconButton toggled state changes.
    */
@@ -62,6 +67,7 @@ export const IconButton = createComponent('button')({
       size = 'medium',
       onToggleChange,
       icon,
+      shouldMirrorIcon = false,
       toggled,
       children,
       ...elemProps
@@ -108,7 +114,7 @@ export const IconButton = createComponent('button')({
         aria-pressed={toggled}
         {...elemProps}
       >
-        {icon ? <SystemIcon icon={icon} /> : children}
+        {icon ? <SystemIcon icon={icon} shouldMirror={shouldMirrorIcon} /> : children}
       </ButtonContainer>
     );
   },

package/button/lib/PrimaryButton.tsx

@@ -32,6 +32,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
    * @default 'left'
    */
   iconPosition?: 'left' | 'right';
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
   children?: React.ReactNode;
 }
 
@@ -46,6 +51,7 @@ export const PrimaryButton = createComponent('button')({
       iconPosition = 'left',
       dataLabel,
       icon,
+      shouldMirrorIcon = false,
       children,
       ...elemProps
     }: PrimaryButtonProps,
@@ -60,12 +66,22 @@ export const PrimaryButton = createComponent('button')({
       {...elemProps}
     >
       {icon && size !== 'small' && iconPosition === 'left' && (
-        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+        <ButtonLabelIcon
+          size={size}
+          iconPosition={iconPosition}
+          icon={icon}
+          shouldMirrorIcon={shouldMirrorIcon}
+        />
       )}
       <ButtonLabel>{children}</ButtonLabel>
       {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
       {icon && size !== 'small' && iconPosition === 'right' && (
-        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+        <ButtonLabelIcon
+          size={size}
+          iconPosition={iconPosition}
+          icon={icon}
+          shouldMirrorIcon={shouldMirrorIcon}
+        />
       )}
     </ButtonContainer>
   ),

package/button/lib/SecondaryButton.tsx

@@ -39,6 +39,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
    * @default 'left'
    */
   iconPosition?: 'left' | 'right';
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
   children?: React.ReactNode;
 }
 
@@ -54,6 +59,7 @@ export const SecondaryButton = createComponent('button')({
       variant,
       dataLabel,
       icon,
+      shouldMirrorIcon = false,
       children,
       ...elemProps
     }: SecondaryButtonProps,
@@ -68,12 +74,22 @@ export const SecondaryButton = createComponent('button')({
       {...elemProps}
     >
       {icon && size !== 'small' && iconPosition === 'left' && (
-        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+        <ButtonLabelIcon
+          size={size}
+          iconPosition={iconPosition}
+          icon={icon}
+          shouldMirrorIcon={shouldMirrorIcon}
+        />
       )}
       <ButtonLabel>{children}</ButtonLabel>
       {dataLabel && size !== 'small' && <ButtonLabelData>{dataLabel}</ButtonLabelData>}
       {icon && size !== 'small' && iconPosition === 'right' && (
-        <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+        <ButtonLabelIcon
+          size={size}
+          iconPosition={iconPosition}
+          icon={icon}
+          shouldMirrorIcon={shouldMirrorIcon}
+        />
       )}
     </ButtonContainer>
   ),

package/button/lib/TertiaryButton.tsx

@@ -35,6 +35,11 @@ export interface TertiaryButtonProps extends Themeable {
   /**
    * The capitalization of the text in the button.
    */
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
   allCaps?: boolean;
   children?: React.ReactNode;
 }
@@ -143,6 +148,7 @@ export const TertiaryButton = createComponent('button')({
       variant,
       children,
       icon,
+      shouldMirrorIcon = false,
       allCaps,
       ...elemProps
     }: TertiaryButtonProps,
@@ -173,11 +179,21 @@ export const TertiaryButton = createComponent('button')({
         {...elemProps}
       >
         {icon && iconPosition === 'left' && (
-          <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+          <ButtonLabelIcon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
         )}
         <ButtonLabel className="wdc-text-button-label">{children}</ButtonLabel>
         {icon && iconPosition === 'right' && (
-          <ButtonLabelIcon size={size} iconPosition={iconPosition} icon={icon} />
+          <ButtonLabelIcon
+            size={size}
+            iconPosition={iconPosition}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+          />
         )}
       </ButtonContainer>
     );

package/button/lib/ToolbarDropdownButton.tsx

@@ -48,6 +48,7 @@ export const ToolbarDropdownButton = createComponent('button')({
       // eslint-disable-next-line react-hooks/rules-of-hooks
       theme = useTheme(),
       icon,
+      shouldMirrorIcon = false,
       children,
       ...elemProps
     }: ToolbarDropdownButtonProps,
@@ -63,11 +64,19 @@ export const ToolbarDropdownButton = createComponent('button')({
         {...elemProps}
       >
         {icon ? (
-          <SystemIcon className={'wdc-toolbar-dropdown-btn-custom-icon'} icon={icon} />
+          <SystemIcon
+            className={'wdc-toolbar-dropdown-btn-custom-icon'}
+            icon={icon}
+            shouldMirror={shouldMirrorIcon}
+          />
         ) : (
           children
         )}
-        <SystemIcon className={'wdc-toolbar-dropdown-btn-arrow'} icon={chevronDownSmallIcon} />
+        <SystemIcon
+          className={'wdc-toolbar-dropdown-btn-arrow'}
+          icon={chevronDownSmallIcon}
+          shouldMirror={shouldMirrorIcon}
+        />
       </ButtonContainer>
     );
   },

package/button/lib/ToolbarIconButton.tsx

@@ -39,6 +39,7 @@ export const ToolbarIconButton = createComponent('button')({
       theme = useTheme(),
       onToggleChange,
       icon,
+      shouldMirrorIcon = false,
       toggled,
       children,
       ...elemProps
@@ -70,7 +71,7 @@ export const ToolbarIconButton = createComponent('button')({
         aria-pressed={toggled}
         {...elemProps}
       >
-        {icon ? <SystemIcon icon={icon} /> : children}
+        {icon ? <SystemIcon icon={icon} shouldMirror={shouldMirrorIcon} /> : children}
       </ButtonContainer>
     );
   },

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -21,6 +21,11 @@ export interface ButtonLabelIconProps {
    * @default 'left'
    */
   iconPosition?: 'left' | 'right';
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
 }
 
 const ICON_SIZE = 24;
@@ -42,7 +47,13 @@ const ButtonLabelIconStyled = styled('span', {
   })
 );
 
-export const ButtonLabelIcon = ({icon, size, iconPosition, ...elemProps}: ButtonLabelIconProps) => {
+export const ButtonLabelIcon = ({
+  icon,
+  size,
+  iconPosition,
+  shouldMirrorIcon = false,
+  ...elemProps
+}: ButtonLabelIconProps) => {
   /* istanbul ignore next line for coverage */
   if (icon === undefined) {
     return null;
@@ -52,7 +63,7 @@ export const ButtonLabelIcon = ({icon, size, iconPosition, ...elemProps}: Button
 
   return (
     <ButtonLabelIconStyled iconPosition={iconPosition} size={size} {...elemProps}>
-      <SystemIcon size={iconSize} icon={icon} />
+      <SystemIcon size={iconSize} icon={icon} shouldMirror={shouldMirrorIcon} />
     </ButtonLabelIconStyled>
   );
 };

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

@@ -25,6 +25,11 @@ export interface IconButtonProps extends Themeable {
      * The icon of the IconButton.
      */
     icon?: CanvasSystemIcon;
+    /**
+     * If set to `true`, transform the icon's x-axis to mirror the graphic
+     * @default false
+     */
+    shouldMirrorIcon?: boolean;
     /**
      * The function called when the IconButton toggled state changes.
      */

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EACJ,QAAQ,GACR,cAAc,GACd,OAAO,GACP,QAAQ,GACR,cAAc,GACd,SAAS,GACT,eAAe,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,oEA6DrB,CAAC"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,eAAgB,SAAQ,SAAS;IAChD;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,OAAO,CAAC,EACJ,QAAQ,GACR,cAAc,GACd,OAAO,GACP,QAAQ,GACR,cAAc,GACd,SAAS,GACT,eAAe,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B;;OAEG;IACH,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,SAAS,KAAK,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,CAAC;IACnC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,UAAU,oEA8DrB,CAAC"}

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

@@ -44,7 +44,7 @@ exports.IconButton = common_1.createComponent('button')({
         _c = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _c === void 0 ? common_1.useTheme() : _c, _d = _a.variant, variant = _d === void 0 ? 'circle' : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, onToggleChange = _a.onToggleChange, icon = _a.icon, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "variant", "size", "onToggleChange", "icon", "toggled", "children"]);
+        theme = _c === void 0 ? common_1.useTheme() : _c, _d = _a.variant, variant = _d === void 0 ? 'circle' : _d, _e = _a.size, size = _e === void 0 ? 'medium' : _e, onToggleChange = _a.onToggleChange, icon = _a.icon, _f = _a.shouldMirrorIcon, shouldMirrorIcon = _f === void 0 ? false : _f, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "variant", "size", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
         var isInitialMount = React.useRef(true);
         // Only call onToggleChange on update - not on first mount
         React.useEffect(function () {
@@ -63,7 +63,7 @@ exports.IconButton = common_1.createComponent('button')({
             width: size === 'small' ? '20px' : undefined,
             height: size === 'small' ? '20px' : undefined,
         }, _b));
-        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getIconButtonColors(variant, theme, toggled), size: size, fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(icon_1.SystemIcon, { icon: icon }) : children));
+        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getIconButtonColors(variant, theme, toggled), size: size, fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(icon_1.SystemIcon, { icon: icon, shouldMirror: shouldMirrorIcon }) : children));
     },
 });
 var getIconButtonBorderRadius = function (variant) {

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

@@ -23,6 +23,11 @@ export interface PrimaryButtonProps extends Themeable, GrowthBehavior {
      * @default 'left'
      */
     iconPosition?: 'left' | 'right';
+    /**
+     * 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>;

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,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEAkCxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,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,EACT,kBAAkB,EAEnB,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAC9D,OAAO,EAAC,YAAY,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,kBAAmB,SAAQ,SAAS,EAAE,cAAc;IACnE;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,aAAa,uEA6CxB,CAAC;AAEH,eAAO,MAAM,sBAAsB,4FAsBjC,CAAC"}

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

@@ -41,12 +41,12 @@ exports.PrimaryButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "children"]);
+        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
         return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getPrimaryButtonColors(theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
+            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, null, children),
             dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
+            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
 exports.getPrimaryButtonColors = function (_a) {

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

@@ -28,6 +28,11 @@ export interface SecondaryButtonProps extends Themeable, GrowthBehavior {
      * @default 'left'
      */
     iconPosition?: 'left' | 'right';
+    /**
+     * If set to `true`, transform the icon's x-axis to mirror the graphic
+     * @default false
+     */
+    shouldMirrorIcon?: boolean;
     children?: React.ReactNode;
 }
 export declare const SecondaryButton: import("../../common").ElementComponent<"button", SecondaryButtonProps>;

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,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEAmC1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,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,EAAC,MAAM,SAAS,CAAC;AAGrC,MAAM,WAAW,oBAAqB,SAAQ,SAAS,EAAE,cAAc;IACrE;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,eAAe,yEA8C1B,CAAC;AAEH,eAAO,MAAM,wBAAwB,6EA8FpC,CAAC"}

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

@@ -42,12 +42,12 @@ exports.SecondaryButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "children"]);
+        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, dataLabel = _a.dataLabel, icon = _a.icon, _e = _a.shouldMirrorIcon, shouldMirrorIcon = _e === void 0 ? false : _e, children = _a.children, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "dataLabel", "icon", "shouldMirrorIcon", "children"]);
         return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: exports.getSecondaryButtonColors(variant, theme), size: size }, elemProps),
-            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
+            icon && size !== 'small' && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, null, children),
             dataLabel && size !== 'small' && React.createElement(parts_1.ButtonLabelData, null, dataLabel),
-            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
+            icon && size !== 'small' && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });
 exports.getSecondaryButtonColors = function (variant, theme) {

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

@@ -24,6 +24,11 @@ export interface TertiaryButtonProps extends Themeable {
     /**
      * The capitalization of the text in the button.
      */
+    /**
+     * If set to `true`, transform the icon's x-axis to mirror the graphic
+     * @default false
+     */
+    shouldMirrorIcon?: boolean;
     allCaps?: boolean;
     children?: React.ReactNode;
 }

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;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEAmDzB,CAAC"}
+{"version":3,"file":"TertiaryButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/TertiaryButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAI9D,MAAM,WAAW,mBAAoB,SAAQ,SAAS;IACpD;;;OAGG;IACH,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,CAAC;IAChC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAC1B;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;OAEG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;OAEG;IACH;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AA8FD,eAAO,MAAM,cAAc,wEA8DzB,CAAC"}

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

@@ -122,13 +122,13 @@ exports.TertiaryButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _d, variant = _a.variant, children = _a.children, icon = _a.icon, allCaps = _a.allCaps, elemProps = __rest(_a, ["theme", "size", "iconPosition", "variant", "children", "icon", "allCaps"]);
+        theme = _b === void 0 ? common_1.useTheme() : _b, _c = _a.size, size = _c === void 0 ? 'medium' : _c, _d = _a.iconPosition, iconPosition = _d === void 0 ? 'left' : _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, ["theme", "size", "iconPosition", "variant", "children", "icon", "shouldMirrorIcon", "allCaps"]);
         // Note: We don't use ButtonLabel because the label styles differ from other button types
         var allContainerStyles = allCaps
             ? __assign(__assign({}, containerStyles), { textTransform: 'uppercase', fontWeight: tokens_1.type.properties.fontWeights.bold, fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[16] : undefined, letterSpacing: '.5px' }) : __assign(__assign({}, containerStyles), { fontSize: size === 'medium' ? tokens_1.type.properties.fontSizes[14] : undefined });
         return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getTertiaryButtonColors(variant, theme), size: size, extraStyles: allContainerStyles }, elemProps),
-            icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon })),
+            icon && iconPosition === 'left' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon })),
             React.createElement(parts_1.ButtonLabel, { className: "wdc-text-button-label" }, children),
-            icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon }))));
+            icon && iconPosition === 'right' && (React.createElement(parts_1.ButtonLabelIcon, { size: size, iconPosition: iconPosition, icon: icon, shouldMirrorIcon: shouldMirrorIcon }))));
     },
 });

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":"AAGA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAK1C,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,+EA+BhC,CAAC"}
+{"version":3,"file":"ToolbarDropdownButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarDropdownButton.tsx"],"names":[],"mappings":"AAGA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAK1C,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,+EAwChC,CAAC"}

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

@@ -59,10 +59,10 @@ exports.ToolbarDropdownButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, icon = _a.icon, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "children"]);
+        theme = _b === void 0 ? common_1.useTheme() : _b, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, children = _a.children, elemProps = __rest(_a, ["theme", "icon", "shouldMirrorIcon", "children"]);
         return (core_1.jsx(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarDropdownButtonColors(theme), extraStyles: containerStyles }, elemProps),
-            icon ? (core_1.jsx(icon_1.SystemIcon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon })) : (children),
-            core_1.jsx(icon_1.SystemIcon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: canvas_system_icons_web_1.chevronDownSmallIcon })));
+            icon ? (core_1.jsx(icon_1.SystemIcon, { className: 'wdc-toolbar-dropdown-btn-custom-icon', icon: icon, shouldMirror: shouldMirrorIcon })) : (children),
+            core_1.jsx(icon_1.SystemIcon, { className: 'wdc-toolbar-dropdown-btn-arrow', icon: canvas_system_icons_web_1.chevronDownSmallIcon, shouldMirror: shouldMirrorIcon })));
     },
 });
 var getToolbarDropdownButtonColors = function (theme) {

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

@@ -1 +1 @@
-{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,SAAS;CAAG;AAgBhB,eAAO,MAAM,iBAAiB,2EA4C5B,CAAC"}
+{"version":3,"file":"ToolbarIconButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/ToolbarIconButton.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,SAAS,EAGV,MAAM,kCAAkC,CAAC;AAI1C,OAAO,EAAC,eAAe,EAAC,MAAM,cAAc,CAAC;AAE7C,MAAM,WAAW,sBACf,SAAQ,IAAI,CAAC,eAAe,EAAE,MAAM,GAAG,SAAS,CAAC,EAC/C,SAAS;CAAG;AAgBhB,eAAO,MAAM,iBAAiB,2EA6C5B,CAAC"}

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

@@ -58,7 +58,7 @@ exports.ToolbarIconButton = common_1.createComponent('button')({
         _b = _a.theme, 
         // TODO: Fix useTheme and make it a real hook
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        theme = _b === void 0 ? common_1.useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "toggled", "children"]);
+        theme = _b === void 0 ? common_1.useTheme() : _b, onToggleChange = _a.onToggleChange, icon = _a.icon, _c = _a.shouldMirrorIcon, shouldMirrorIcon = _c === void 0 ? false : _c, toggled = _a.toggled, children = _a.children, elemProps = __rest(_a, ["theme", "onToggleChange", "icon", "shouldMirrorIcon", "toggled", "children"]);
         var isInitialMount = React.useRef(true);
         // Only call onToggleChange on update - not on first mount
         React.useEffect(function () {
@@ -71,7 +71,7 @@ exports.ToolbarIconButton = common_1.createComponent('button')({
                 }
             }
         }, [toggled, onToggleChange]);
-        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(icon_1.SystemIcon, { icon: icon }) : children));
+        return (React.createElement(parts_1.ButtonContainer, __assign({ ref: ref, as: Element, colors: getToolbarIconButtonColors(theme, toggled), size: 'small', fillIcon: toggled, extraStyles: containerStyles, "aria-pressed": toggled }, elemProps), icon ? React.createElement(icon_1.SystemIcon, { icon: icon, shouldMirror: shouldMirrorIcon }) : children));
     },
 });
 var getToolbarIconButtonColors = function (theme, toggled) {

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts

@@ -15,6 +15,11 @@ export interface ButtonLabelIconProps {
      * @default 'left'
      */
     iconPosition?: 'left' | 'right';
+    /**
+     * If set to `true`, transform the icon's x-axis to mirror the graphic
+     * @default false
+     */
+    shouldMirrorIcon?: boolean;
 }
-export declare const ButtonLabelIcon: ({ icon, size, iconPosition, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
+export declare const ButtonLabelIcon: ({ icon, size, iconPosition, shouldMirrorIcon, ...elemProps }: ButtonLabelIconProps) => JSX.Element | null;
 //# sourceMappingURL=ButtonLabelIcon.d.ts.map

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACjC;AAqBD,eAAO,MAAM,eAAe,0FAa3B,CAAC"}
+{"version":3,"file":"ButtonLabelIcon.d.ts","sourceRoot":"","sources":["../../../../../button/lib/parts/ButtonLabelIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAM9D,MAAM,WAAW,oBAAoB;IACnC;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAChC;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAqBD,eAAO,MAAM,eAAe,4GAmB3B,CAAC"}

package/dist/commonjs/button/lib/parts/ButtonLabelIcon.js

@@ -57,12 +57,12 @@ var ButtonLabelIconStyled = common_1.styled('span', {
     });
 });
 exports.ButtonLabelIcon = function (_a) {
-    var icon = _a.icon, size = _a.size, iconPosition = _a.iconPosition, elemProps = __rest(_a, ["icon", "size", "iconPosition"]);
+    var icon = _a.icon, size = _a.size, iconPosition = _a.iconPosition, _b = _a.shouldMirrorIcon, shouldMirrorIcon = _b === void 0 ? false : _b, elemProps = __rest(_a, ["icon", "size", "iconPosition", "shouldMirrorIcon"]);
     /* istanbul ignore next line for coverage */
     if (icon === undefined) {
         return null;
     }
     var iconSize = size === 'small' ? SMALL_ICON_SIZE : undefined;
     return (React.createElement(ButtonLabelIconStyled, __assign({ iconPosition: iconPosition, size: size }, elemProps),
-        React.createElement(icon_1.SystemIcon, { size: iconSize, icon: icon })));
+        React.createElement(icon_1.SystemIcon, { size: iconSize, icon: icon, shouldMirror: shouldMirrorIcon })));
 };

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,eAAe,CAAC;AACxC,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,0DAU3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAcP"}
+{"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,eAAe,CAAC;AACxC,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,0DAU3B,CAAC;AAEH,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,KAAK,CAAC,SAAS,CAAC,eAAe,CAAC;IACtE,MAAM;CAuBP"}

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

@@ -66,8 +66,8 @@ var AccentIcon = /** @class */ (function (_super) {
         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, elemProps = __rest(_a, ["transparent", "size", "icon", "color", "iconRef"]);
-        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 }, elemProps)));
+        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));

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

@@ -11,7 +11,7 @@ export interface AppletIconStyles {
     color?: BrandingColor;
 }
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<IconProps, 'iconRef' | 'shouldMirror'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */

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,eAAe,CAAC;AACxC,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,6CAwC5B,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,SAAS,EAAE,SAAS,CAAC;IACnF;;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;CAcd"}
+{"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,eAAe,CAAC;AACxC,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,6CAwC5B,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"}

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

@@ -91,8 +91,8 @@ var AppletIcon = /** @class */ (function (_super) {
         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, elemProps = __rest(_a, ["size", "icon", "color", "iconRef"]);
-        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 }, elemProps)));
+        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;

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

@@ -19,7 +19,7 @@ export interface GraphicStyles {
      */
     grow?: boolean;
 }
-export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef'> {
+export interface GraphicProps extends GraphicStyles, Pick<SvgProps, 'iconRef' | 'shouldMirror'> {
     /**
      * The graphic to display from `@workday/canvas-graphics-web`.
      */

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,eAAe,CAAC;AACxC,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,CAAC;IAC5E;;OAEG;IACH,GAAG,EAAE,aAAa,CAAC;CACpB;AAED,eAAO,MAAM,aAAa,uDA4BzB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM;CAaP"}
+{"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,eAAe,CAAC;AACxC,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,uDA4BzB,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,OAAQ,SAAQ,KAAK,CAAC,SAAS,CAAC,YAAY,CAAC;IAChE,MAAM;CAcP"}

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

@@ -83,8 +83,8 @@ var Graphic = /** @class */ (function (_super) {
         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, elemProps = __rest(_a, ["grow", "src", "width", "height", "iconRef"]);
-        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 }, elemProps)));
+        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));