@yugabytedb/perf-advisor-ui 1.0.133 → 1.0.135

package/dist/helpers/errorHandlingUtils.d.ts

@@ -0,0 +1 @@
+export declare const assertUnreachableCase: (value: never) => never;

package/dist/helpers/exportBundlesStorage.d.ts

@@ -0,0 +1,47 @@
+import { BundleColumnSelection, BundleFormat, BundleMeta, SourceMode } from './downloadUtils';
+export declare const EXPORT_BUNDLES_STORAGE_KEY = "perfAdvisor:exportBundleAttributes:v1";
+export declare const EXPORT_BUNDLES_MAX_COUNT = 20;
+export declare const BundleStatus: {
+    readonly GENERATING: "generating";
+    readonly READY: "ready";
+    readonly FAILED: "failed";
+    readonly CANCELLED: "cancelled";
+    readonly INTERRUPTED: "interrupted";
+};
+export type BundleStatus = typeof BundleStatus[keyof typeof BundleStatus];
+export interface BundleParams {
+    universeUuid: string;
+    apiUrl: string;
+    startTime: string | null;
+    endTime: string | null;
+    searchInput: string;
+    database: string;
+    sortBy: string;
+    sortDirection: string;
+    queryType: string | null;
+    showSystemQueries: boolean;
+    topN: number;
+    source: SourceMode;
+    selectedQueryKeys: string[];
+    columns: BundleColumnSelection;
+    format: BundleFormat;
+    meta: Pick<BundleMeta, 'timeRange' | 'source'>;
+}
+export interface PersistedBundle {
+    id: string;
+    createdAt: number;
+    status: BundleStatus;
+    params: BundleParams;
+    filename?: string;
+    errorMessage?: string;
+    queryCount?: number;
+    progress?: {
+        fetched: number;
+        total: number;
+        phase: 'fetching' | 'queries' | 'plans';
+    };
+}
+export declare const loadBundles: () => PersistedBundle[];
+export declare const saveBundles: (bundles: PersistedBundle[]) => void;
+export declare const pruneByCount: (bundles: PersistedBundle[]) => PersistedBundle[];
+export declare const reclassifyOrphans: (bundles: PersistedBundle[]) => PersistedBundle[];

package/dist/helpers/objectUtils.d.ts

@@ -0,0 +1,11 @@
+export declare function isDefinedNotNull(obj: any): boolean;
+export declare function isEmptyArray(arr: any): boolean;
+export declare function isNonEmptyArray(arr: any): boolean;
+export declare function isNullOrEmpty(obj: any): boolean;
+export declare function isEmptyObject(obj: any): boolean;
+export declare function isNonEmptyObject(obj: any): boolean;
+export declare function isNonEmptyString(str: string): boolean;
+export declare function isEmptyString(str: string): boolean;
+export declare const isValidObject: typeof isDefinedNotNull;
+export declare function removeNullProperties(obj: any): void;
+export declare function isYAxisGreaterThanThousand(dataArray: any): boolean;

package/dist/helpers/qpmStatus.d.ts

@@ -0,0 +1,7 @@
+import { AppName } from './dtos';
+export declare const MIN_QPM_DB_VERSION = "2025.2.3.0-b0";
+export interface QpmDisabledReason {
+    title: string;
+    instruction: string;
+}
+export declare const getQpmDisabledReason: (qpmSupported: boolean, qpmEnabled: boolean, appName: AppName) => QpmDisabledReason | null;

package/dist/helpers/utils.d.ts

@@ -0,0 +1,240 @@
+import { Anomaly, AnomalyCategory, AppName, ClusterLoadOverallTabs, ClusterLoadSubTabs, GraphFilters, InsightsTabs, WaitEventClassification, GraphRequestParams, GraphType, MetricMeasure, QueryPageParams, AnomalyGroup, TransformedData, TransformedDbLoadData, TransformedNodeLoadData, TransformedTabletsData, BackgroundTasksResponse, TransformedBackgroundTasksResponse, AnomalyPossibleCauseData, UniverseNodeDetails, QueryPlanEntry, ClusterDetails } from './dtos';
+export declare const formatData: (data: any) => any;
+export declare const formatUniverseNodeDetails: (universeNodesDetails: UniverseNodeDetails) => {
+    primaryZoneMapping: any;
+    asyncZoneMapping: any;
+    primaryClusterMapping: any;
+    asyncClusterMapping: any;
+    nodeIPMapping: any;
+};
+export declare const getSqlAnomalyParams: (anomalyData: Anomaly) => {
+    dbId: string | undefined;
+    queryId: string | undefined;
+    tabletId: string | undefined;
+    tableName: string | undefined;
+    dbName: string | undefined;
+};
+export declare const getSqlAnomalyGroupParams: (anomalyData: AnomalyGroup) => {
+    dbId: string | undefined;
+    queryId: string | undefined;
+    tabletId: string | undefined;
+    tableName: string | undefined;
+    dbName: string | undefined;
+    schemaName: string | undefined;
+};
+export declare const getAnomalyMetricMeasure: (anomalyData: Anomaly) => MetricMeasure;
+export declare const getAnomalyOutlierType: (anomalyData: Anomaly) => "TOP" | "BOTTOM";
+export declare const getAnomalyNumNodes: (anomalyData: Anomaly) => number;
+export declare const getAnomalyStartDate: (anomalyData: Anomaly) => Date | null;
+export declare const getAnomalyEndTime: (anomalyData: Anomaly) => Date | null;
+export declare const formatUniverseDetails: (universeData: any) => {
+    primaryZoneMapping: any;
+    asyncZoneMapping: any;
+    primaryClusterMapping: any;
+    asyncClusterMapping: any;
+    nodeIPMapping: any;
+};
+export declare const getNodesBasedOnZones: (nodeDetailsData: any, zoneName: string, uuid: string) => string[];
+export declare const getRegionsBasedOnCluster: (nodeDetailsData: any, isReadReplica: boolean) => string[];
+export declare const getFilteredItems: (zoneToNodesMap: any, isRegionChanged: boolean, isPrimaryCluster: boolean, filterParam: string) => Map<any, any>;
+export declare const getPrimaryCluster: (clusters: any) => any;
+export declare function getReadOnlyCluster(clusters: any): any;
+export declare const getAnomalyMainGraphRequestParams: (anomalyData: AnomalyGroup) => any[];
+export declare const getGraphRequestParams: (anomalyData: Anomaly) => any[];
+export declare const formatAnomalyMainGraphs: (anomalyData: AnomalyGroup) => {
+    name: string;
+    index: number;
+    groupByControl: boolean;
+    displayName: string | undefined;
+}[];
+export declare const formatAnomalyRca: (anomalyData: Anomaly) => any[];
+export declare const getAshOperations: (metricData: any, graphPayload: any, isAdvancedView: boolean) => any;
+export declare const getOperations: (metricMeasure: string, metricData: any, graphType: GraphType, shouldShowGroupbyOperations: boolean, graphPayload: any, isAdvancedView?: boolean) => {
+    uniqueOperations: any;
+    groupByOperations: any;
+};
+export declare const calculateDateDifference: (startDate: Date, endDate: Date) => number;
+export declare const applyClusterFilters: (filters: GraphFilters, details: Pick<ClusterDetails, 'cluster' | 'region' | 'zone' | 'node'>) => void;
+export declare const buildClusterUrlParams: (details: Pick<ClusterDetails, 'cluster' | 'region' | 'zone' | 'node'>) => URLSearchParams;
+export declare const buildTopKMetricParams: (clusterDetails: ClusterDetails, metricsTabNumber: number) => GraphRequestParams[] | undefined;
+export declare const buildAnomalyGraphParams: (clusterDetails: ClusterDetails, graphParamsCopy: GraphRequestParams[]) => GraphRequestParams[];
+export declare const buildHistoricalQueryParams: (clusterDetails: ClusterDetails, urlParams: QueryPageParams | null, graphNames: readonly string[], anomalyData?: AnomalyGroup | null, ashGroupBy?: WaitEventClassification) => GraphRequestParams[];
+export declare const getStepSeconds: (startTime: string | null, endTime: string | null) => number;
+export declare const getTruncatedSeriesName: (seriesName: string) => string;
+export declare const getLegendKey: (color: string, seriesName: string) => string;
+export declare const getLegendValue: (value: string) => string;
+export declare const getDateRange: (filterDuration: string, today: Date) => {
+    formattedStartDate: Date;
+    formattedEndDate: Date;
+};
+export declare const initializeDateTimeRange: (filterDuration: string, today: Date, previousDate: Date) => {
+    startDateTime: Date;
+    endDateTime: Date;
+};
+export declare const syncFilterDurationToUrl: (filterDuration: string, dateTimeRange?: {
+    startDateTime: Date;
+    endDateTime: Date;
+}) => void;
+export declare const syncDateParamToUrl: (paramName: 'startTime' | 'endTime', isoString: string) => void;
+export declare const getTransformedData: (data: any) => TransformedData[];
+export declare const getTransformedDbLoadData: (data: any) => TransformedDbLoadData[];
+export declare const getTabletsMetadataColumns: (data: any, isTabletMetadataView?: boolean) => TransformedTabletsData[];
+export declare const getNodeLoadMetadataColumns: (data: any) => TransformedNodeLoadData[];
+export declare const formatBytes: (sizeInBytes: any) => string;
+/**
+ * Truncates text with ellipsis if it exceeds the maximum length
+ * @param text - The text to truncate
+ * @param maxLength - Maximum length before truncation
+ * @returns Truncated text with ellipsis if needed, or original text
+ */
+export declare const truncateText: (text: string | undefined | null, maxLength: number) => string;
+/**
+ * Truncates text from the front with ellipsis at the beginning
+ * @param text - The text to truncate
+ * @param maxLength - Maximum length before truncation
+ * @returns Truncated text with ellipsis at the front if needed, or original text
+ */
+export declare const truncateTextFromFront: (text: string | undefined | null, maxLength: number) => string;
+export declare const truncateEntityDisplayName: (entityDisplayName: string | undefined, anomalyCategory: AnomalyCategory | string | undefined, maxLength: number) => string;
+/**
+ * Gets the category label for breadcrumb (second breadcrumb item)
+ * @param anomalyData - The anomaly data object (null if query view)
+ * @param anomalyCategory - The category of the anomaly (string or AnomalyCategory enum)
+ * @param urlState - The parsed URL state containing current tab and sub-tabs
+ * @returns The category label string
+ */
+export declare const getBreadcrumbCategoryLabel: (anomalyData: AnomalyGroup | null, anomalyCategory: string | AnomalyCategory | undefined, isHistoricalQueryView: boolean, urlState: ParsedUrlState) => string;
+/**
+ * Gets the entity/query label for breadcrumb (third breadcrumb item)
+ * @param anomalyData - The anomaly data object (null if query view)
+ * @param entityDisplayName - The display name of the entity (for anomaly view)
+ * @param queryText - The query text (for query view)
+ * @param maxLength - Maximum length before truncation (default: 30)
+ * @returns The entity/query label string
+ */
+export declare const getBreadcrumbEntityLabel: ({ anomalyData, entityDisplayName, queryText, maxLength }: {
+    anomalyData: AnomalyGroup | null;
+    entityDisplayName: string | undefined | null;
+    queryText: string | undefined | null;
+    categoryLabel?: string | undefined | null;
+    maxLength?: number | undefined;
+}) => string;
+export interface ParsedUrlState {
+    currentTab: InsightsTabs;
+    clusterLoadSubTab: ClusterLoadSubTabs;
+    clusterLoadOverallSubTab: ClusterLoadOverallTabs;
+}
+/**
+ * Parse URL to determine current tab and sub-tabs
+ * @param appName - The application name (YBA or Web)
+ * @returns Parsed state from URL
+ */
+export declare const parseUrlState: (appName: AppName) => ParsedUrlState;
+/**
+ * Build URL path for Web app
+ * @param tab - The current tab
+ * @param subTab - The cluster load sub-tab (optional)
+ * @param overallSubTab - The overall sub-tab for cluster load (optional)
+ * @returns The complete URL path with query string
+ */
+export declare const buildUrlPath: (tab: InsightsTabs, subTab?: ClusterLoadSubTabs, overallSubTab?: ClusterLoadOverallTabs) => string;
+/**
+ * Update URL based on app type
+ * @param appName - The application name (YBA or Web)
+ * @param tab - The current tab
+ * @param subTab - The cluster load sub-tab (optional)
+ * @param overallSubTab - The overall sub-tab for cluster load (optional)
+ * @param usePushState - Whether to use pushState instead of replaceState (default: false)
+ */
+export declare const updateUrl: (appName: AppName, tab: InsightsTabs, subTab?: ClusterLoadSubTabs, overallSubTab?: ClusterLoadOverallTabs, usePushState?: boolean) => void;
+/**
+ * Ensure complete URL path for Web app (adds missing segments)
+ * @param appName - The application name (YBM, YBA, Web)
+ * @param tab - The current tab
+ */
+export declare const ensureCompletePath: (appName: AppName, tab: InsightsTabs) => void;
+/**
+ * Builds the primary dashboard URL by removing drilldown-specific query parameters
+ * @param appName - The application name (only Web)
+ * @returns The primary dashboard URL
+ */
+export declare const buildPrimaryDashboardUrl: (appName: AppName, isQueryViewFromAnomaly?: boolean) => string;
+/**
+ * Builds the YBM current URL by removing specific query parameters
+ * @returns The YBM URL with cleaned query parameters
+ */
+export declare const buildYbmUrl: (isHistoricalQueryView: boolean, isQueryViewFromAnomalyView?: boolean, showStandaloneAnomalies?: boolean) => URL;
+/**
+ * Builds the YBM drilldown URL by removing query-specific path segments and parameters
+ * This is used when navigating from query level (level 3) back to anomaly level (level 2)
+ * @returns The YBM URL with query path and parameters removed
+ */
+export declare const buildYbmDrilldownUrl: () => URL;
+/**
+ * Navigates back to the primary dashboard
+ * @param appName - The application name (YBA, YBM, or Web)
+ * @param hasAnomalyData - Whether anomaly data exists
+ * @param onSelectedIssue - Optional callback to clear selected issue
+ * @param onSelectedQuery - Optional callback to clear selected query
+ * @param onNavigateToUrl - Optional callback for React Router navigation (used in YBM)
+ */
+export declare const navigateToPrimaryDashboard: (appName: AppName, isHistoricalQueryView: boolean, showStandaloneAnomalies: boolean, onSelectedIssue?: ((troubleshootUuid: string | null, params?: any) => void) | undefined, onSelectedQuery?: ((queryId: string | null, params?: any) => void) | undefined, onNavigateToUrl?: ((url: string) => void) | undefined) => void;
+/**
+ * Navigates to the drilldown view (anomaly level) from query level
+ * @param appName - The application name (YBA, YBM, or Web)
+ * @param anomalyData - The anomaly data to navigate to
+ * @param onSelectedIssue - Optional callback to select the issue
+ * @param onNavigateToUrl - Optional callback for React Router navigation (used in YBM)
+ */
+export declare const navigateToDrilldownView: (appName: AppName, anomalyData: AnomalyGroup | null, onSelectedIssue?: ((troubleshootUuid: string | null, params?: any) => void) | undefined, onNavigateToUrl?: ((url: string) => void) | undefined) => void;
+export declare const transformBackgroundTasksToAnomalyGroups: (response: BackgroundTasksResponse) => AnomalyGroup[];
+export declare const transformBackgroundTasks: (response: BackgroundTasksResponse, options?: {
+    appName?: AppName | undefined;
+    backgroundTasksMappingFunc?: ((value: string) => string) | undefined;
+} | undefined) => TransformedBackgroundTasksResponse;
+export declare const getTelemetryPayload: (appName: AppName, key: string, startTime: string | null, endTime: string | null, universeUuid: string, source?: string) => {
+    timestamp: number;
+    category: string;
+    type: string;
+    payload: {
+        appName: AppName;
+        cluster_id: string;
+        key: string;
+        source: string;
+        start_time: string | null;
+        end_time: string | null;
+    };
+}[];
+/**
+ * Processes anomaly group data to extract possible cause information
+ * @param anomalyGroupData - The anomaly group data (can be null)
+ * @returns Processed data containing observation and possible causes
+ */
+export declare const getAnomalyPossibleCauseData: (anomalyGroupData: AnomalyGroup | null) => AnomalyPossibleCauseData;
+export declare const setLocalStorageItem: (key: string, value: string) => void;
+export declare const getLocalStorageItem: (key: string) => string | null;
+export declare const getOverlappingAnomalyMarkRanges: (intervals: Array<{
+    lastInstanceStartTime: string;
+    lastInstanceEndTime: string;
+}> | null | undefined, dateTimeRange: {
+    startDateTime: Date;
+    endDateTime: Date;
+}) => Array<[
+    number,
+    number
+]>;
+export type AceMode = 'json' | 'sql' | 'pgsql' | 'text';
+export declare function detectAceMode(text: string): AceMode;
+export type ProcessedQueryPlan = QueryPlanEntry & {
+    color: string;
+};
+export declare function processQPMData(plans: QueryPlanEntry[]): ProcessedQueryPlan[];
+export declare const formatPlanDate: (iso: string, displayTimezone?: string) => string;
+export declare const formatNumberTo2Decimals: (value: unknown) => string;
+export interface BuildQueryDrilldownUrlParams {
+    basePath: string;
+    baseSearch: string;
+    searchParams: Record<string, string | null | undefined>;
+    pathSegments?: string[];
+}
+export declare const buildQueryDrilldownUrl: ({ basePath, baseSearch, searchParams, pathSegments }: BuildQueryDrilldownUrlParams) => string;

package/dist/index.d.ts

@@ -0,0 +1,8 @@
+export * from './components';
+export * from './common';
+export * from './helpers/config';
+export * from './helpers/constants';
+export * from './helpers/objectUtils';
+export { buildQueryDrilldownUrl } from './helpers/utils';
+export type { BuildQueryDrilldownUrlParams } from './helpers/utils';
+export * from './providers/YBThemeWrapper';

package/dist/providers/YBThemeWrapper.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { AppName } from '../components';
+interface YBThemeWrapperProps {
+    children: React.ReactNode;
+    appName: AppName;
+}
+/**
+ * Wraps components with the YBThemeProvider to ensure proper styling
+ * for @yugabyte-ui-library/core components
+ */
+export declare const YBThemeWrapper: React.FC<YBThemeWrapperProps>;
+export {};

package/dist/theme/mainTheme.d.ts

@@ -0,0 +1,14 @@
+import { AutocompleteClassKey } from '@material-ui/lab/Autocomplete';
+/**
+ * Need to declare module directly in this file because we need to extend
+ * @types/mui-datatables to include extra property. Putting this declaration
+ * with augmentations.d.ts does not work for overriding a declaration from
+ * a 3rd party package.
+ */
+declare module '@material-ui/core/styles/overrides' {
+    interface ComponentNameToClassKey {
+        MUIDataTable: 'root' | 'caption' | 'liveAnnounce' | 'paper' | 'responsiveScroll' | 'tableRoot' | 'responsiveBase';
+        MuiAutocomplete: AutocompleteClassKey | 'icon';
+    }
+}
+export declare const mainTheme: import('@material-ui/core').Theme;

package/dist/theme/variables.d.ts

@@ -0,0 +1,50 @@
+import { CommonColors, PaletteColor, TypeBackground } from '@material-ui/core/styles/createPalette';
+export declare const colors: {
+    primary: PaletteColor;
+    secondary: PaletteColor;
+    grey: PaletteColor;
+    error: PaletteColor;
+    warning: PaletteColor;
+    success: PaletteColor;
+    info: PaletteColor;
+    background: TypeBackground;
+    common: CommonColors;
+    chartStroke: {
+        cat1: string;
+        cat2: string;
+        cat3: string;
+        cat4: string;
+        cat5: string;
+        cat6: string;
+        cat7: string;
+        cat8: string;
+        cat9: string;
+        cat10: string;
+    };
+    chartFill: {
+        area1: string;
+        area2: string;
+        area3: string;
+        area4: string;
+        area5: string;
+        area6: string;
+        area7: string;
+        area8: string;
+        area9: string;
+        area10: string;
+        bar1: string;
+        bar2: string;
+    };
+};
+export declare const themeVariables: {
+    screenMinWidth: number;
+    screenMinHeight: number;
+    sidebarWidthMin: number;
+    sidebarWidthMax: number;
+    footerHeight: number;
+    toolbarHeight: number;
+    inputHeight: number;
+    borderRadius: number;
+    shadowLight: string;
+    shadowThick: string;
+};

package/package.json

@@ -1,8 +1,17 @@
 {
   "name": "@yugabytedb/perf-advisor-ui",
-  "version": "1.0.133",
-  "main": "dist/cjs/index.js",
-  "types": "dist/types.d.ts",
+  "version": "1.0.135",
+  "type": "module",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/esm/index.js"
+    },
+    "./package.json": "./package.json"
+  },
   "author": "Rajagopalan Madhavan",
   "files": [
     "dist",
@@ -21,37 +30,28 @@
     "npm": ">=10"
   },
   "devDependencies": {
-    "@rollup/plugin-commonjs": "^24.1.0",
-    "@rollup/plugin-image": "3.0.3",
-    "@rollup/plugin-json": "6.0.0",
-    "@rollup/plugin-node-resolve": "^15.0.2",
-    "@rollup/plugin-replace": "5.0.2",
-    "@rollup/plugin-terser": "0.4.4",
-    "@rollup/plugin-typescript": "^11.1.0",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/user-event": "^13.5.0",
+    "@svgr/core": "8.1.0",
+    "@svgr/plugin-jsx": "8.1.0",
     "@typescript-eslint/eslint-plugin": "6.21.0",
     "@typescript-eslint/parser": "6.21.0",
+    "@vitejs/plugin-react": "5.2.0",
     "@yugabyte-ui-library/core": "2.0.25",
-    "concurrently": "9.2.1",
+    "eslint": "7.32.0",
     "eslint-config-prettier": "8.3.0",
     "eslint-plugin-import": "2.23.4",
-    "nodemon": "3.1.10",
-    "rollup": "3.2.5",
-    "rollup-plugin-dts": "5.3.1",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-postcss": "^4.0.2",
-    "rollup-plugin-visualizer": "5.12.0",
+    "prettier": "2.1.0",
+    "rollup-plugin-visualizer": "5.14.0",
     "standard-version": "9.5.0",
-    "typescript": "5.3.3"
+    "typescript": "5.3.3",
+    "vite": "8.0.14",
+    "vite-plugin-dts": "4.5.4"
   },
   "dependencies": {
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "4.11.2",
     "@material-ui/lab": "4.0.0-alpha.58",
-    "@svgr/rollup": "6.5.1",
     "@types/lodash-es": "4.17.12",
-    "@types/node": "18.14.0",
+    "@types/node": "22.19.19",
     "@types/react": "17.0.4",
     "@types/react-dom": "17.0.3",
     "@types/react-router": "3.0.24",
@@ -63,7 +63,6 @@
     "date-fns-tz": "2.0.1",
     "echarts": "5.4.3",
     "lodash-es": "4.18.1",
-    "prettier": "2.1.0",
     "react": "17.0.2",
     "react-ace": "14.0.1",
     "react-dom": "17.0.2",
@@ -88,15 +87,21 @@
     "react-query": "3.32.1"
   },
   "scripts": {
-    "start": "rollup start",
-    "build": "NODE_ENV=production rollup -c --bundleConfigAsCjs",
-    "build:dev": "NODE_ENV=development rollup -c --bundleConfigAsCjs",
+    "build": "NODE_ENV=production vite build",
+    "build:dev": "NODE_ENV=development vite build",
+    "dev": "NODE_ENV=development vite build --watch",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx,.js,.jsx",
+    "lint:fix": "eslint src --ext .ts,.tsx,.js,.jsx --fix",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
     "changelog": "standard-version",
     "release": "npm install && npm run build && npm publish",
-    "dev": "concurrently \"rollup -c -w\" \"nodemon --watch dist --exec 'npx yalc push'\" --names \"BUILD,YALC\" --prefix-colors \"blue,green\"",
     "publish:yalc": "npm run build:dev && npx yalc publish --push"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "eslintConfig": {
     "extends": [
       "react-app",