@bikdotai/bik-component-library 0.0.837-beta.4 → 0.0.837-beta.6

package/dist/esm/components/datePicker/DatePicker.js

@@ -1,11 +1,11 @@
-import { jsxDEV as l, Fragment as x } from "react/jsx-dev-runtime";
+import { jsxDEV as r, Fragment as x } from "react/jsx-dev-runtime";
 import { useState as o, useEffect as R } from "react";
 import w from "react-calendar";
-import { PickerContainer as C } from "./DatePicker.styled.js";
-import { TimePicker as A } from "./TimePicker.js";
-import { Button as H } from "../button/Button.js";
-const M = (e) => {
-  const [n, s] = o(), [r, u] = o("00:00"), [m, f] = o("23:59");
+import { PickerContainer as C, DatePickerTippyOverride as A } from "./DatePicker.styled.js";
+import { TimePicker as H } from "./TimePicker.js";
+import { Button as U } from "../button/Button.js";
+const j = (e) => {
+  const [n, s] = o(), [l, u] = o("00:00"), [m, k] = o("23:59");
   R(() => {
     if (e.selectedDates) {
       if (s(e.selectedDates), e.showTimePicker) {
@@ -17,18 +17,18 @@ const M = (e) => {
         }
         if (e.selectedDates[1]) {
           const t = e.selectedDates[1].getHours(), i = e.selectedDates[1].getMinutes();
-          f(
+          k(
             `${t.toString().padStart(2, "0")}:${i.toString().padStart(2, "0")}`
           );
         }
       }
     } else
-      s([null, null]), e.showTimePicker && (u("00:00"), f("23:59"));
+      s([null, null]), e.showTimePicker && (u("00:00"), k("23:59"));
   }, [e.selectedDates, e.showTimePicker]);
-  const [k, g] = o(e.selectedDate), d = e.maxRangeLimit === null ? null : e.maxRangeLimit === void 0 ? 180 : e.maxRangeLimit;
-  function b(t) {
-    if (e.showTimePicker && r) {
-      const [i, a] = r.split(":").map(Number);
+  const [d, b] = o(e.selectedDate), f = e.maxRangeLimit === null ? null : e.maxRangeLimit === void 0 ? 180 : e.maxRangeLimit;
+  function v(t) {
+    if (e.showTimePicker && l) {
+      const [i, a] = l.split(":").map(Number);
       t[0].setHours(i, a, 0, 0);
     }
     if (e.showTimePicker && m) {
@@ -50,31 +50,31 @@ const M = (e) => {
       e.showTimePicker || e.onSelectRange?.(n[0], n[1]);
     }
   }
-  function v(t) {
+  function g(t) {
     u(t), h(t, m);
   }
   function P(t) {
-    f(t), h(r, t);
+    k(t), h(l, t);
   }
   function N(t) {
-    if (e.showTimePicker && r) {
-      const [i, a] = r.split(":").map(Number);
+    if (e.showTimePicker && l) {
+      const [i, a] = l.split(":").map(Number);
       t.setHours(i, a, 0, 0);
     }
-    e.showTimePicker || e.onSelectDate?.(t), g(t);
+    e.showTimePicker || e.onSelectDate?.(t), b(t);
   }
-  const S = ({ date: t, view: i }) => {
+  const y = ({ date: t, view: i }) => {
     if (!Array.isArray(n)) return !1;
     const [a, c] = n;
-    if (a && !c && d !== null) {
+    if (a && !c && f !== null) {
       const D = Math.round(
         (t - a) / 864e5
       );
-      return i === "month" && (D < -d || D > d);
+      return i === "month" && (D < -f || D > f);
     }
     return !1;
   };
-  function T(t) {
+  function S(t) {
     if (!Array.isArray(n)) {
       s([t, null]);
       return;
@@ -82,19 +82,24 @@ const M = (e) => {
     const [i, a] = n;
     s(i ? i && !a ? [i, t] : [t, null] : [t, null]);
   }
-  function y() {
-    e.selectRange && Array.isArray(n) && n[0] && n[1] ? e.onSelectRange?.(n[0], n[1]) : !e.selectRange && k && e.onSelectDate?.(k);
+  function T() {
+    e.selectRange && Array.isArray(n) && n[0] && n[1] ? e.onSelectRange?.(n[0], n[1]) : !e.selectRange && d && e.onSelectDate?.(d);
   }
-  return /* @__PURE__ */ l(C, { selectRange: e.selectRange, children: [
-    /* @__PURE__ */ l(
+  return /* @__PURE__ */ r(C, { selectRange: e.selectRange, children: [
+    /* @__PURE__ */ r(A, {}, void 0, !1, {
+      fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
+      lineNumber: 190,
+      columnNumber: 4
+    }, void 0),
+    /* @__PURE__ */ r(
       w,
       {
         onChange: (t) => {
-          e.selectRange && e.onSelectRange ? b(t) : e.onSelectDate && N(t);
+          e.selectRange && e.onSelectRange ? v(t) : e.onSelectDate && N(t);
         },
-        tileDisabled: S,
-        onClickDay: T,
-        value: e.selectRange ? n : k,
+        tileDisabled: y,
+        onClickDay: S,
+        value: e.selectRange ? n : d,
         selectRange: e.selectRange,
         minDate: e.minDate,
         maxDate: e.maxDate
@@ -103,18 +108,18 @@ const M = (e) => {
       !1,
       {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-        lineNumber: 187,
+        lineNumber: 191,
         columnNumber: 4
       },
       void 0
     ),
-    e.showTimePicker && e.selectRange && /* @__PURE__ */ l(x, { children: [
-      /* @__PURE__ */ l(
-        A,
+    e.showTimePicker && e.selectRange && /* @__PURE__ */ r(x, { children: [
+      /* @__PURE__ */ r(
+        H,
         {
-          fromTime: r,
+          fromTime: l,
           toTime: m,
-          onFromTimeChange: v,
+          onFromTimeChange: g,
           onToTimeChange: P,
           timeInterval: e.timeInterval
         },
@@ -122,12 +127,12 @@ const M = (e) => {
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-          lineNumber: 205,
+          lineNumber: 209,
           columnNumber: 6
         },
         void 0
       ),
-      /* @__PURE__ */ l(
+      /* @__PURE__ */ r(
         "div",
         {
           className: "date-picker-save-button-container",
@@ -136,19 +141,19 @@ const M = (e) => {
             justifyContent: "flex-end",
             padding: "16px"
           },
-          children: /* @__PURE__ */ l(
-            H,
+          children: /* @__PURE__ */ r(
+            U,
             {
               buttonType: "primary",
               size: "small",
               buttonText: "Save",
-              onClick: y
+              onClick: T
             },
             void 0,
             !1,
             {
               fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-              lineNumber: 220,
+              lineNumber: 224,
               columnNumber: 7
             },
             void 0
@@ -158,23 +163,23 @@ const M = (e) => {
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-          lineNumber: 212,
+          lineNumber: 216,
           columnNumber: 6
         },
         void 0
       )
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-      lineNumber: 204,
+      lineNumber: 208,
       columnNumber: 5
     }, void 0)
   ] }, void 0, !0, {
     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/datePicker/DatePicker.tsx",
-    lineNumber: 186,
+    lineNumber: 189,
     columnNumber: 3
   }, void 0);
 };
 export {
-  M as DatePicker
+  j as DatePicker
 };
 //# sourceMappingURL=DatePicker.js.map

package/dist/esm/components/datePicker/DatePicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport { PickerContainer } from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number | null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date | null> | undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit || diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxDEV","PickerContainer","Calendar","this","Fragment","TimePicker","Button"],"mappings":";;;;;;AAmBO,MAAMA,IAAwC,CAACC,MAAU;AAC/D,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAAA,GAGpC,CAACC,GAAUC,CAAW,IAAIF,EAAS,OAAO,GAC1C,CAACG,GAAQC,CAAS,IAAIJ,EAAS,OAAO;AAE5C,EAAAK,EAAU,MAAM;AACf,QAAIR,EAAM;AAGT,UAFAE,EAAiBF,EAAM,aAAa,GAEhCA,EAAM,gBAAgB;AACzB,YAAIA,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAK;AAAA,YACC,GAAGI,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AACA,YAAIV,EAAM,cAAc,CAAC,GAAG;AAC3B,gBAAMS,IAAQT,EAAM,cAAc,CAAC,EAAE,SAAA,GAC/BU,IAAUV,EAAM,cAAc,CAAC,EAAE,WAAA;AACvC,UAAAO;AAAA,YACC,GAAGE,EAAM,SAAA,EAAW,SAAS,GAAG,GAAG,CAAC,IAAIC,EACtC,SAAA,EACA,SAAS,GAAG,GAAG,CAAC;AAAA,UAAA;AAAA,QAEpB;AAAA,MACD;AAAA;AAEA,MAAAR,EAAiB,CAAC,MAAM,IAAI,CAAC,GAEzBF,EAAM,mBACTK,EAAY,OAAO,GACnBE,EAAU,OAAO;AAAA,EAGpB,GAAG,CAACP,EAAM,eAAeA,EAAM,cAAc,CAAC;AAE9C,QAAM,CAACW,GAAcC,CAAe,IAAIT,EAASH,EAAM,YAAY,GAC7Da,IACLb,EAAM,kBAAkB,OACrB,OACAA,EAAM,kBAAkB,SACxB,MACAA,EAAM;AAEV,WAASc,EAAqBC,GAAc;AAE3C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAEA,QAAIV,EAAM,kBAAkBM,GAAQ;AACnC,YAAM,CAACG,GAAOC,CAAO,IAAIJ,EAAO,MAAM,GAAG,EAAE,IAAI,MAAM;AACrD,MAAAS,EAAK,CAAC,EAAE,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACtC;AAGA,IAAKV,EAAM,kBACVA,EAAM,gBAAgBe,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,GAEvCb,EAAiB,CAACa,EAAK,CAAC,GAAGA,EAAK,CAAC,CAAC,CAAC;AAAA,EACpC;AAEA,WAASC,EAAiBC,GAAsBC,GAAoB;AACnE,QAAI,MAAM,QAAQjB,CAAa,KAAKA,EAAc,CAAC,KAAKA,EAAc,CAAC,GAAG;AAEzE,UAAIgB,GAAa;AAChB,cAAM,CAACR,GAAOC,CAAO,IAAIO,EAAY,MAAM,GAAG,EAAE,IAAI,MAAM;AAC1D,QAAAhB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAEA,UAAIQ,GAAW;AACd,cAAM,CAACT,GAAOC,CAAO,IAAIQ,EAAU,MAAM,GAAG,EAAE,IAAI,MAAM;AACxD,QAAAjB,EAAc,CAAC,EAAE,SAASQ,GAAOC,GAAS,GAAG,CAAC;AAAA,MAC/C;AAGA,MAAKV,EAAM,kBACVA,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC;AAAA,IAE1D;AAAA,EACD;AAEA,WAASkB,EAAqBC,GAAc;AAC3C,IAAAf,EAAYe,CAAI,GAChBJ,EAAiBI,GAAMd,CAAM;AAAA,EAC9B;AAEA,WAASe,EAAmBD,GAAc;AACzC,IAAAb,EAAUa,CAAI,GACdJ,EAAiBZ,GAAUgB,CAAI;AAAA,EAChC;AAEA,WAASE,EAA0BP,GAAY;AAE9C,QAAIf,EAAM,kBAAkBI,GAAU;AACrC,YAAM,CAACK,GAAOC,CAAO,IAAIN,EAAS,MAAM,GAAG,EAAE,IAAI,MAAM;AACvD,MAAAW,EAAK,SAASN,GAAOC,GAAS,GAAG,CAAC;AAAA,IACnC;AAGA,IAAKV,EAAM,kBACVA,EAAM,eAAee,CAAI,GAE1BH,EAAgBG,CAAI;AAAA,EACrB;AAEA,QAAMQ,IAAe,CAAC,EAAE,MAAAR,GAAM,MAAAS,QAAW;AACxC,QAAI,CAAC,MAAM,QAAQvB,CAAa,EAAG,QAAO;AAE1C,UAAM,CAACwB,GAAOC,CAAG,IAAIzB;AAErB,QAAIwB,KAAS,CAACC,KAAOb,MAAkB,MAAM;AAC5C,YAAMc,IAAa,KAAK;AAAA,SACtBZ,IAAQU,KAAgC;AAAA,MAAiB;AAG3D,aACCD,MAAS,YACRG,IAAa,CAACd,KAAiBc,IAAad;AAAA,IAE/C;AAEA,WAAO;AAAA,EACR;AAEA,WAASe,EAAWb,GAAY;AAC/B,QAAI,CAAC,MAAM,QAAQd,CAAa,GAAG;AAClC,MAAAC,EAAiB,CAACa,GAAM,IAAI,CAAC;AAC7B;AAAA,IACD;AAEA,UAAM,CAACU,GAAOC,CAAG,IAAIzB;AAErB,IAMCC,EANIuB,IAKIA,KAAS,CAACC,IACD,CAACD,GAAOV,CAAI,IAGZ,CAACA,GAAM,IAAI,IARX,CAACA,GAAM,IAAI,CAKE;AAAA,EAKhC;AAEA,WAASc,IAAkB;AAC1B,IACC7B,EAAM,eACN,MAAM,QAAQC,CAAa,KAC3BA,EAAc,CAAC,KACfA,EAAc,CAAC,IAEfD,EAAM,gBAAgBC,EAAc,CAAC,GAAGA,EAAc,CAAC,CAAC,IAC9C,CAACD,EAAM,eAAeW,KAChCX,EAAM,eAAeW,CAAY;AAAA,EAEnC;AAEA,SACC,gBAAAmB,EAACC,GAAA,EAAgB,aAAa/B,EAAM,aACnC,UAAA;AAAA,IAAA,gBAAA8B;AAAA,MAACE;AAAA,MAAA;AAAA,QACA,UAAU,CAACjB,MAAS;AACnB,UAAIf,EAAM,eAAeA,EAAM,gBAC9Bc,EAAqBC,CAAI,IACff,EAAM,gBAChBsB,EAA0BP,CAAI;AAAA,QAEhC;AAAA,QACA,cAAAQ;AAAA,QACA,YAAAK;AAAA,QACA,OAAQ5B,EAAM,cAAcC,IAAgBU;AAAA,QAC5C,aAAaX,EAAM;AAAA,QACnB,SAASA,EAAM;AAAA,QACf,SAASA,EAAM;AAAA,MAAA;AAAA,MACV;AAAA,MAdN;AAAA,MAAA;AAAA,QAAA,UAAA;AAAA,QAAA,YAAA;AAAA,QAAA,cAAA;AAAA,MAAA;AAAA,MAAAiC;AAAAA,IAAA;AAAA,IAgBCjC,EAAM,kBAAkBA,EAAM,eAC9B,gBAAA8B,EAAAI,GAAA,EACC,UAAA;AAAA,MAAA,gBAAAJ;AAAA,QAACK;AAAA,QAAA;AAAA,UACA,UAAA/B;AAAA,UACA,QAAAE;AAAA,UACA,kBAAkBa;AAAA,UAClB,gBAAgBE;AAAA,UAChB,cAAcrB,EAAM;AAAA,QAAA;AAAA,QALrB;AAAA,QAAA;AAAA,QAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA;AAAA,QAAAiC;AAAAA,MAAA;AAAA,MAOA,gBAAAH;AAAA,QAAC;AAAA,QAAA;AAAA,UACA,WAAU;AAAA,UACV,OAAO;AAAA,YACN,SAAS;AAAA,YACT,gBAAgB;AAAA,YAChB,SAAS;AAAA,UAAA;AAAA,UAGV,UAAA,gBAAAA;AAAA,YAACM;AAAA,YAAA;AAAA,cACA,YAAW;AAAA,cACX,MAAK;AAAA,cACL,YAAW;AAAA,cACX,SAASP;AAAA,YAAA;AAAA,YAJV;AAAA,YAAA;AAAA,YAAA;AAAA,cAAA,UAAA;AAAA,cAAA,YAAA;AAAA,cAAA,cAAA;AAAA,YAAA;AAAA,YAAAI;AAAAA,UAAA;AAAA,QAKA;AAAA,QAbD;AAAA,QAAA;AAAA,QAAA;AAAA,UAAA,UAAA;AAAA,UAAA,YAAA;AAAA,UAAA,cAAA;AAAA,QAAA;AAAA,QAAAA;AAAAA,MAAA;AAAA,IAcA,EAAA,GAtBD,QAAA,IAAA;AAAA,MAAA,UAAA;AAAA,MAAA,YAAA;AAAA,MAAA,cAAA;AAAA,IAAA,GAAAA,MAuBA;AAAA,EAAA,EAAA,GAzCF,QAAA,IAAA;AAAA,IAAA,UAAA;AAAA,IAAA,YAAA;AAAA,IAAA,cAAA;AAAA,EAAA,GAAAA,MA2CA;AAEF;"}
+{"version":3,"file":"DatePicker.js","sources":["../../../../src/components/datePicker/DatePicker.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport Calendar from 'react-calendar';\nimport { Button } from '@src/components/button';\nimport {\n\tDatePickerTippyOverride,\n\tPickerContainer,\n} from '@src/components/datePicker/DatePicker.styled';\nimport { TimePicker } from '@src/components/datePicker/TimePicker';\n\nexport type DatePickerProps = {\n\tselectRange: boolean;\n\tselectedDates?: Date[]; // for range selection\n\tselectedDate?: Date; // for single date selection\n\tonSelectRange?: (startDate: Date, endDate: Date) => void; // for range selection\n\tonSelectDate?: (date: Date) => void; // for single date selection\n\tminDate?: Date;\n\tmaxDate?: Date;\n\tmaxRangeLimit?: number | null;\n\tshowTimePicker?: boolean;\n\ttimeInterval?: number; // in minutes, default 30\n};\n\nexport const DatePicker: React.FC<DatePickerProps> = (props) => {\n\tconst [selectedDates, setSelectedDates] = useState<\n\t\tArray<Date | null> | undefined\n\t>();\n\tconst [fromTime, setFromTime] = useState('00:00');\n\tconst [toTime, setToTime] = useState('23:59');\n\n\tuseEffect(() => {\n\t\tif (props.selectedDates) {\n\t\t\tsetSelectedDates(props.selectedDates);\n\t\t\t// Extract time from selectedDates if showTimePicker is enabled\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tif (props.selectedDates[0]) {\n\t\t\t\t\tconst hours = props.selectedDates[0].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[0].getMinutes();\n\t\t\t\t\tsetFromTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t\tif (props.selectedDates[1]) {\n\t\t\t\t\tconst hours = props.selectedDates[1].getHours();\n\t\t\t\t\tconst minutes = props.selectedDates[1].getMinutes();\n\t\t\t\t\tsetToTime(\n\t\t\t\t\t\t`${hours.toString().padStart(2, '0')}:${minutes\n\t\t\t\t\t\t\t.toString()\n\t\t\t\t\t\t\t.padStart(2, '0')}`,\n\t\t\t\t\t);\n\t\t\t\t}\n\t\t\t}\n\t\t} else {\n\t\t\tsetSelectedDates([null, null]);\n\t\t\t// Reset time pickers to default when no dates are selected\n\t\t\tif (props.showTimePicker) {\n\t\t\t\tsetFromTime('00:00');\n\t\t\t\tsetToTime('23:59');\n\t\t\t}\n\t\t}\n\t}, [props.selectedDates, props.showTimePicker]);\n\n\tconst [selectedDate, setSelectedDate] = useState(props.selectedDate);\n\tconst maxRangeLimit =\n\t\tprops.maxRangeLimit === null\n\t\t\t? null\n\t\t\t: props.maxRangeLimit === undefined\n\t\t\t? 180\n\t\t\t: props.maxRangeLimit;\n\n\tfunction handleRangeSelection(date: Date[]) {\n\t\t// Apply time to dates if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate[0].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\tif (props.showTimePicker && toTime) {\n\t\t\tconst [hours, minutes] = toTime.split(':').map(Number);\n\t\t\tdate[1].setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectRange?.(date[0], date[1]);\n\t\t}\n\t\tsetSelectedDates([date[0], date[1]]);\n\t}\n\n\tfunction handleTimeChange(newFromTime?: string, newToTime?: string) {\n\t\tif (Array.isArray(selectedDates) && selectedDates[0] && selectedDates[1]) {\n\t\t\t// Apply time to existing date objects\n\t\t\tif (newFromTime) {\n\t\t\t\tconst [hours, minutes] = newFromTime.split(':').map(Number);\n\t\t\t\tselectedDates[0].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\tif (newToTime) {\n\t\t\t\tconst [hours, minutes] = newToTime.split(':').map(Number);\n\t\t\t\tselectedDates[1].setHours(hours, minutes, 0, 0);\n\t\t\t}\n\n\t\t\t// Only trigger callback if time picker is not shown (shouldn't happen, but for safety)\n\t\t\tif (!props.showTimePicker) {\n\t\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t\t}\n\t\t}\n\t}\n\n\tfunction handleFromTimeChange(time: string) {\n\t\tsetFromTime(time);\n\t\thandleTimeChange(time, toTime);\n\t}\n\n\tfunction handleToTimeChange(time: string) {\n\t\tsetToTime(time);\n\t\thandleTimeChange(fromTime, time);\n\t}\n\n\tfunction handleSingleDateSelection(date: Date) {\n\t\t// Apply time if time picker is enabled\n\t\tif (props.showTimePicker && fromTime) {\n\t\t\tconst [hours, minutes] = fromTime.split(':').map(Number);\n\t\t\tdate.setHours(hours, minutes, 0, 0);\n\t\t}\n\n\t\t// Only trigger callback if time picker is not shown\n\t\tif (!props.showTimePicker) {\n\t\t\tprops.onSelectDate?.(date);\n\t\t}\n\t\tsetSelectedDate(date);\n\t}\n\n\tconst tileDisabled = ({ date, view }) => {\n\t\tif (!Array.isArray(selectedDates)) return false;\n\n\t\tconst [start, end] = selectedDates;\n\n\t\tif (start && !end && maxRangeLimit !== null) {\n\t\t\tconst diffInDays = Math.round(\n\t\t\t\t(date - (start as unknown as number)) / (1000 * 60 * 60 * 24),\n\t\t\t);\n\n\t\t\treturn (\n\t\t\t\tview === 'month' &&\n\t\t\t\t(diffInDays < -maxRangeLimit || diffInDays > maxRangeLimit)\n\t\t\t);\n\t\t}\n\n\t\treturn false;\n\t};\n\n\tfunction onClickDay(date: Date) {\n\t\tif (!Array.isArray(selectedDates)) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t\treturn;\n\t\t}\n\n\t\tconst [start, end] = selectedDates;\n\t\t// Check if the start date is not selected yet\n\t\tif (!start) {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\n\t\t// Check if only the start date is selected\n\t\telse if (start && !end) {\n\t\t\tsetSelectedDates([start, date]);\n\t\t} // Reset the range if both start and end dates are already selected\n\t\telse {\n\t\t\tsetSelectedDates([date, null]);\n\t\t}\n\t}\n\n\tfunction handleSaveClick() {\n\t\tif (\n\t\t\tprops.selectRange &&\n\t\t\tArray.isArray(selectedDates) &&\n\t\t\tselectedDates[0] &&\n\t\t\tselectedDates[1]\n\t\t) {\n\t\t\tprops.onSelectRange?.(selectedDates[0], selectedDates[1]);\n\t\t} else if (!props.selectRange && selectedDate) {\n\t\t\tprops.onSelectDate?.(selectedDate);\n\t\t}\n\t}\n\n\treturn (\n\t\t<PickerContainer selectRange={props.selectRange}>\n\t\t\t<DatePickerTippyOverride />\n\t\t\t<Calendar\n\t\t\t\tonChange={(date) => {\n\t\t\t\t\tif (props.selectRange && props.onSelectRange) {\n\t\t\t\t\t\thandleRangeSelection(date);\n\t\t\t\t\t} else if (props.onSelectDate) {\n\t\t\t\t\t\thandleSingleDateSelection(date);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\ttileDisabled={tileDisabled}\n\t\t\t\tonClickDay={onClickDay}\n\t\t\t\tvalue={(props.selectRange ? selectedDates : selectedDate) as Date}\n\t\t\t\tselectRange={props.selectRange}\n\t\t\t\tminDate={props.minDate}\n\t\t\t\tmaxDate={props.maxDate}\n\t\t\t\tkey={'bik-calendar'}\n\t\t\t/>\n\t\t\t{props.showTimePicker && props.selectRange && (\n\t\t\t\t<>\n\t\t\t\t\t<TimePicker\n\t\t\t\t\t\tfromTime={fromTime}\n\t\t\t\t\t\ttoTime={toTime}\n\t\t\t\t\t\tonFromTimeChange={handleFromTimeChange}\n\t\t\t\t\t\tonToTimeChange={handleToTimeChange}\n\t\t\t\t\t\ttimeInterval={props.timeInterval}\n\t\t\t\t\t/>\n\t\t\t\t\t<div\n\t\t\t\t\t\tclassName=\"date-picker-save-button-container\"\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tdisplay: 'flex',\n\t\t\t\t\t\t\tjustifyContent: 'flex-end',\n\t\t\t\t\t\t\tpadding: '16px',\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tbuttonType=\"primary\"\n\t\t\t\t\t\t\tsize=\"small\"\n\t\t\t\t\t\t\tbuttonText=\"Save\"\n\t\t\t\t\t\t\tonClick={handleSaveClick}\n\t\t\t\t\t\t/>\n\t\t\t\t\t</div>\n\t\t\t\t</>\n\t\t\t)}\n\t\t</PickerContainer>\n\t);\n};\n"],"names":["DatePicker","props","selectedDates","setSelectedDates","useState","fromTime","setFromTime","toTime","setToTime","useEffect","hours","minutes","selectedDate","setSelectedDate","maxRangeLimit","handleRangeSelection","date","handleTimeChange","newFromTime","newToTime","handleFromTimeChange","time","handleToTimeChange","handleSingleDateSelection","tileDisabled","view","start","end","diffInDays","onClickDay","handleSaveClick","jsxDEV","PickerContainer","DatePickerTippyOverride","this","Calendar","Fragment","TimePicker","Button"],"mappings":"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"}

package/dist/esm/components/datePicker/DatePicker.styled.d.ts

@@ -4,3 +4,13 @@ export declare const PickerContainer: import('styled-components').StyledComponen
 export declare const TimePickerContainer: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeInputWrapper: import('styled-components').StyledComponent<"div", any, {}, never>;
 export declare const TimeLabel: import('styled-components').StyledComponent<"div", any, {}, never>;
+export declare const DatePickerTippyOverride: import('styled-components').GlobalStyleComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: any;
+} & {
+    as?: string | import('react').ComponentType<any> | undefined;
+    forwardedAs?: string | import('react').ComponentType<any> | undefined;
+}, import('styled-components').DefaultTheme>;

package/dist/esm/components/datePicker/DatePicker.styled.js

@@ -1,34 +1,35 @@
-import t from "styled-components";
+import t, { createGlobalStyle as e } from "styled-components";
 import { COLORS as r } from "../../constants/Theme.js";
-const e = (o) => o.selectRange ? `
+const a = (o) => o.selectRange ? `
       border-top-right-radius: 0 !important;
       border-bottom-right-radius: 0 !important;
     ` : `
       border-top-right-radius: 4px;
       border-bottom-right-radius: 4px;
-    `, d = t.div`
+    `, n = t.div`
 	position: relative;
 	z-index: 99999;
 	width: fit-content;
 	background: ${r.text.white};
-	border: 1px solid ${r.stroke.primary};
-	border-radius: 4px;
+	border: none !important;
+	border-radius: 8px !important;
 	box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);
+	overflow: hidden;
 
 	/* Clip content to respect border-radius */
 	> :first-of-type {
-		border-top-left-radius: 4px;
-		border-top-right-radius: 4px;
+		border-top-left-radius: 8px;
+		border-top-right-radius: 8px;
 	}
 
 	> :last-child {
-		border-bottom-left-radius: 4px;
-		border-bottom-right-radius: 4px;
+		border-bottom-left-radius: 8px;
+		border-bottom-right-radius: 8px;
 	}
 
 	.react-calendar {
 		background: ${r.text.white};
-		border: none;
+		border: none !important;
 		box-shadow: none;
 		border-radius: 0;
 		color: ${r.text.primary};
@@ -112,7 +113,7 @@ const e = (o) => o.selectRange ? `
 							border-bottom-right-radius: 0 !important;
 						}
 						&.react-calendar__tile--rangeEnd {
-							${(o) => e(o)}
+							${(o) => a(o)}
 							border-top-left-radius: 4px !important;
 							border-bottom-left-radius: 4px !important;
 							&:enabled:hover {
@@ -211,7 +212,7 @@ const e = (o) => o.selectRange ? `
 			background-color: #f0f0f0 !important;
 		}
 	}
-`, i = t.div`
+`, p = t.div`
 	display: flex;
 	gap: 10px;
 	padding: 16px;
@@ -226,17 +227,23 @@ const e = (o) => o.selectRange ? `
 	flex: 1;
 	min-width: 0;
 	max-width: 154px;
-`, p = t.div`
+`, c = t.div`
 	font-style: normal;
 	font-weight: 400;
 	font-size: 14px;
 	line-height: 20px;
 	color: ${r.content.secondary};
+`, l = e`
+	.tippy-box:has(> .tippy-content > ${n}) {
+		background: transparent !important;
+		border-radius: 8px !important;
+	}
 `;
 export {
-  d as PickerContainer,
+  l as DatePickerTippyOverride,
+  n as PickerContainer,
   b as TimeInputWrapper,
-  p as TimeLabel,
-  i as TimePickerContainer
+  c as TimeLabel,
+  p as TimePickerContainer
 };
 //# sourceMappingURL=DatePicker.styled.js.map

package/dist/esm/components/datePicker/DatePicker.styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n      border-top-right-radius: 0 !important;\n      border-bottom-right-radius: 0 !important;\n    `;\n\t} else {\n\t\treturn `\n      border-top-right-radius: 4px;\n      border-bottom-right-radius: 4px;\n    `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: 1px solid ${COLORS.stroke.primary};\n\tborder-radius: 4px;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\n\t/* Clip content to respect border-radius */\n\t> :first-of-type {\n\t\tborder-top-left-radius: 4px;\n\t\tborder-top-right-radius: 4px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 4px;\n\t\tborder-bottom-right-radius: 4px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/* While picking the end date, the tile under the cursor (the\n\t\t\t\t   prospective endpoint) should match the selected start date —\n\t\t\t\t   brand background + white text — instead of falling through to\n\t\t\t\t   the generic grey :hover above. The in-between preview stays\n\t\t\t\t   brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t   single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel"],"mappings":"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"}
+{"version":3,"file":"DatePicker.styled.js","sources":["../../../../src/components/datePicker/DatePicker.styled.ts"],"sourcesContent":["import styled, { createGlobalStyle } from 'styled-components';\nimport { COLORS } from '@src/constants/Theme';\n\nconst generateBorderRadius = (props) => {\n\tif (props.selectRange) {\n\t\treturn `\n      border-top-right-radius: 0 !important;\n      border-bottom-right-radius: 0 !important;\n    `;\n\t} else {\n\t\treturn `\n      border-top-right-radius: 4px;\n      border-bottom-right-radius: 4px;\n    `;\n\t}\n};\n\nexport const PickerContainer = styled.div<{\n\tselectRange: boolean;\n}>`\n\tposition: relative;\n\tz-index: 99999;\n\twidth: fit-content;\n\tbackground: ${COLORS.text.white};\n\tborder: none !important;\n\tborder-radius: 8px !important;\n\tbox-shadow: 0px 2px 8px rgba(0, 0, 0, 0.12);\n\toverflow: hidden;\n\n\t/* Clip content to respect border-radius */\n\t> :first-of-type {\n\t\tborder-top-left-radius: 8px;\n\t\tborder-top-right-radius: 8px;\n\t}\n\n\t> :last-child {\n\t\tborder-bottom-left-radius: 8px;\n\t\tborder-bottom-right-radius: 8px;\n\t}\n\n\t.react-calendar {\n\t\tbackground: ${COLORS.text.white};\n\t\tborder: none !important;\n\t\tbox-shadow: none;\n\t\tborder-radius: 0;\n\t\tcolor: ${COLORS.text.primary};\n\t\t&--selectRange {\n\t\t\t.react-calendar {\n\t\t\t\t&__year-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: unset;\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t\t&__month-view {\n\t\t\t\t\t.react-calendar__tile--hover {\n\t\t\t\t\t\tbackground-color: ${COLORS.background.brandLight};\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\t\t.react-calendar {\n\t\t\t&__tile {\n\t\t\t\ttransition: all 0.25s;\n\t\t\t\t&:enabled:hover {\n\t\t\t\t\tbackground-color: ${COLORS.surface.hovered} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t/* While picking the end date, the tile under the cursor (the\n\t\t\t\t   prospective endpoint) should match the selected start date —\n\t\t\t\t   brand background + white text — instead of falling through to\n\t\t\t\t   the generic grey :hover above. The in-between preview stays\n\t\t\t\t   brandLight (--hover). Scoped to the hover endpoints so normal\n\t\t\t\t   single-date hover is unaffected. */\n\t\t\t\t&--hoverEnd,\n\t\t\t\t&--hoverEnd:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverStart,\n\t\t\t\t&--hoverStart:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hoverBothEnds,\n\t\t\t\t&--hoverBothEnds:enabled:hover {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\tborder-radius: 4px !important;\n\t\t\t\t}\n\t\t\t\t&--hasActive:enabled:hover,\n\t\t\t\t&--hasActive:enabled:focus {\n\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\t\t\t\t}\n\t\t\t\t&.react-calendar__tile {\n\t\t\t\t\t&--range {\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeStart {\n\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t\t&.react-calendar__tile--rangeEnd {\n\t\t\t\t\t\t\t${(props) => generateBorderRadius(props)}\n\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\t\tborder-top-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-bottom-right-radius: 0 !important;\n\t\t\t\t\t\t\t\tborder-top-left-radius: 4px !important;\n\t\t\t\t\t\t\t\tborder-bottom-left-radius: 4px !important;\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t&--rangeEnd {\n\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\tborder-top-right-radius: 4px !important;\n\t\t\t\t\t\tborder-bottom-right-radius: 4px !important;\n\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\tcolor: ${COLORS.text.white} !important;\n\n\t\t\t\t\t\t&:enabled:hover {\n\t\t\t\t\t\t\tborder-top-left-radius: 0 !important;\n\t\t\t\t\t\t\tbackground: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\t\t\t\t\tborder-bottom-left-radius: 0 !important;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__tile--active {\n\t\t\tbackground: ${COLORS.background.brandLight} !important;\n\t\t\tcolor: ${COLORS.text.primary} !important;\n\t\t}\n\n\t\t.react-calendar__tile--now {\n\t\t\tbackground: ${COLORS.text.white} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t\tborder-color: ${COLORS.background.brand} !important;\n\t\t\tborder-style: solid !important;\n\t\t\tborder-width: 1px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays__weekday {\n\t\t\tfont-style: normal;\n\t\t\toverflow: hidden;\n\t\t\tfont-weight: 600;\n\t\t\tfont-size: 14px;\n\t\t\tline-height: 20px;\n\t\t\tcolor: ${COLORS.text.primary};\n\n\t\t\tabbr[title] {\n\t\t\t\ttext-decoration: none !important;\n\t\t\t}\n\t\t}\n\n\t\t.react-calendar__navigation button:enabled:hover,\n\t\t.react-calendar__navigation button:enabled:focus {\n\t\t\tbackground-color: ${COLORS.background.brandLight} !important;\n\t\t\tborder-radius: 4px !important;\n\t\t}\n\n\t\t.react-calendar__month-view__weekends {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__days__day--weekend {\n\t\t\tcolor: ${COLORS.text.primary};\n\t\t}\n\n\t\t.react-calendar__month-view__weekdays {\n\t\t\tbackground: ${COLORS.surface.subdued};\n\t\t}\n\n\t\t.react-calendar__navigation {\n\t\t\tdisplay: flex;\n\t\t\tpadding: 12px 20px;\n\n\t\t\tbutton {\n\t\t\t\tborder: 0 !important;\n\t\t\t\tbackground: transparent !important;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev2-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\n\t\t\t.react-calendar__navigation__arrow\n\t\t\t\treact-calendar__navigation__prev-button {\n\t\t\t\tfont-size: 20px;\n\t\t\t}\n\t\t}\n\t\t.react-calendar__tile:disabled {\n\t\t\tbackground-color: #f0f0f0 !important;\n\t\t}\n\t}\n`;\n\nexport const TimePickerContainer = styled.div`\n\tdisplay: flex;\n\tgap: 10px;\n\tpadding: 16px;\n\tbackground: ${COLORS.text.white};\n\tbox-sizing: border-box;\n\twidth: 100%;\n\tmax-width: 350px;\n`;\n\nexport const TimeInputWrapper = styled.div`\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tflex: 1;\n\tmin-width: 0;\n\tmax-width: 154px;\n`;\n\nexport const TimeLabel = styled.div`\n\tfont-style: normal;\n\tfont-weight: 400;\n\tfont-size: 14px;\n\tline-height: 20px;\n\tcolor: ${COLORS.content.secondary};\n`;\n\nexport const DatePickerTippyOverride = createGlobalStyle`\n\t.tippy-box:has(> .tippy-content > ${PickerContainer}) {\n\t\tbackground: transparent !important;\n\t\tborder-radius: 8px !important;\n\t}\n`;\n"],"names":["generateBorderRadius","props","PickerContainer","styled","COLORS","TimePickerContainer","TimeInputWrapper","TimeLabel","DatePickerTippyOverride","createGlobalStyle"],"mappings":"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"}

package/dist/esm/components/dropdown/ChipInput.js

@@ -1,37 +1,37 @@
 import { jsxDEV as e, Fragment as y } from "react/jsx-dev-runtime";
-import { useState as l, useEffect as I } from "react";
+import { useState as m, useEffect as I } from "react";
 import D from "../../utils/StringUtils.js";
 import { COLORS as a } from "../../constants/Theme.js";
 import W from "../../assets/icons/chevronDown.svg.js";
 import U from "../../assets/icons/cross.svg.js";
 import O from "../../assets/icons/errorInfo.svg.js";
 import { InputFooter as S } from "../input/Input.styled.js";
-import { BodyCaption as d } from "../TypographyStyle.js";
+import { BodyCaption as u } from "../TypographyStyle.js";
 import { ChipInputWrapper as L } from "./Common.styled.js";
 import { Tag as E } from "../tag/Tag.js";
 import { Tooltip as R } from "../tooltips/Tooltip.js";
-const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
+const T = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
   chips: r,
   onDeleteChip: c,
   containerStyle: h = {},
   sizeToUse: s = "default",
   isDropdownOpened: k,
   placeholder: b = "Select..",
-  errorMessage: m = "",
+  errorMessage: l = "",
   showLabelsOnMoreHover: v = !1,
   placeholderColor: f
 }) => {
-  const [N, w] = l(), [p, C] = l(0), [u, g] = l([]);
+  const [N, w] = m(), [p, C] = m(0), [d, g] = m([]);
   return I(() => {
     if (!r) return;
     let n = 0;
-    const o = A(r);
+    const o = T(r);
     let t = r.filter((i) => (n += i.label.length, n <= o));
     t.length === 0 && r.length > 0 && (t = [r[0]]), w(t);
     const x = r.filter((i) => !t.includes(i)).map((i) => i.label);
     g(x), C(r.length - t.length);
   }, [r]), /* @__PURE__ */ e(y, { children: [
-    /* @__PURE__ */ e(L, { style: { ...h }, error: !!m, children: [
+    /* @__PURE__ */ e(L, { style: { ...h }, error: !!l, children: [
       /* @__PURE__ */ e("div", { className: "chips-container", children: [
         N?.map((n, o) => /* @__PURE__ */ e("div", { style: { zIndex: 2 }, children: /* @__PURE__ */ e(
           E,
@@ -40,25 +40,10 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
               n.selectedLabel || n.label,
               40
             ),
-            TrailingIcon: () => /* @__PURE__ */ e(
-              U,
-              {
-                width: 12,
-                height: 12,
-                style: { cursor: "pointer" },
-                onClick: () => {
-                  c(n);
-                }
-              },
-              void 0,
-              !1,
-              {
-                fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 79,
-                columnNumber: 10
-              },
-              void 0
-            ),
+            TrailingIcon: U,
+            onTrailingIconClicked: () => {
+              c(n);
+            },
             children: n.selectedLabel || n.label
           },
           void 0,
@@ -87,8 +72,8 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
               {
                 body: "",
                 placement: "bottom",
-                tooltipContent: v && u.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: u.map((n, o) => /* @__PURE__ */ e(
-                  d,
+                tooltipContent: v && d.length > 0 ? /* @__PURE__ */ e("div", { style: { padding: "4px" }, children: d.map((n, o) => /* @__PURE__ */ e(
+                  u,
                   {
                     style: { color: a.text.white },
                     children: n
@@ -97,18 +82,18 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
                   !1,
                   {
                     fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                    lineNumber: 108,
+                    lineNumber: 102,
                     columnNumber: 13
                   },
                   void 0
                 )) }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 106,
+                  lineNumber: 100,
                   columnNumber: 11
                 }, void 0) : void 0,
-                children: /* @__PURE__ */ e(d, { color: a.content.placeholder, children: `+${p} more` }, void 0, !1, {
+                children: /* @__PURE__ */ e(u, { color: a.content.placeholder, children: `+${p} more` }, void 0, !1, {
                   fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                  lineNumber: 119,
+                  lineNumber: 113,
                   columnNumber: 9
                 }, void 0)
               },
@@ -116,7 +101,7 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
               !1,
               {
                 fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-                lineNumber: 101,
+                lineNumber: 95,
                 columnNumber: 8
               },
               void 0
@@ -126,7 +111,7 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 94,
+            lineNumber: 88,
             columnNumber: 7
           },
           void 0
@@ -141,7 +126,7 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
           !1,
           {
             fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-            lineNumber: 127,
+            lineNumber: 121,
             columnNumber: 7
           },
           void 0
@@ -165,13 +150,13 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
         !1,
         {
           fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-          lineNumber: 136,
+          lineNumber: 130,
           columnNumber: 6
         },
         void 0
       ) }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 135,
+        lineNumber: 129,
         columnNumber: 5
       }, void 0)
     ] }, void 0, !0, {
@@ -179,16 +164,16 @@ const A = (r) => r.length === 1 ? 100 : r.length === 2 ? 40 : 34, P = ({
       lineNumber: 69,
       columnNumber: 4
     }, void 0),
-    !!m && /* @__PURE__ */ e(S, { invalid: !0, children: [
-      !!m && /* @__PURE__ */ e(O, { width: 16, height: 16 }, void 0, !1, {
+    !!l && /* @__PURE__ */ e(S, { invalid: !0, children: [
+      !!l && /* @__PURE__ */ e(O, { width: 16, height: 16 }, void 0, !1, {
         fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-        lineNumber: 152,
+        lineNumber: 146,
         columnNumber: 25
       }, void 0),
-      m
+      l
     ] }, void 0, !0, {
       fileName: "/Users/himanshusrivastava/Desktop/Work/worktrees/helpdesk-ui-revamp/bik-component-library/src/components/dropdown/ChipInput.tsx",
-      lineNumber: 151,
+      lineNumber: 145,
       columnNumber: 5
     }, void 0)
   ] }, void 0, !0, {