@quillsql/react 1.1.1 → 1.1.3

package/src/Dashboard.tsx

@@ -99,6 +99,7 @@ export default function Dashboard({
           // change to be set on the dashboard / section as default date range
           defaultValue={[undefined, undefined, '90d']}
           onValueChange={onChangeDateFilter}
+          theme={theme}
         />
       </div>
       {Object.keys(dashboardSections)
@@ -148,7 +149,7 @@ export default function Dashboard({
                     gridTemplateColumns: `repeat(auto-fill,minmax(${
                       maxColumnWidth || 400
                     }px, 1fr))`,
-                    // gridTemplateRows: `repeat(${170}px)`,
+                    gridTemplateRows: `repeat(${170}px)`,
                   }}
                 >
                   {dashboardSections[section]
@@ -176,7 +177,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}
@@ -272,8 +273,8 @@ export default function Dashboard({
                                       containerStyle={{
                                         display: 'flex',
                                         width: '100%',
-                                        height: 120,
-                                        marginBottom: 50,
+                                        height: 30,
+                                        // marginBottom: 50,
                                         marginTop: 20,
                                       }}
                                       isDateFilter={true}
@@ -293,7 +294,7 @@ export default function Dashboard({
               ) : null}
               <div
                 style={{
-                  width: `100%`,
+                  // width: `100%`,
                   listStyleType: 'none',
                   display: 'grid',
                   gridGap: 25,
@@ -332,21 +333,22 @@ 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,
                             // boxShadow: theme.boxShadow,
                             height: '100%',
                             cursor: 'pointer',
-                            width: '100%',
+                            // width: '100%',
                             paddingRight: 25,
+                            minHeight: rowHeight || 400,
                             borderRadius: 8,
                             paddingTop: 20,
                           }}
@@ -368,6 +370,7 @@ export default function Dashboard({
                                   display: 'flex',
                                   flexDirection: 'column',
                                   justifyContent: 'space-between',
+                                  height: '100%',
                                 }}
                               >
                                 <div
@@ -423,11 +426,12 @@ export default function Dashboard({
                                   {/* <Arrow fill={theme.fontColor} /> */}
                                 </div>
                                 {/* <div style={{ height: 20 }} /> */}
-                                <div style={{ padding: 0 }}>
+                                <div style={{ padding: 0, height: '100%' }}>
                                   <Chart
                                     containerStyle={{
                                       display: 'flex',
                                       width: '100%',
+                                      // TODO: fix fixed height
                                       height: 300,
                                       marginBottom: 50,
                                       marginTop: 30,

package/src/DateRangePicker/Calendar.tsx

@@ -50,6 +50,7 @@ interface CalendarHeaderProps {
   anchorDate: Date;
   setStartOfCurrMonth: Dispatch<SetStateAction<Date | null>>;
   locale: Locale;
+  theme: any;
 }
 
 const CalendarHeader = ({
@@ -57,6 +58,7 @@ const CalendarHeader = ({
   anchorDate,
   setStartOfCurrMonth,
   locale,
+  theme,
 }: CalendarHeaderProps) => {
   const firstDayOfMonth = startOfMonth(anchorDate);
   const handlePaginationClick = (
@@ -87,7 +89,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 +97,21 @@ const CalendarHeader = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderPrevSelection'),
-          'flex items-center space-x-1'
+          'qq-flex qq-items-center qq-space-x-1'
         )}
       >
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           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,
@@ -130,11 +138,17 @@ const CalendarHeader = ({
           />
         </button>
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           type="button"
           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 +177,7 @@ const CalendarHeader = ({
       <h2
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderText'),
-          'text-elem',
+          'qq-text-elem',
           getColorClassNames(DEFAULT_COLOR, colorPalette.darkestText).textColor,
           fontSize.sm,
           fontWeight.lg
@@ -174,15 +188,21 @@ const CalendarHeader = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarHeaderNextSelection'),
-          'flex items-center space-x-1'
+          'qq-flex qq-items-center qq-space-x-1'
         )}
       >
         <button
+          style={{
+            borderStyle: 'solid',
+            borderBottomWidth: 1,
+            borderBottomColor: theme?.borderColor || '#E5E7EB',
+            background: theme?.backgroundColor || 'white',
+          }}
           type="button"
           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,
@@ -208,10 +228,16 @@ const CalendarHeader = ({
           />
         </button>
         <button
+          style={{
+            background: theme?.backgroundColor || 'white',
+            borderStyle: 'solid',
+            borderWidth: 1,
+            borderColor: theme?.borderColor || '#E5E7EB',
+          }}
           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 +256,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,
@@ -252,6 +278,7 @@ interface CalendarBodyProps {
   minDate: Date | null;
   maxDate: Date | null;
   locale: Locale;
+  theme: any;
 }
 
 const CalendarBody = ({
@@ -262,6 +289,7 @@ const CalendarBody = ({
   minDate,
   maxDate,
   locale,
+  theme,
 }: CalendarBodyProps) => {
   const [hoveredDate, setHoveredDate] = useState<Date | undefined>();
   const color = useContext(BaseColorContext);
@@ -303,17 +331,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 +353,7 @@ const CalendarBody = ({
       <div
         className={twMerge(
           makeDateRangePickerClassName('calendarBodyDatesGrid'),
-          'grid grid-cols-7'
+          'qq-grid qq-grid-cols-7'
         )}
       >
         {displayedDates.map(date => {
@@ -343,16 +371,17 @@ const CalendarBody = ({
               className={twMerge(
                 makeDateRangePickerClassName('calendarBodyDate'),
                 colStartClasses[getDay(date)],
-                'w-full'
+                'qq-w-full'
               )}
             >
               <button
+                style={{ border: 'none' }}
                 type="button"
                 onClick={() => onDateClick(date)}
                 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(
@@ -388,6 +417,7 @@ export interface CalendarProps {
   maxDate: Date | null;
   onDateClick: (date: Date) => void;
   locale: Locale;
+  theme: any;
 }
 
 const Calendar = ({
@@ -400,6 +430,7 @@ const Calendar = ({
   maxDate,
   onDateClick,
   locale,
+  theme,
 }: CalendarProps) => {
   return (
     <div className={twMerge(spacing.lg.paddingX, spacing.twoXs.paddingY)}>
@@ -408,6 +439,7 @@ const Calendar = ({
         anchorDate={anchorDate}
         setStartOfCurrMonth={setStartOfCurrMonth}
         locale={locale}
+        theme={theme}
       />
       <CalendarBody
         anchorDate={anchorDate}
@@ -417,6 +449,7 @@ const Calendar = ({
         minDate={minDate}
         maxDate={maxDate}
         locale={locale}
+        theme={theme}
       />
     </div>
   );

package/src/DateRangePicker/DateRangePicker.tsx

@@ -57,6 +57,7 @@ export interface DateRangePickerProps
   disabled?: boolean;
   color?: string;
   locale?: Locale;
+  theme: any;
 }
 
 const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
@@ -76,6 +77,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
       enableYearPagination = false,
       locale = enUS,
       className,
+      theme,
       ...other
     } = props;
 
@@ -175,7 +177,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
           ref={ref}
           className={twMerge(
             makeDateRangePickerClassName('root'),
-            'relative w-full',
+            'qq-relative qq-w-full',
             className
           )}
           {...other}
@@ -196,6 +198,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
             onDropdownKeyDown={handleDropdownKeyDown}
             locale={locale}
             dropdownPlaceholder={dropdownPlaceholder}
+            theme={theme}
           />
           {/* Calendar Modal */}
           <Modal
@@ -204,7 +207,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}
@@ -217,6 +220,7 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
               onDateClick={handleDateClick}
               locale={locale}
               setStartOfCurrMonth={setStartOfCurrMonth}
+              theme={theme}
             />
           </Modal>
           {/* Dropdpown Modal */}
@@ -237,7 +241,12 @@ const DateRangePicker = React.forwardRef<HTMLDivElement, DateRangePickerProps>(
               >
                 {dropdownOptions.map(
                   ({ value, text }: DateRangePickerOption) => (
-                    <DropdownItem key={value} value={value} text={text} />
+                    <DropdownItem
+                      key={value}
+                      value={value}
+                      text={text}
+                      theme={theme}
+                    />
                   )
                 )}
               </HoveredValueContext.Provider>

package/src/DateRangePicker/DateRangePickerButton.tsx

@@ -39,6 +39,7 @@ interface DateRangePickerButtonProps {
   onDropdownKeyDown: (e: React.KeyboardEvent<HTMLButtonElement>) => void;
   locale?: Locale;
   dropdownPlaceholder?: string;
+  theme: any;
 }
 
 const DateRangePickerButton = ({
@@ -57,6 +58,7 @@ const DateRangePickerButton = ({
   onDropdownKeyDown,
   locale,
   dropdownPlaceholder = 'Select',
+  theme,
 }: DateRangePickerButtonProps) => {
   const [startDate, endDate, dropdownValue] = value;
 
@@ -75,7 +77,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
@@ -83,12 +85,19 @@ const DateRangePickerButton = ({
     >
       <button
         type="button"
+        style={{
+          borderColor: theme?.borderColor || '#E5E7EB',
+          borderStyle: 'solid',
+          fontFamily: theme?.fontFamily,
+          color: theme?.primaryTextColor,
+          cursor: 'pointer',
+        }}
         ref={calendarRef}
         onClick={() => setShowCalendar(!showCalendar)}
         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 +114,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,
@@ -115,9 +124,14 @@ const DateRangePickerButton = ({
           aria-hidden="true"
         />
         <p
+          style={{
+            margin: 0,
+            fontFamily: theme?.fontFamily,
+            color: theme?.primaryTextColor,
+          }}
           className={twMerge(
             makeDateRangePickerClassName('calendarButtonText'),
-            'whitespace-nowrap truncate',
+            'qq-whitespace-nowrap qq-truncate',
             fontSize.sm,
             fontWeight.md
           )}
@@ -128,11 +142,16 @@ const DateRangePickerButton = ({
       {enableDropdown ? (
         <button
           type="button"
+          style={{
+            borderColor: theme?.borderColor || '#E5E7EB',
+            borderStyle: 'solid',
+            cursor: 'pointer',
+          }}
           ref={dropdownRef}
           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,
@@ -146,9 +165,14 @@ const DateRangePickerButton = ({
           disabled={disabled}
         >
           <p
+            style={{
+              margin: 0,
+              fontFamily: theme?.fontFamily,
+              color: theme?.primaryTextColor,
+            }}
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonText'),
-              'whitespace-nowrap truncate',
+              'qq-whitespace-nowrap qq-truncate',
               fontSize.sm,
               fontWeight.md
             )}
@@ -158,7 +182,7 @@ const DateRangePickerButton = ({
           <ArrowDownHeadIcon
             className={twMerge(
               makeDateRangePickerClassName('dropdownButtonIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,

package/src/PieChart.tsx

@@ -135,7 +135,7 @@ const ChartLegend = (categories: string[], colors: string[]) => {
   //   });
 
   return (
-    <div ref={legendRef} className="flex items-center justify-end">
+    <div ref={legendRef} className="qq-flex qq-items-center qq-justify-end">
       <Legend
         // @ts-ignore
         categories={categories}
@@ -386,8 +386,9 @@ export const ChartTooltipFrame = ({
   children: React.ReactNode;
 }) => (
   <div
+    style={{ borderStyle: 'solid', borderColor: '#E5E7EB', borderWidth: 1 }}
     // style={{ transform: 'translateX(-120px)' }}
-    className="bg-white text-sm rounded-md border shadow-lg"
+    className="qq-bg-white qq-text-sm qq-rounded-md qq-shadow-lg"
     // className={twMerge(
     //   'bg-white',
     //   'font-normal',
@@ -412,10 +413,15 @@ 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' }}
+        style={{
+          background: color,
+          borderWidth: 2,
+          borderStyle: 'solid',
+          borderColor: 'white',
+        }}
         className={twMerge(
           // 'shrink-0',
           // 'bg-black',
@@ -423,10 +429,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
         )}
@@ -436,16 +442,18 @@ 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"
+        style={{ marginTop: 0, marginBottom: 0 }}
+        className="qq-font-medium qq-tabular-nums qq-text-right qq-whitespace-nowrap qq-text-black"
       >
         {value}
       </p>
     </div>
     <p
+      style={{ marginTop: 0, marginBottom: 0 }}
       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
       )}
     >
@@ -471,7 +479,7 @@ export const DonutChartTooltip = ({
       <ChartTooltipFrame>
         <div
           //   style={{ transform: 'translateX(-120px)' }}
-          className={twMerge('px-4', 'py-2')}
+          className={twMerge('qq-px-4', 'qq-py-2')}
         >
           <ChartTooltipRow
             value={valueFormatter(payloadRow.value)}
@@ -825,7 +833,7 @@ function Legend2({ payload, colors }: { payload: any; colors: string[] }) {
                 display: 'block',
                 maxWidth: 120,
               }}
-              className="text-sm text-gray-600 whitespace-nowrap overflow-hidden overflow-ellipsis text-sm font-normal"
+              className="qq-text-sm qq-text-gray-600 qq-whitespace-nowrap qq-overflow-hidden qq-overflow-ellipsis qq-text-sm qq-font-normal"
             >
               {item.value}
             </div>

package/src/components/Dropdown/Dropdown.tsx

@@ -40,6 +40,7 @@ export interface DropdownProps extends React.HTMLAttributes<HTMLDivElement> {
   disabled?: boolean;
   icon?: React.JSXElementConstructor<any>;
   children: React.ReactElement[] | React.ReactElement;
+  theme: any;
 }
 
 const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
@@ -53,6 +54,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
       icon,
       children,
       className,
+      theme,
       ...other
     } = props;
     const [selectedValue, setSelectedValue] = useInternalState(
@@ -92,16 +94,22 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
         onKeyDown={handleKeyDown}
         className={twMerge(
           makeDropdownClassName('root'),
-          'relative w-full min-w-[10rem]',
+          'qq-relative qq-w-full qq-min-w-[10rem]',
           className
         )}
         {...other}
       >
         <button
+          style={{
+            // borderColor: theme.borderColor || '#E5E7EB',
+            // borderStyle: 'solid',
+            border: 'none',
+            background: 'white',
+          }}
           type="button"
           className={twMerge(
             makeDropdownClassName('button'),
-            'flex justify-between items-center w-full focus:outline-none focus:ring-2',
+            'qq-flex qq-justify-between qq-items-center qq-w-full focus:qq-outline-none focus:qq-ring-2',
             getSelectButtonColors(hasSelection, disabled),
             getColorClassNames(BaseColors.Blue, colorPalette.lightRing)
               .focusRingColor,
@@ -115,12 +123,12 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           onClick={() => setIsFocused(!isFocused)}
           disabled={disabled}
         >
-          <div className="flex justify-start items-center truncate">
+          <div className="qq-flex qq-justify-start qq-items-center qq-truncate">
             {Icon ? (
               <Icon
                 className={twMerge(
                   makeDropdownClassName('icon'),
-                  'shrink-0',
+                  'qq-shrink-0',
                   sizing.lg.height,
                   sizing.lg.width,
                   getColorClassNames(DEFAULT_COLOR, colorPalette.lightText)
@@ -131,9 +139,10 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
               />
             ) : null}
             <p
+              style={{ margin: 0 }}
               className={twMerge(
                 makeDropdownClassName('text'),
-                'whitespace-nowrap truncate',
+                'qq-whitespace-nowrap qq-truncate',
                 fontSize.sm,
                 fontWeight.md
               )}
@@ -146,7 +155,7 @@ const Dropdown = React.forwardRef<HTMLDivElement, DropdownProps>(
           <ArrowDownHeadIcon
             className={twMerge(
               makeDropdownClassName('arrowDownIcon'),
-              'flex-none',
+              'qq-flex-none',
               sizing.lg.height,
               sizing.lg.width,
               spacing.twoXs.negativeMarginRight,