@workday/canvas-kit-react 14.0.0-alpha.1253-next.0 → 14.0.0-alpha.1255-next.0

package/dist/es6/collection/lib/useListItemRemoveable.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIsRTL, createElemPropsHook, slugify } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, slugify } from '@workday/canvas-kit-react/common';
 import { getCursor, isCursor, useCursorListModel } from './useCursorListModel';
 import { keyboardEventToCursorEvents } from './keyUtils';
 // retry a function each frame so we don't rely on the timing mechanism of React's render cycle.
@@ -31,7 +31,6 @@ export const useListItemRemove = createElemPropsHook(useCursorListModel)((model,
     const stateRef = React.useRef(model.state);
     stateRef.current = model.state;
     const keyElementRef = React.useRef(null);
-    const isRTL = useIsRTL();
     React.useEffect(() => {
         if (keyElementRef.current) {
             const item = model.navigation.getItem(getCursor(model.state), model);
@@ -69,7 +68,7 @@ export const useListItemRemove = createElemPropsHook(useCursorListModel)((model,
     }, [model.state.cursorId, model.state.items, model.events]);
     return {
         onKeyDown(event) {
-            const handled = keyboardEventToCursorEvents(event, model, isRTL);
+            const handled = keyboardEventToCursorEvents(event, model);
             if (handled) {
                 event.preventDefault();
                 keyElementRef.current = event.currentTarget;

package/dist/es6/collection/lib/useListItemRovingFocus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAgCZ,mBAAmB,CAAC,WAAW,CAAC;;;;EAkBtD,CAAC"}
+{"version":3,"file":"useListItemRovingFocus.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListItemRovingFocus.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAQ1B;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCA+BZ,mBAAmB,CAAC,WAAW,CAAC;;;;EAkBtD,CAAC"}

package/dist/es6/collection/lib/useListItemRovingFocus.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useIsRTL, createElemPropsHook, slugify } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook, slugify } from '@workday/canvas-kit-react/common';
 import { getCursor, isCursor } from './useCursorListModel';
 import { keyboardEventToCursorEvents } from './keyUtils';
 import { focusOnCurrentCursor } from './focusOnCurrentCursor';
@@ -25,7 +25,6 @@ export const useListItemRovingFocus = createElemPropsHook(useListModel)((model,
     const stateRef = React.useRef(model.state);
     stateRef.current = model.state;
     const keyElementRef = React.useRef(null);
-    const isRTL = useIsRTL();
     React.useEffect(() => {
         // If the cursor change was triggered by this hook, we should change focus
         if (keyElementRef.current) {
@@ -46,7 +45,7 @@ export const useListItemRovingFocus = createElemPropsHook(useListModel)((model,
     }, [model.state.cursorId, model.state.items, model.events]);
     return {
         onKeyDown(event) {
-            const handled = keyboardEventToCursorEvents(event, model, isRTL);
+            const handled = keyboardEventToCursorEvents(event, model);
             if (handled) {
                 event.preventDefault();
                 keyElementRef.current = event.currentTarget;

package/dist/es6/collection/lib/useListKeyboardHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAId,mBAAmB;EAOtC,CAAC"}
+{"version":3,"file":"useListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../collection/lib/useListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;GASG;AACH,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAEd,mBAAmB;EAOtC,CAAC"}

package/dist/es6/collection/lib/useListKeyboardHandler.js

@@ -1,4 +1,4 @@
-import { useIsRTL, createElemPropsHook } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
 import { useCursorListModel } from './useCursorListModel';
 import { keyboardEventToCursorEvents } from './keyUtils';
 /**
@@ -12,10 +12,9 @@ import { keyboardEventToCursorEvents } from './keyUtils';
 ```
  */
 export const useListKeyboardHandler = createElemPropsHook(useCursorListModel)(model => {
-    const isRTL = useIsRTL();
     return {
         onKeyDown(event) {
-            const handled = keyboardEventToCursorEvents(event, model, isRTL);
+            const handled = keyboardEventToCursorEvents(event, model);
             if (handled) {
                 event.preventDefault();
             }

package/dist/es6/combobox/lib/hooks/useComboboxListKeyboardHandler.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useComboboxListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAItB,mBAAmB;EAStC,CAAC"}
+{"version":3,"file":"useComboboxListKeyboardHandler.d.ts","sourceRoot":"","sources":["../../../../../combobox/lib/hooks/useComboboxListKeyboardHandler.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;GAEG;AACH,eAAO,MAAM,8BAA8B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAEtB,mBAAmB;EAStC,CAAC"}

package/dist/es6/combobox/lib/hooks/useComboboxListKeyboardHandler.js

@@ -1,15 +1,14 @@
-import { createElemPropsHook, useIsRTL } from '@workday/canvas-kit-react/common';
+import { createElemPropsHook } from '@workday/canvas-kit-react/common';
 import { keyboardEventToCursorEvents } from '@workday/canvas-kit-react/collection';
 import { useComboboxModel } from './useComboboxModel';
 /**
  * `useComboboxListKeyboardHandler` handle calling keyboard events like ArrowUp and ArrowDown only when the menu is visible.
  */
 export const useComboboxListKeyboardHandler = createElemPropsHook(useComboboxModel)(model => {
-    const isRTL = useIsRTL();
     return {
         onKeyDown(event) {
             if (model.state.visibility === 'visible') {
-                const handled = keyboardEventToCursorEvents(event, model, isRTL);
+                const handled = keyboardEventToCursorEvents(event, model);
                 if (handled) {
                     event.preventDefault();
                 }

package/dist/es6/common/lib/theming/useIsRTL.d.ts

@@ -2,8 +2,12 @@ import { PartialEmotionCanvasTheme } from './types';
 /**
  * This is a small hook to support right-to-left logic.
  * It returns a boolean
- * @example
+ *
+ * ```ts
  * const isRTL = useIsRTL();
+ * ```
+ *
+ * @deprecated Use isElementRTL instead.
  */
 export declare const useIsRTL: (partialTheme?: PartialEmotionCanvasTheme) => boolean;
 //# sourceMappingURL=useIsRTL.d.ts.map

package/dist/es6/common/lib/theming/useIsRTL.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useIsRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useIsRTL.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAMxF;;;;;GAKG;AAEH,eAAO,MAAM,QAAQ,kBAAmB,yBAAyB,YAIhE,CAAC"}
+{"version":3,"file":"useIsRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/useIsRTL.ts"],"names":[],"mappings":"AAEA,OAAO,EAAuC,yBAAyB,EAAC,MAAM,SAAS,CAAC;AAMxF;;;;;;;;;GASG;AAEH,eAAO,MAAM,QAAQ,kBAAmB,yBAAyB,YAIhE,CAAC"}

package/dist/es6/common/lib/theming/useIsRTL.js

@@ -7,8 +7,12 @@ function useDefaultTheme(theme, config, fn) {
 /**
  * This is a small hook to support right-to-left logic.
  * It returns a boolean
- * @example
+ *
+ * ```ts
  * const isRTL = useIsRTL();
+ * ```
+ *
+ * @deprecated Use isElementRTL instead.
  */
 export const useIsRTL = (partialTheme) => {
     const theme = useDefaultTheme(partialTheme, ThemeContext, React.useContext);

package/dist/es6/common/lib/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from './colorUtils';
 export * from './getTranslateFromOrigin';
+export * from './isElementRTL';
 export * from './dispatchInputEvent';
 export * from './changeFocus';
 export * from './makeMq';

package/dist/es6/common/lib/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,0BAA0B,CAAC;AACzC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,sBAAsB,CAAC;AACrC,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC"}

package/dist/es6/common/lib/utils/index.js

@@ -1,5 +1,6 @@
 export * from './colorUtils';
 export * from './getTranslateFromOrigin';
+export * from './isElementRTL';
 export * from './dispatchInputEvent';
 export * from './changeFocus';
 export * from './makeMq';

package/dist/es6/common/lib/utils/isElementRTL.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Returns true if element has a right-to-left content direction. This is most useful to get
+ * direction from a JavaScript event. If you desire to get a direction for styling, use [CSS Logical
+ * Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+ *
+ * The performance cost of getting the direction from an element is negligible, but it is intended
+ * to be used in event handlers and not a part of render functions.
+ *
+ * ```ts
+ * onKeyDown(e) {
+ *   const isRTL = isElementRTL(e.currentTarget);
+ *
+ *   if (e.key === 'ArrowRight') {
+ *     if (isRTL) {
+ *       // Right arrow moves to the right even on RTL languages, but "right" doesn't mean
+ *       //"advance" in RTL. Previous is to the right of the current in RTL.
+ *       model.events.goToPreviousRow();
+ *     } else {
+ *       model.events.goToNextRow();
+ *     }
+ *   }
+ * ```
+ */
+export declare const isElementRTL: (element: Element) => boolean;
+//# sourceMappingURL=isElementRTL.d.ts.map

package/dist/es6/common/lib/utils/isElementRTL.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"isElementRTL.d.ts","sourceRoot":"","sources":["../../../../../common/lib/utils/isElementRTL.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,eAAO,MAAM,YAAY,YAAa,OAAO,KAAG,OAG/C,CAAC"}

package/dist/es6/common/lib/utils/isElementRTL.js

@@ -0,0 +1,27 @@
+/**
+ * Returns true if element has a right-to-left content direction. This is most useful to get
+ * direction from a JavaScript event. If you desire to get a direction for styling, use [CSS Logical
+ * Properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+ *
+ * The performance cost of getting the direction from an element is negligible, but it is intended
+ * to be used in event handlers and not a part of render functions.
+ *
+ * ```ts
+ * onKeyDown(e) {
+ *   const isRTL = isElementRTL(e.currentTarget);
+ *
+ *   if (e.key === 'ArrowRight') {
+ *     if (isRTL) {
+ *       // Right arrow moves to the right even on RTL languages, but "right" doesn't mean
+ *       //"advance" in RTL. Previous is to the right of the current in RTL.
+ *       model.events.goToPreviousRow();
+ *     } else {
+ *       model.events.goToNextRow();
+ *     }
+ *   }
+ * ```
+ */
+export const isElementRTL = (element) => {
+    const direction = getComputedStyle(element).direction;
+    return direction === 'rtl';
+};

package/dist/es6/expandable/lib/ExpandableIcon.d.ts

@@ -35,12 +35,16 @@ export declare const expandableIconStencil: import("@workday/canvas-kit-styling"
             transform: string;
         };
     };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
     width: string;
-    height: string; /**
-     * Icon to display from `@workday/canvas-accent-icons-web`
-     * @default chevronUpIcon
-     */
+    height: string;
     size: string;
 }, never, never>, never>, never>;
 export declare const ExpandableIcon: import("@workday/canvas-kit-react/common").ElementComponentM<"span", ExpandableIconProps, {

package/dist/es6/expandable/lib/ExpandableIcon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableIcon.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,UAAU,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;oBAbhC;;;OAGG;;gCA4DH,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;EAczB,CAAC"}
+{"version":3,"file":"ExpandableIcon.d.ts","sourceRoot":"","sources":["../../../../expandable/lib/ExpandableIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAqB,YAAY,EAAC,MAAM,kCAAkC,CAAC;AAElF,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAE9D,OAAO,EAAC,UAAU,EAAoB,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAM/D,MAAM,WAAW,mBAAoB,SAAQ,IAAI,CAAC,YAAY,CAAC,OAAO,UAAU,EAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAC/F;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;;OAIG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;CAC9B;AAED,eAAO,MAAM,qBAAqB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gCAkDhC,CAAC;AAEH,eAAO,MAAM,cAAc;;;;;;;;;EAczB,CAAC"}

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

@@ -49,13 +49,17 @@ export declare const accentIconStencil: import("@workday/canvas-kit-styling").St
             transform: string;
         };
     };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
     width: string;
     height: string;
-    size: string; /**
-     * The fill color of the AccentIcon.
-     * @default system.color.bg.primary.strong
-     */
+    size: string;
 }, never, never>, never>;
 export declare const AccentIcon: import("@workday/canvas-kit-react/common").ElementComponent<"span", AccentIconProps>;
 //# sourceMappingURL=AccentIcon.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;kBAxC5B;;;OAGG;wBA4DH,CAAC;AAEH,eAAO,MAAM,UAAU,sFAwBrB,CAAC"}
+{"version":3,"file":"AccentIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AccentIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAE1C,OAAO,EAAC,gBAAgB,EAAC,MAAM,kCAAkC,CAAC;AAGlE,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,gBAAgB,CAAC,OAAO,CAAC,CAAC;IAClC;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,CAAC;IACvF;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,4BAG1B,gBAAgB,KAAG,SAOpB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBAuB5B,CAAC;AAEH,eAAO,MAAM,UAAU,sFAiCrB,CAAC"}

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

@@ -21,7 +21,7 @@ export const accentIconStencil = createStencil({
     vars: {
         color: '',
     },
-    base: { name: "8918a", styles: "box-sizing:border-box;--size-svg-728c60:3.5rem;& .color-500{fill:var(--color-accent-icon-05e3c8, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
+    base: { name: "8918a", styles: "box-sizing:border-box;--size-svg-8fcab8:3.5rem;& .color-500{fill:var(--color-accent-icon-05e3c8, var(--cnvs-sys-color-bg-primary-strong));}& .french-vanilla-100{fill:var(--cnvs-sys-color-bg-default);}" },
     modifiers: {
         transparent: {
             true: { name: "239han", styles: "& .french-vanilla-100{fill:transparent;}" }
@@ -30,12 +30,13 @@ export const accentIconStencil = createStencil({
 }, "accent-icon-05e3c8");
 export const AccentIcon = createComponent('span')({
     displayName: 'AccentIcon',
-    Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
+    Component: ({ transparent, size, icon, color, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
         return (_jsx(Svg, { src: icon, type: CanvasIconTypes.Accent, as: Element, ref: ref, ...handleCsProp(elemProps, [
                 accentIconStencil({
                     color: transformColorNameToToken(color),
                     size: typeof size === 'number' ? px2rem(size) : undefined,
                     shouldMirror,
+                    shouldMirrorInRTL,
                     transparent,
                 }),
             ]) }));

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

@@ -16,7 +16,7 @@ export interface AppletIconStyles {
  * @deprecated `appletIconStyles` will be removed in in a future version as a part of implementation of stencils and new tokens. Consider to use `appletIconStencil` instead.
  */
 export declare const appletIconStyles: ({ color, }: AppletIconStyles) => CSSObject;
-export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'cs'> {
+export interface AppletIconProps extends AppletIconStyles, Pick<SvgProps, 'shouldMirror' | 'shouldMirrorInRTL' | 'cs'> {
     /**
      * The icon to display from `@workday/canvas-applet-icons-web`.
      */
@@ -43,11 +43,14 @@ export declare const appletIconStencil: import("@workday/canvas-kit-styling").St
             transform: string;
         };
     };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
-    /**
-     * The icon color hue. Must use a member of the `AppletIcon.Colors` static enum.
-     * @default AppletIcon.Colors.Blueberry
-     */
     width: string;
     height: string;
     size: string;

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

@@ -1 +1 @@
-{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eAAgB,SAAQ,gBAAgB,EAAE,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,IAAI,CAAC;IAC9F;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;IAhE5B;;;OAGG;;;;wBA0FH,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}
+{"version":3,"file":"AppletIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/AppletIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,aAAa,EAAc,MAAM,kCAAkC,CAAC;AACpF,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAM,QAAQ,EAAa,MAAM,OAAO,CAAC;AAKhD;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;CACvB;AAED;;GAEG;AACH,eAAO,MAAM,gBAAgB,eAE1B,gBAAgB,KAAG,SAsCrB,CAAC;AAEF,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,cAAc,GAAG,mBAAmB,GAAG,IAAI,CAAC;IAC7D;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;;;;;;;;;;;;;;;wBA6B5B,CAAC;AAEH,eAAO,MAAM,UAAU;;CAyBrB,CAAC"}

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

@@ -51,8 +51,8 @@ export const appletIconStencil = createStencil({
         color400: '',
         color500: '',
     },
-    base: { name: "fdacy", styles: "box-sizing:border-box;--size-svg-728c60:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-dc839d, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-dc839d, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-dc839d, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-dc839d, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-dc839d, var(--cnvs-base-palette-blue-700));}" }
-}, "applet-icon-dc839d");
+    base: { name: "46fqck", styles: "box-sizing:border-box;--size-svg-8fcab8:5.75rem;& .color-100{fill:var(--cnvs-sys-color-fg-inverse);}& .color-200{fill:var(--color200-applet-icon-c96fac, var(--cnvs-base-palette-blue-200));}& .color-300{fill:var(--color300-applet-icon-c96fac, var(--cnvs-base-palette-blue-400));}& .color-400{fill:var(--color400-applet-icon-c96fac, var(--cnvs-base-palette-blue-600));}& .color-400-alpha-20{fill:var(--color400-applet-icon-c96fac, var(--cnvs-base-palette-blue-600));}& .color-500{fill:var(--color500-applet-icon-c96fac, var(--cnvs-base-palette-blue-700));}" }
+}, "applet-icon-c96fac");
 export const AppletIcon = createComponent('span')({
     displayName: 'AppletIcon',
     Component: ({ size, icon, color, ...elemProps }, ref, Element) => {

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

@@ -74,9 +74,14 @@ export declare const graphicStencil: import("@workday/canvas-kit-styling").Stenc
         true: {
             transform: string;
         };
-    }; /**
-     * The width of the graphic
-     */
+    };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
     width: string;
     height: string;

package/dist/es6/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,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAgB,OAAO,EAAuB,MAAM,6BAA6B,CAAC;AAEzF;;GAEG;AACH,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,OAAO;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,GAAG,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;OAlEzB;;OAEG;;;;;wBA2EH,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;gBA0B9B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,WAKxC,CAAC;AAEF,eAAO,MAAM,OAAO,mFA6BlB,CAAC"}
+{"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,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAG1C,OAAO,EAAgB,OAAO,EAAuB,MAAM,6BAA6B,CAAC;AAEzF;;GAEG;AACH,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,OAAO;IAC3C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;OAEG;IACH,GAAG,EAAE;QACH,GAAG,CAAC,EAAE,MAAM,CAAC;QACb,GAAG,CAAC,EAAE,MAAM,CAAC;KACd,CAAC;IACF;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,QAAQ,CAAC,CAAC;IAC7D;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,KAAK,CAAC,CAAC;IACvD;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,gBAAgB,CAAC,CAAC,OAAO,CAAC,CAAC;CAC5D;AAED;;GAEG;AACH,eAAO,MAAM,aAAa,4BAA2B,aAAa,KAAG,SA4BpE,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;wBAWzB,CAAC;AAEH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;gBA0B9B,CAAC;AAEH;;;;GAIG;AACH,eAAO,MAAM,aAAa,QAAS,MAAM,WAKxC,CAAC;AAEF,eAAO,MAAM,OAAO,mFA6BlB,CAAC"}

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

@@ -41,7 +41,7 @@ export const graphicStencil = createStencil({
     base: { name: "j55a7", styles: "box-sizing:border-box;" },
     modifiers: {
         grow: {
-            true: { name: "pgjct", styles: "width:100%;--width-svg-728c60:100%;" }
+            true: { name: "pgjct", styles: "width:100%;--width-svg-8fcab8:100%;" }
         }
     }
 }, "graphic-385fe4");

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

@@ -4,10 +4,19 @@ export interface SvgProps extends BoxProps {
     src: CanvasIcon;
     type: CanvasIconTypes;
     /**
-     * If set to `true`, transform the SVG's x-axis to mirror the graphic
+     * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
+     * always mirror the icon regardless of the content direction. If the SVG should mirror only when
+     * in an right-to-left language, use `shouldMirrorInRTL` instead.
      * @default false
      */
     shouldMirror?: boolean;
+    /**
+     * If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction
+     * is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases.
+     * Setting this to `true` indicates the icon should be mirrored in right-to-left languages.
+     * @default false
+     */
+    shouldMirrorInRTL?: boolean;
 }
 export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
     shouldMirror: {
@@ -15,6 +24,13 @@ export declare const svgStencil: import("@workday/canvas-kit-styling").Stencil<{
             transform: string;
         };
     };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
     /** sets width of svg element */
     width: string;

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

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,UAAU;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAkB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,WAAY,MAAM,uBAUvD,CAAC;AAEF,eAAO,MAAM,GAAG,+EAkBd,CAAC"}
+{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,UAAU,EAAE,eAAe,EAAC,MAAM,8BAA8B,CAAC;AAGzE,OAAO,EAAC,QAAQ,EAAc,MAAM,kCAAkC,CAAC;AAIvE,MAAM,WAAW,QAAS,SAAQ,QAAQ;IACxC,GAAG,EAAE,UAAU,CAAC;IAChB,IAAI,EAAE,eAAe,CAAC;IACtB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU;;;;;;;;;;;;;;IAEnB,gCAAgC;;IAEhC,iCAAiC;;IAEjC,2CAA2C;;gBAyB7C,CAAC;AAEH,kBAAkB;AAClB,eAAO,MAAM,yBAAyB,WAAY,MAAM,uBAUvD,CAAC;AAEF,eAAO,MAAM,GAAG,+EAsBd,CAAC"}

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

@@ -13,13 +13,16 @@ export const svgStencil = createStencil({
         /** sets width and height of svg element */
         size: '',
     },
-    base: { name: "2h4msu", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-728c60, var(--size-svg-728c60));height:var(--height-svg-728c60, var(--size-svg-728c60));}" },
+    base: { name: "1cfgff", styles: "box-sizing:border-box;display:inline-block;> svg{display:block;width:var(--width-svg-8fcab8, var(--size-svg-8fcab8));height:var(--height-svg-8fcab8, var(--size-svg-8fcab8));}" },
     modifiers: {
         shouldMirror: {
-            true: { name: "ep9mb", styles: "transform:scaleX(-1);" }
+            true: { name: "3v0dfr", styles: "transform:scaleX(-1);" }
+        },
+        shouldMirrorInRTL: {
+            true: { name: "nmprx", styles: "&:dir(rtl){transform:scaleX(-1);}" }
         }
     }
-}, "svg-728c60");
+}, "svg-8fcab8");
 /** @deprecated */
 export const transformColorNameToToken = (color) => {
     if (color && color in base) {
@@ -32,7 +35,7 @@ export const transformColorNameToToken = (color) => {
 };
 export const Svg = createComponent('span')({
     displayName: 'Svg',
-    Component: ({ shouldMirror, src, type, ...elemProps }, ref, Element) => {
+    Component: ({ shouldMirror, shouldMirrorInRTL, src, type, ...elemProps }, ref, Element) => {
         try {
             validateIconType(src, type);
         }
@@ -40,6 +43,6 @@ export const Svg = createComponent('span')({
             console.error(e);
             return null;
         }
-        return (_jsx(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...mergeStyles(elemProps, svgStencil({ shouldMirror })) }));
+        return (_jsx(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...mergeStyles(elemProps, svgStencil({ shouldMirror, shouldMirrorInRTL })) }));
     },
 });

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

@@ -103,6 +103,13 @@ export declare const systemIconStencil: import("@workday/canvas-kit-styling").St
             transform: string;
         };
     };
+    shouldMirrorInRTL: {
+        true: {
+            '&:dir(rtl)': {
+                transform: string;
+            };
+        };
+    };
 }, {}, {
     width: string;
     height: string;

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":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;;;;;;;;;;wBAkDL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}
+{"version":3,"file":"SystemIcon.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIcon.tsx"],"names":[],"mappings":"AACA,OAAO,EAAC,gBAAgB,EAAkB,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAC,SAAS,EAAC,MAAM,iBAAiB,CAAC;AAI1C,OAAO,EAAM,QAAQ,EAAwC,MAAM,OAAO,CAAC;AAE3E;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;;OASG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;OAUG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,eACf,SAAQ,gBAAgB,EACtB,IAAI,CAAC,QAAQ,EAAE,KAAK,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,CAAC;IAClE;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB;AAED;;;;;;;;GAQG;AACH,eAAO,MAAM,gBAAgB,8FAS1B,gBAAgB,KAAG,SAmBpB,CAAC;AAiBH,eAAO,MAAM,iBAAiB;IAG1B;;;;OAIG;;;;;;;;;;;;;;;;;;;;;wBAkDL,CAAC;AAEH,eAAO,MAAM,UAAU,sFA6CrB,CAAC"}

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

@@ -55,7 +55,7 @@ export const systemIconStencil = createStencil({
         accentColor: '',
         backgroundColor: '',
     },
-    base: { name: "2s986p", styles: "box-sizing:border-box;& svg{width:var(--width-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));height:var(--height-svg-728c60, var(--size-svg-728c60, var(--cnvs-sys-space-x6)));}& .wd-icon-fill{fill:var(--color-system-icon-3a4847, var(--cnvs-sys-color-icon-default));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-3a4847, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-02493f, var(--colorHover-02493f, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-02493f, var(--colorHover-02493f, var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-02493f, var(--backgroundColor-system-icon-3a4847, transparent));}@media (prefers-contrast: more){.wd-icon-fill, .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
+    base: { name: "2s986p", styles: "box-sizing:border-box;& svg{width:var(--width-svg-8fcab8, var(--size-svg-8fcab8, var(--cnvs-sys-space-x6)));height:var(--height-svg-8fcab8, var(--size-svg-8fcab8, var(--cnvs-sys-space-x6)));}& .wd-icon-fill{fill:var(--color-system-icon-3a4847, var(--cnvs-sys-color-icon-default));}& .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)));}& .wd-icon-background{fill:var(--backgroundColor-system-icon-3a4847, transparent);}&:where(:hover, .hover) .wd-icon-fill{fill:var(--fillHover-02493f, var(--colorHover-02493f, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default))));}&:where(:hover, .hover) .wd-icon-accent, & .wd-icon-accent2{fill:var(--accentHover-02493f, var(--colorHover-02493f, var(--accentColor-system-icon-3a4847, var(--color-system-icon-3a4847, var(--cnvs-sys-color-fg-default)))));}&:where(:hover, .hover) .wd-icon-background{fill:var(--backgroundHover-02493f, var(--backgroundColor-system-icon-3a4847, transparent));}@media (prefers-contrast: more){.wd-icon-fill, .wd-icon-accent{color:currentColor;fill:currentColor;}}" },
     modifiers: {}
 }, "system-icon-3a4847");
 export const SystemIcon = createComponent('span')({

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

@@ -30,10 +30,19 @@ export interface SystemIconCircleProps extends CSProps {
      */
     size?: SystemIconCircleSize | number;
     /**
-     * If set to `true`, transform the SVG's x-axis to mirror the graphic
+     * If set to `true`, transform the SVG's x-axis to mirror the graphic. Use this if you want to
+     * always mirror the icon regardless of the content direction. If the SVG should mirror only when
+     * in an right-to-left language, use `shouldMirrorInRTL` instead.
      * @default false
      */
     shouldMirror?: boolean;
+    /**
+     * If set to `true`, transform the SVG's x-axis to mirror the graphic when the content direction
+     * is `rtl`. Icons don't have enough context to know if they should be mirrored in all cases.
+     * Setting this to `true` indicates the icon should be mirrored in right-to-left languages.
+     * @default false
+     */
+    shouldMirrorInRTL?: boolean;
 }
 export declare const systemIconCircleStencil: import("@workday/canvas-kit-styling").Stencil<import("@workday/canvas-kit-styling").StencilModifierConfig<{}, {
     containerSize: string;

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

@@ -1 +1 @@
-{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIzF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,OAAO;IACpD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB;AAED,eAAO,MAAM,uBAAuB;;;;;;;;gBAwBlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FAgC3B,CAAC"}
+{"version":3,"file":"SystemIconCircle.d.ts","sourceRoot":"","sources":["../../../../icon/lib/SystemIconCircle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,OAAO,EAAsC,OAAO,EAAC,MAAM,6BAA6B,CAAC;AAIzF,oBAAY,oBAAoB;IAC9B,EAAE,KAAK;IACP,CAAC,KAAK;IACN,CAAC,KAAK;IACN,CAAC,KAAK;IACN,EAAE,KAAK;IACP,GAAG,MAAM;CACV;AAED,MAAM,WAAW,qBAAsB,SAAQ,OAAO;IACpD;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,EAAE,gBAAgB,CAAC;IACvB;;;OAGG;IACH,IAAI,CAAC,EAAE,oBAAoB,GAAG,MAAM,CAAC;IACrC;;;;;OAKG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;;;OAKG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,uBAAuB;;;;;;;;gBAwBlC,CAAC;AAEH,eAAO,MAAM,gBAAgB,4FA8C3B,CAAC"}

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

@@ -21,11 +21,11 @@ export const systemIconCircleStencil = createStencil({
         background: '',
         color: '',
     },
-    base: { name: "1yhr60", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-39dde7, var(--cnvs-sys-color-bg-alt-soft));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-39dde7, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-39dde7, var(--cnvs-sys-space-x10));--size-svg-728c60:calc(var(--containerSize-system-icon-circle-39dde7, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-3a4847:var(--color-system-icon-circle-39dde7);& img{width:100%;height:100%;}" }
-}, "system-icon-circle-39dde7");
+    base: { name: "3mr210", styles: "box-sizing:border-box;background:var(--background-system-icon-circle-308b31, var(--cnvs-sys-color-bg-alt-soft));display:flex;align-items:center;justify-content:center;padding:var(--cnvs-sys-space-zero);border:none;border-radius:var(--cnvs-sys-shape-round);overflow:hidden;width:var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10));height:var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10));--size-svg-8fcab8:calc(var(--containerSize-system-icon-circle-308b31, var(--cnvs-sys-space-x10)) * 0.625);--color-system-icon-3a4847:var(--color-system-icon-circle-308b31);& img{width:100%;height:100%;}" }
+}, "system-icon-circle-308b31");
 export const SystemIconCircle = createComponent('span')({
     displayName: 'SystemIconCircle',
-    Component: ({ background, color, size, icon, shouldMirror, ...elemProps }, ref, Element) => {
+    Component: ({ background, color, size, icon, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
         // `pickForegroundColor` hasn't support to use css variables to generate foregroundColor
         const backgroundFallback = background && !background.startsWith('--') ? background : colors.soap200;
         const iconColor = pickForegroundColor(backgroundFallback, 'rgba(0,0,0,0.65)', colors.frenchVanilla100);
@@ -33,6 +33,6 @@ export const SystemIconCircle = createComponent('span')({
                 containerSize: typeof size === 'number' ? px2rem(size) : size,
                 background: transformColorNameToToken(background),
                 color: color || iconColor,
-            })), children: _jsx(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror }) }));
+            })), children: _jsx(SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror, shouldMirrorInRTL: shouldMirrorInRTL }) }));
     },
 });

package/dist/es6/pagination/lib/Pagination/PageButton.js

@@ -7,10 +7,10 @@ import { createStencil, handleCsProp } from '@workday/canvas-kit-styling';
 import { PaginationContext } from './usePaginationModel';
 export const paginationPageButtonStencil = createStencil({
     extends: buttonStencil,
-    base: { name: "23ov13", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-65cb05:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-65cb05:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" },
+    base: { name: "23ov13", styles: "box-sizing:border-box;min-width:var(--cnvs-sys-space-x8);padding:var(--cnvs-sys-space-zero);font-weight:var(--cnvs-sys-font-weight-normal);--label-button-85bf0e:var(--cnvs-sys-color-fg-default);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:active, &.active, &:focus-visible, &.focus{--label-button-85bf0e:var(--cnvs-sys-color-fg-strong);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" },
     modifiers: {
         toggled: {
-            true: { name: "140272", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-65cb05:var(--cnvs-brand-primary-base);--label-button-65cb05:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-fg-disabled);}" }
+            true: { name: "140272", styles: "font-weight:var(--cnvs-sys-font-weight-bold);--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);&:hover, &.hover, &:active, &.active, &:focus-visible, &.focus{--background-button-85bf0e:var(--cnvs-brand-primary-base);--label-button-85bf0e:var(--cnvs-sys-color-fg-inverse);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-fg-disabled);}" }
         }
     }
 }, "pagination-page-button-88d20c");

package/dist/es6/popup/lib/hooks/usePopupStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,mEAEf,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAClD,MAAM,SAAS,CAAC,WAAW,CAsF7B,CAAC"}
+{"version":3,"file":"usePopupStack.d.ts","sourceRoot":"","sources":["../../../../../popup/lib/hooks/usePopupStack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyCG;AACH,eAAO,MAAM,aAAa,mEAEf,WAAW,GAAG,MAAM,SAAS,CAAC,WAAW,CAAC,KAClD,MAAM,SAAS,CAAC,WAAW,CAyF7B,CAAC"}