@workday/canvas-kit-react 14.0.0-alpha.1254-next.0 → 14.0.0-alpha.1256-next.0

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/theming/useIsRTL.js

@@ -33,8 +33,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.
  */
 const useIsRTL = (partialTheme) => {
     const theme = useDefaultTheme(partialTheme, react_1.ThemeContext, React.useContext);

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/utils/index.js

@@ -16,6 +16,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./colorUtils"), exports);
 __exportStar(require("./getTranslateFromOrigin"), exports);
+__exportStar(require("./isElementRTL"), exports);
 __exportStar(require("./dispatchInputEvent"), exports);
 __exportStar(require("./changeFocus"), exports);
 __exportStar(require("./makeMq"), exports);

package/dist/commonjs/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/commonjs/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/commonjs/common/lib/utils/isElementRTL.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isElementRTL = void 0;
+/**
+ * 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();
+ *     }
+ *   }
+ * ```
+ */
+const isElementRTL = (element) => {
+    const direction = getComputedStyle(element).direction;
+    return direction === 'rtl';
+};
+exports.isElementRTL = isElementRTL;

package/dist/commonjs/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/commonjs/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/commonjs/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/commonjs/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/commonjs/icon/lib/AccentIcon.js

@@ -25,7 +25,7 @@ exports.accentIconStencil = (0, canvas_kit_styling_1.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;}" }
@@ -34,12 +34,13 @@ exports.accentIconStencil = (0, canvas_kit_styling_1.createStencil)({
 }, "accent-icon-05e3c8");
 exports.AccentIcon = (0, common_1.createComponent)('span')({
     displayName: 'AccentIcon',
-    Component: ({ transparent, size, icon, color, shouldMirror, ...elemProps }, ref, Element) => {
+    Component: ({ transparent, size, icon, color, shouldMirror, shouldMirrorInRTL, ...elemProps }, ref, Element) => {
         return ((0, jsx_runtime_1.jsx)(Svg_1.Svg, { src: icon, type: design_assets_types_1.CanvasIconTypes.Accent, as: Element, ref: ref, ...(0, canvas_kit_styling_1.handleCsProp)(elemProps, [
                 (0, exports.accentIconStencil)({
                     color: (0, Svg_1.transformColorNameToToken)(color),
                     size: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : undefined,
                     shouldMirror,
+                    shouldMirrorInRTL,
                     transparent,
                 }),
             ]) }));

package/dist/commonjs/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/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,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/commonjs/icon/lib/AppletIcon.js

@@ -55,8 +55,8 @@ exports.appletIconStencil = (0, canvas_kit_styling_1.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");
 exports.AppletIcon = (0, common_1.createComponent)('span')({
     displayName: 'AppletIcon',
     Component: ({ size, icon, color, ...elemProps }, ref, Element) => {

package/dist/commonjs/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/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,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/commonjs/icon/lib/Graphic.js

@@ -45,7 +45,7 @@ exports.graphicStencil = (0, canvas_kit_styling_1.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/commonjs/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/commonjs/icon/lib/Svg.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Svg.d.ts","sourceRoot":"","sources":["../../../../icon/lib/Svg.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,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/commonjs/icon/lib/Svg.js

@@ -16,13 +16,16 @@ exports.svgStencil = (0, canvas_kit_styling_1.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 */
 const transformColorNameToToken = (color) => {
     if (color && color in canvas_tokens_web_1.base) {
@@ -36,7 +39,7 @@ const transformColorNameToToken = (color) => {
 exports.transformColorNameToToken = transformColorNameToToken;
 exports.Svg = (0, common_1.createComponent)('span')({
     displayName: 'Svg',
-    Component: ({ shouldMirror, src, type, ...elemProps }, ref, Element) => {
+    Component: ({ shouldMirror, shouldMirrorInRTL, src, type, ...elemProps }, ref, Element) => {
         try {
             (0, utils_1.validateIconType)(src, type);
         }
@@ -44,6 +47,6 @@ exports.Svg = (0, common_1.createComponent)('span')({
             console.error(e);
             return null;
         }
-        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.svgStencil)({ shouldMirror })) }));
+        return ((0, jsx_runtime_1.jsx)(Element, { ref: ref, dangerouslySetInnerHTML: { __html: src.svg }, ...(0, layout_1.mergeStyles)(elemProps, (0, exports.svgStencil)({ shouldMirror, shouldMirrorInRTL })) }));
     },
 });

package/dist/commonjs/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/commonjs/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/commonjs/icon/lib/SystemIcon.js

@@ -59,7 +59,7 @@ exports.systemIconStencil = (0, canvas_kit_styling_1.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");
 exports.SystemIcon = (0, common_1.createComponent)('span')({

package/dist/commonjs/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/commonjs/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/commonjs/icon/lib/SystemIconCircle.js

@@ -24,11 +24,11 @@ exports.systemIconCircleStencil = (0, canvas_kit_styling_1.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");
 exports.SystemIconCircle = (0, common_1.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 : tokens_1.colors.soap200;
         const iconColor = (0, common_1.pickForegroundColor)(backgroundFallback, 'rgba(0,0,0,0.65)', tokens_1.colors.frenchVanilla100);
@@ -36,6 +36,6 @@ exports.SystemIconCircle = (0, common_1.createComponent)('span')({
                 containerSize: typeof size === 'number' ? (0, canvas_kit_styling_1.px2rem)(size) : size,
                 background: (0, Svg_1.transformColorNameToToken)(background),
                 color: color || iconColor,
-            })), children: (0, jsx_runtime_1.jsx)(SystemIcon_1.SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror }) }));
+            })), children: (0, jsx_runtime_1.jsx)(SystemIcon_1.SystemIcon, { as: Element, ref: ref, icon: icon, shouldMirror: shouldMirror, shouldMirrorInRTL: shouldMirrorInRTL }) }));
     },
 });

package/dist/commonjs/modal/lib/ModalOverlay.js

@@ -21,7 +21,7 @@ exports.modalOverlayContainerStencil = (0, canvas_kit_styling_1.createStencil)({
 }, "modal-overlay-container-bd009b");
 exports.useModalOverlay = (0, common_1.createElemPropsHook)(popup_1.usePopupModel)(({ state }, ref) => {
     const elementRef = (0, common_1.useForkRef)(ref, state.stackRef);
-    (0, popup_1.usePopupStack)(elementRef);
+    (0, popup_1.usePopupStack)(elementRef, state.targetRef);
     return {
         // The ref should not be applied to an element. The passed ref will apply to the stackRef instead
         ref: undefined,

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

@@ -33,10 +33,10 @@ const canvas_kit_styling_1 = require("@workday/canvas-kit-styling");
 const usePaginationModel_1 = require("./usePaginationModel");
 exports.paginationPageButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.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/commonjs/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"}

package/dist/commonjs/popup/lib/hooks/usePopupStack.js

@@ -52,7 +52,6 @@ const react_2 = require("@emotion/react");
  */
 const usePopupStack = (ref, target) => {
     const { elementRef, localRef } = (0, common_1.useLocalRef)(ref);
-    const isRTL = (0, common_1.useIsRTL)();
     // Pulls the theme from the context so that we can pass it to `useCanvasThemeToCssVars`
     const theme = react_1.default.useContext(react_2.ThemeContext);
     const { className, style } = (0, common_1.useCanvasThemeToCssVars)(theme, {});
@@ -89,13 +88,17 @@ const usePopupStack = (ref, target) => {
     // hierarchy, so we'll add it back here.
     react_1.default.useLayoutEffect(() => {
         var _a, _b;
-        if (isRTL) {
-            (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('dir', 'rtl');
-        }
-        else {
-            (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.removeAttribute('dir');
+        const targetEl = target ? ('current' in target ? target.current : target) : undefined;
+        if (targetEl) {
+            const isRTL = (0, common_1.isElementRTL)(targetEl);
+            if (isRTL) {
+                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.setAttribute('dir', 'rtl');
+            }
+            else {
+                (_b = localRef.current) === null || _b === void 0 ? void 0 : _b.setAttribute('dir', 'ltr');
+            }
         }
-    }, [localRef, isRTL]);
+    }, [localRef, target]);
     /**
      * This pulls the className that gets generated by `useCanvasThemeToCssVars` and adds it to the Popup element to ensure
      * theming is applied. Popups get portaled to the DOM and therefore don't "live" inside the CanvasProvider.

package/dist/commonjs/segmented-control/lib/SegmentedControlButton.js

@@ -9,7 +9,7 @@ const common_1 = require("@workday/canvas-kit-react/common");
 const icon_1 = require("@workday/canvas-kit-react/icon");
 const segmentedControlButtonStencil = (0, canvas_kit_styling_1.createStencil)({
     extends: button_1.buttonStencil,
-    base: { name: "1lnc1a", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-65cb05:var(--cnvs-sys-color-bg-alt-soft);--border-button-65cb05:var(--cnvs-sys-color-border-container);--borderRadius-button-65cb05:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-65cb05:var(--cnvs-brand-primary-base);--border-button-65cb05:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-65cb05:var(--cnvs-sys-color-bg-alt-softer);--border-button-65cb05:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
+    base: { name: "1lnc1a", styles: "box-sizing:border-box;border-inline-start:none;min-width:auto;--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-soft);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--borderRadius-button-85bf0e:var(--cnvs-sys-shape-zero);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-muted-soft);&:hover, &.hover{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-default);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:active, &.active{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-stronger);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}&:first-of-type{border-radius:var(--cnvs-sys-shape-x1) 0 0 var(--cnvs-sys-shape-x1);border-inline-start:0.0625rem solid var(--cnvs-sys-color-border-container);}&:last-of-type{border-radius:0 var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) 0;}&[aria-pressed=\"true\"]{--background-button-85bf0e:var(--cnvs-brand-primary-base);--border-button-85bf0e:var(--cnvs-brand-primary-base);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);&:first-of-type{border-inline-start-color:var(--cnvs-brand-primary-base);}&:disabled, &.disabled{--background-button-85bf0e:var(--cnvs-sys-color-bg-alt-softer);--border-button-85bf0e:var(--cnvs-sys-color-border-container);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-soft);}}&:focus-visible, &.focus{border-radius:var(--cnvs-sys-shape-x1);z-index:1;animation:none;transition:all 120ms border-radius 1ms;}" },
     modifiers: {
         segmentedControlButtonSize: {
             small: { name: "151b63", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);" },

package/dist/commonjs/tabs/lib/TabsItem.d.ts

@@ -377,11 +377,7 @@ export declare const useTabsItem: import("@workday/canvas-kit-react/common").Beh
     readonly style: {};
     readonly inert: boolean | "" | undefined;
 }, import("@workday/canvas-kit-react/common").MergeProps<{
-    readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void; /**
-     * Part of the ARIA specification for tabs. Lets screen readers know which tab is active. This
-     * should either be `true` or `undefined` and never `false`. This is automatically set by the
-     * component and should only be used in advanced cases.
-     */
+    readonly onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => void;
     readonly onClick: () => void;
     readonly 'data-focus-id': string;
     readonly tabIndex: 0 | -1;

package/dist/commonjs/tabs/lib/TabsItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAe7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8ED,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2EApGtB;;;;OAIG;;;;;;;;;;;;;uEAiHJ,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}
+{"version":3,"file":"TabsItem.d.ts","sourceRoot":"","sources":["../../../../tabs/lib/TabsItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAKL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,GAAG,EAAE,SAAS,EAAc,MAAM,kCAAkC,CAAC;AAe7E,MAAM,WAAW,aACf,SAAQ,YAAY,CAAC,OAAO,GAAG,EAAE,KAAK,CAAC,EACrC,OAAO,CAAC,IAAI,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;IACjC;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;;;;;;OAaG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;OAIG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AA8ED,eAAO,MAAM,aAAa,sFASxB,CAAC;AAEH,eAAO,MAAM,WAAW;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uEAiBvB,CAAC;AAEF,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiBnB,CAAC"}

package/dist/commonjs/tabs/lib/TabsItem.js

@@ -12,7 +12,7 @@ const useTabsModel_1 = require("./useTabsModel");
 const button_1 = require("@workday/canvas-kit-react/button");
 const canvas_tokens_web_1 = require("@workday/canvas-tokens-web");
 const tabItemStencil = (0, canvas_kit_styling_1.createStencil)({
-    base: { name: "43htft", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-65cb05:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-65cb05:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
+    base: { name: "43htft", styles: "box-sizing:border-box;font-family:var(--cnvs-sys-font-family-default), Helvetica Neue, Helvetica, Arial, sans-serif;font-weight:var(--cnvs-sys-font-weight-medium);line-height:var(--cnvs-sys-line-height-subtext-large);font-size:var(--cnvs-sys-font-size-subtext-large);letter-spacing:var(--cnvs-base-letter-spacing-150);border:none;background-color:transparent;flex:0 0 auto;min-width:var(--cnvs-sys-space-zero);align-items:center;padding:var(--cnvs-sys-space-x3) var(--cnvs-sys-space-x4);height:3.25rem;cursor:pointer;color:var(--cnvs-sys-color-fg-muted-default);position:relative;border-radius:var(--cnvs-sys-space-x1) var(--cnvs-sys-space-x1) var(--cnvs-sys-space-zero) var(--cnvs-sys-space-zero);transition:background 150ms ease, color 150ms ease;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;--color-system-icon-3a4847:currentColor;&:has(span){display:flex;gap:var(--cnvs-sys-space-x2);}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-alt-default);color:var(--cnvs-sys-color-fg-contrast-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-contrast-default);}&:focus-visible, &.focus{outline:0.125rem solid transparent;box-shadow:inset 0 0 0 2px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1)), inset 0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1));--boxShadowInner-button-85bf0e:var(--cnvs-sys-color-border-inverse);--boxShadowOuter-button-85bf0e:var(--cnvs-brand-common-focus-outline);--color-system-icon-3a4847:var(--cnvs-sys-color-icon-strong);}&:disabled, &.disabled, &[aria-disabled]{color:var(--cnvs-sys-color-text-disabled);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);&:hover{cursor:auto;background-color:var(--cnvs-sys-color-bg-transparent-default);--color-system-icon-3a4847:var(--cnvs-sys-color-fg-disabled);}}&[aria-selected=true]{color:var(--cnvs-brand-primary-base);cursor:default;--color-system-icon-3a4847:var(--cnvs-brand-primary-base);&:after{position:absolute;border-bottom:var(--cnvs-sys-space-x1) solid transparent;border-radius:var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-x1) var(--cnvs-sys-shape-zero) var(--cnvs-sys-shape-zero);background-color:var(--cnvs-brand-primary-base);bottom:var(--cnvs-sys-space-zero);content:'';left:var(--cnvs-sys-space-zero);margin-block-start:calc(calc(var(--cnvs-sys-space-x2) / var(--cnvs-sys-space-x1)) * -1);width:100%;}&:hover, &.hover, &:focus-visible, &.focus{background-color:var(--cnvs-sys-color-bg-transparent-default);color:var(--cnvs-brand-primary-base);}}" }
 }, "tab-item-116136");
 exports.StyledTabItem = (0, common_1.createComponent)('button')({
     displayName: 'StyledTabItem',