@instincthub/react-ui 0.1.30 → 0.1.32

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfMonth.js

@@ -0,0 +1,2 @@
+import{toDate as t}from"./toDate.js";function e(e,o){const r=t(e,o?.in),n=r.getMonth();return r.setFullYear(r.getFullYear(),n+1,0),r.setHours(23,59,59,999),r}export{e as default,e as endOfMonth};
+//# sourceMappingURL=endOfMonth.js.map

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfMonth.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"endOfMonth.js","sources":["../../../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfMonth.js"],"sourcesContent":["import { toDate } from \"./toDate.js\";\n\n/**\n * The {@link endOfMonth} function options.\n */\n\n/**\n * @name endOfMonth\n * @category Month Helpers\n * @summary Return the end of a month for the given date.\n *\n * @description\n * Return the end of a month for the given date.\n * The result will be in the local timezone.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n *\n * @param date - The original date\n * @param options - An object with options\n *\n * @returns The end of a month\n *\n * @example\n * // The end of a month for 2 September 2014 11:55:00:\n * const result = endOfMonth(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Tue Sep 30 2014 23:59:59.999\n */\nexport function endOfMonth(date, options) {\n  const _date = toDate(date, options?.in);\n  const month = _date.getMonth();\n  _date.setFullYear(_date.getFullYear(), month + 1, 0);\n  _date.setHours(23, 59, 59, 999);\n  return _date;\n}\n\n// Fallback for modularized imports:\nexport default endOfMonth;\n"],"names":["endOfMonth","date","options","_date","toDate","in","month","getMonth","setFullYear","getFullYear","setHours"],"mappings":"qCA4BO,SAASA,EAAWC,EAAMC,GAC/B,MAAMC,EAAQC,EAAOH,EAAMC,GAASG,IAC9BC,EAAQH,EAAMI,WAGpB,OAFAJ,EAAMK,YAAYL,EAAMM,cAAeH,EAAQ,EAAG,GAClDH,EAAMO,SAAS,GAAI,GAAI,GAAI,KACpBP,CACT"}

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfWeek.js

@@ -0,0 +1,2 @@
+import{getDefaultOptions as t}from"./_lib/defaultOptions.js";import{toDate as e}from"./toDate.js";function o(o,s){const a=t(),n=s?.weekStartsOn??s?.locale?.options?.weekStartsOn??a.weekStartsOn??a.locale?.options?.weekStartsOn??0,r=e(o,s?.in),i=r.getDay(),l=6+(i<n?-7:0)-(i-n);return r.setDate(r.getDate()+l),r.setHours(23,59,59,999),r}export{o as default,o as endOfWeek};
+//# sourceMappingURL=endOfWeek.js.map

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfWeek.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"endOfWeek.js","sources":["../../../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/endOfWeek.js"],"sourcesContent":["import { getDefaultOptions } from \"./_lib/defaultOptions.js\";\nimport { toDate } from \"./toDate.js\";\n\n/**\n * The {@link endOfWeek} function options.\n */\n\n/**\n * @name endOfWeek\n * @category Week Helpers\n * @summary Return the end of a week for the given date.\n *\n * @description\n * Return the end of a week for the given date.\n * The result will be in the local timezone.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n *\n * @param date - The original date\n * @param options - An object with options\n *\n * @returns The end of a week\n *\n * @example\n * // The end of a week for 2 September 2014 11:55:00:\n * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0))\n * //=> Sat Sep 06 2014 23:59:59.999\n *\n * @example\n * // If the week starts on Monday, the end of the week for 2 September 2014 11:55:00:\n * const result = endOfWeek(new Date(2014, 8, 2, 11, 55, 0), { weekStartsOn: 1 })\n * //=> Sun Sep 07 2014 23:59:59.999\n */\nexport function endOfWeek(date, options) {\n  const defaultOptions = getDefaultOptions();\n  const weekStartsOn =\n    options?.weekStartsOn ??\n    options?.locale?.options?.weekStartsOn ??\n    defaultOptions.weekStartsOn ??\n    defaultOptions.locale?.options?.weekStartsOn ??\n    0;\n\n  const _date = toDate(date, options?.in);\n  const day = _date.getDay();\n  const diff = (day < weekStartsOn ? -7 : 0) + 6 - (day - weekStartsOn);\n\n  _date.setDate(_date.getDate() + diff);\n  _date.setHours(23, 59, 59, 999);\n  return _date;\n}\n\n// Fallback for modularized imports:\nexport default endOfWeek;\n"],"names":["endOfWeek","date","options","defaultOptions","getDefaultOptions","weekStartsOn","locale","_date","toDate","in","day","getDay","diff","setDate","getDate","setHours"],"mappings":"kGAkCO,SAASA,EAAUC,EAAMC,GAC9B,MAAMC,EAAiBC,IACjBC,EACJH,GAASG,cACTH,GAASI,QAAQJ,SAASG,cAC1BF,EAAeE,cACfF,EAAeG,QAAQJ,SAASG,cAChC,EAEIE,EAAQC,EAAOP,EAAMC,GAASO,IAC9BC,EAAMH,EAAMI,SACZC,EAAuC,GAA/BF,EAAML,GAAgB,EAAI,IAAUK,EAAML,GAIxD,OAFAE,EAAMM,QAAQN,EAAMO,UAAYF,GAChCL,EAAMQ,SAAS,GAAI,GAAI,GAAI,KACpBR,CACT"}

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/subDays.js

@@ -0,0 +1,2 @@
+import{addDays as r}from"./addDays.js";function t(t,a,o){return r(t,-a,o)}export{t as default,t as subDays};
+//# sourceMappingURL=subDays.js.map

package/dist/node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/subDays.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"subDays.js","sources":["../../../../../../node_modules/.pnpm/date-fns@4.1.0/node_modules/date-fns/subDays.js"],"sourcesContent":["import { addDays } from \"./addDays.js\";\n\n/**\n * The {@link subDays} function options.\n */\n\n/**\n * @name subDays\n * @category Day Helpers\n * @summary Subtract the specified number of days from the given date.\n *\n * @typeParam DateType - The `Date` type, the function operates on. Gets inferred from passed arguments. Allows to use extensions like [`UTCDate`](https://github.com/date-fns/utc).\n * @typeParam ResultDate - The result `Date` type, it is the type returned from the context function if it is passed, or inferred from the arguments.\n *\n * @param date - The date to be changed\n * @param amount - The amount of days to be subtracted.\n * @param options - An object with options\n *\n * @returns The new date with the days subtracted\n *\n * @example\n * // Subtract 10 days from 1 September 2014:\n * const result = subDays(new Date(2014, 8, 1), 10)\n * //=> Fri Aug 22 2014 00:00:00\n */\nexport function subDays(date, amount, options) {\n  return addDays(date, -amount, options);\n}\n\n// Fallback for modularized imports:\nexport default subDays;\n"],"names":["subDays","date","amount","options","addDays"],"mappings":"uCAyBO,SAASA,EAAQC,EAAMC,EAAQC,GACpC,OAAOC,EAAQH,GAAOC,EAAQC,EAChC"}

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js

@@ -1,8 +1,8 @@
-import o from"../createLucideIcon.js";
+import e from"../createLucideIcon.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const e=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]];o("chevron-down",e);export{e as __iconNode};
+ */const o=[["path",{d:"m6 9 6 6 6-6",key:"qrunsl"}]],r=e("chevron-down",o);export{o as __iconNode,r as default};
 //# sourceMappingURL=chevron-down.js.map

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js.map

@@ -1 +1 @@
-{"version":3,"file":"chevron-down.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [[\"path\", { d: \"m6 9 6 6 6-6\", key: \"qrunsl\" }]];\nconst ChevronDown = createLucideIcon(\"chevron-down\", __iconNode);\n\nexport { __iconNode, ChevronDown as default };\n//# sourceMappingURL=chevron-down.js.map\n"],"names":["__iconNode","d","key","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CAAC,CAAC,OAAQ,CAAEC,EAAG,eAAgBC,IAAK,YACnCC,EAAiB,eAAgBH"}
+{"version":3,"file":"chevron-down.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/chevron-down.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [[\"path\", { d: \"m6 9 6 6 6-6\", key: \"qrunsl\" }]];\nconst ChevronDown = createLucideIcon(\"chevron-down\", __iconNode);\n\nexport { __iconNode, ChevronDown as default };\n//# sourceMappingURL=chevron-down.js.map\n"],"names":["__iconNode","d","key","ChevronDown","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CAAC,CAAC,OAAQ,CAAEC,EAAG,eAAgBC,IAAK,YACjDC,EAAcC,EAAiB,eAAgBJ"}

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/loader-circle.js

@@ -4,5 +4,5 @@ import e from"../createLucideIcon.js";
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const c=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]];e("loader-circle",c);export{c as __iconNode};
+ */const a=[["path",{d:"M21 12a9 9 0 1 1-6.219-8.56",key:"13zald"}]],c=e("loader-circle",a);export{a as __iconNode,c as default};
 //# sourceMappingURL=loader-circle.js.map

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/loader-circle.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader-circle.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/loader-circle.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [[\"path\", { d: \"M21 12a9 9 0 1 1-6.219-8.56\", key: \"13zald\" }]];\nconst LoaderCircle = createLucideIcon(\"loader-circle\", __iconNode);\n\nexport { __iconNode, LoaderCircle as default };\n//# sourceMappingURL=loader-circle.js.map\n"],"names":["__iconNode","d","key","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CAAC,CAAC,OAAQ,CAAEC,EAAG,8BAA+BC,IAAK,YACjDC,EAAiB,gBAAiBH"}
+{"version":3,"file":"loader-circle.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/loader-circle.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [[\"path\", { d: \"M21 12a9 9 0 1 1-6.219-8.56\", key: \"13zald\" }]];\nconst LoaderCircle = createLucideIcon(\"loader-circle\", __iconNode);\n\nexport { __iconNode, LoaderCircle as default };\n//# sourceMappingURL=loader-circle.js.map\n"],"names":["__iconNode","d","key","LoaderCircle","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CAAC,CAAC,OAAQ,CAAEC,EAAG,8BAA+BC,IAAK,YAChEC,EAAeC,EAAiB,gBAAiBJ"}

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/search.js

@@ -1,8 +1,8 @@
-import c from"../createLucideIcon.js";
+import e from"../createLucideIcon.js";
 /**
  * @license lucide-react v0.525.0 - ISC
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const e=[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]];c("search",e);export{e as __iconNode};
+ */const c=[["path",{d:"m21 21-4.34-4.34",key:"14j7rj"}],["circle",{cx:"11",cy:"11",r:"8",key:"4ej97u"}]],r=e("search",c);export{c as __iconNode,r as default};
 //# sourceMappingURL=search.js.map

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/search.js.map

@@ -1 +1 @@
-{"version":3,"file":"search.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/search.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"m21 21-4.34-4.34\", key: \"14j7rj\" }],\n  [\"circle\", { cx: \"11\", cy: \"11\", r: \"8\", key: \"4ej97u\" }]\n];\nconst Search = createLucideIcon(\"search\", __iconNode);\n\nexport { __iconNode, Search as default };\n//# sourceMappingURL=search.js.map\n"],"names":["__iconNode","d","key","cx","cy","r","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CACjB,CAAC,OAAQ,CAAEC,EAAG,mBAAoBC,IAAK,WACvC,CAAC,SAAU,CAAEC,GAAI,KAAMC,GAAI,KAAMC,EAAG,IAAKH,IAAK,YAEjCI,EAAiB,SAAUN"}
+{"version":3,"file":"search.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/search.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"m21 21-4.34-4.34\", key: \"14j7rj\" }],\n  [\"circle\", { cx: \"11\", cy: \"11\", r: \"8\", key: \"4ej97u\" }]\n];\nconst Search = createLucideIcon(\"search\", __iconNode);\n\nexport { __iconNode, Search as default };\n//# sourceMappingURL=search.js.map\n"],"names":["__iconNode","d","key","cx","cy","r","Search","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CACjB,CAAC,OAAQ,CAAEC,EAAG,mBAAoBC,IAAK,WACvC,CAAC,SAAU,CAAEC,GAAI,KAAMC,GAAI,KAAMC,EAAG,IAAKH,IAAK,YAE1CI,EAASC,EAAiB,SAAUP"}

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/x.js

@@ -4,5 +4,5 @@ import e from"../createLucideIcon.js";
  *
  * This source code is licensed under the ISC license.
  * See the LICENSE file in the root directory of this source tree.
- */const t=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]];e("x",t);export{t as __iconNode};
+ */const t=[["path",{d:"M18 6 6 18",key:"1bl5f8"}],["path",{d:"m6 6 12 12",key:"d8bk6v"}]],a=e("x",t);export{t as __iconNode,a as default};
 //# sourceMappingURL=x.js.map

package/dist/node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/x.js.map

@@ -1 +1 @@
-{"version":3,"file":"x.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/x.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M18 6 6 18\", key: \"1bl5f8\" }],\n  [\"path\", { d: \"m6 6 12 12\", key: \"d8bk6v\" }]\n];\nconst X = createLucideIcon(\"x\", __iconNode);\n\nexport { __iconNode, X as default };\n//# sourceMappingURL=x.js.map\n"],"names":["__iconNode","d","key","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CACjB,CAAC,OAAQ,CAAEC,EAAG,aAAcC,IAAK,WACjC,CAAC,OAAQ,CAAED,EAAG,aAAcC,IAAK,YAEzBC,EAAiB,IAAKH"}
+{"version":3,"file":"x.js","sources":["../../../../../../../../../node_modules/.pnpm/lucide-react@0.525.0_react@19.2.0/node_modules/lucide-react/dist/esm/icons/x.js"],"sourcesContent":["/**\n * @license lucide-react v0.525.0 - ISC\n *\n * This source code is licensed under the ISC license.\n * See the LICENSE file in the root directory of this source tree.\n */\n\nimport createLucideIcon from '../createLucideIcon.js';\n\nconst __iconNode = [\n  [\"path\", { d: \"M18 6 6 18\", key: \"1bl5f8\" }],\n  [\"path\", { d: \"m6 6 12 12\", key: \"d8bk6v\" }]\n];\nconst X = createLucideIcon(\"x\", __iconNode);\n\nexport { __iconNode, X as default };\n//# sourceMappingURL=x.js.map\n"],"names":["__iconNode","d","key","X","createLucideIcon"],"mappings":";;;;;;GASK,MAACA,EAAa,CACjB,CAAC,OAAQ,CAAEC,EAAG,aAAcC,IAAK,WACjC,CAAC,OAAQ,CAAED,EAAG,aAAcC,IAAK,YAE7BC,EAAIC,EAAiB,IAAKJ"}

package/dist/src/assets/css/forms/date-range-picker.css

@@ -0,0 +1,184 @@
+/* DateRangePicker Component Styles */
+
+/* Wrapper */
+.ihub-daterange-picker-wrapper {
+  position: relative;
+  width: 100%;
+  font-family: var(--Nunito);
+}
+
+/* Input row: two inputs with arrow separator */
+.ihub-daterange-inputs {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* Individual input container */
+.ihub-daterange-input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: var(--borderDefault);
+  border-radius: 6px;
+  background: var(--White, #ffffff);
+  transition: all 0.2s ease;
+  min-height: 48px;
+  flex: 1;
+  cursor: pointer;
+}
+
+.ihub-daterange-input-container:hover {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.ihub-daterange-input-container.active {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
+
+.ihub-daterange-input-container .ihub-datetime-input {
+  cursor: pointer;
+}
+
+/* Arrow separator */
+.ihub-daterange-separator-arrow {
+  font-size: 1.25rem;
+  color: var(--Rhythm, #69779b);
+  flex-shrink: 0;
+  user-select: none;
+}
+
+/* Constrain dropdown width within the wider range wrapper */
+.ihub-daterange-picker-wrapper .ihub-datetime-picker-dropdown {
+  right: auto;
+  max-width: 380px;
+}
+
+/* Phase indicator */
+.ihub-daterange-phase-indicator {
+  padding: 10px 16px;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--DarkCyan, #00838f);
+  background: var(--Magnolia, #f4f3fe);
+  text-align: center;
+  font-family: var(--Nunito);
+  border-bottom: 1px solid var(--LightGray, #dee2e6);
+}
+
+/* Quick preset buttons */
+.ihub-daterange-presets {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  justify-content: center;
+  padding: 12px 16px;
+  border-top: 1px solid var(--LightGray, #dee2e6);
+  background: var(--Gray, #f4f4f4);
+}
+
+/* Range day styles */
+.ihub-datetime-day.range-start {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+  border-radius: 6px 0 0 6px;
+}
+
+.ihub-datetime-day.range-end {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+  border-radius: 0 6px 6px 0;
+}
+
+.ihub-datetime-day.range-start.range-end {
+  border-radius: 6px;
+}
+
+.ihub-datetime-day.in-range {
+  background: rgba(0, 131, 143, 0.1);
+  color: var(--Gunmetal, #2c333a);
+  border-radius: 0;
+}
+
+.ihub-datetime-day.in-range:hover:not(:disabled) {
+  background: rgba(0, 131, 143, 0.2);
+}
+
+/* Responsive: stack inputs vertically on mobile */
+@media (max-width: 768px) {
+  .ihub-daterange-inputs {
+    flex-direction: column;
+    gap: 4px;
+  }
+
+  .ihub-daterange-separator-arrow {
+    transform: rotate(90deg);
+    font-size: 1rem;
+  }
+
+  .ihub-daterange-input-container {
+    width: 100%;
+  }
+
+  .ihub-daterange-presets {
+    gap: 4px;
+    padding: 8px 12px;
+  }
+
+  .ihub-daterange-presets .ihub-datetime-action-btn {
+    font-size: 0.6875rem;
+    padding: 5px 8px;
+  }
+}
+
+/* Dark mode via .DarkMode class */
+.DarkMode .ihub-daterange-input-container {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-daterange-input-container:hover {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.DarkMode .ihub-daterange-input-container.active {
+  border-color: var(--DarkCyan, #00838f);
+}
+
+.DarkMode .ihub-daterange-separator-arrow {
+  color: var(--DarkText, #e2e8f0);
+}
+
+.DarkMode .ihub-daterange-phase-indicator {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--TiffanyBlue, #0fabbc);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-daterange-presets {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
+
+.DarkMode .ihub-datetime-day.in-range {
+  background: rgba(0, 131, 143, 0.2);
+  color: var(--DarkText, #e2e8f0);
+}
+
+.DarkMode .ihub-datetime-day.in-range:hover:not(:disabled) {
+  background: rgba(0, 131, 143, 0.35);
+}
+
+/* Focus indicators for accessibility */
+.ihub-daterange-input-container:focus-within {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+  .ihub-daterange-input-container {
+    transition: none;
+  }
+}

package/dist/src/assets/css/forms/datetime-picker.css

@@ -492,6 +492,9 @@
 }
 
 .ihub-datetime-link {
+  background: none;
+  border: none;
+  padding: 0;
   color: var(--Gunmetal, #2c333a);
   cursor: pointer;
   font-size: 0.875rem;
@@ -561,84 +564,82 @@
 }
 
 /* Dark mode support */
-@media (prefers-color-scheme: dark) {
-  .ihub-datetime-picker-dropdown {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-picker-dropdown {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-input-container {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-input-container {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-input {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-input {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-tabs {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-tabs {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-tab {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-tab {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-tab.active {
-    background: var(--DarkBackground, #2d3748);
-  }
+.DarkMode .ihub-datetime-tab.active {
+  background: var(--DarkBackground, #2d3748);
+}
 
-  .ihub-datetime-day {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-day {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-day:hover:not(:disabled) {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-day:hover:not(:disabled) {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-time-input {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-time-input {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-time-option {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-time-option {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-time-option:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-time-option:hover {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-action-btn {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-action-btn {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-action-btn:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-action-btn:hover {
+  background: var(--DarkHover, #4a5568);
+}
 
-  .ihub-datetime-actions {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-actions {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-ampm-btn {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-ampm-btn {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-btn:hover {
-    background: var(--DarkHover, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-btn:hover {
+  background: var(--DarkHover, #4a5568);
 }
 
 /* Focus indicators for accessibility */
@@ -875,62 +876,60 @@
 }
 
 /* Dark mode support for separate fields */
-@media (prefers-color-scheme: dark) {
-  .ihub-datetime-field {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-field {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-field:focus {
-    border-color: var(--DarkCyan, #00838f);
-    box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
-  }
+.DarkMode .ihub-datetime-field:focus {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
 
-  .ihub-datetime-field:disabled {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-  }
+.DarkMode .ihub-datetime-field:disabled {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+}
 
-  .ihub-datetime-field::placeholder {
-    color: var(--DarkTextSecondary, #a0aec0);
-  }
+.DarkMode .ihub-datetime-field::placeholder {
+  color: var(--DarkTextSecondary, #a0aec0);
+}
 
-  .ihub-datetime-separate-fields .ihub-datetime-separator {
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-separate-fields .ihub-datetime-separator {
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-toggle {
-    background: var(--DarkBackground, #2d3748);
-    border-color: var(--DarkBorder, #4a5568);
-    color: var(--DarkText, #e2e8f0);
-  }
+.DarkMode .ihub-datetime-ampm-toggle {
+  background: var(--DarkBackground, #2d3748);
+  border-color: var(--DarkBorder, #4a5568);
+  color: var(--DarkText, #e2e8f0);
+}
 
-  .ihub-datetime-ampm-toggle:hover:not(:disabled) {
-    background: var(--DarkSecondary, #4a5568);
-    border-color: var(--DarkCyan, #00838f);
-    color: var(--DarkCyan, #00838f);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:hover:not(:disabled) {
+  background: var(--DarkSecondary, #4a5568);
+  border-color: var(--DarkCyan, #00838f);
+  color: var(--DarkCyan, #00838f);
+}
 
-  .ihub-datetime-ampm-toggle:focus {
-    border-color: var(--DarkCyan, #00838f);
-    box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:focus {
+  border-color: var(--DarkCyan, #00838f);
+  box-shadow: 0 0 0 0.2rem rgba(0, 131, 143, 0.25);
+}
 
-  .ihub-datetime-ampm-toggle:active {
-    background: var(--DarkCyan, #00838f);
-    color: var(--White, #ffffff);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:active {
+  background: var(--DarkCyan, #00838f);
+  color: var(--White, #ffffff);
+}
 
-  .ihub-datetime-ampm-toggle:disabled {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:disabled {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+  border-color: var(--DarkBorder, #4a5568);
+}
 
-  .ihub-datetime-ampm-toggle:disabled:hover {
-    background: var(--DarkSecondary, #4a5568);
-    color: var(--DarkTextDisabled, #a0aec0);
-    border-color: var(--DarkBorder, #4a5568);
-  }
+.DarkMode .ihub-datetime-ampm-toggle:disabled:hover {
+  background: var(--DarkSecondary, #4a5568);
+  color: var(--DarkTextDisabled, #a0aec0);
+  border-color: var(--DarkBorder, #4a5568);
 }

package/dist/src/assets/css/forms/forms-index.css

@@ -12,4 +12,6 @@
 @import url("./radio-button.css");
 @import url("./time-picker.css");
 @import url("./datetime-picker.css");
+@import url("./date-range-picker.css");
 @import url("./icon-btn.css");
+@import url("./searchable-dropdown.css");

package/dist/src/assets/css/forms/input-fields.css

@@ -1390,6 +1390,7 @@
   width: 100%;
   margin-bottom: 20px;
   overflow-x: auto;
+  background-color: transparent;
 }
 
 .ihub-table-filter {

package/dist/src/assets/css/forms/search-objects-from-db.css

@@ -1,11 +1,11 @@
 /* Improved Search Objects Component Styles */
 
 .ihub-react-search {
-  max-width: 400px;
+  max-width: 600px;
+  max-height: 500px;
   border: var(--borderDefault);
   padding: 15px;
   border-radius: 5px;
-  max-height: 400px;
   overflow: auto;
   position: relative;
 }