@quillsql/react 1.1.1 → 1.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quillsql/react",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "access": "public",
   "description": "Quill React components for building dashboards and reporting.",
   "main": "lib/index.js",
@@ -11,7 +11,8 @@
     "lint:fix": "eslint --fix 'src/**/*.{ts,tsx}'",
     "prettier": "prettier --check 'src/**/*.{ts,tsx}'",
     "prettier:fix": "prettier --write 'src/**/*.{ts,tsx}'",
-    "build:css": "postcss src/styles.css -o lib/styles.css"
+    "build:css": "postcss src/styles.css -o lib/styles.css",
+    "prefix-classnames": "node ./prefix-classnames.js"
   },
   "keywords": [],
   "author": "",
@@ -41,6 +42,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
+    "glob": "^10.2.2",
     "postcss": "^8.4.21",
     "postcss-cli": "^10.1.0",
     "prettier": "^2.8.7"

package/prefix-classnames.js

@@ -0,0 +1,50 @@
+const fs = require('fs');
+const path = require('path');
+const { glob } = require('glob');
+
+const rootDir = path.resolve(__dirname);
+const classNameRegex = /className=["']([\w\s-]+)["']/g;
+
+console.log('Root directory:', rootDir);
+
+try {
+  const files = glob.sync('**/*.{js,jsx,tsx}', {
+    cwd: rootDir,
+    ignore: '**/node_modules/**',
+  });
+
+  console.log('Files found:', files);
+
+  files.forEach(file => {
+    console.log('Processing file:', file);
+    const filePath = path.join(rootDir, file);
+    fs.readFile(filePath, 'utf-8', (err, data) => {
+      if (err) {
+        console.error('Error reading file:', err);
+        return;
+      }
+
+      const result = data.replace(classNameRegex, (match, p1) => {
+        const classNames = p1.split(' ');
+        const prefixedClassNames = classNames.map(className => {
+          if (className.startsWith('qq-')) {
+            return className;
+          } else {
+            return `qq-${className}`;
+          }
+        });
+        return `className="${prefixedClassNames.join(' ')}"`;
+      });
+
+      fs.writeFile(filePath, result, 'utf-8', err => {
+        if (err) {
+          console.error('Error writing file:', err);
+          return;
+        }
+        console.log('File updated successfully:', filePath);
+      });
+    });
+  });
+} catch (error) {
+  console.error('Error in glob.sync():', error);
+}

package/src/BarList.tsx

@@ -146,15 +146,15 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
         }}
         className={twMerge(
           // makeBarListClassName('root'),
-          'flex justify-between',
-          'space-x-6',
+          'qq-flex qq-justify-between',
+          'qq-space-x-6',
           className
         )}
         {...other}
       >
         <div
           //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-          className="relative-w-full bg-[#212121]"
+          className="qq-relative-w-full"
           style={{ width: '100%' }}
         >
           {data.slice(0, Math.floor(NUM_TO_SHOW / 2)).map((item, idx) => {
@@ -163,7 +163,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
 
             return (
               <div
-                className="flex flex-row items-center"
+                className="qq-flex qq-flex-row qq-items-center"
                 key={item[xAxisField] + idx}
               >
                 <div
@@ -173,17 +173,17 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                   <p
                     className={twMerge(
                       // makeBarListClassName('barText'),
-                      'whitespace-nowrap truncate',
-                      'text-gray-500',
-                      'text-sm'
+                      'qq-whitespace-nowrap truncate',
+                      'qq-text-gray-500',
+                      'qq-text-sm'
                     )}
                   >
                     {item[xAxisField]}
                   </p>
                 </div>
-                <div style={{ width: '100%' }} className="flex flex-col">
+                <div style={{ width: '100%' }} className="qq-flex qq-flex-col">
                   <div
-                    className={`flex items-center h-9 rounded mb-2`}
+                    className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
                       width: `${widths[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
@@ -191,14 +191,17 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      className={twMerge('absolute max-w-full flex', 'ml-2')}
+                      className={twMerge(
+                        'qq-absolute qq-max-w-full qq-flex',
+                        'qq-ml-2'
+                      )}
                     >
                       <p
                         className={twMerge(
                           // makeBarListClassName('barText'),
-                          'whitespace-nowrap truncate',
-                          'text-gray-500',
-                          'text-sm'
+                          'qq-whitespace-nowrap truncate',
+                          'qq-text-gray-500',
+                          'qq-text-sm'
                         )}
                       >
                         {yAxisFields[0].label}
@@ -206,7 +209,7 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     </div>
                   </div>
                   <div
-                    className={`flex items-center h-9 rounded mb-2`}
+                    className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
                     style={{
                       width: `${widths2[idx]}%`,
                       transition: showAnimation ? 'all 2s' : '',
@@ -214,14 +217,17 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
                     }}
                   >
                     <div
-                      className={twMerge('absolute max-w-full flex', 'ml-2')}
+                      className={twMerge(
+                        'qq-absolute qq-max-w-full qq-flex',
+                        'qq-ml-2'
+                      )}
                     >
                       <p
                         className={twMerge(
                           // makeBarListClassName('barText'),
-                          'whitespace-nowrap truncate',
-                          'text-gray-500',
-                          'text-sm'
+                          'qq-whitespace-nowrap truncate',
+                          'qq-text-gray-500',
+                          'qq-text-sm'
                         )}
                       >
                         {yAxisFields[1].label}
@@ -234,31 +240,36 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
             );
           })}
           {data.length > NUM_TO_SHOW && (
-            <div style={{ color: theme.chartLabelColor }} className="text-sm">
+            <div
+              style={{ color: theme.chartLabelColor }}
+              className="qq-text-sm"
+            >
               ...{data.length - NUM_TO_SHOW} more
             </div>
           )}
         </div>
         {/* eslint-disable prettier/prettier */}
         <div
-          className={(makeBarListClassName('labels'), 'text-right min-w-min')}
+          className={
+            (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
+          }
         >
           {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
             <div
               key={item[xAxisField] + 'label' + idx}
               className={twMerge(
                 makeBarListClassName('labelWrapper'),
-                'flex justify-end items-center',
-                'h-9',
-                idx === data.length - 1 ? 'mb-0' : 'mb-2'
+                'qq-flex qq-justify-end qq-items-center',
+                'qq-h-9',
+                idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
               )}
             >
               <p
                 className={twMerge(
                   makeBarListClassName('labelText'),
-                  'whitespace-nowrap truncate',
-                  'text-gray-500',
-                  'text-sm'
+                  'qq-whitespace-nowrap truncate',
+                  'qq-text-gray-500',
+                  'qq-text-sm'
                 )}
               >
                 {valueFormatter(item[yAxisFields[0].field])}
@@ -283,15 +294,15 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
       }}
       className={twMerge(
         // makeBarListClassName('root'),
-        'flex justify-between',
-        'space-x-6',
+        'qq-flex qq-justify-between',
+        'qq-space-x-6',
         className
       )}
       {...other}
     >
       <div
         //   className={twMerge(makeBarListClassName('bars'), 'relative w-full')}
-        className="relative-w-full bg-[#212121]"
+        className="qq-relative-w-full"
         style={{ width: '100%' }}
       >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => {
@@ -301,20 +312,25 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           return (
             <div
               key={item[xAxisField] + 'label' + idx}
-              className={`flex items-center h-9 rounded mb-2`}
+              className={`qq-flex qq-items-center qq-h-9 qq-rounded qq-mb-2`}
               style={{
                 width: `${widths[idx]}%`,
                 transition: showAnimation ? 'all 2s' : '',
                 backgroundColor: hexToRgbaWith10PercentAlpha(colors[0]),
               }}
             >
-              <div className={twMerge('absolute max-w-full flex', 'ml-2')}>
+              <div
+                className={twMerge(
+                  'qq-absolute qq-max-w-full qq-flex',
+                  'qq-ml-2'
+                )}
+              >
                 <p
                   className={twMerge(
                     // makeBarListClassName('barText'),
-                    'whitespace-nowrap truncate',
-                    'text-gray-500',
-                    'text-sm'
+                    'qq-whitespace-nowrap truncate',
+                    'qq-text-gray-500',
+                    'qq-text-sm'
                   )}
                 >
                   {item[xAxisField]}
@@ -324,29 +340,33 @@ const BarList = React.forwardRef<HTMLDivElement, BarListProps>((props, ref) => {
           );
         })}
         {data.length > NUM_TO_SHOW && (
-          <div style={{ color: theme.chartLabelColor }} className="text-sm">
+          <div style={{ color: theme.chartLabelColor }} className="qq-text-sm">
             ...{data.length - NUM_TO_SHOW} more
           </div>
         )}
       </div>
       {/* eslint-disable prettier/prettier */}
-      <div className={(makeBarListClassName('labels'), 'text-right min-w-min')}>
+      <div
+        className={
+          (makeBarListClassName('labels'), 'qq-text-right qq-min-w-min')
+        }
+      >
         {data.slice(0, NUM_TO_SHOW).map((item, idx) => (
           <div
             key={item[xAxisField] + 'value' + idx}
             className={twMerge(
               makeBarListClassName('labelWrapper'),
-              'flex justify-end items-center',
-              'h-9',
-              idx === data.length - 1 ? 'mb-0' : 'mb-2'
+              'qq-flex qq-justify-end qq-items-center',
+              'qq-h-9',
+              idx === data.length - 1 ? 'qq-mb-0' : 'qq-mb-2'
             )}
           >
             <p
               className={twMerge(
                 makeBarListClassName('labelText'),
-                'whitespace-nowrap truncate',
-                'text-gray-500',
-                'text-sm'
+                'qq-whitespace-nowrap qq-truncate',
+                'qq-text-gray-500',
+                'qq-text-sm'
               )}
             >
               {valueFormatter(item[yAxisFields[0].field])}

package/src/Chart.tsx

@@ -203,7 +203,7 @@ export const ChartTooltipFrame = ({
   children: React.ReactNode;
 }) => (
   <div
-    className="bg-white text-sm rounded-md border shadow-lg"
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-border qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -228,8 +228,8 @@ export const ChartTooltipRow = ({
   name,
   color,
 }: ChartTooltipRowProps) => (
-  <div className="flex items-center justify-between space-x-8">
-    <div className="flex items-center space-x-2">
+  <div className="qq-flex qq-items-center qq-justify-between qq-space-x-8">
+    <div className="qq-flex qq-items-center qq-space-x-2">
       <span
         style={{ background: color, borderWidth: 2, borderColor: 'white' }}
         className={twMerge(
@@ -239,10 +239,10 @@ export const ChartTooltipRow = ({
           // 'border-black',
           // sizing.sm.height,
           // sizing.sm.width,
-          'h-3',
-          'w-3',
-          'shadow',
-          'rounded-full'
+          'qq-h-3',
+          'qq-w-3',
+          'qq-shadow',
+          'qq-rounded-full'
           // border.md.all,
           // boxShadow.md
         )}
@@ -252,16 +252,16 @@ export const ChartTooltipRow = ({
         //   'font-medium tabular-nums text-right whitespace-nowrap',
         //   'text-[#212121] !important'
         // )}
-        className="font-medium tabular-nums text-right whitespace-nowrap text-black"
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
     </div>
     <p
       className={twMerge(
-        'text-right whitespace-nowrap',
+        'qq-text-right qq-whitespace-nowrap',
         // getColorClassNames(DEFAULT_COLOR, colorPalette.text).textColor,
-        'text-gray-500'
+        'qq-text-gray-500'
         // fontWeight.sm
       )}
     >
@@ -289,7 +289,7 @@ const ChartTooltip = ({
     return (
       <ChartTooltipFrame>
         <div
-          className="flex flex-col py-2 px-4 border-b gray-200"
+          className="qq-flex qq-flex-col qq-py-2 qq-px-4 qq-border-b qq-gray-200"
           // className={
           // twMerge()
           // getColorClassNames(DEFAULT_COLOR, colorPalette.lightBorder)
@@ -302,10 +302,10 @@ const ChartTooltip = ({
           <p
             style={{ textAlign: 'left' }}
             className={twMerge(
-              'text-elem',
-              'text-black',
-              'font-medium',
-              'gray-700'
+              'qq-text-elem',
+              'qq-text-black',
+              'qq-font-medium',
+              'qq-gray-700'
               // getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
               //   .textColor,
               // fontWeight.md
@@ -319,7 +319,7 @@ const ChartTooltip = ({
         </div>
 
         <div
-          className="px-4 space-y-1 py-2 px-4"
+          className="qq-px-4 qq-space-y-1 qq-py-2 qq-px-4"
           // className={
           // twMerge()
           // spacing.twoXl.paddingX,
@@ -612,7 +612,7 @@ const ChartUpdater: React.FC<ChartProps> = ({
           height: '100%',
           // background: 'red',
         }}
-        className="flex flex-col text-xl"
+        className="qq-flex qq-flex-col qq-text-xl"
       >
         {formatNumber(
           chartConfig.rows[0][chartConfig.xAxisField],
@@ -719,7 +719,10 @@ function BarChart({
 }) {
   const newColors = findComplementaryAndAnalogousColors(colors[0], colors[1]);
   return (
-    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+    <div
+      style={containerStyle}
+      className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
+    >
       <ResponsiveContainer width="100%" height={'100%'}>
         <ReChartsBarChart
           data={data}
@@ -855,7 +858,10 @@ function LineChart({
     return null;
   }
   return (
-    <div style={containerStyle} className="flex flex-col flex-1 h-full w-full">
+    <div
+      style={containerStyle}
+      className="qq-flex qq-flex-col qq-flex-1 qq-h-full qq-w-full"
+    >
       <ResponsiveContainer width="100%" height={'100%'}>
         <ReChartsAreaChart data={data}>
           <CartesianGrid

package/src/Dashboard.tsx

@@ -176,7 +176,7 @@ export default function Dashboard({
                             onClick={() => handleOnClickDashboardItem(elem._id)}
                             className={
                               onClickDashboardItem
-                                ? 'hover:bg-zinc-50'
+                                ? 'hover:qq-bg-zinc-50'
                                 : undefined
                             }
                             key={elem.name + '' + index}
@@ -332,13 +332,13 @@ export default function Dashboard({
                           }
                           className={
                             onClickDashboardItem
-                              ? 'hover:bg-zinc-50'
+                              ? 'hover:qq-bg-zinc-50'
                               : undefined
                           }
-                          // className="shadow-md"
+                          // className="qq-shadow-md"
                           key={elem.name + '' + index}
                           // onClick={() => handleEditDashboardItem(elem)}
-                          // className="shadow"
+                          // className="qq-shadow"
                           style={{
                             // background: theme.elevatedCardColor,
                             // borderRadius: theme.borderRadius,

package/src/DateRangePicker/Calendar.tsx

@@ -87,7 +87,7 @@ const CalendarHeader = ({
     <div
       className={twMerge(
         makeDateRangePickerClassName('calendarHeader'),
-        'flex justify-between items-center',
+        'qq-flex qq-justify-between qq-items-center',
         spacing.twoXs.paddingX,
         spacing.sm.paddingY
       )}
@@ -95,15 +95,15 @@ const CalendarHeader = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderPrevSelection'),
-          'flex items-center space-x-1'
+          'qq-flex qq-items-center qq-space-x-1'
         )}
       >
         <button
           type="button"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderPrevYearButton'),
-            'inline-flex focus:outline-none focus:ring-2',
-            !enableYearPagination && 'hidden',
+            'qq-inline-flex focus:qq-outline-none focus:qq-ring-2',
+            !enableYearPagination && 'qq-hidden',
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
               .hoverBgColor,
             getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
@@ -134,7 +134,7 @@ const CalendarHeader = ({
           name="prevMonth"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderPrevMonthButton'),
-            'inline-flex focus:outline-none focus:ring-2',
+            'qq-inline-flex focus:qq-outline-none focus:qq-ring-2',
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
               .hoverBgColor,
             getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
@@ -163,7 +163,7 @@ const CalendarHeader = ({
       <h2
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderText'),
-          'text-elem',
+          'qq-text-elem',
           getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor,
           fontSize.sm,
           fontWeight.lg
@@ -174,7 +174,7 @@ const CalendarHeader = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderNextSelection'),
-          'flex items-center space-x-1'
+          'qq-flex qq-items-center qq-space-x-1'
         )}
       >
         <button
@@ -182,7 +182,7 @@ const CalendarHeader = ({
           name="nextMonth"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderNextMonthButton'),
-            'inline-flex focus:outline-none focus:ring-2',
+            'qq-inline-flex focus:qq-outline-none focus:qq-ring-2',
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
               .hoverBgColor,
             getColorClassNames(DEFAULT_COLOR, colorPalette.ring).borderColor,
@@ -211,7 +211,7 @@ const CalendarHeader = ({
           type="button"
           className={twMerge(
             makeDateRangePickerClassName('calendarHeaderNextYearButton'),
-            'inline-flex focus:outline-none focus:ring-2',
+            'qq-inline-flex focus:qq-outline-none focus:qq-ring-2',
             !enableYearPagination && 'hidden',
             getColorClassNames(DEFAULT_COLOR, colorPalette.canvasBackground)
               .hoverBgColor,
@@ -230,7 +230,7 @@ const CalendarHeader = ({
           <DoubleArrowRightHeadIcon
             className={twMerge(
               makeDateRangePickerClassName('calendarHeaderNextYearIcon'),
-              'shrink-0 flex-0',
+              'qq-shrink-0 qq-flex-0',
               getColorClassNames(DEFAULT_COLOR, colorPalette.darkText)
                 .textColor,
               sizing.lg.height,
@@ -303,17 +303,17 @@ const CalendarBody = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarBodyWeekdays'),
-          'grid grid-cols-7 text-center',
+          'qq-grid qq-grid-cols-7 qq-text-center',
           getColorClassNames(DEFAULT_COLOR, colorPalette.ring).textColor,
           fontSize.xs,
           fontWeight.md
         )}
       >
         {weekdays.map(dayName => (
-          <div key={dayName} className="w-full flex justify-center">
+          <div key={dayName} className="qq-w-full qq-flex qq-justify-center">
             <div
               className={twMerge(
-                'flex items-center justify-center w-full',
+                'qq-flex qq-items-center qq-justify-center qq-w-full',
                 sizing.threeXl.height
               )}
             >
@@ -325,7 +325,7 @@ const CalendarBody = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarBodyDatesGrid'),
-          'grid grid-cols-7'
+          'qq-grid qq-grid-cols-7'
         )}
       >
         {displayedDates.map(date => {
@@ -343,7 +343,7 @@ const CalendarBody = ({
               className={twMerge(
                 makeDateRangePickerClassName('calendarBodyDate'),
                 colStartClasses[getDay(date)],
-                'w-full'
+                'qq-w-full'
               )}
             >
               <button
@@ -352,7 +352,7 @@ const CalendarBody = ({
                 onPointerEnter={() => setHoveredDate?.(date)}
                 onPointerLeave={() => setHoveredDate?.(undefined)}
                 className={twMerge(
-                  'w-full flex items-center justify-center',
+                  'qq-w-full qq-flex qq-items-center qq-justify-center',
                   sizing.threeXl.height,
                   fontSize.sm,
                   getDateStyles(

package/src/DateRangePicker/DateRangePicker.tsx

@@ -175,7 +175,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           ref={ref}
           className={twMerge(
             makeDateRangePickerClassName('root'),
-            'relative w-full',
+            'qq-relative qq-w-full',
             className
           )}
           {...other}
@@ -204,7 +204,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
             setShowModal={setShowCalendar}
             parentRef={calendarRef}
             width={288}
-            maxHeight="max-h-fit"
+            maxHeight="qq-max-h-fit"
           >
             <Calendar
               enableYearPagination={enableYearPagination}

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -75,7 +75,7 @@ const DateRangePickerButton = ({
     <div
       className={twMerge(
         makeDateRangePickerClassName('button'),
-        'flex items-center justify-between',
+        'qq-flex qq-items-center qq-justify-between',
         getColorClassNames('white').bgColor,
         borderRadius.md.all,
         boxShadow.sm
@@ -88,7 +88,7 @@ const DateRangePickerButton = ({
         onKeyDown={onCalendarKeyDown}
         className={twMerge(
           makeDateRangePickerClassName('calendarButton'),
-          'flex items-center w-full truncate focus:outline-none focus:ring-2',
+          'qq-flex qq-items-center qq-w-full qq-truncate focus:qq-outline-none focus:qq-ring-2',
           getSelectButtonColors(hasDateSelection, disabled),
           enableDropdown
             ? border.none.right
@@ -105,7 +105,7 @@ const DateRangePickerButton = ({
         <CalendarIcon
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonIcon'),
-            'flex-none',
+            'qq-flex-none',
             getColorClassNames(DEFAULT_COLOR, colorPalette.lightText).textColor,
             sizing.lg.height,
             sizing.lg.width,
@@ -117,7 +117,7 @@ const DateRangePickerButton = ({
         <p
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonText'),
-            'whitespace-nowrap truncate',
+            'qq-whitespace-nowrap qq-truncate',
             fontSize.sm,
             fontWeight.md
           )}
@@ -132,7 +132,7 @@ const DateRangePickerButton = ({
           onClick={() => setShowDropdown(!showDropdown)}
           className={twMerge(
             makeDateRangePickerClassName('dropdownButton'),
-            'inline-flex justify-between w-48 truncate focus:outline-none focus:ring-2',
+            'qq-inline-flex qq-justify-between qq-w-48 qq-truncate focus:qq-outline-none focus:qq-ring-2',
             getSelectButtonColors(hasDropdownSelection, disabled),
             getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
               .focusRingColor,
@@ -148,7 +148,7 @@ const DateRangePickerButton = ({
           <p
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonText'),
-              'whitespace-nowrap truncate',
+              'qq-whitespace-nowrap qq-truncate',
               fontSize.sm,
               fontWeight.md
             )}
@@ -158,7 +158,7 @@ const DateRangePickerButton = ({
           <ArrowDownHeadIcon
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,