@primer/react 38.0.0-rc.6 → 38.0.0-rc.7

package/dist/ActionMenu/ActionMenu.d.ts

@@ -4,6 +4,7 @@ import type { OverlayProps } from '../Overlay';
 import type { ButtonProps } from '../Button';
 import type { AnchorPosition } from '@primer/behaviors';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
+import type { FCWithSlotMarker, WithSlotMarker } from '../utils/types/Slots';
 export type MenuCloseHandler = (gesture: 'anchor-click' | 'click-outside' | 'escape' | 'tab' | 'item-select' | 'arrow-left' | 'close') => void;
 export type MenuContextProps = Pick<AnchoredOverlayProps, 'anchorRef' | 'renderAnchor' | 'open' | 'onOpen' | 'anchorId'> & {
     onClose?: MenuCloseHandler;
@@ -38,14 +39,14 @@ type MenuOverlayProps = Partial<OverlayProps> & Pick<AnchoredOverlayProps, 'alig
         position: AnchorPosition;
     }) => void;
 };
-export declare const ActionMenu: React.FC<React.PropsWithChildren<ActionMenuProps>> & {
+export declare const ActionMenu: React.FC<React.PropsWithChildren<ActionMenuProps>> & import("..").SlotMarker & {
     Button: PolymorphicForwardRefComponent<"button", ButtonProps>;
-    Anchor: React.ForwardRefExoticComponent<{
+    Anchor: WithSlotMarker<React.ForwardRefExoticComponent<{
         children: React.ReactElement;
         id?: string;
-    } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>;
-    Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>>;
-    Divider: React.FC<React.PropsWithChildren<import("..").ActionListDividerProps>>;
+    } & React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>>>;
+    Overlay: FCWithSlotMarker<React.PropsWithChildren<MenuOverlayProps>>;
+    Divider: FCWithSlotMarker<React.PropsWithChildren<import("..").ActionListDividerProps>>;
 };
 export {};
 //# sourceMappingURL=ActionMenu.d.ts.map

package/dist/ActionMenu/ActionMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAElF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAA;IAEnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AAkI3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAiDnH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IACzD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AA6EH,eAAO,MAAM,UAAU;;;kBArJwB,KAAK,CAAC,YAAY;aAAO,MAAM;;;;CAqJe,CAAA"}
+{"version":3,"file":"ActionMenu.d.ts","sourceRoot":"","sources":["../../src/ActionMenu/ActionMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8D,MAAM,OAAO,CAAA;AAElF,OAAO,KAAK,EAAC,oBAAoB,EAAC,MAAM,oBAAoB,CAAA;AAE5D,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAI5C,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,WAAW,CAAA;AAC1C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,mBAAmB,CAAA;AAIrD,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAK/F,OAAO,KAAK,EAAC,gBAAgB,EAAE,cAAc,EAAC,MAAM,sBAAsB,CAAA;AAE1E,MAAM,MAAM,gBAAgB,GAAG,CAC7B,OAAO,EAAE,cAAc,GAAG,eAAe,GAAG,QAAQ,GAAG,KAAK,GAAG,aAAa,GAAG,YAAY,GAAG,OAAO,KAClG,IAAI,CAAA;AAET,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,oBAAoB,EACpB,WAAW,GAAG,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,UAAU,CAC9D,GAAG;IACF,OAAO,CAAC,EAAE,gBAAgB,CAAA;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAGD,MAAM,MAAM,eAAe,GAAG;IAC5B;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,YAAY,EAAE,GAAG,KAAK,CAAC,YAAY,CAAA;IAEnD;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IAEd;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAA;CACpC,GAAG,IAAI,CAAC,oBAAoB,EAAE,WAAW,CAAC,CAAA;AAqI3C,MAAM,MAAM,qBAAqB,GAAG;IAAC,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,GAAG,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC,CAAA;AAyDnH,6CAA6C;AAC7C,MAAM,MAAM,qBAAqB,GAAG,WAAW,CAAA;AAe/C,KAAK,gBAAgB,GAAG,OAAO,CAAC,YAAY,CAAC,GAC3C,IAAI,CAAC,oBAAoB,EAAE,OAAO,GAAG,MAAM,GAAG,SAAS,CAAC,GAAG;IACzD;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gBAAgB,CAAC,EAAE,CAAC,EAAC,QAAQ,EAAC,EAAE;QAAC,QAAQ,EAAE,cAAc,CAAA;KAAC,KAAK,IAAI,CAAA;CACpE,CAAA;AAmFH,eAAO,MAAM,UAAU;;;kBA/JP,KAAK,CAAC,YAAY;aACvB,MAAM;;;;CA8J4E,CAAA"}

package/dist/ActionMenu/ActionMenu.js

@@ -6,6 +6,7 @@ import { useId } from '../hooks/useId.js';
 import { Tooltip } from '../TooltipV2/Tooltip.js';
 import styles from './ActionMenu.module.css.js';
 import { useResponsiveValue } from '../hooks/useResponsiveValue.js';
+import { isSlot } from '../utils/is-slot.js';
 import { jsx } from 'react/jsx-runtime';
 import { useProvidedStateOrCreate } from '../hooks/useProvidedStateOrCreate.js';
 import { useProvidedRefOrCreate } from '../hooks/useProvidedRefOrCreate.js';
@@ -67,7 +68,7 @@ const Menu = ({
         (_parentMenuContext$on = parentMenuContext.onClose) === null || _parentMenuContext$on === void 0 ? void 0 : _parentMenuContext$on.call(parentMenuContext, gesture);
     }
   }, [setCombinedOpenState, parentMenuContext, open, isNarrow]);
-  const menuButtonChild = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && (child.type === MenuButton || child.type === Anchor));
+  const menuButtonChild = React.Children.toArray(children).find(child => /*#__PURE__*/React.isValidElement(child) && (child.type === MenuButton || child.type === Anchor || isSlot(child, Anchor) || isSlot(child, MenuButton)));
   const menuButtonChildId = /*#__PURE__*/React.isValidElement(menuButtonChild) ? menuButtonChild.props.id : undefined;
   const anchorRef = useProvidedRefOrCreate(externalAnchorRef);
   const anchorId = useId(menuButtonChildId);
@@ -78,10 +79,10 @@ const Menu = ({
   // 🚨 Accounting for Tooltip wrapping ActionMenu.Button or being a direct child of ActionMenu.Anchor.
   const contents = React.Children.map(children, child => {
     // Is ActionMenu.Button wrapped with Tooltip? If this is the case, our anchor is the tooltip's trigger (ActionMenu.Button's grandchild)
-    if (child.type === Tooltip) {
+    if (child.type === Tooltip || isSlot(child, Tooltip)) {
       // tooltip trigger
       const anchorChildren = child.props.children;
-      if (anchorChildren.type === MenuButton) {
+      if (anchorChildren.type === MenuButton || isSlot(anchorChildren, MenuButton)) {
         // eslint-disable-next-line react-compiler/react-compiler
         renderAnchor = anchorProps => {
           // We need to attach the anchor props to the tooltip trigger (ActionMenu.Button's grandchild) not the tooltip itself.
@@ -95,9 +96,9 @@ const Menu = ({
         };
       }
       return null;
-    } else if (child.type === Anchor) {
+    } else if (child.type === Anchor || isSlot(child, Anchor)) {
       const anchorChildren = child.props.children;
-      const isWrappedWithTooltip = anchorChildren !== undefined ? anchorChildren.type === Tooltip : false;
+      const isWrappedWithTooltip = anchorChildren !== undefined ? anchorChildren.type === Tooltip || isSlot(anchorChildren, Tooltip) : false;
       if (isWrappedWithTooltip) {
         if (anchorChildren.props.children !== null) {
           renderAnchor = anchorProps => {
@@ -120,7 +121,7 @@ const Menu = ({
         renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, anchorProps);
       }
       return null;
-    } else if (child.type === MenuButton) {
+    } else if (child.type === MenuButton || isSlot(child, MenuButton)) {
       renderAnchor = anchorProps => /*#__PURE__*/React.cloneElement(child, mergeAnchorHandlers(anchorProps, child.props));
       return null;
     } else {
@@ -284,6 +285,10 @@ const Overlay = ({
 };
 Overlay.displayName = "Overlay";
 Menu.displayName = 'ActionMenu';
+Menu.__SLOT__ = Symbol('ActionMenu');
+MenuButton.__SLOT__ = Symbol('ActionMenu.Button');
+Anchor.__SLOT__ = Symbol('ActionMenu.Anchor');
+Overlay.__SLOT__ = Symbol('ActionMenu.Overlay');
 const ActionMenu = Object.assign(Menu, {
   Button: MenuButton,
   Anchor,

package/dist/Autocomplete/Autocomplete.d.ts

@@ -1,8 +1,8 @@
 import type React from 'react';
-import type { ComponentProps } from '../utils/types';
+import type { ComponentProps, FCWithSlotMarker } from '../utils/types';
 import AutocompleteMenu from './AutocompleteMenu';
 import AutocompleteOverlay from './AutocompleteOverlay';
-declare const Autocomplete: React.FC<React.PropsWithChildren<{
+declare const Autocomplete: FCWithSlotMarker<React.PropsWithChildren<{
     id?: string;
 }>>;
 export type AutocompleteProps = ComponentProps<typeof Autocomplete>;
@@ -11,7 +11,8 @@ export type { AutocompleteMenuProps } from './AutocompleteMenu';
 export type { AutocompleteOverlayProps } from './AutocompleteOverlay';
 declare const _default: React.FC<React.PropsWithChildren<{
     id?: string;
-}>> & {
+}>> & import("..").SlotMarker & {
+    __SLOT__: symbol;
     Context: React.Context<{
         activeDescendantRef: React.MutableRefObject<HTMLElement | null>;
         autocompleteSuggestion: string;
@@ -29,13 +30,14 @@ declare const _default: React.FC<React.PropsWithChildren<{
         showMenu: boolean;
     } | null>;
     Input: import("../utils/polymorphic").ForwardRefComponent<import("../utils/polymorphic").ForwardRefComponent<"input", import("..").TextInputProps> & {
+        __SLOT__: symbol;
         Action: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "aria-label" | "size" | "tooltipDirection"> & {
             children?: React.ReactNode;
             "aria-label"?: string;
             tooltipDirection?: "n" | "ne" | "e" | "se" | "s" | "sw" | "w" | "nw";
             icon?: React.FunctionComponent<React.PropsWithChildren<import("@primer/octicons-react").IconProps>>;
             variant?: import("..").ButtonProps["variant"];
-        } & import("..").SxProp & React.RefAttributes<HTMLButtonElement>>;
+        } & React.RefAttributes<HTMLButtonElement>>;
     }, {
         as?: React.ComponentType<React.PropsWithChildren<any>>;
         openOnFocus?: boolean;

package/dist/Autocomplete/Autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAGlD,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AA0CvD,QAAA,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CA6ClE,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AACnE,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAC7D,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA;;SAlDR,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDjE,wBAKE"}
+{"version":3,"file":"Autocomplete.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/Autocomplete.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAE,gBAAgB,EAAC,MAAM,gBAAgB,CAAA;AAGpE,OAAO,gBAAgB,MAAM,oBAAoB,CAAA;AACjD,OAAO,mBAAmB,MAAM,uBAAuB,CAAA;AA0CvD,QAAA,MAAM,YAAY,EAAE,gBAAgB,CAAC,KAAK,CAAC,iBAAiB,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAC,CAAC,CA6C1E,CAAA;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,YAAY,CAAC,CAAA;AACnE,YAAY,EAAC,sBAAsB,EAAC,MAAM,qBAAqB,CAAA;AAC/D,YAAY,EAAC,qBAAqB,EAAC,MAAM,oBAAoB,CAAA;AAC7D,YAAY,EAAC,wBAAwB,EAAC,MAAM,uBAAuB,CAAA;;SAlDA,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmDzE,wBAME"}

package/dist/Autocomplete/Autocomplete.js

@@ -175,6 +175,7 @@ const Autocomplete = t0 => {
   return t7;
 };
 var Autocomplete$1 = Object.assign(Autocomplete, {
+  __SLOT__: Symbol('Autocomplete'),
   Context: AutocompleteContext,
   Input: AutocompleteInput,
   Menu: AutocompleteMenu,

package/dist/Autocomplete/AutocompleteInput.js

@@ -141,5 +141,6 @@ const AutocompleteInput = /*#__PURE__*/React.forwardRef(({
   });
 });
 AutocompleteInput.displayName = 'AutocompleteInput';
+AutocompleteInput.__SLOT__ = Symbol('Autocomplete.Input');
 
 export { AutocompleteInput as default };

package/dist/Autocomplete/AutocompleteMenu.d.ts

@@ -69,6 +69,7 @@ export type AutocompleteMenuInternalProps<T extends AutocompleteItemProps> = {
 declare function AutocompleteMenu<T extends AutocompleteItemProps>(props: AutocompleteMenuInternalProps<T>): React.JSX.Element;
 declare namespace AutocompleteMenu {
     var displayName: string;
+    var __SLOT__: symbol;
 }
 export type AutocompleteMenuProps = ComponentProps<typeof AutocompleteMenu>;
 export default AutocompleteMenu;

package/dist/Autocomplete/AutocompleteMenu.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteMenu.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAGtD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAW,MAAM,gBAAgB,CAAA;AAI1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAOrD,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAA;AAClD,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,mBAAmB,EAAE,IAAI,CAAC,GAAG;IAC3E,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAChG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;CAClG,CAAA;AA4BD,KAAK,qBAAqB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,oBAAoB,GAAG;IAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;CAAC,CAAA;AAE3F,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAC3E;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG;QACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC,KAAK,IAAI,CAAA;KACrE,CAAA;IAED;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAA;IAE/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;IAE1C;;;OAGG;IACH,KAAK,EAAE,CAAC,EAAE,CAAA;IAEV;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IAEH,eAAe,EAAE,MAAM,EAAE,CAAA;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;IAE5D;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAEtC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAEtC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAUD,iBAAS,gBAAgB,CAAC,CAAC,SAAS,qBAAqB,EAAE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,qBAgRjG;kBAhRQ,gBAAgB;;;AAoRzB,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC3E,eAAe,gBAAgB,CAAA"}
+{"version":3,"file":"AutocompleteMenu.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteMenu.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAyD,MAAM,OAAO,CAAA;AAK7E,OAAO,KAAK,EAAC,mBAAmB,EAAC,MAAM,eAAe,CAAA;AAGtD,OAAO,KAAK,EAAC,cAAc,EAAE,YAAY,EAAW,MAAM,gBAAgB,CAAA;AAI1E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,wBAAwB,CAAA;AAOrD,KAAK,gBAAgB,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,GAAG,CAAC,EAAE,KAAK,IAAI,CAAA;AAClD,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,mBAAmB,EAAE,IAAI,CAAC,GAAG;IAC3E,aAAa,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;IAChG,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,KAAK,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,GAAG,KAAK,CAAC,YAAY,CAAA;CAClG,CAAA;AA4BD,KAAK,qBAAqB,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,oBAAoB,GAAG;IAAC,QAAQ,CAAC,EAAE,CAAC,CAAA;CAAC,CAAA;AAE3F,MAAM,MAAM,6BAA6B,CAAC,CAAC,SAAS,qBAAqB,IAAI;IAC3E;;;OAGG;IACH,UAAU,CAAC,EAAE,CAAC,GAAG;QACf,aAAa,EAAE,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,CAAC,KAAK,IAAI,CAAA;KACrE,CAAA;IAED;;OAEG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,GAAG,KAAK,GAAG,IAAI,CAAA;IAE/C;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;IAE1C;;;OAGG;IACH,KAAK,EAAE,CAAC,EAAE,CAAA;IAEV;;OAEG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IAEjB;;OAEG;IAEH,eAAe,EAAE,MAAM,EAAE,CAAA;IAEzB;;;OAGG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,MAAM,CAAA;IAE5D;;OAEG;IACH,gBAAgB,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAA;IAExC;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAA;IAEtC;;OAEG;IACH,gBAAgB,CAAC,EAAE,gBAAgB,CAAC,CAAC,CAAC,CAAA;IAEtC;;;;OAIG;IACH,wBAAwB,CAAC,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,GAAG,IAAI,CAAC,CAAA;IAErE,CAAC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC5B,CAAA;AAUD,iBAAS,gBAAgB,CAAC,CAAC,SAAS,qBAAqB,EAAE,KAAK,EAAE,6BAA6B,CAAC,CAAC,CAAC,qBAgRjG;kBAhRQ,gBAAgB;;;;AAoRzB,MAAM,MAAM,qBAAqB,GAAG,cAAc,CAAC,OAAO,gBAAgB,CAAC,CAAA;AAC3E,eAAe,gBAAgB,CAAA"}

package/dist/Autocomplete/AutocompleteMenu.js

@@ -241,5 +241,6 @@ function AutocompleteMenu(props) {
 }
 AutocompleteMenu.displayName = "AutocompleteMenu";
 AutocompleteMenu.displayName = 'AutocompleteMenu';
+AutocompleteMenu.__SLOT__ = Symbol('Autocomplete.Menu');
 
 export { AutocompleteMenu as default };

package/dist/Autocomplete/AutocompleteOverlay.d.ts

@@ -15,6 +15,7 @@ type AutocompleteOverlayInternalProps = {
 declare function AutocompleteOverlay({ menuAnchorRef, overlayProps: oldOverlayProps, children, ...newOverlayProps }: AutocompleteOverlayInternalProps): React.JSX.Element | null;
 declare namespace AutocompleteOverlay {
     var displayName: string;
+    var __SLOT__: symbol;
 }
 export type AutocompleteOverlayProps = ComponentProps<typeof AutocompleteOverlay>;
 export default AutocompleteOverlay;

package/dist/Autocomplete/AutocompleteOverlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutocompleteOverlay.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,OAAO,CAAC,YAAY,CAAC,GACvB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAA;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,aAAa,EACb,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,GAAG,eAAe,EACnB,EAAE,gCAAgC,4BA6ClC;kBAlDQ,mBAAmB;;;AAsD5B,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACjF,eAAe,mBAAmB,CAAA"}
+{"version":3,"file":"AutocompleteOverlay.d.ts","sourceRoot":"","sources":["../../src/Autocomplete/AutocompleteOverlay.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,YAAY,CAAA;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,gBAAgB,CAAA;AAOlD,KAAK,gCAAgC,GAAG;IACtC;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;IAC5C;;OAEG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAA;IACpC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,OAAO,CAAC,YAAY,CAAC,GACvB,IAAI,CAAC,KAAK,CAAC,cAAc,EAAE,iBAAiB,CAAC,CAAA;AAE/C,iBAAS,mBAAmB,CAAC,EAC3B,aAAa,EACb,YAAY,EAAE,eAAe,EAC7B,QAAQ,EACR,GAAG,eAAe,EACnB,EAAE,gCAAgC,4BA6ClC;kBAlDQ,mBAAmB;;;;AAsD5B,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,OAAO,mBAAmB,CAAC,CAAA;AACjF,eAAe,mBAAmB,CAAA"}

package/dist/Autocomplete/AutocompleteOverlay.js

@@ -132,5 +132,6 @@ function AutocompleteOverlay(t0) {
   return t7;
 }
 AutocompleteOverlay.displayName = 'AutocompleteOverlay';
+AutocompleteOverlay.__SLOT__ = Symbol('Autocomplete.Overlay');
 
 export { AutocompleteOverlay as default };

package/dist/AvatarStack/AvatarStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAGxD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAkBhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AA8BD,QAAA,MAAM,WAAW,GAAI,kFASlB,gBAAgB,sBAyHlB,CAAA;AAED,eAAe,WAAW,CAAA"}
+{"version":3,"file":"AvatarStack.d.ts","sourceRoot":"","sources":["../../src/AvatarStack/AvatarStack.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAGxD,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,6BAA6B,CAAA;AAiBhE,MAAM,MAAM,gBAAgB,GAAG;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAA;IAC7B,KAAK,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAA;IAC3B,IAAI,CAAC,EAAE,MAAM,GAAG,eAAe,CAAC,MAAM,CAAC,CAAA;IACvC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;CAC5B,CAAA;AA8BD,QAAA,MAAM,WAAW,GAAI,kFASlB,gBAAgB,sBAwHlB,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/AvatarStack/AvatarStack.js

@@ -4,7 +4,6 @@ import { DEFAULT_AVATAR_SIZE } from '../Avatar/Avatar.js';
 import { isResponsiveValue } from '../hooks/useResponsiveValue.js';
 import classes from './AvatarStack.module.css.js';
 import { hasInteractiveNodes } from '../internal/utils/hasInteractiveNodes.js';
-import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 const transformChildren = (children, shape) => {
@@ -118,8 +117,7 @@ const AvatarStack = ({
       '--avatar-stack-size': `${size}px`
     };
   };
-  return /*#__PURE__*/jsx(BoxWithFallback, {
-    as: "span",
+  return /*#__PURE__*/jsx("span", {
     "data-variant": variant,
     "data-shape": shape,
     "data-avatar-count": count > 3 ? '3+' : count,

package/dist/BranchName/BranchName.d.ts

@@ -1,15 +1,14 @@
-import React from 'react';
-type BranchNameProps<As extends React.ElementType> = {
-    as?: As;
-} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType extends As ? 'a' : As>, 'as'> & {
+import type React from 'react';
+import { type PolymorphicProps } from '../utils/modern-polymorphic';
+export type BranchNameProps<As extends React.ElementType> = PolymorphicProps<As, 'a', {
     className?: string;
-};
-type DistributiveOmit<T, TOmitted extends PropertyKey> = T extends any ? Omit<T, TOmitted> : never;
-export type { BranchNameProps };
-declare const _default: <As extends React.ElementType>(props: {
-    as?: As | undefined;
-} & DistributiveOmit<React.ComponentPropsWithRef<React.ElementType<any, keyof React.JSX.IntrinsicElements> extends As ? "a" : As>, "as"> & {
+}>;
+declare const _default: <As extends React.ElementType>(props: (React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
+    className?: string;
+} extends infer T ? T extends React.ComponentPropsWithRef<React.ElementType extends As ? "a" : As> & {
     className?: string;
+} ? T extends unknown ? Omit<T, "as"> : never : never : never) & {
+    as?: As | undefined;
 } & React.RefAttributes<any>) => React.ReactNode;
 export default _default;
 //# sourceMappingURL=BranchName.d.ts.map

package/dist/BranchName/BranchName.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BranchName.d.ts","sourceRoot":"","sources":["../../src/BranchName/BranchName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAA;AAI9C,KAAK,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACnD,EAAE,CAAC,EAAE,EAAE,CAAA;CACR,GAAG,gBAAgB,CAAC,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,GAAG,GAAG,EAAE,CAAC,EAAE,IAAI,CAAC,GAAG;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAoBH,KAAK,gBAAgB,CAAC,CAAC,EAAE,QAAQ,SAAS,WAAW,IAAI,CAAC,SAAS,GAAG,GAAG,IAAI,CAAC,CAAC,EAAE,QAAQ,CAAC,GAAG,KAAK,CAAA;AAIlG,YAAY,EAAC,eAAe,EAAC,CAAA;yBArBT,EAAE,SAAS,KAAK,CAAC,WAAW;;;gBAJhC,MAAM;iCAgBsB,KAAK,CAAC,SAAS;AAU3D,wBAA0C"}
+{"version":3,"file":"BranchName.d.ts","sourceRoot":"","sources":["../../src/BranchName/BranchName.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAAkB,KAAK,gBAAgB,EAAC,MAAM,6BAA6B,CAAA;AAElF,MAAM,MAAM,eAAe,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI,gBAAgB,CAC1E,EAAE,EACF,GAAG,EACH;IACE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CACF,CAAA;yBAGmB,EAAE,SAAS,KAAK,CAAC,WAAW;gBALhC,MAAM;;gBAAN,MAAM;;;;AAgBtB,wBAA0C"}

package/dist/BranchName/BranchName.js

@@ -1,7 +1,7 @@
 import { c } from 'react-compiler-runtime';
-import React from 'react';
 import { clsx } from 'clsx';
 import classes from './BranchName.module.css.js';
+import { fixedForwardRef } from '../utils/modern-polymorphic.js';
 import { jsx } from 'react/jsx-runtime';
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -57,13 +57,6 @@ function BranchName(props, ref) {
   }
   return t2;
 }
-
-// eslint-disable-next-line @typescript-eslint/no-empty-object-type
-
-const fixedForwardRef = React.forwardRef;
-
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-
 BranchName.displayName = 'BranchName';
 var BranchName$1 = fixedForwardRef(BranchName);
 

package/dist/Button/Button.d.ts

@@ -1,9 +1,5 @@
 import type { ButtonProps } from './types';
 import type { ForwardRefComponent as PolymorphicForwardRefComponent } from '../utils/polymorphic';
-import type { BetterSystemStyleObject } from '../sx';
 declare const ButtonComponent: PolymorphicForwardRefComponent<"button", ButtonProps>;
-export declare function generateCustomSxProp(props: Partial<Pick<ButtonProps, 'size' | 'block' | 'leadingVisual' | 'trailingVisual' | 'trailingAction'>>, providedSx: BetterSystemStyleObject): {
-    [key: string]: BetterSystemStyleObject;
-};
-export { ButtonComponent };
+export { ButtonComponent, type ButtonProps };
 //# sourceMappingURL=Button.d.ts.map

package/dist/Button/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,OAAO,KAAK,EAAC,uBAAuB,EAAsB,MAAM,OAAO,CAAA;AAEvE,QAAA,MAAM,eAAe,EAkBf,8BAA8B,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;AA0C3D,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE,MAAM,GAAG,OAAO,GAAG,eAAe,GAAG,gBAAgB,GAAG,gBAAgB,CAAC,CAAC,EAC3G,UAAU,EAAE,uBAAuB;;EAmBpC;AAID,OAAO,EAAC,eAAe,EAAC,CAAA"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/Button/Button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAExC,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,QAAA,MAAM,eAAe,EAMf,8BAA8B,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAA;AAI3D,OAAO,EAAC,eAAe,EAAE,KAAK,WAAW,EAAC,CAAA"}

package/dist/Button/Button.js

@@ -1,103 +1,20 @@
 import { forwardRef } from 'react';
 import { ButtonBase } from './ButtonBase.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { jsx } from 'react/jsx-runtime';
 
 const ButtonComponent = /*#__PURE__*/forwardRef(({
   children,
-  sx: sxProp = defaultSxProp,
   ...props
 }, forwardedRef) => {
-  const {
-    block,
-    size = 'medium',
-    leadingVisual,
-    trailingVisual,
-    trailingAction
-  } = props;
-  let sxStyles = sxProp;
-  const style = {};
-  if (sxProp !== null && Object.keys(sxProp).length > 0) {
-    sxStyles = generateCustomSxProp({
-      block,
-      size,
-      leadingVisual,
-      trailingVisual,
-      trailingAction
-    }, sxProp);
-
-    // @ts-ignore sxProp can have color attribute
-    const {
-      color
-    } = sxProp;
-    if (color) style['--button-color'] = color;
-  }
   return /*#__PURE__*/jsx(ButtonBase, {
     ref: forwardedRef,
     as: "button",
-    sx: sxStyles,
-    style: style,
     type: "button",
     ...props,
     children: children
   });
 });
-
-// This function is used to generate a custom cssSelector for the sxProp
-
-// The usual sx prop can like this:
-// sx={{
-//   [`@media (max-width: 768px)`]: {
-//     '& > ul': {
-//       backgroundColor: 'deeppink',
-//     },
-//     '&:hover': {
-//       backgroundColor: 'yellow',
-//     },
-//   },
-//  '&:hover': {
-//     backgroundColor: 'yellow',
-//   },
-//  '&': {
-//  width : 320px
-// }
-// }}
-//*
-/* What we want for Button styles is this:
-sx={{
-//   [`@media (max-width: 768px)`]: {
-//     '&[data-attribute="something"] > ul': {
-//       backgroundColor: 'deeppink',
-//     },
-//     '&[data-attribute="something"]:hover': {
-//       backgroundColor: 'yellow',
-//     },
-//   },
-//  '&[data-attribute="something"]:hover': {
-//     backgroundColor: 'yellow',
-//   },
-//  '&[data-attribute="something"]': {
-//     width : 320px
-//  }
-// }}
-
-// We need to make sure we append the customCSSSelector to the original class selector. i.e & - > &[data-attribute="Icon"][data-size="small"]
-*/
-function generateCustomSxProp(props, providedSx) {
-  // Possible data attributes: data-size, data-block, data-no-visuals
-  const size = `[data-size="${props.size}"]`;
-  const block = props.block ? `[data-block="block"]` : '';
-  const noVisuals = props.leadingVisual || props.trailingVisual || props.trailingAction ? '' : '[data-no-visuals]';
-
-  // this is a custom selector. We need to make sure we add the data attributes to the base css class (& -> &[data-attributename="value"]])
-  const cssSelector = `&${size}${block}${noVisuals}`; // &[data-size="small"][data-block="block"][data-no-visuals]
-
-  const customSxProp = {};
-  if (!providedSx) return customSxProp;else {
-    customSxProp[cssSelector] = providedSx;
-    return customSxProp;
-  }
-}
 ButtonComponent.displayName = 'Button';
+ButtonComponent.__SLOT__ = Symbol('Button');
 
-export { ButtonComponent, generateCustomSxProp };
+export { ButtonComponent };

package/dist/Button/ButtonBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAI/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AAkCxC,QAAA,MAAM,UAAU,EAgSX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEhE,OAAO,EAAC,UAAU,EAAC,CAAA"}
+{"version":3,"file":"ButtonBase.d.ts","sourceRoot":"","sources":["../../src/Button/ButtonBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAC/F,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,SAAS,CAAA;AA0BxC,QAAA,MAAM,UAAU,EAkKV,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,WAAW,CAAC,CAAA;AAEjE,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/ButtonBase.js

@@ -1,9 +1,5 @@
 import React, { forwardRef } from 'react';
-import styled from 'styled-components';
-import sx from '../sx.js';
-import { getAlignContentSize } from './styles.js';
 import { useRefObjectAsForwardedRef } from '../hooks/useRefObjectAsForwardedRef.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
 import { ConditionalWrapper } from '../internal/components/ConditionalWrapper.js';
 import { clsx } from 'clsx';
 import classes from './ButtonBase.module.css.js';
@@ -15,10 +11,6 @@ import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 import { AriaStatus } from '../live-region/AriaStatus.js';
 import CounterLabel from '../CounterLabel/CounterLabel.js';
 
-const BoxTemporaryWorkaround = styled.span.withConfig({
-  displayName: "ButtonBase__BoxTemporaryWorkaround",
-  componentId: "sc-107cqdy-0"
-})(["", ";"], sx);
 const renderModuleVisual = (Visual, loading, visualName, counterLabel) => /*#__PURE__*/jsx("span", {
   "data-component": visualName,
   className: clsx(!counterLabel && classes.Visual, loading ? classes.LoadingSpinner : classes.VisualWrap),
@@ -30,7 +22,6 @@ renderModuleVisual.displayName = "renderModuleVisual";
 const ButtonBase = /*#__PURE__*/forwardRef(({
   children,
   as: Component = 'button',
-  sx: sxProp = defaultSxProp,
   ...props
 }, forwardedRef) => {
   const {
@@ -74,82 +65,6 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
       }
     }, [innerRef]);
   }
-  if (sxProp !== defaultSxProp) {
-    return /*#__PURE__*/jsxs(ConditionalWrapper
-    // If anything is passed to `loading`, we need the wrapper:
-    // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
-    // when `loading` is `false`.
-    // Then, the component re-renders in a way that the button will lose focus when switching between loading states.
-    , {
-      if: typeof loading !== 'undefined',
-      className: block ? classes.ConditionalWrapper : undefined,
-      "data-loading-wrapper": true,
-      children: [/*#__PURE__*/jsx(BoxTemporaryWorkaround, {
-        as: Component,
-        sx: sxProp,
-        "aria-disabled": loading ? true : undefined,
-        ...rest,
-        ref: innerRef,
-        className: clsx(classes.ButtonBase, className),
-        "data-block": block ? 'block' : null,
-        "data-inactive": inactive ? true : undefined,
-        "data-loading": Boolean(loading),
-        "data-no-visuals": !LeadingVisual && !TrailingVisual && !TrailingAction ? true : undefined,
-        "data-size": size,
-        "data-variant": variant,
-        "data-label-wrap": labelWrap,
-        "data-has-count": count !== undefined ? true : undefined,
-        "aria-describedby": [loadingAnnouncementID, ariaDescribedBy].filter(descriptionID => Boolean(descriptionID)).join(' ')
-        // aria-labelledby is needed because the accessible name becomes unset when the button is in a loading state.
-        // We only set it when the button is in a loading state because it will supersede the aria-label when the screen
-        // reader announces the button name.
-        ,
-        "aria-labelledby": loading ? [`${uuid}-label`, ariaLabelledBy].filter(labelID => Boolean(labelID)).join(' ') : ariaLabelledBy,
-        id: id,
-        onClick: loading ? undefined : onClick,
-        children: Icon ? loading ? /*#__PURE__*/jsx(Spinner, {
-          size: "small"
-        }) : isElement(Icon) ? Icon : /*#__PURE__*/jsx(Icon, {}) : /*#__PURE__*/jsxs(Fragment, {
-          children: [/*#__PURE__*/jsxs(BoxTemporaryWorkaround, {
-            "data-component": "buttonContent",
-            sx: getAlignContentSize(alignContent),
-            className: classes.ButtonContent,
-            children: [
-            /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
-             render a loading spiner in place of the button content. */
-            loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false),
-            /* Render a leading visual unless the button is in a loading state.
-              Then replace the leading visual with a loading spinner. */
-            LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/jsx("span", {
-              "data-component": "text",
-              className: classes.Label,
-              id: loading ? `${uuid}-label` : undefined,
-              children: children
-            }),
-            /* If there is a count, render a counter label unless there is a trailing visual.
-             Then render the counter label as a trailing visual.
-             Replace the counter label or the trailing visual with a loading spinner if:
-             - the button is in a loading state
-             - there is no leading visual to replace with a loading spinner
-            */
-            count !== undefined && !TrailingVisual ? renderModuleVisual(() => /*#__PURE__*/jsx(CounterLabel, {
-              className: classes.CounterLabel,
-              "data-component": "ButtonCounter",
-              children: count
-            }), Boolean(loading) && !LeadingVisual, 'trailingVisual', true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null]
-          }),
-          /* If there is a trailing action, render it unless the button is in a loading state
-           and there is no leading or trailing visual to replace with a loading spinner. */
-          TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction', false)]
-        })
-      }), loading && /*#__PURE__*/jsx(VisuallyHidden, {
-        children: /*#__PURE__*/jsx(AriaStatus, {
-          id: loadingAnnouncementID,
-          children: loadingAnnouncement
-        })
-      })]
-    });
-  }
   return /*#__PURE__*/jsxs(ConditionalWrapper
   // If anything is passed to `loading`, we need the wrapper:
   // If we just checked for `loading` as a boolean, the wrapper wouldn't be rendered
@@ -192,10 +107,10 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
           className: classes.ButtonContent,
           children: [
           /* If there are no leading/trailing visuals/actions to replace with a loading spinner,
-             render a loading spiner in place of the button content. */
+               render a loading spiner in place of the button content. */
           loading && !LeadingVisual && !TrailingVisual && !TrailingAction && count === undefined && renderModuleVisual(Spinner, loading, 'loadingSpinner', false),
           /* Render a leading visual unless the button is in a loading state.
-             Then replace the leading visual with a loading spinner. */
+               Then replace the leading visual with a loading spinner. */
           LeadingVisual && renderModuleVisual(LeadingVisual, Boolean(loading), 'leadingVisual', false), children && /*#__PURE__*/jsx("span", {
             "data-component": "text",
             className: classes.Label,
@@ -203,11 +118,11 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
             children: children
           }),
           /* If there is a count, render a counter label unless there is a trailing visual.
-             Then render the counter label as a trailing visual.
-             Replace the counter label or the trailing visual with a loading spinner if:
-             - the button is in a loading state
-             - there is no leading visual to replace with a loading spinner
-          */
+               Then render the counter label as a trailing visual.
+               Replace the counter label or the trailing visual with a loading spinner if:
+               - the button is in a loading state
+               - there is no leading visual to replace with a loading spinner
+            */
           count !== undefined && !TrailingVisual ? renderModuleVisual(() => /*#__PURE__*/jsx(CounterLabel, {
             className: classes.CounterLabel,
             "data-component": "ButtonCounter",
@@ -215,7 +130,7 @@ const ButtonBase = /*#__PURE__*/forwardRef(({
           }), Boolean(loading) && !LeadingVisual, 'trailingVisual', true) : TrailingVisual ? renderModuleVisual(TrailingVisual, Boolean(loading) && !LeadingVisual, 'trailingVisual', false) : null]
         }),
         /* If there is a trailing action, render it unless the button is in a loading state
-           and there is no leading or trailing visual to replace with a loading spinner. */
+             and there is no leading or trailing visual to replace with a loading spinner. */
         TrailingAction && renderModuleVisual(TrailingAction, Boolean(loading) && !LeadingVisual && !TrailingVisual, 'trailingAction', false)]
       })
     }), loading && /*#__PURE__*/jsx(VisuallyHidden, {

package/dist/Button/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/Button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAS/F,QAAA,MAAM,UAAU,EA0EX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,eAAe,CAAC,CAAA;AAEpE,OAAO,EAAC,UAAU,EAAC,CAAA"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/Button/IconButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,SAAS,CAAA;AAC5C,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAO/F,QAAA,MAAM,UAAU,EA+DX,8BAA8B,CAAC,QAAQ,GAAG,GAAG,EAAE,eAAe,CAAC,CAAA;AAEpE,OAAO,EAAC,UAAU,EAAC,CAAA"}

package/dist/Button/IconButton.js

@@ -1,7 +1,5 @@
 import React, { forwardRef } from 'react';
 import { ButtonBase } from './ButtonBase.js';
-import { defaultSxProp } from '../utils/defaultSxProp.js';
-import { generateCustomSxProp } from './Button.js';
 import { TooltipContext, Tooltip } from '../TooltipV2/Tooltip.js';
 import { TooltipContext as TooltipContext$1 } from '../Tooltip/Tooltip.js';
 import classes from './ButtonBase.module.css.js';
@@ -9,7 +7,6 @@ import { clsx } from 'clsx';
 import { jsx } from 'react/jsx-runtime';
 
 const IconButton = /*#__PURE__*/forwardRef(({
-  sx: sxProp = defaultSxProp,
   icon: Icon,
   'aria-label': ariaLabel,
   description,
@@ -22,17 +19,6 @@ const IconButton = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, forwardedRef) => {
-  let sxStyles = sxProp;
-  // grap the button props that have associated data attributes in the styles
-  const {
-    size = 'medium'
-  } = props;
-  if (sxProp !== null && Object.keys(sxProp).length > 0) {
-    sxStyles = generateCustomSxProp({
-      size
-    }, sxProp);
-  }
-
   // If the icon button is already wrapped in a tooltip, do not add one.
   const {
     tooltipId
@@ -48,7 +34,6 @@ const IconButton = /*#__PURE__*/forwardRef(({
       icon: Icon,
       className: clsx(className, classes.IconButton),
       "data-component": "IconButton",
-      sx: sxStyles,
       type: "button",
       "aria-label": ariaLabel,
       disabled: disabled,
@@ -68,7 +53,6 @@ const IconButton = /*#__PURE__*/forwardRef(({
         icon: Icon,
         className: clsx(className, classes.IconButton),
         "data-component": "IconButton",
-        sx: sxStyles,
         type: "button",
         "aria-keyshortcuts": keyshortcuts !== null && keyshortcuts !== void 0 ? keyshortcuts : undefined
         // If description is provided, we will use the tooltip to describe the button, so we need to keep the aria-label to label the button.