@primer/react 38.0.0-rc.195178541 → 38.0.0-rc.2

package/lib/Header/Header.js

@@ -4,27 +4,24 @@ var reactCompilerRuntime = require('react-compiler-runtime');
 var React = require('react');
 var clsx = require('clsx');
 var Header_module = require('./Header.module.css.js');
-var defaultSxProp = require('../utils/defaultSxProp.js');
+var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Box = require('../Box/Box.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const Header = /*#__PURE__*/React__default.default.forwardRef(function Header(t0, forwardRef) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(13);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
-      as: t2,
+      as: t1,
       ...rest
     } = t0);
     $[0] = t0;
@@ -32,86 +29,52 @@ const Header = /*#__PURE__*/React__default.default.forwardRef(function Header(t0
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
-    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
-    t2 = $[5];
-  }
-  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
-  const as = t2 === undefined ? "header" : t2;
-  if (sxProp !== defaultSxProp.defaultSxProp || as !== "header") {
-    let t3;
-    if ($[6] !== className) {
-      t3 = clsx.clsx(className, Header_module.Header);
-      $[6] = className;
-      $[7] = t3;
-    } else {
-      t3 = $[7];
-    }
-    let t4;
-    if ($[8] !== as || $[9] !== children || $[10] !== forwardRef || $[11] !== rest || $[12] !== sxProp || $[13] !== t3) {
-      t4 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: as,
-        sx: sxProp,
-        ref: forwardRef,
-        className: t3,
-        ...rest,
-        children: children
-      });
-      $[8] = as;
-      $[9] = children;
-      $[10] = forwardRef;
-      $[11] = rest;
-      $[12] = sxProp;
-      $[13] = t3;
-      $[14] = t4;
-    } else {
-      t4 = $[14];
-    }
-    return t4;
   }
-  let t3;
-  if ($[15] !== className) {
-    t3 = clsx.clsx(className, Header_module.Header);
-    $[15] = className;
-    $[16] = t3;
+  const as = t1 === undefined ? "header" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx.clsx(className, Header_module.Header);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t3 = $[16];
+    t2 = $[6];
   }
-  let t4;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsx("header", {
+  let t3;
+  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
+      as: as,
       ref: forwardRef,
-      className: t3,
+      className: t2,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = rest;
-    $[20] = t3;
-    $[21] = t4;
+    $[7] = as;
+    $[8] = children;
+    $[9] = forwardRef;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[12];
   }
-  return t4;
+  return t3;
 });
 Header.displayName = 'Header';
 const HeaderItem = /*#__PURE__*/React__default.default.forwardRef(function HeaderItem(t0, forwardRef) {
-  const $ = reactCompilerRuntime.c(23);
+  const $ = reactCompilerRuntime.c(13);
   let children;
   let className;
   let full;
   let rest;
-  let t1;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
       full,
       ...rest
     } = t0);
@@ -120,89 +83,52 @@ const HeaderItem = /*#__PURE__*/React__default.default.forwardRef(function Heade
     $[2] = className;
     $[3] = full;
     $[4] = rest;
-    $[5] = t1;
   } else {
     children = $[1];
     className = $[2];
     full = $[3];
     rest = $[4];
-    t1 = $[5];
-  }
-  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
-  if (sxProp !== defaultSxProp.defaultSxProp) {
-    let t2;
-    if ($[6] !== className) {
-      t2 = clsx.clsx(className, Header_module.HeaderItem);
-      $[6] = className;
-      $[7] = t2;
-    } else {
-      t2 = $[7];
-    }
-    let t3;
-    if ($[8] !== children || $[9] !== forwardRef || $[10] !== full || $[11] !== rest || $[12] !== sxProp || $[13] !== t2) {
-      t3 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: "div",
-        sx: sxProp,
-        ref: forwardRef,
-        className: t2,
-        "data-full": full,
-        ...rest,
-        children: children
-      });
-      $[8] = children;
-      $[9] = forwardRef;
-      $[10] = full;
-      $[11] = rest;
-      $[12] = sxProp;
-      $[13] = t2;
-      $[14] = t3;
-    } else {
-      t3 = $[14];
-    }
-    return t3;
   }
-  let t2;
-  if ($[15] !== className) {
-    t2 = clsx.clsx(className, Header_module.HeaderItem);
-    $[15] = className;
-    $[16] = t2;
+  let t1;
+  if ($[5] !== className) {
+    t1 = clsx.clsx(className, Header_module.HeaderItem);
+    $[5] = className;
+    $[6] = t1;
   } else {
-    t2 = $[16];
+    t1 = $[6];
   }
-  let t3;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== full || $[20] !== rest || $[21] !== t2) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx("div", {
+  let t2;
+  if ($[7] !== children || $[8] !== forwardRef || $[9] !== full || $[10] !== rest || $[11] !== t1) {
+    t2 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
       ref: forwardRef,
-      className: t2,
+      className: t1,
       "data-full": full,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = full;
-    $[20] = rest;
-    $[21] = t2;
-    $[22] = t3;
+    $[7] = children;
+    $[8] = forwardRef;
+    $[9] = full;
+    $[10] = rest;
+    $[11] = t1;
+    $[12] = t2;
   } else {
-    t3 = $[22];
+    t2 = $[12];
   }
-  return t3;
+  return t2;
 });
 HeaderItem.displayName = 'Header.Item';
 const HeaderLink = /*#__PURE__*/React__default.default.forwardRef(function HeaderLink(t0, forwardRef) {
-  const $ = reactCompilerRuntime.c(22);
+  const $ = reactCompilerRuntime.c(13);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   if ($[0] !== t0) {
     ({
       children,
       className,
-      sx: t1,
-      as: t2,
+      as: t1,
       ...rest
     } = t0);
     $[0] = t0;
@@ -210,72 +136,40 @@ const HeaderLink = /*#__PURE__*/React__default.default.forwardRef(function Heade
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
-    $[5] = t2;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
-    t2 = $[5];
-  }
-  const sxProp = t1 === undefined ? defaultSxProp.defaultSxProp : t1;
-  const as = t2 === undefined ? "a" : t2;
-  if (sxProp !== defaultSxProp.defaultSxProp || as !== "a") {
-    let t3;
-    if ($[6] !== className) {
-      t3 = clsx.clsx(className, Header_module.HeaderLink);
-      $[6] = className;
-      $[7] = t3;
-    } else {
-      t3 = $[7];
-    }
-    let t4;
-    if ($[8] !== as || $[9] !== children || $[10] !== forwardRef || $[11] !== rest || $[12] !== sxProp || $[13] !== t3) {
-      t4 = /*#__PURE__*/jsxRuntime.jsx(Box, {
-        as: as,
-        sx: sxProp,
-        ref: forwardRef,
-        className: t3,
-        ...rest,
-        children: children
-      });
-      $[8] = as;
-      $[9] = children;
-      $[10] = forwardRef;
-      $[11] = rest;
-      $[12] = sxProp;
-      $[13] = t3;
-      $[14] = t4;
-    } else {
-      t4 = $[14];
-    }
-    return t4;
   }
-  let t3;
-  if ($[15] !== className) {
-    t3 = clsx.clsx(className, Header_module.HeaderLink);
-    $[15] = className;
-    $[16] = t3;
+  const as = t1 === undefined ? "a" : t1;
+  let t2;
+  if ($[5] !== className) {
+    t2 = clsx.clsx(className, Header_module.HeaderLink);
+    $[5] = className;
+    $[6] = t2;
   } else {
-    t3 = $[16];
+    t2 = $[6];
   }
-  let t4;
-  if ($[17] !== children || $[18] !== forwardRef || $[19] !== rest || $[20] !== t3) {
-    t4 = /*#__PURE__*/jsxRuntime.jsx("a", {
+  let t3;
+  if ($[7] !== as || $[8] !== children || $[9] !== forwardRef || $[10] !== rest || $[11] !== t2) {
+    t3 = /*#__PURE__*/jsxRuntime.jsx(BoxWithFallback.BoxWithFallback, {
+      as: as,
       ref: forwardRef,
-      className: t3,
+      className: t2,
       ...rest,
       children: children
     });
-    $[17] = children;
-    $[18] = forwardRef;
-    $[19] = rest;
-    $[20] = t3;
-    $[21] = t4;
+    $[7] = as;
+    $[8] = children;
+    $[9] = forwardRef;
+    $[10] = rest;
+    $[11] = t2;
+    $[12] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[12];
   }
-  return t4;
+  return t3;
 });
 HeaderLink.displayName = 'Header.Link';
 var Header$1 = Object.assign(Header, {

package/lib/InlineMessage/InlineMessage.d.ts

@@ -11,6 +11,6 @@ export type InlineMessageProps = React.ComponentPropsWithoutRef<'div'> & SxProp
      */
     variant: MessageVariant;
 };
-export declare function InlineMessage({ children, className, size, variant, sx: sxProp, ...rest }: InlineMessageProps): React.JSX.Element;
+export declare function InlineMessage({ children, className, size, variant, ...rest }: InlineMessageProps): React.JSX.Element;
 export {};
 //# sourceMappingURL=InlineMessage.d.ts.map

package/lib/InlineMessage/InlineMessage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GACpE,MAAM,GAAG;IACP;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;CACxB,CAAA;AAuBH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,SAAS,EACT,IAAe,EACf,OAAO,EACP,EAAE,EAAE,MAAsB,EAC1B,GAAG,IAAI,EACR,EAAE,kBAAkB,qBAuBpB"}
+{"version":3,"file":"InlineMessage.d.ts","sourceRoot":"","sources":["../../src/InlineMessage/InlineMessage.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAEjC,KAAK,cAAc,GAAG,UAAU,GAAG,SAAS,GAAG,aAAa,GAAG,SAAS,CAAA;AAExE,MAAM,MAAM,kBAAkB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GACpE,MAAM,GAAG;IACP;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IAEzB;;OAEG;IACH,OAAO,EAAE,cAAc,CAAA;CACxB,CAAA;AAuBH,wBAAgB,aAAa,CAAC,EAAC,QAAQ,EAAE,SAAS,EAAE,IAAe,EAAE,OAAO,EAAE,GAAG,IAAI,EAAC,EAAE,kBAAkB,qBAczG"}

package/lib/InlineMessage/InlineMessage.js

@@ -4,9 +4,8 @@ var reactCompilerRuntime = require('react-compiler-runtime');
 var octiconsReact = require('@primer/octicons-react');
 var clsx = require('clsx');
 var InlineMessage_module = require('./InlineMessage.module.css.js');
-var defaultSxProp = require('../utils/defaultSxProp.js');
+var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
-var Box = require('../Box/Box.js');
 
 const variantToIcon = variant => {
   const icons = {
@@ -47,12 +46,11 @@ const variantToSmallIcon = variant => {
   return icons[variant];
 };
 function InlineMessage(t0) {
-  const $ = reactCompilerRuntime.c(29);
+  const $ = reactCompilerRuntime.c(18);
   let children;
   let className;
   let rest;
   let t1;
-  let t2;
   let variant;
   if ($[0] !== t0) {
     ({
@@ -60,7 +58,6 @@ function InlineMessage(t0) {
       className,
       size: t1,
       variant,
-      sx: t2,
       ...rest
     } = t0);
     $[0] = t0;
@@ -68,88 +65,53 @@ function InlineMessage(t0) {
     $[2] = className;
     $[3] = rest;
     $[4] = t1;
-    $[5] = t2;
-    $[6] = variant;
+    $[5] = variant;
   } else {
     children = $[1];
     className = $[2];
     rest = $[3];
     t1 = $[4];
-    t2 = $[5];
-    variant = $[6];
+    variant = $[5];
   }
   const size = t1 === undefined ? "medium" : t1;
-  const sxProp = t2 === undefined ? defaultSxProp.defaultSxProp : t2;
-  let t3;
-  if ($[7] !== size || $[8] !== variant) {
-    t3 = size === "small" ? variantToSmallIcon(variant) : variantToIcon(variant);
-    $[7] = size;
-    $[8] = variant;
-    $[9] = t3;
+  let t2;
+  if ($[6] !== size || $[7] !== variant) {
+    t2 = size === "small" ? variantToSmallIcon(variant) : variantToIcon(variant);
+    $[6] = size;
+    $[7] = variant;
+    $[8] = t2;
   } else {
-    t3 = $[9];
-  }
-  const icon = t3;
-  if (sxProp !== defaultSxProp.defaultSxProp) {
-    let t4;
-    if ($[10] !== className) {
-      t4 = clsx.clsx(className, InlineMessage_module.InlineMessage);
-      $[10] = className;
-      $[11] = t4;
-    } else {
-      t4 = $[11];
-    }
-    let t5;
-    if ($[12] !== children || $[13] !== icon || $[14] !== rest || $[15] !== size || $[16] !== sxProp || $[17] !== t4 || $[18] !== variant) {
-      t5 = /*#__PURE__*/jsxRuntime.jsxs(Box, {
-        sx: sxProp,
-        className: t4,
-        ...rest,
-        "data-size": size,
-        "data-variant": variant,
-        children: [icon, children]
-      });
-      $[12] = children;
-      $[13] = icon;
-      $[14] = rest;
-      $[15] = size;
-      $[16] = sxProp;
-      $[17] = t4;
-      $[18] = variant;
-      $[19] = t5;
-    } else {
-      t5 = $[19];
-    }
-    return t5;
+    t2 = $[8];
   }
-  let t4;
-  if ($[20] !== className) {
-    t4 = clsx.clsx(className, InlineMessage_module.InlineMessage);
-    $[20] = className;
-    $[21] = t4;
+  const icon = t2;
+  let t3;
+  if ($[9] !== className) {
+    t3 = clsx.clsx(className, InlineMessage_module.InlineMessage);
+    $[9] = className;
+    $[10] = t3;
   } else {
-    t4 = $[21];
+    t3 = $[10];
   }
-  let t5;
-  if ($[22] !== children || $[23] !== icon || $[24] !== rest || $[25] !== size || $[26] !== t4 || $[27] !== variant) {
-    t5 = /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: t4,
+  let t4;
+  if ($[11] !== children || $[12] !== icon || $[13] !== rest || $[14] !== size || $[15] !== t3 || $[16] !== variant) {
+    t4 = /*#__PURE__*/jsxRuntime.jsxs(BoxWithFallback.BoxWithFallback, {
+      className: t3,
       ...rest,
       "data-size": size,
       "data-variant": variant,
       children: [icon, children]
     });
-    $[22] = children;
-    $[23] = icon;
-    $[24] = rest;
-    $[25] = size;
-    $[26] = t4;
-    $[27] = variant;
-    $[28] = t5;
+    $[11] = children;
+    $[12] = icon;
+    $[13] = rest;
+    $[14] = size;
+    $[15] = t3;
+    $[16] = variant;
+    $[17] = t4;
   } else {
-    t5 = $[28];
+    t4 = $[17];
   }
-  return t5;
+  return t4;
 }
 
 exports.InlineMessage = InlineMessage;

package/lib/Label/Label.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,uBAAuB,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAuCvE,CAAA;AAED,QAAA,MAAM,KAAK,EAeL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}
+{"version":3,"file":"Label.d.ts","sourceRoot":"","sources":["../../src/Label/Label.tsx"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAC,uBAAuB,EAAE,MAAM,EAAC,MAAM,OAAO,CAAA;AAC1D,OAAO,KAAK,EAAC,mBAAmB,IAAI,8BAA8B,EAAC,MAAM,sBAAsB,CAAA;AAE/F,MAAM,MAAM,UAAU,GAAG;IACvB,6BAA6B;IAC7B,OAAO,CAAC,EAAE,iBAAiB,CAAA;IAC3B,sCAAsC;IACtC,IAAI,CAAC,EAAE,aAAa,CAAA;CACrB,GAAG,MAAM,CAAA;AAEV,MAAM,MAAM,iBAAiB,GACzB,SAAS,GACT,SAAS,GACT,WAAW,GACX,QAAQ,GACR,SAAS,GACT,WAAW,GACX,QAAQ,GACR,QAAQ,GACR,MAAM,GACN,UAAU,CAAA;AAEd,KAAK,aAAa,GAAG,OAAO,GAAG,OAAO,CAAA;AAEtC,eAAO,MAAM,QAAQ,EAAE,MAAM,CAAC,iBAAiB,EAAE,uBAAuB,CAuCvE,CAAA;AAED,QAAA,MAAM,KAAK,EAiBL,8BAA8B,CAAC,MAAM,EAAE,UAAU,CAAC,CAAA;AAExD,eAAe,KAAK,CAAA"}

package/lib/Label/Label.js

@@ -12,7 +12,7 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 var React__default = /*#__PURE__*/_interopDefault(React);
 
 const Label = /*#__PURE__*/React__default.default.forwardRef(function Label(t0, ref) {
-  const $ = reactCompilerRuntime.c(23);
+  const $ = reactCompilerRuntime.c(24);
   let as;
   let className;
   let rest;
@@ -82,21 +82,23 @@ const Label = /*#__PURE__*/React__default.default.forwardRef(function Label(t0,
     t3 = $[16];
   }
   let t4;
-  if ($[17] !== Component || $[18] !== rest || $[19] !== size || $[20] !== t3 || $[21] !== variant) {
+  if ($[17] !== Component || $[18] !== ref || $[19] !== rest || $[20] !== size || $[21] !== t3 || $[22] !== variant) {
     t4 = /*#__PURE__*/jsxRuntime.jsx(Component, {
       className: t3,
       "data-size": size,
       "data-variant": variant,
+      ref: ref,
       ...rest
     });
     $[17] = Component;
-    $[18] = rest;
-    $[19] = size;
-    $[20] = t3;
-    $[21] = variant;
-    $[22] = t4;
+    $[18] = ref;
+    $[19] = rest;
+    $[20] = size;
+    $[21] = t3;
+    $[22] = variant;
+    $[23] = t4;
   } else {
-    t4 = $[22];
+    t4 = $[23];
   }
   return t4;
 });

package/lib/LabelGroup/LabelGroup.d.ts

@@ -1,5 +1,4 @@
 import React from 'react';
-import type { SxProp } from '../sx';
 export type LabelGroupProps = {
     /** Customize the element type of the rendered container */
     as?: React.ElementType;
@@ -8,7 +7,7 @@ export type LabelGroupProps = {
     /** How many tokens to show. `'auto'` truncates the tokens to fit in the parent container. Passing a number will truncate after that number tokens. If this is undefined, tokens will never be truncated. */
     visibleChildCount?: 'auto' | number;
     className?: string;
-} & SxProp;
+};
 declare const LabelGroup: React.FC<React.PropsWithChildren<LabelGroupProps>>;
 export default LabelGroup;
 //# sourceMappingURL=LabelGroup.d.ts.map

package/lib/LabelGroup/LabelGroup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAGjC,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,MAAM,CAAA;AAsIV,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CAkPlE,CAAA;AAID,eAAe,UAAU,CAAA"}
+{"version":3,"file":"LabelGroup.d.ts","sourceRoot":"","sources":["../../src/LabelGroup/LabelGroup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,MAAM,MAAM,eAAe,GAAG;IAC5B,2DAA2D;IAC3D,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAA;IACtB,4LAA4L;IAC5L,aAAa,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IACpC,4MAA4M;IAC5M,iBAAiB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACnC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAkID,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,eAAe,CAAC,CA0OlE,CAAA;AAID,eAAe,UAAU,CAAA"}

package/lib/LabelGroup/LabelGroup.js

@@ -10,10 +10,8 @@ var _VisuallyHidden = require('../_VisuallyHidden.js');
 var IconButton = require('../Button/IconButton.js');
 var Button = require('../Button/Button.js');
 var ThemeProvider = require('../ThemeProvider.js');
-var sx = require('../sx.js');
 var jsxRuntime = require('react/jsx-runtime');
 var AnchoredOverlay = require('../AnchoredOverlay/AnchoredOverlay.js');
-var Box = require('../Box/Box.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -23,7 +21,7 @@ var styled__default = /*#__PURE__*/_interopDefault(styled);
 const StyledLabelGroupContainer = styled__default.default.div.withConfig({
   displayName: "LabelGroup__StyledLabelGroupContainer",
   componentId: "sc-6tqg8q-0"
-})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}", ";"], constants.get('space.1'), sx.default);
+})(["display:flex;flex-wrap:nowrap;gap:", ";line-height:1;max-width:100%;overflow:hidden;&[data-overflow='inline']{flex-wrap:wrap;}&[data-list]{padding-inline-start:0;margin-block-start:0;margin-block-end:0;list-style-type:none;}"], constants.get('space.1'));
 const ItemWrapper = styled__default.default.div.withConfig({
   displayName: "LabelGroup__ItemWrapper",
   componentId: "sc-6tqg8q-1"
@@ -116,16 +114,18 @@ const OverlayToggle = t0 => {
       focusZoneSettings: {
         disabled: true
       },
-      children: /*#__PURE__*/jsxRuntime.jsxs(Box, {
-        alignItems: "flex-start",
-        display: "flex",
-        width: overlayWidth,
-        padding: `${overlayPaddingPx}px`,
-        children: [/*#__PURE__*/jsxRuntime.jsx(Box, {
+      children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          alignItems: "flex-start",
           display: "flex",
-          flexWrap: "wrap",
-          sx: {
-            gap: 1
+          width: overlayWidth,
+          padding: `${overlayPaddingPx}px`
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          style: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "4px"
           },
           children: children
         }), /*#__PURE__*/jsxRuntime.jsx(IconButton.IconButton, {
@@ -133,7 +133,7 @@ const OverlayToggle = t0 => {
           icon: octiconsReact.XIcon,
           "aria-label": "Close",
           variant: "invisible",
-          sx: {
+          style: {
             flexShrink: 0
           }
         })]
@@ -159,7 +159,6 @@ const LabelGroup = ({
   children,
   visibleChildCount,
   overflowStyle = 'overlay',
-  sx: sxProp,
   as = 'ul',
   className
 }) => {
@@ -318,7 +317,6 @@ const LabelGroup = ({
     ref: containerRef,
     "data-overflow": overflowStyle === 'inline' && isOverflowShown ? 'inline' : undefined,
     "data-list": isList || undefined,
-    sx: sxProp,
     className: className,
     as: as,
     children: [React__default.default.Children.map(children, (child_0, index) => /*#__PURE__*/jsxRuntime.jsx(ItemWrapper
@@ -352,7 +350,6 @@ const LabelGroup = ({
   }) : /*#__PURE__*/jsxRuntime.jsx(StyledLabelGroupContainer, {
     "data-overflow": "inline",
     "data-list": isList || undefined,
-    sx: sxProp,
     as: as,
     className: className,
     children: isList ? React__default.default.Children.map(children, (child_1, index_0) => {