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

package/lib/DataTable/useTable.js

@@ -5,7 +5,7 @@ var React = require('react');
 var sorting = require('./sorting.js');
 
 function useTable(t0) {
-  const $ = reactCompilerRuntime.c(26);
+  const $ = reactCompilerRuntime.c(20);
   const {
     columns,
     data,
@@ -43,12 +43,13 @@ function useTable(t0) {
       }
     }
   }
-  let headers;
-  let sortBy;
-  if ($[4] !== columns || $[5] !== data || $[6] !== prevData || $[7] !== sortByColumn) {
-    let t2;
-    if ($[10] !== sortByColumn) {
-      t2 = column_1 => {
+  let t2;
+  let t3;
+  let t4;
+  if ($[4] !== columns || $[5] !== data || $[6] !== getRowId || $[7] !== prevData || $[8] !== rowOrder || $[9] !== sortByColumn) {
+    let t5;
+    if ($[13] !== sortByColumn) {
+      t5 = column_1 => {
         var _column_1$id;
         const id_0 = (_column_1$id = column_1.id) !== null && _column_1$id !== void 0 ? _column_1$id : column_1.field;
         if (id_0 === undefined) {
@@ -69,12 +70,12 @@ function useTable(t0) {
           }
         };
       };
-      $[10] = sortByColumn;
-      $[11] = t2;
+      $[13] = sortByColumn;
+      $[14] = t5;
     } else {
-      t2 = $[11];
+      t5 = $[14];
     }
-    headers = columns.map(t2);
+    const headers = columns.map(t5);
     if (data !== prevData) {
       setPrevData(data);
       setRowOrder(data);
@@ -82,7 +83,7 @@ function useTable(t0) {
         sortRows(sortByColumn);
       }
     }
-    sortBy = function sortBy(header) {
+    const sortBy = function sortBy(header) {
       const sortState = {
         id: header.id,
         direction: sortByColumn && sortByColumn.id === header.id ? sorting.transition(sortByColumn.direction) : sorting.DEFAULT_SORT_DIRECTION
@@ -126,86 +127,66 @@ function useTable(t0) {
         return 0;
       }));
     }
-    $[4] = columns;
-    $[5] = data;
-    $[6] = prevData;
-    $[7] = sortByColumn;
-    $[8] = headers;
-    $[9] = sortBy;
-  } else {
-    headers = $[8];
-    sortBy = $[9];
-  }
-  let t2;
-  if ($[12] !== getRowId || $[13] !== headers || $[14] !== rowOrder) {
-    let t3;
-    if ($[16] !== getRowId || $[17] !== headers) {
-      t3 = row => {
-        const rowId = getRowId(row);
-        return {
-          id: `${rowId}`,
-          getValue() {
-            return row;
-          },
-          getCells() {
-            return headers.map(header_2 => {
-              var _header_2$column$rowH;
-              return {
-                id: `${rowId}:${header_2.id}`,
-                column: header_2.column,
-                rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
-                getValue() {
-                  if (header_2.column.field !== undefined) {
-                    return get(row, header_2.column.field);
-                  }
-                  throw new Error(`Unable to get value for column header ${header_2.id}`);
+    t2 = headers;
+    t3 = rowOrder.map(row => {
+      const rowId = getRowId(row);
+      return {
+        id: `${rowId}`,
+        getValue() {
+          return row;
+        },
+        getCells() {
+          return headers.map(header_2 => {
+            var _header_2$column$rowH;
+            return {
+              id: `${rowId}:${header_2.id}`,
+              column: header_2.column,
+              rowHeader: (_header_2$column$rowH = header_2.column.rowHeader) !== null && _header_2$column$rowH !== void 0 ? _header_2$column$rowH : false,
+              getValue() {
+                if (header_2.column.field !== undefined) {
+                  return get(row, header_2.column.field);
                 }
-              };
-            });
-          }
-        };
+                throw new Error(`Unable to get value for column header ${header_2.id}`);
+              }
+            };
+          });
+        }
       };
-      $[16] = getRowId;
-      $[17] = headers;
-      $[18] = t3;
-    } else {
-      t3 = $[18];
-    }
-    t2 = rowOrder.map(t3);
-    $[12] = getRowId;
-    $[13] = headers;
-    $[14] = rowOrder;
-    $[15] = t2;
-  } else {
-    t2 = $[15];
-  }
-  let t3;
-  if ($[19] !== sortBy) {
-    t3 = {
+    });
+    t4 = {
       sortBy
     };
-    $[19] = sortBy;
-    $[20] = t3;
+    $[4] = columns;
+    $[5] = data;
+    $[6] = getRowId;
+    $[7] = prevData;
+    $[8] = rowOrder;
+    $[9] = sortByColumn;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
   } else {
-    t3 = $[20];
+    t2 = $[10];
+    t3 = $[11];
+    t4 = $[12];
   }
-  let t4;
-  if ($[21] !== gridTemplateColumns || $[22] !== headers || $[23] !== t2 || $[24] !== t3) {
-    t4 = {
-      headers,
-      rows: t2,
-      actions: t3,
+  let t5;
+  if ($[15] !== gridTemplateColumns || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = {
+      headers: t2,
+      rows: t3,
+      actions: t4,
       gridTemplateColumns
     };
-    $[21] = gridTemplateColumns;
-    $[22] = headers;
-    $[23] = t2;
-    $[24] = t3;
-    $[25] = t4;
+    $[15] = gridTemplateColumns;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
   } else {
-    t4 = $[25];
+    t5 = $[19];
   }
-  return t4;
+  return t5;
 }
 function getInitialSortState(columns, initialSortColumn, initialSortDirection) {
   if (initialSortColumn !== undefined) {

package/lib/Details/Details.d.ts

@@ -1,5 +1,4 @@
 import React, { type ComponentPropsWithoutRef } from 'react';
-import type { SxProp } from '../sx';
 export type SummaryProps<As extends React.ElementType> = {
     /**
      * HTML element to render summary as.
@@ -12,9 +11,9 @@ declare namespace Summary {
     var displayName: string;
 }
 export { Summary };
-declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & SxProp & React.RefAttributes<HTMLDetailsElement>> & {
+declare const Details: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>> & {
     Summary: typeof Summary;
 };
-export type DetailsProps = ComponentPropsWithoutRef<'details'> & SxProp;
+export type DetailsProps = ComponentPropsWithoutRef<'details'>;
 export default Details;
 //# sourceMappingURL=Details.d.ts.map

package/lib/Details/Details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AAClG,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,OAAO,CAAA;AAoDjC,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;;CAEX,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,GAAG,MAAM,CAAA;AACvE,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Details.d.ts","sourceRoot":"","sources":["../../src/Details/Details.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAsB,KAAK,wBAAwB,EAAoB,MAAM,OAAO,CAAA;AAmDlG,MAAM,MAAM,YAAY,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,IAAI;IACvD;;OAEG;IACH,EAAE,CAAC,EAAE,EAAE,CAAA;IACP,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,WAAW,SAAS,EAAE,GAAG,EAAE,GAAG,SAAS,CAAC,CAAA;AAEjF,iBAAS,OAAO,CAAC,EAAE,SAAS,KAAK,CAAC,WAAW,EAAE,EAAC,EAAE,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAC,EAAE,YAAY,CAAC,EAAE,CAAC,qBAOxF;kBAPQ,OAAO;;;AAUhB,OAAO,EAAC,OAAO,EAAC,CAAA;AAEhB,QAAA,MAAM,OAAO;;CAEX,CAAA;AAEF,MAAM,MAAM,YAAY,GAAG,wBAAwB,CAAC,SAAS,CAAC,CAAA;AAC9D,eAAe,OAAO,CAAA"}

package/lib/Details/Details.js

@@ -7,7 +7,6 @@ var React = require('react');
 var clsx = require('clsx');
 var Details_module = require('./Details.module.css.js');
 var useMergedRefs = require('../internal/hooks/useMergedRefs.js');
-var BoxWithFallback = require('../internal/components/BoxWithFallback.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -92,8 +91,7 @@ const Root = /*#__PURE__*/React__default.default.forwardRef((t0, forwardRef) =>
   }
   let t5;
   if ($[10] !== children || $[11] !== ref || $[12] !== rest || $[13] !== t3 || $[14] !== t4) {
-    t5 = /*#__PURE__*/jsxRuntime.jsxs(BoxWithFallback.BoxWithFallback, {
-      as: "details",
+    t5 = /*#__PURE__*/jsxRuntime.jsxs("details", {
       className: t3,
       ...rest,
       ref: ref,

package/lib/FeatureFlags/FeatureFlags.js

@@ -14,31 +14,29 @@ function FeatureFlags(t0) {
   } = t0;
   const parentFeatureFlags = React.useContext(FeatureFlagContext.FeatureFlagContext);
   let t1;
-  let t2;
   if ($[0] !== flags || $[1] !== parentFeatureFlags) {
-    t2 = FeatureFlagScope.FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.FeatureFlagScope.create(flags));
+    t1 = FeatureFlagScope.FeatureFlagScope.merge(parentFeatureFlags, FeatureFlagScope.FeatureFlagScope.create(flags));
     $[0] = flags;
     $[1] = parentFeatureFlags;
-    $[2] = t2;
+    $[2] = t1;
   } else {
-    t2 = $[2];
+    t1 = $[2];
   }
-  const scope = t2;
-  t1 = scope;
-  const value = t1;
-  let t3;
+  const scope = t1;
+  const value = scope;
+  let t2;
   if ($[3] !== children || $[4] !== value) {
-    t3 = /*#__PURE__*/jsxRuntime.jsx(FeatureFlagContext.FeatureFlagContext.Provider, {
+    t2 = /*#__PURE__*/jsxRuntime.jsx(FeatureFlagContext.FeatureFlagContext.Provider, {
       value: value,
       children: children
     });
     $[3] = children;
     $[4] = value;
-    $[5] = t3;
+    $[5] = t2;
   } else {
-    t3 = $[5];
+    t2 = $[5];
   }
-  return t3;
+  return t2;
 }
 
 exports.FeatureFlags = FeatureFlags;

package/lib/FilteredActionList/useAnnouncements.js

@@ -34,7 +34,7 @@ const getItemWithActiveDescendant = (listRef, items) => {
 //TODO remove this when we remove usingRemoveActiveDescendant
 
 const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) => {
-  const $ = reactCompilerRuntime.c(39);
+  const $ = reactCompilerRuntime.c(33);
   const enabled = t0 === undefined ? true : t0;
   const loading = t1 === undefined ? false : t1;
   const usingRemoveActiveDescendant = useFeatureFlag.useFeatureFlag("primer_react_select_panel_remove_active_descendant");
@@ -70,7 +70,8 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
   }
   const announce = t4;
   let t5;
-  if ($[5] !== announce || $[6] !== inputRef.current || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
+  let t6;
+  if ($[5] !== announce || $[6] !== inputRef || $[7] !== items || $[8] !== listContainerRef || $[9] !== selectedItems || $[10] !== usingRemoveActiveDescendant) {
     t5 = function announceInitialFocus() {
       const focusHandler = () => {
         if (usingRemoveActiveDescendant) {
@@ -102,33 +103,23 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
       inputElement === null || inputElement === void 0 ? void 0 : inputElement.addEventListener("focus", focusHandler);
       return () => inputElement === null || inputElement === void 0 ? void 0 : inputElement.removeEventListener("focus", focusHandler);
     };
+    t6 = [listContainerRef, inputRef, items, liveRegion, announce, usingRemoveActiveDescendant, selectedItems];
     $[5] = announce;
-    $[6] = inputRef.current;
+    $[6] = inputRef;
     $[7] = items;
     $[8] = listContainerRef;
     $[9] = selectedItems;
     $[10] = usingRemoveActiveDescendant;
     $[11] = t5;
+    $[12] = t6;
   } else {
     t5 = $[11];
-  }
-  let t6;
-  if ($[12] !== announce || $[13] !== inputRef || $[14] !== items || $[15] !== listContainerRef || $[16] !== selectedItems || $[17] !== usingRemoveActiveDescendant) {
-    t6 = [listContainerRef, inputRef, items, liveRegion, announce, usingRemoveActiveDescendant, selectedItems];
-    $[12] = announce;
-    $[13] = inputRef;
-    $[14] = items;
-    $[15] = listContainerRef;
-    $[16] = selectedItems;
-    $[17] = usingRemoveActiveDescendant;
-    $[18] = t6;
-  } else {
-    t6 = $[18];
+    t6 = $[12];
   }
   React.useEffect(t5, t6);
   const isFirstRender = useFirstRender();
   let t7;
-  if ($[19] !== announce || $[20] !== isFirstRender || $[21] !== items || $[22] !== listContainerRef || $[23] !== loading || $[24] !== (message === null || message === void 0 ? void 0 : message.description) || $[25] !== (message === null || message === void 0 ? void 0 : message.title) || $[26] !== selectedItems || $[27] !== usingRemoveActiveDescendant) {
+  if ($[13] !== announce || $[14] !== isFirstRender || $[15] !== items || $[16] !== listContainerRef || $[17] !== loading || $[18] !== (message === null || message === void 0 ? void 0 : message.description) || $[19] !== (message === null || message === void 0 ? void 0 : message.title) || $[20] !== selectedItems || $[21] !== usingRemoveActiveDescendant) {
     t7 = function announceListUpdates() {
       if (isFirstRender) {
         return;
@@ -165,36 +156,36 @@ const useAnnouncements = (items, listContainerRef, inputRef, t0, t1, message) =>
         });
       }
     };
-    $[19] = announce;
-    $[20] = isFirstRender;
-    $[21] = items;
-    $[22] = listContainerRef;
-    $[23] = loading;
-    $[24] = message === null || message === void 0 ? void 0 : message.description;
-    $[25] = message === null || message === void 0 ? void 0 : message.title;
-    $[26] = selectedItems;
-    $[27] = usingRemoveActiveDescendant;
-    $[28] = t7;
+    $[13] = announce;
+    $[14] = isFirstRender;
+    $[15] = items;
+    $[16] = listContainerRef;
+    $[17] = loading;
+    $[18] = message === null || message === void 0 ? void 0 : message.description;
+    $[19] = message === null || message === void 0 ? void 0 : message.title;
+    $[20] = selectedItems;
+    $[21] = usingRemoveActiveDescendant;
+    $[22] = t7;
   } else {
-    t7 = $[28];
+    t7 = $[22];
   }
   const t8 = message === null || message === void 0 ? void 0 : message.title;
   const t9 = message === null || message === void 0 ? void 0 : message.description;
   let t10;
-  if ($[29] !== announce || $[30] !== isFirstRender || $[31] !== items || $[32] !== listContainerRef || $[33] !== loading || $[34] !== selectedItems || $[35] !== t8 || $[36] !== t9 || $[37] !== usingRemoveActiveDescendant) {
+  if ($[23] !== announce || $[24] !== isFirstRender || $[25] !== items || $[26] !== listContainerRef || $[27] !== loading || $[28] !== selectedItems || $[29] !== t8 || $[30] !== t9 || $[31] !== usingRemoveActiveDescendant) {
     t10 = [announce, isFirstRender, items, listContainerRef, liveRegion, usingRemoveActiveDescendant, t8, t9, loading, selectedItems];
-    $[29] = announce;
-    $[30] = isFirstRender;
-    $[31] = items;
-    $[32] = listContainerRef;
-    $[33] = loading;
-    $[34] = selectedItems;
-    $[35] = t8;
-    $[36] = t9;
-    $[37] = usingRemoveActiveDescendant;
-    $[38] = t10;
+    $[23] = announce;
+    $[24] = isFirstRender;
+    $[25] = items;
+    $[26] = listContainerRef;
+    $[27] = loading;
+    $[28] = selectedItems;
+    $[29] = t8;
+    $[30] = t9;
+    $[31] = usingRemoveActiveDescendant;
+    $[32] = t10;
   } else {
-    t10 = $[38];
+    t10 = $[32];
   }
   React.useEffect(t7, t10);
 };

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) => {