@primer/react 38.5.0 → 38.6.0-rc.83fd63ead

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/react
 
+## 38.6.0
+
+### Minor Changes
+
+- [#7157](https://github.com/primer/react/pull/7157) [`eddd934`](https://github.com/primer/react/commit/eddd9340cab24ebf8054c79ca855028ed511c495) Thanks [@joshblack](https://github.com/joshblack)! - Add feature flag to control whether Spinner animations are synchronized
+
+- [#7277](https://github.com/primer/react/pull/7277) [`4a1c9a5`](https://github.com/primer/react/commit/4a1c9a5e48cdce7059358cd37a6d7f3f23e20c43) Thanks [@kendallgassner](https://github.com/kendallgassner)! - Added callback prop onActiveDescendantChanged to FilteredActionList
+
 ## 38.5.0
 
 ### Minor Changes

package/dist/FeatureFlags/DefaultFeatureFlags.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAO9B,CAAA"}
+{"version":3,"file":"DefaultFeatureFlags.d.ts","sourceRoot":"","sources":["../../src/FeatureFlags/DefaultFeatureFlags.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,gBAAgB,EAAC,MAAM,oBAAoB,CAAA;AAEnD,eAAO,MAAM,mBAAmB,kBAQ9B,CAAA"}

package/dist/FeatureFlags/DefaultFeatureFlags.js

@@ -6,7 +6,8 @@ const DefaultFeatureFlags = FeatureFlagScope.create({
   primer_react_overlay_overflow: false,
   primer_react_select_panel_fullscreen_on_narrow: false,
   primer_react_select_panel_order_selected_at_top: false,
-  primer_react_select_panel_remove_active_descendant: false
+  primer_react_select_panel_remove_active_descendant: false,
+  primer_react_spinner_synchronize_animations: false
 });
 
 export { DefaultFeatureFlags };

package/dist/FilteredActionList/FilteredActionList.d.ts

@@ -40,6 +40,14 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
      *  @default 'wrap'
      */
     focusOutBehavior?: 'stop' | 'wrap';
+    /**
+     * Callback function that is called when the active descendant changes.
+     *
+     * @param newActiveDescendant - The new active descendant element.
+     * @param previousActiveDescendant - The previous active descendant element.
+     * @param directlyActivated - Whether the active descendant was directly activated (e.g., by a keyboard event).
+     */
+    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
     /**
      * Private API for use internally only. Adds the ability to switch between
      * `active-descendant` and roving tabindex.
@@ -70,7 +78,7 @@ export interface FilteredActionListProps extends Partial<Omit<GroupedListProps,
      */
     setInitialFocus?: boolean;
 }
-export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, scrollContainerRef: providedScrollContainerRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, actionListProps, focusOutBehavior, _PrivateFocusManagement, disableSelectOnHover, setInitialFocus, ...listProps }: FilteredActionListProps): JSX.Element;
+export declare function FilteredActionList({ loading, placeholderText, filterValue: externalFilterValue, loadingType, onFilterChange, onListContainerRefChanged, onInputRefChanged, items, textInputProps, inputRef: providedInputRef, scrollContainerRef: providedScrollContainerRef, groupMetadata, showItemDividers, message, messageText, className, selectionVariant, announcementsEnabled, fullScreenOnNarrow, onSelectAllChange, actionListProps, focusOutBehavior, _PrivateFocusManagement, onActiveDescendantChanged, disableSelectOnHover, setInitialFocus, ...listProps }: FilteredActionListProps): JSX.Element;
 export declare namespace FilteredActionList {
     var displayName: string;
 }

package/dist/FilteredActionList/FilteredActionList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAuB,GAAG,EAAC,MAAM,OAAO,CAAA;AACpD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,KAAK,EAAC,cAAc,EAAC,MAAM,cAAc,CAAA;AAEhD,OAAO,EAAa,KAAK,eAAe,EAAC,MAAM,eAAe,CAAA;AAC9D,OAAO,KAAK,EAAC,gBAAgB,EAAE,aAAa,EAA0B,MAAM,IAAI,CAAA;AAOhF,OAAO,KAAK,EAAC,6BAA6B,EAAC,MAAM,6BAA6B,CAAA;AAW9E,MAAM,WAAW,uBAAwB,SAAQ,OAAO,CAAC,IAAI,CAAC,gBAAgB,EAAE,MAAM,aAAa,CAAC,CAAC,EAAE,aAAa;IAClH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,WAAW,CAAC,EAAE,6BAA6B,CAAA;IAC3C,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,GAAG,IAAI,KAAK,IAAI,CAAA;IACtF,yBAAyB,CAAC,EAAE,CAAC,GAAG,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC7D,iBAAiB,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,KAAK,IAAI,CAAA;IAC3E;;OAEG;IACH,kBAAkB,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IACrD,cAAc,CAAC,EAAE,OAAO,CAAC,IAAI,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC,CAAA;IAC1D,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAA;IACnD,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,WAAW,CAAC,EAAE;QACZ,KAAK,EAAE,MAAM,CAAA;QACb,WAAW,EAAE,MAAM,CAAA;KACpB,CAAA;IACD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B,kBAAkB,CAAC,EAAE,OAAO,CAAA;IAC5B,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAA;IAC9C;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC,eAAe,CAAC,CAAA;IAC1C;;;;;;;OAOG;IACH,gBAAgB,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAClC;;;;;;;;;;;;;;;;;;OAkBG;IACH,uBAAuB,CAAC,EAAE,iBAAiB,GAAG,mBAAmB,CAAA;IACjE;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAA;CAC1B;AAED,wBAAgB,kBAAkB,CAAC,EACjC,OAAe,EACf,eAAe,EACf,WAAW,EAAE,mBAAmB,EAChC,WAAwD,EACxD,cAAc,EACd,yBAAyB,EACzB,iBAAiB,EACjB,KAAK,EACL,cAAc,EACd,QAAQ,EAAE,gBAAgB,EAC1B,kBAAkB,EAAE,0BAA0B,EAC9C,aAAa,EACb,gBAAgB,EAChB,OAAO,EACP,WAAW,EACX,SAAS,EACT,gBAAgB,EAChB,oBAA2B,EAC3B,kBAAkB,EAClB,iBAAiB,EACjB,eAAe,EACf,gBAAyB,EACzB,uBAA6C,EAC7C,oBAA4B,EAC5B,eAAuB,EACvB,GAAG,SAAS,EACb,EAAE,uBAAuB,GAAG,GAAG,CAAC,OAAO,CAgUvC;yBA3Ve,kBAAkB"}
+{"version":3,"file":"FilteredActionList.d.ts","sourceRoot":"","sources":["../../src/FilteredActionList/FilteredActionList.tsx"],"names":[],"mappings":"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"}

package/dist/FilteredActionList/FilteredActionList.js

@@ -46,6 +46,7 @@ function FilteredActionList({
   actionListProps,
   focusOutBehavior = 'wrap',
   _PrivateFocusManagement = 'active-descendant',
+  onActiveDescendantChanged,
   disableSelectOnHover = false,
   setInitialFocus = false,
   ...listProps
@@ -142,10 +143,11 @@ function FilteredActionList({
       if (current && scrollContainerRef.current && directlyActivated) {
         scrollIntoView(current, scrollContainerRef.current, menuScrollMargins);
       }
+      onActiveDescendantChanged === null || onActiveDescendantChanged === void 0 ? void 0 : onActiveDescendantChanged(current, previous, directlyActivated);
     },
     focusInStrategy: setInitialFocus ? 'initial' : 'previous',
     ignoreHoverEvents: disableSelectOnHover
-  } : undefined, [listContainerElement, usingRovingTabindex]);
+  } : undefined, [listContainerElement, usingRovingTabindex, onActiveDescendantChanged]);
   useEffect(() => {
     if (activeDescendantRef.current && scrollContainerRef.current) {
       scrollIntoView(activeDescendantRef.current, scrollContainerRef.current, {

package/dist/Spinner/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAKlE,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,0KAA0K;IAC1K,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,kBAAkB,CAAA;AAEtB,iBAAS,OAAO,CAAC,EACf,IAAI,EAAE,OAAkB,EACxB,MAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EACL,KAAa,EACb,GAAG,KAAK,EACT,EAAE,YAAY,4BAwDd;kBAhEQ,OAAO;;;AAoEhB,eAAe,OAAO,CAAA"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/Spinner/Spinner.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAC,kBAAkB,EAAC,MAAM,4BAA4B,CAAA;AAMlE,QAAA,MAAM,OAAO;;;;CAIZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,0KAA0K;IAC1K,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IACtB,wCAAwC;IACxC,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAA;IAC3B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,OAAO,CAAA;CAChB,GAAG,kBAAkB,CAAA;AAEtB,iBAAS,OAAO,CAAC,EACf,IAAI,EAAE,OAAkB,EACxB,MAAkB,EAClB,YAAY,EAAE,SAAS,EACvB,SAAS,EACT,KAAK,EACL,KAAa,EACb,GAAG,KAAK,EACT,EAAE,YAAY,4BA2Dd;kBAnEQ,OAAO;;;AAkMhB,eAAe,OAAO,CAAA"}

package/dist/Spinner/Spinner.js

@@ -1,8 +1,10 @@
 import { c } from 'react-compiler-runtime';
-import { useState, useEffect } from 'react';
-import classes from './Spinner.module.css.js';
 import { clsx } from 'clsx';
+import { useState, useEffect, useRef, useSyncExternalStore } from 'react';
+import classes from './Spinner.module.css.js';
+import { useMedia } from '../hooks/useMedia.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
 import { useId } from '../hooks/useId.js';
 import { VisuallyHidden } from '../VisuallyHidden/VisuallyHidden.js';
 
@@ -13,7 +15,7 @@ const sizeMap = {
 };
 function Spinner(t0) {
   var _ariaLabel;
-  const $ = c(29);
+  const $ = c(30);
   let ariaLabel;
   let className;
   let props;
@@ -51,6 +53,8 @@ function Spinner(t0) {
   const sizeKey = t1 === undefined ? "medium" : t1;
   const srText = t2 === undefined ? "Loading" : t2;
   const delay = t3 === undefined ? false : t3;
+  const syncAnimationsEnabled = useFeatureFlag("primer_react_spinner_synchronize_animations");
+  const animationRef = useSpinnerAnimation();
   const size = sizeMap[sizeKey];
   const hasHiddenLabel = srText !== null && ariaLabel === undefined;
   const labelId = useId();
@@ -78,20 +82,21 @@ function Spinner(t0) {
   if (!isVisible) {
     return null;
   }
-  const t6 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : undefined;
-  const t7 = hasHiddenLabel ? labelId : undefined;
-  let t8;
+  const t6 = syncAnimationsEnabled ? animationRef : undefined;
+  const t7 = (_ariaLabel = ariaLabel) !== null && _ariaLabel !== void 0 ? _ariaLabel : undefined;
+  const t8 = hasHiddenLabel ? labelId : undefined;
+  let t9;
   if ($[11] !== className) {
-    t8 = clsx(className, classes.SpinnerAnimation);
+    t9 = clsx(className, classes.SpinnerAnimation);
     $[11] = className;
-    $[12] = t8;
+    $[12] = t9;
   } else {
-    t8 = $[12];
+    t9 = $[12];
   }
   let t10;
-  let t9;
+  let t11;
   if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
-    t9 = /*#__PURE__*/jsx("circle", {
+    t10 = /*#__PURE__*/jsx("circle", {
       cx: "8",
       cy: "8",
       r: "7",
@@ -100,7 +105,7 @@ function Spinner(t0) {
       strokeWidth: "2",
       vectorEffect: "non-scaling-stroke"
     });
-    t10 = /*#__PURE__*/jsx("path", {
+    t11 = /*#__PURE__*/jsx("path", {
       d: "M15 8a7.002 7.002 0 00-7-7",
       stroke: "currentColor",
       strokeWidth: "2",
@@ -108,25 +113,26 @@ function Spinner(t0) {
       vectorEffect: "non-scaling-stroke"
     });
     $[13] = t10;
-    $[14] = t9;
+    $[14] = t11;
   } else {
     t10 = $[13];
-    t9 = $[14];
+    t11 = $[14];
   }
-  let t11;
-  if ($[15] !== props || $[16] !== size || $[17] !== style || $[18] !== t6 || $[19] !== t7 || $[20] !== t8) {
-    t11 = /*#__PURE__*/jsxs("svg", {
+  let t12;
+  if ($[15] !== props || $[16] !== size || $[17] !== style || $[18] !== t6 || $[19] !== t7 || $[20] !== t8 || $[21] !== t9) {
+    t12 = /*#__PURE__*/jsxs("svg", {
+      ref: t6,
       height: size,
       width: size,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": true,
-      "aria-label": t6,
-      "aria-labelledby": t7,
-      className: t8,
+      "aria-label": t7,
+      "aria-labelledby": t8,
+      className: t9,
       style: style,
       ...props,
-      children: [t9, t10]
+      children: [t10, t11]
     });
     $[15] = props;
     $[16] = size;
@@ -134,37 +140,128 @@ function Spinner(t0) {
     $[18] = t6;
     $[19] = t7;
     $[20] = t8;
-    $[21] = t11;
+    $[21] = t9;
+    $[22] = t12;
   } else {
-    t11 = $[21];
+    t12 = $[22];
   }
-  let t12;
-  if ($[22] !== hasHiddenLabel || $[23] !== labelId || $[24] !== srText) {
-    t12 = hasHiddenLabel ? /*#__PURE__*/jsx(VisuallyHidden, {
+  let t13;
+  if ($[23] !== hasHiddenLabel || $[24] !== labelId || $[25] !== srText) {
+    t13 = hasHiddenLabel ? /*#__PURE__*/jsx(VisuallyHidden, {
       id: labelId,
       children: srText
     }) : null;
-    $[22] = hasHiddenLabel;
-    $[23] = labelId;
-    $[24] = srText;
-    $[25] = t12;
+    $[23] = hasHiddenLabel;
+    $[24] = labelId;
+    $[25] = srText;
+    $[26] = t13;
   } else {
-    t12 = $[25];
+    t13 = $[26];
   }
-  let t13;
-  if ($[26] !== t11 || $[27] !== t12) {
-    t13 = /*#__PURE__*/jsxs("span", {
+  let t14;
+  if ($[27] !== t12 || $[28] !== t13) {
+    t14 = /*#__PURE__*/jsxs("span", {
       className: classes.Box,
-      children: [t11, t12]
+      children: [t12, t13]
     });
-    $[26] = t11;
     $[27] = t12;
     $[28] = t13;
+    $[29] = t14;
   } else {
-    t13 = $[28];
+    t14 = $[29];
   }
-  return t13;
+  return t14;
 }
 Spinner.displayName = 'Spinner';
+const animationTimingStore = {
+  subscribers: new Set(),
+  value: {
+    startTime: null
+  },
+  update(startTime) {
+    const value = {
+      startTime
+    };
+    animationTimingStore.value = value;
+    for (const subscriber of animationTimingStore.subscribers) {
+      subscriber();
+    }
+  },
+  subscribe(subscriber) {
+    animationTimingStore.subscribers.add(subscriber);
+    return () => {
+      animationTimingStore.subscribers.delete(subscriber);
+    };
+  },
+  getSnapshot() {
+    return animationTimingStore.value;
+  },
+  getServerSnapshot() {
+    return animationTimingStore.value;
+  }
+};
+
+/**
+ * A utility hook for reading a common `startTime` value so that all animations
+ * are in sync. This is a global value and is coordinated through `useSyncExternalStore`.
+ */
+function useAnimationTiming() {
+  return useSyncExternalStore(animationTimingStore.subscribe, animationTimingStore.getSnapshot, animationTimingStore.getServerSnapshot);
+}
+
+/**
+ * Uses a technique from Spectrum to coordinate animations:
+ * @see https://github.com/adobe/react-spectrum/blob/ab5e6f3dba4235dafab9f81f8b5c506ce5f11230/packages/%40react-spectrum/s2/src/Skeleton.tsx#L21
+ */
+function useSpinnerAnimation() {
+  const $ = c(3);
+  const ref = useRef(null);
+  const noMotionPreference = useMedia("(prefers-reduced-motion: no-preference)", false);
+  const animationTiming = useAnimationTiming();
+  let t0;
+  if ($[0] !== animationTiming || $[1] !== noMotionPreference) {
+    t0 = element => {
+      if (!element) {
+        return;
+      }
+      if (ref.current !== null) {
+        return;
+      }
+      if (noMotionPreference) {
+        const cssAnimation = element.getAnimations().find(_temp);
+        cssAnimation === null || cssAnimation === void 0 ? void 0 : cssAnimation.pause();
+        ref.current = element.animate([{
+          transform: "rotate(0deg)"
+        }, {
+          transform: "rotate(360deg)"
+        }], {
+          duration: 1000,
+          easing: "cubic-bezier(0,0,1,1)",
+          iterations: Infinity
+        });
+        if (animationTiming.startTime === null) {
+          var _cssAnimation$startTi;
+          const startTime = (_cssAnimation$startTi = cssAnimation === null || cssAnimation === void 0 ? void 0 : cssAnimation.startTime) !== null && _cssAnimation$startTi !== void 0 ? _cssAnimation$startTi : 0;
+          animationTimingStore.update(startTime);
+          ref.current.startTime = startTime;
+        } else {
+          ref.current.startTime = animationTiming.startTime;
+        }
+      }
+    };
+    $[0] = animationTiming;
+    $[1] = noMotionPreference;
+    $[2] = t0;
+  } else {
+    t0 = $[2];
+  }
+  return t0;
+}
+function _temp(animation) {
+  if (animation instanceof CSSAnimation) {
+    return animation.animationName.startsWith("Spinner") && animation.animationName.endsWith("rotate-keyframes");
+  }
+  return false;
+}
 
 export { Spinner as default };

package/generated/components.json

@@ -6269,6 +6269,12 @@
           "type": "'start' | 'wrap'",
           "defaultValue": "'wrap'",
           "description": "Determines how keyboard focus behaves when navigating beyond the first or last item in the list."
+        },
+        {
+          "name": "onActiveDescendantChanged",
+          "type": "(newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void | undefined",
+          "defaultValue": "undefined",
+          "description": "Callback function that is called when the active descendant changes."
         }
       ],
       "subcomponents": []

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.5.0",
+  "version": "38.6.0-rc.83fd63ead",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -112,8 +112,6 @@
     "@rollup/plugin-commonjs": "29.0.0",
     "@rollup/plugin-json": "6.1.0",
     "@rollup/plugin-node-resolve": "16.0.3",
-    "@rollup/plugin-replace": "6.0.3",
-    "@rollup/plugin-terser": "0.4.4",
     "@rollup/plugin-typescript": "12.3.0",
     "@rollup/plugin-virtual": "3.0.2",
     "@storybook/addon-a11y": "^10.1.4",
@@ -174,8 +172,6 @@
     "rimraf": "5.0.5",
     "rollup": "4.53.3",
     "rollup-plugin-import-css": "^0.0.0",
-    "rollup-plugin-postcss": "4.0.2",
-    "rollup-plugin-visualizer": "6.0.5",
     "storybook": "^10.1.4",
     "terser": "5.36.0",
     "ts-toolbelt": "9.6.0",