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

package/button/lib/BaseButton.tsx

@@ -40,11 +40,6 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
    * @default 'start'
    */
   iconPosition?: IconPositions;
-  /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
-   * @default false
-   */
-  shouldMirrorIcon?: boolean;
   children?: React.ReactNode;
 }
 
@@ -406,7 +401,6 @@ export const BaseButton = createComponent('button')({
       iconPosition,
       icon,
       colors,
-      shouldMirrorIcon = false,
       ...elemProps
     }: ButtonContainerProps,
     ref,

package/button/lib/Button.tsx

@@ -14,6 +14,20 @@ export interface ButtonProps extends Omit<ButtonContainerProps, 'ref'> {
    * @default 'start'
    */
   iconPosition?: 'start' | 'end';
+  /**
+   * If set to `true`, transform the icon's x-axis to mirror the graphic. Use this if you want to
+   * always mirror the icon regardless of the content direction. If the icon should mirror only when
+   * in an right-to-left language, use `shouldMirrorIconInRTL` instead.
+   * @default false
+   */
+  shouldMirrorIcon?: boolean;
+  /**
+   * If set to `true`, transform the icon'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
+   */
+  shouldMirrorIconInRTL?: boolean;
 }
 
 export const Button = createComponent('button')({
@@ -25,6 +39,7 @@ export const Button = createComponent('button')({
       colors,
       iconPosition,
       shouldMirrorIcon,
+      shouldMirrorIconInRTL,
       size = 'medium',
       ...elemProps
     }: ButtonProps,
@@ -50,12 +65,22 @@ export const Button = createComponent('button')({
         {...elemProps}
       >
         {icon && baseIconPosition === 'start' && (
-          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
+          <BaseButton.Icon
+            size={size}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+            shouldMirrorIconInRTL={shouldMirrorIconInRTL}
+          />
         )}
         {children && <BaseButton.Label>{children}</BaseButton.Label>}
 
         {icon && baseIconPosition && ['only', 'end'].includes(baseIconPosition) && (
-          <BaseButton.Icon size={size} icon={icon} shouldMirrorIcon={shouldMirrorIcon} />
+          <BaseButton.Icon
+            size={size}
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+            shouldMirrorIconInRTL={shouldMirrorIconInRTL}
+          />
         )}
       </BaseButton>
     );

package/button/lib/ToolbarDropdownButton.tsx

@@ -68,13 +68,27 @@ export const toolbarDropdownButtonStencil = createStencil({
         },
       }),
     },
+    shouldMirrorIconInRTL: {
+      true: ({customIconPart}) => ({
+        [`&:dir(rtl) ${customIconPart}`]: {
+          marginInlineEnd: 0,
+          marginInlineStart: px2rem(2),
+        },
+      }),
+    },
   },
 });
 
 export const ToolbarDropdownButton = createComponent('button')({
   displayName: 'ToolbarDropdownButton',
   Component: (
-    {icon, shouldMirrorIcon = false, children, ...elemProps}: ToolbarDropdownButtonProps,
+    {
+      icon,
+      shouldMirrorIcon = false,
+      shouldMirrorIconInRTL = false,
+      children,
+      ...elemProps
+    }: ToolbarDropdownButtonProps,
     ref,
     Element
   ) => {
@@ -83,13 +97,17 @@ export const ToolbarDropdownButton = createComponent('button')({
         ref={ref}
         as={Element}
         size="small"
-        {...handleCsProp(elemProps, toolbarDropdownButtonStencil({shouldMirrorIcon}))}
+        {...handleCsProp(
+          elemProps,
+          toolbarDropdownButtonStencil({shouldMirrorIcon, shouldMirrorIconInRTL})
+        )}
       >
         {icon ? (
           <BaseButton.Icon
             className="wdc-toolbar-dropdown-btn-custom-icon"
             icon={icon}
             shouldMirrorIcon={shouldMirrorIcon}
+            shouldMirrorIconInRTL={shouldMirrorIconInRTL}
             {...toolbarDropdownButtonStencil.parts.customIcon}
           />
         ) : (
@@ -99,6 +117,7 @@ export const ToolbarDropdownButton = createComponent('button')({
           className="wdc-toolbar-dropdown-btn-arrow"
           icon={chevronDownSmallIcon}
           shouldMirrorIcon={shouldMirrorIcon}
+          shouldMirrorIconInRTL={shouldMirrorIconInRTL}
           {...toolbarDropdownButtonStencil.parts.chevron}
         />
       </BaseButton>

package/button/lib/ToolbarIconButton.tsx

@@ -10,6 +10,7 @@ export interface ToolbarIconButtonProps extends Omit<TertiaryButtonProps, 'size'
   onToggleChange?: (toggled: boolean | undefined) => void;
   toggled?: boolean;
   shouldMirrorIcon?: boolean;
+  shouldMirrorIconInRTL?: boolean;
 }
 
 export const toolbarIconButtonStencil = createStencil({
@@ -74,6 +75,7 @@ export const ToolbarIconButton = createComponent('button')({
       onToggleChange,
       icon,
       shouldMirrorIcon = false,
+      shouldMirrorIconInRTL = false,
       toggled,
       children,
       ...elemProps
@@ -101,7 +103,15 @@ export const ToolbarIconButton = createComponent('button')({
         aria-pressed={toggled}
         {...handleCsProp(elemProps, toolbarIconButtonStencil())}
       >
-        {icon ? <BaseButton.Icon icon={icon} shouldMirrorIcon={shouldMirrorIcon} /> : children}
+        {icon ? (
+          <BaseButton.Icon
+            icon={icon}
+            shouldMirrorIcon={shouldMirrorIcon}
+            shouldMirrorIconInRTL={shouldMirrorIconInRTL}
+          />
+        ) : (
+          children
+        )}
       </BaseButton>
     );
   },

package/button/lib/parts/ButtonLabelIcon.tsx

@@ -11,10 +11,19 @@ export interface ButtonLabelIconProps extends Partial<SystemIconProps> {
    */
   size?: ButtonSizes;
   /**
-   * If set to `true`, transform the icon's x-axis to mirror the graphic
+   * If set to `true`, transform the icon's x-axis to mirror the graphic. Use this if you want to
+   * always mirror the icon regardless of the content direction. If the icon should mirror only when
+   * in an right-to-left language, use `shouldMirrorIconInRTL` instead.
    * @default false
    */
   shouldMirrorIcon?: boolean;
+  /**
+   * If set to `true`, transform the icon'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
+   */
+  shouldMirrorIconInRTL?: boolean;
 }
 
 const iconSizes: Record<ButtonSizes, number> = {
@@ -26,7 +35,13 @@ const iconSizes: Record<ButtonSizes, number> = {
 
 export const ButtonLabelIcon = createComponent('span')({
   Component: (
-    {icon, size = 'medium', shouldMirrorIcon = false, ...elemProps}: ButtonLabelIconProps,
+    {
+      icon,
+      size = 'medium',
+      shouldMirrorIcon = false,
+      shouldMirrorIconInRTL = false,
+      ...elemProps
+    }: ButtonLabelIconProps,
     ref,
     Element
   ) => {
@@ -38,12 +53,15 @@ export const ButtonLabelIcon = createComponent('span')({
 
     return (
       <SystemIcon
+        ref={ref}
+        as={Element}
         size={iconSize}
         icon={icon}
-        shouldMirror={shouldMirrorIcon}
         width={px2rem(iconSize)}
         height={px2rem(iconSize)}
         display="inline-block"
+        shouldMirror={shouldMirrorIcon}
+        shouldMirrorInRTL={shouldMirrorIconInRTL}
         {...elemProps}
       />
     );

package/collection/lib/keyUtils.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import {useCursorListModel} from './useCursorListModel';
 
+import {isElementRTL} from '@workday/canvas-kit-react/common';
+
 export const orientationKeyMap = {
   horizontal: {
     ArrowLeft: 'goToPrevious',
@@ -56,8 +58,7 @@ const hasOwnKey = <T extends object>(obj: T, key: any): key is keyof T => obj.ha
 
 export function keyboardEventToCursorEvents(
   event: React.KeyboardEvent,
-  model: ReturnType<typeof useCursorListModel>,
-  isRTL: boolean
+  model: ReturnType<typeof useCursorListModel>
 ): boolean {
   // Test ctrl key first
   if (event.ctrlKey) {
@@ -72,6 +73,7 @@ export function keyboardEventToCursorEvents(
   }
   // Try regular keys
   const map = model.state.columnCount > 0 ? gridKeyMap : orientationKeyMap[model.state.orientation];
+  const isRTL = isElementRTL(event.currentTarget);
   for (const key in map) {
     if (hasOwnKey(map, key)) {
       if (isRTL ? event.key === rightToLeftMap[key] : event.key === key) {

package/collection/lib/useListItemRemoveable.ts

@@ -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';
@@ -36,7 +36,6 @@ export const useListItemRemove = createElemPropsHook(useCursorListModel)(
     stateRef.current = model.state;
 
     const keyElementRef = React.useRef<Element | null>(null);
-    const isRTL = useIsRTL();
 
     React.useEffect(() => {
       if (keyElementRef.current) {
@@ -81,7 +80,7 @@ export const useListItemRemove = createElemPropsHook(useCursorListModel)(
 
     return {
       onKeyDown(event: React.KeyboardEvent) {
-        const handled = keyboardEventToCursorEvents(event, model, isRTL);
+        const handled = keyboardEventToCursorEvents(event, model);
         if (handled) {
           event.preventDefault();
           keyElementRef.current = event.currentTarget;

package/collection/lib/useListItemRovingFocus.tsx

@@ -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';
@@ -29,7 +29,6 @@ export const useListItemRovingFocus = createElemPropsHook(useListModel)(
     stateRef.current = model.state;
 
     const keyElementRef = React.useRef<HTMLElement | null>(null);
-    const isRTL = useIsRTL();
 
     React.useEffect(() => {
       // If the cursor change was triggered by this hook, we should change focus
@@ -53,7 +52,7 @@ export const useListItemRovingFocus = createElemPropsHook(useListModel)(
 
     return {
       onKeyDown(event: React.KeyboardEvent<HTMLElement>) {
-        const handled = keyboardEventToCursorEvents(event, model, isRTL);
+        const handled = keyboardEventToCursorEvents(event, model);
         if (handled) {
           event.preventDefault();
           keyElementRef.current = event.currentTarget;

package/collection/lib/useListKeyboardHandler.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-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';
@@ -15,11 +15,9 @@ import {keyboardEventToCursorEvents} from './keyUtils';
 ```
  */
 export const useListKeyboardHandler = createElemPropsHook(useCursorListModel)(model => {
-  const isRTL = useIsRTL();
-
   return {
     onKeyDown(event: React.KeyboardEvent) {
-      const handled = keyboardEventToCursorEvents(event, model, isRTL);
+      const handled = keyboardEventToCursorEvents(event, model);
       if (handled) {
         event.preventDefault();
       }

package/combobox/lib/hooks/useComboboxListKeyboardHandler.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-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';
@@ -8,12 +8,10 @@ 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: React.KeyboardEvent) {
       if (model.state.visibility === 'visible') {
-        const handled = keyboardEventToCursorEvents(event, model, isRTL);
+        const handled = keyboardEventToCursorEvents(event, model);
         if (handled) {
           event.preventDefault();
         }

package/common/lib/theming/README.md

@@ -145,32 +145,9 @@ const theme: EmotionCanvasTheme = {
 
 ### Bidirectionality
 
-The `CanvasProvider` also provides support for bidirectionality, useful for RTL languages. The
-direction, part of the theme, is set using `ContentDirection.LTR` or `ContentDirection.RTL`.
-
-You can nest `CanvasProvider` if you need to set a different direction for some components in your
-React tree (See below: Nesting CanvasProvider components).
-
-`CanvasProvider` wraps your components with a `bdo` element that has the `dir` attribute set to the
-value of the theme direction. Styled components using the
-[Canvas `styled` function](https://github.com/Workday/canvas-kit/blob/master/modules/common/react/lib/theming/styled.ts)
-will have their styles automatically flipped if dictated by the closest theme object.
-
-```tsx
-import {
-  CanvasProvider,
-  ContentDirection,
-  EmotionCanvasTheme,
-} from '@workday/canvas-kit-react/common';
-
-const rtlTheme: EmotionCanvasTheme = {
-  canvas: {
-    direction: ContentDirection.RTL,
-  },
-};
-
-<CanvasProvider theme={rtlTheme}>{/* Your app with Canvas components */}</CanvasProvider>;
-```
+We strongly encourage the use of
+[CSS logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties)
+for styling. All previous bidirectionality in the Canvas theme have been deprecated.
 
 ### Nesting CanvasProvider components
 
@@ -547,25 +524,3 @@ const styles = {
   },
 };
 ```
-
-## useIsRTL Hook
-
-`useIsRTL` is a small hook to support right-to-left logic. If a theme exists in React context, the
-component will use it automatically, or you can explicitly provide a theme object.
-
-### Usage
-
-```ts
-// this will automatically pull the theme from context if it exists.
-const isRTL = useIsRTL();
-```
-
-```ts
-// or you can explicitly provide a (partial) theme object.
-const RTLTheme = {
-  canvas: {
-    direction: ContentDirection.RTL,
-  },
-};
-const isRTL = useIsRTL(RTLTheme);
-```

package/common/lib/theming/useIsRTL.ts

@@ -9,8 +9,12 @@ function useDefaultTheme<T, C>(theme: T | undefined, config: C, fn: (config: C)
 /**
  * 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?: PartialEmotionCanvasTheme) => {

package/common/lib/utils/index.ts

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

package/common/lib/utils/isElementRTL.ts

@@ -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: Element): boolean => {
+  const direction = getComputedStyle(element).direction;
+  return direction === 'rtl';
+};

package/dist/commonjs/avatar/lib/Avatar.js

@@ -52,19 +52,19 @@ exports.avatarStencil = (0, canvas_kit_styling_1.createStencil)({
         icon: 'avatar-icon',
         image: 'avatar-image',
     },
-    base: { name: "15gazi", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-728c60:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
+    base: { name: "15gazi", styles: "box-sizing:border-box;background:var(--cnvs-sys-color-bg-caution-default);position:relative;display:flex;align-items:center;justify-content:center;padding:0;border:0;overflow:hidden;cursor:default;pointer-events:none;border-radius:var(--cnvs-sys-shape-round);width:var(--size-avatar-a7d274);height:var(--size-avatar-a7d274);&:focus-visible, &.focus{outline:none;box-shadow:0 0 0 2px var(--cnvs-sys-color-border-inverse, rgba(255,255,255,1)), 0 0 0 4px var(--cnvs-brand-common-focus-outline, rgba(8,117,225,1));}:is(button){cursor:pointer;pointer-events:auto;}&:disabled, &.disabled{opacity:var(--cnvs-sys-opacity-disabled);}[data-part=\"avatar-icon\"]{transition:opacity 150ms linear;display:flex;align-items:center;justify-content:center;--size-svg-8fcab8:calc(var(--size-avatar-a7d274) * 0.625);opacity:1;}[data-part=\"avatar-image\"]{position:absolute;width:100%;height:100%;border-radius:999px;transition:opacity 150ms linear;opacity:0;}" },
     modifiers: {
         variant: {
             light: { name: "gsirr", styles: "background-color:var(--cnvs-sys-color-bg-alt-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-default);}" },
             dark: { name: "4bycmc", styles: "background-color:var(--cnvs-sys-color-bg-primary-default);[data-part=\"avatar-icon\"]{--color-system-icon-3a4847:var(--cnvs-sys-color-fg-inverse);}" }
         },
         size: {
-            extraSmall: { name: "3iw4vg", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
-            small: { name: "1gplfi", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
-            medium: { name: "q509p", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
-            large: { name: "b96gk", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
-            extraLarge: { name: "2yj8lk", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
-            extraExtraLarge: { name: "4ezdpg", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-728c60:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
+            extraSmall: { name: "3iw4vg", styles: "width:var(--cnvs-sys-space-x4);height:var(--cnvs-sys-space-x4);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x4) * 0.625);}" },
+            small: { name: "1gplfi", styles: "width:var(--cnvs-sys-space-x6);height:var(--cnvs-sys-space-x6);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x6) * 0.625);}" },
+            medium: { name: "q509p", styles: "width:var(--cnvs-sys-space-x8);height:var(--cnvs-sys-space-x8);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x8) * 0.625);}" },
+            large: { name: "b96gk", styles: "width:var(--cnvs-sys-space-x10);height:var(--cnvs-sys-space-x10);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x10) * 0.625);}" },
+            extraLarge: { name: "2yj8lk", styles: "width:var(--cnvs-sys-space-x16);height:var(--cnvs-sys-space-x16);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(var(--cnvs-sys-space-x16) * 0.625);}" },
+            extraExtraLarge: { name: "4ezdpg", styles: "width:calc(var(--cnvs-sys-space-x10) * 3);height:calc(var(--cnvs-sys-space-x10) * 3);[data-part=\"avatar-icon\"]{--size-svg-8fcab8:calc(calc(var(--cnvs-sys-space-x10) * 3) * 0.625);}" }
         },
         objectFit: {
             contain: { name: "3140on", styles: "[data-part=\"avatar-image\"]{object-fit:contain;}" },

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsItem.js

@@ -15,7 +15,7 @@ exports.breadcrumbsItemStencil = (0, canvas_kit_styling_1.createStencil)({
     parts: {
         chevronRightIcon: 'breadcrumbs-item-chevron-right-icon',
     },
-    base: { name: "tpjo7", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-728c60:1.25rem;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "tpjo7", styles: "box-sizing:border-box;align-items:center;display:inline-flex;white-space:nowrap;--size-svg-8fcab8:1.25rem;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);[data-part=\"breadcrumbs-item-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-item-3a0e6d");
 exports.useBreadcrumbsItem = (0, common_1.composeHooks)(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
 exports.BreadcrumbsItem = (0, common_1.createSubcomponent)('li')({

package/dist/commonjs/breadcrumbs/lib/BreadcrumbsOverflowButton.js

@@ -16,7 +16,7 @@ exports.breadcrumbsOverflowButtonStencil = (0, canvas_kit_styling_1.createStenci
         overflowButton: 'breadcrumbs-overflow-button',
         chevronRightIcon: 'breadcrumbs-overflow-button-chevron-right-icon',
     },
-    base: { name: "a78su", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-728c60:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
+    base: { name: "a78su", styles: "box-sizing:border-box;align-items:center;display:flex;--color-system-icon-3a4847:var(--cnvs-sys-color-icon-default);--size-svg-8fcab8:1.25rem;[data-part=\"breadcrumbs-overflow-button-chevron-right-icon\"]{height:var(--cnvs-sys-space-x8);width:var(--cnvs-sys-space-x8);justify-content:center;align-items:center;display:inline-flex;:dir(rtl){transform:scaleX(-1);}}" }
 }, "breadcrumbs-overflow-button-9c6f83");
 exports.useBreadcrumbsOverflowButton = (0, common_1.composeHooks)((0, common_1.createElemPropsHook)(useBreadcrumbsModel_1.useBreadcrumbsModel)(() => ({
     'aria-haspopup': true,

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

@@ -32,11 +32,6 @@ export interface ButtonContainerProps extends Partial<SystemIconProps>, GrowthBe
      * @default 'start'
      */
     iconPosition?: IconPositions;
-    /**
-     * If set to `true`, transform the icon's x-axis to mirror the graphic
-     * @default false
-     */
-    shouldMirrorIcon?: boolean;
     children?: React.ReactNode;
 }
 /**

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

@@ -1 +1 @@
-{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B;;;OAGG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IA6ItB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAsCrB,CAAC"}
+{"version":3,"file":"BaseButton.d.ts","sourceRoot":"","sources":["../../../../button/lib/BaseButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,OAAO,EAAkB,cAAc,EAAY,MAAM,kCAAkC,CAAC;AAE5F,OAAO,EAAC,eAAe,EAAoB,MAAM,gCAAgC,CAAC;AAElF,OAAO,EAAC,YAAY,EAAE,WAAW,EAAE,aAAa,EAAC,MAAM,SAAS,CAAC;AACjE,OAAO,EAAC,gBAAgB,EAAC,MAAM,8BAA8B,CAAC;AAG9D,MAAM,WAAW,oBAAqB,SAAQ,OAAO,CAAC,eAAe,CAAC,EAAE,cAAc;IACpF;;OAEG;IACH,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB;;;OAGG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAC;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,aAAa,CAAC;IAC7B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;GAIG;AACH,MAAM,WAAW,eAAgB,SAAQ,IAAI,CAAC,oBAAoB,EAAE,KAAK,CAAC;CAAG;AAE7E;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;CAmD/B,CAAC;AAEF;;GAEG;AACH,eAAO,MAAM,aAAa;IA6ItB;;;;;OAKG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gBAiIL,CAAC;AAEH;;;GAGG;AACH,eAAO,MAAM,UAAU;;;CAqCrB,CAAC"}