@raystack/apsara 0.44.4 → 0.45.1

package/dist/v1/components/calendar/date-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.cjs","sources":["../../../../v1/components/calendar/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { PropsBase, PropsSingleRequired } from \"react-day-picker\";\n\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  textFieldProps?: TextfieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  placeholder?: string;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n}\n\nexport function DatePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  placeholder = \"DD/MM/YYYY\",\n  textFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [inputState, setInputState] =\n    useState<Partial<React.ComponentProps<typeof TextField>[\"state\"]>>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const textFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  function isElementOutside(el: HTMLElement) {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !textFieldRef.current?.contains(el) && // TextField\n      !contentRef.current?.contains(el)\n    );\n  }\n\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\n  }, []);\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (textFieldRef.current) textFieldRef.current.value = updatedVal;\n    if (inputState === undefined && !skipUpdate)\n      onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setInputState(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => textFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === \"Enter\" && textFieldRef.current) {\n      textFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes(\"/\")\n      ? \"DD/MM/YYYY\"\n      : value.includes(\"-\")\n      ? \"DD-MM-YYYY\"\n      : undefined;\n    const date = dayjs(\n      value.replace(/(\\d{1,2})\\/(\\d{1,2})\\/(\\d{4})/, (_, day, month, year) => {\n        return `${day.padStart(2, \"0\")}/${month.padStart(2, \"0\")}/${year}`; // Replaces [8/8/2024] to [08/08/2024]\n      }),\n      format\n    );\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      if (inputState === \"invalid\") setInputState(undefined);\n    } else {\n      setInputState(\"invalid\");\n    }\n  }\n\n  const defaultTrigger = (\n    <TextField\n      ref={textFieldRef}\n      defaultValue={formattedDate}\n      trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      state={inputState}\n      placeholder={placeholder}\n      onKeyUp={handleKeyUp}\n      className={styles.datePickerInput}\n      {...textFieldProps}\n    />\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ selectedDate: formattedDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          onDropdownOpen={onDropdownOpen}\n          mode=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["dayjs","customParseFormat","useState","useRef","useEffect","useCallback","_jsx","TextField","CalendarIcon","styles","_jsxs","Popover","Calendar"],"mappings":"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"}
+{"version":3,"file":"date-picker.cjs","sources":["../../../../v1/components/calendar/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { PropsBase, PropsSingleRequired } from \"react-day-picker\";\n\nimport { Popover } from \"../popover\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n}\n\nexport function DatePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  function isElementOutside(el: HTMLElement) {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }\n\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\n  }, []);\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === \"Enter\" && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes(\"/\")\n      ? \"DD/MM/YYYY\"\n      : value.includes(\"-\")\n      ? \"DD-MM-YYYY\"\n      : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError(\"Invalid date\");\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      ref={inputFieldRef}\n      size=\"small\"\n      placeholder=\"Select date\"\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      defaultValue={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      error={error}\n      onKeyUp={handleKeyUp}\n      className={styles.datePickerInput}\n    />\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ selectedDate: formattedDate })\n      : children ? <div>{children}</div> : defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["dayjs","customParseFormat","useState","useRef","useEffect","useCallback","_jsx","InputField","CalendarIcon","styles","_jsxs","Popover","Calendar"],"mappings":"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"}

package/dist/v1/components/calendar/date-picker.d.ts

@@ -1,18 +1,18 @@
 import { PropsBase, PropsSingleRequired } from "react-day-picker";
-import { TextfieldProps } from "../textfield/textfield";
+import { InputFieldProps } from "../input-field/input-field";
 interface DatePickerProps {
     side?: "top" | "right" | "bottom" | "left";
     dateFormat?: string;
-    textFieldProps?: TextfieldProps;
+    inputFieldProps?: InputFieldProps;
     calendarProps?: PropsSingleRequired & PropsBase;
     onSelect?: (date: Date) => void;
-    placeholder?: string;
     value?: Date;
     children?: React.ReactNode | ((props: {
         selectedDate: string;
     }) => React.ReactNode);
     showCalendarIcon?: boolean;
+    timeZone?: string;
 }
-export declare function DatePicker({ side, dateFormat, placeholder, textFieldProps, calendarProps, value, onSelect, children, showCalendarIcon, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function DatePicker({ side, dateFormat, inputFieldProps, calendarProps, value, onSelect, children, showCalendarIcon, timeZone, }: DatePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=date-picker.d.ts.map

package/dist/v1/components/calendar/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAMxD,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAY,EACZ,UAAyB,EACzB,WAA0B,EAC1B,cAAc,EACd,aAAa,EACb,KAAkB,EAClB,QAAmB,EACnB,QAAQ,EACR,gBAAuB,GACxB,EAAE,eAAe,2CA6KjB"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/date-picker.tsx"],"names":[],"mappings":"AAIA,OAAO,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAIlE,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAM7D,UAAU,eAAe;IACvB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,eAAe,CAAC;IAClC,aAAa,CAAC,EAAE,mBAAmB,GAAG,SAAS,CAAC;IAChD,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;IAChC,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,YAAY,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IAC3D,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,wBAAgB,UAAU,CAAC,EACzB,IAAY,EACZ,UAAyB,EACzB,eAAe,EACf,aAAa,EACb,KAAkB,EAClB,QAAmB,EACnB,QAAQ,EACR,gBAAuB,EACvB,QAAQ,GACT,EAAE,eAAe,2CAwKjB"}

package/dist/v1/components/calendar/date-picker.js

@@ -4,18 +4,18 @@ import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/day
 import customParseFormat from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/plugin/customParseFormat.js';
 import { useState, useRef, useEffect, useCallback } from 'react';
 import { Popover } from '../popover/popover.js';
-import { TextField } from '../textfield/textfield.js';
+import { InputField } from '../input-field/input-field.js';
 import { Calendar } from './calendar.js';
 import styles from './calendar.module.css.js';
 
 dayjs.extend(customParseFormat);
-function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD/MM/YYYY", textFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, }) {
+function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldProps, calendarProps, value = new Date(), onSelect = () => { }, children, showCalendarIcon = true, timeZone, }) {
     const [showCalendar, setShowCalendar] = useState(false);
     const [selectedDate, setSelectedDate] = useState(value);
-    const [inputState, setInputState] = useState();
+    const [error, setError] = useState();
     const formattedDate = dayjs(selectedDate).format(dateFormat);
     const isDropdownOpenRef = useRef(false);
-    const textFieldRef = useRef(null);
+    const inputFieldRef = useRef(null);
     const contentRef = useRef(null);
     const isInputFieldFocused = useRef(false);
     const selectedDateRef = useRef(selectedDate);
@@ -24,7 +24,7 @@ function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD
     }, [selectedDate]);
     function isElementOutside(el) {
         return (!isDropdownOpenRef.current && // Month and Year dropdown from Date picker
-            !textFieldRef.current?.contains(el) && // TextField
+            !inputFieldRef.current?.contains(el) && // InputField
             !contentRef.current?.contains(el));
     }
     const handleMouseDown = useCallback((event) => {
@@ -40,16 +40,16 @@ function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD
         isInputFieldFocused.current = false;
         setShowCalendar(false);
         const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);
-        if (textFieldRef.current)
-            textFieldRef.current.value = updatedVal;
-        if (inputState === undefined && !skipUpdate)
+        if (inputFieldRef.current)
+            inputFieldRef.current.value = updatedVal;
+        if (!error && !skipUpdate)
             onSelect(dayjs(updatedVal).toDate());
         document.removeEventListener("mouseup", handleMouseDown);
     }
     const handleSelect = (day) => {
         setSelectedDate(day);
         onSelect(day);
-        setInputState(undefined);
+        setError(undefined);
         removeEventListeners(true);
     };
     function onDropdownOpen() {
@@ -76,12 +76,12 @@ function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD
         }
         else {
             registerEventListeners();
-            setTimeout(() => textFieldRef.current?.select());
+            setTimeout(() => inputFieldRef.current?.select());
         }
     }
     function handleKeyUp(event) {
-        if (event.code === "Enter" && textFieldRef.current) {
-            textFieldRef.current.blur();
+        if (event.code === "Enter" && inputFieldRef.current) {
+            inputFieldRef.current.blur();
             removeEventListeners();
         }
     }
@@ -92,9 +92,7 @@ function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD
             : value.includes("-")
                 ? "DD-MM-YYYY"
                 : undefined;
-        const date = dayjs(value.replace(/(\d{1,2})\/(\d{1,2})\/(\d{4})/, (_, day, month, year) => {
-            return `${day.padStart(2, "0")}/${month.padStart(2, "0")}/${year}`; // Replaces [8/8/2024] to [08/08/2024]
-        }), format);
+        const date = dayjs(value, format);
         const isValidDate = date.isValid();
         const isAfter = calendarProps?.startMonth !== undefined
             ? dayjs(date).isSameOrAfter(calendarProps.startMonth)
@@ -105,18 +103,17 @@ function DatePicker({ side = "top", dateFormat = "DD/MM/YYYY", placeholder = "DD
         const isValid = isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());
         if (isValid) {
             setSelectedDate(date.toDate());
-            if (inputState === "invalid")
-                setInputState(undefined);
+            setError(undefined);
         }
         else {
-            setInputState("invalid");
+            setError("Invalid date");
         }
     }
-    const defaultTrigger = (jsxRuntimeExports.jsx(TextField, { ref: textFieldRef, defaultValue: formattedDate, trailing: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, state: inputState, placeholder: placeholder, onKeyUp: handleKeyUp, className: styles.datePickerInput, ...textFieldProps }));
+    const defaultTrigger = (jsxRuntimeExports.jsx(InputField, { ref: inputFieldRef, size: "small", placeholder: "Select date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, defaultValue: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, error: error, onKeyUp: handleKeyUp, className: styles.datePickerInput }));
     const trigger = typeof children === "function"
         ? children({ selectedDate: formattedDate })
-        : children || defaultTrigger;
-    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsx(Popover.Content, { side: side, className: styles.calendarPopover, ref: contentRef, children: jsxRuntimeExports.jsx(Calendar, { required: true, ...calendarProps, onDropdownOpen: onDropdownOpen, mode: "single", selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
+        : children ? jsxRuntimeExports.jsx("div", { children: children }) : defaultTrigger;
+    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsx(Popover.Content, { side: side, className: styles.calendarPopover, ref: contentRef, children: jsxRuntimeExports.jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: "single", selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }
 
 export { DatePicker };

package/dist/v1/components/calendar/date-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../../../v1/components/calendar/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { PropsBase, PropsSingleRequired } from \"react-day-picker\";\n\nimport { Popover } from \"../popover\";\nimport { TextField } from \"../textfield\";\nimport { TextfieldProps } from \"../textfield/textfield\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  textFieldProps?: TextfieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  placeholder?: string;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n}\n\nexport function DatePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  placeholder = \"DD/MM/YYYY\",\n  textFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [inputState, setInputState] =\n    useState<Partial<React.ComponentProps<typeof TextField>[\"state\"]>>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const textFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  function isElementOutside(el: HTMLElement) {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !textFieldRef.current?.contains(el) && // TextField\n      !contentRef.current?.contains(el)\n    );\n  }\n\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\n  }, []);\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (textFieldRef.current) textFieldRef.current.value = updatedVal;\n    if (inputState === undefined && !skipUpdate)\n      onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setInputState(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => textFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === \"Enter\" && textFieldRef.current) {\n      textFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes(\"/\")\n      ? \"DD/MM/YYYY\"\n      : value.includes(\"-\")\n      ? \"DD-MM-YYYY\"\n      : undefined;\n    const date = dayjs(\n      value.replace(/(\\d{1,2})\\/(\\d{1,2})\\/(\\d{4})/, (_, day, month, year) => {\n        return `${day.padStart(2, \"0\")}/${month.padStart(2, \"0\")}/${year}`; // Replaces [8/8/2024] to [08/08/2024]\n      }),\n      format\n    );\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      if (inputState === \"invalid\") setInputState(undefined);\n    } else {\n      setInputState(\"invalid\");\n    }\n  }\n\n  const defaultTrigger = (\n    <TextField\n      ref={textFieldRef}\n      defaultValue={formattedDate}\n      trailing={showCalendarIcon ? <CalendarIcon /> : undefined}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      state={inputState}\n      placeholder={placeholder}\n      onKeyUp={handleKeyUp}\n      className={styles.datePickerInput}\n      {...textFieldProps}\n    />\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ selectedDate: formattedDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          onDropdownOpen={onDropdownOpen}\n          mode=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"date-picker.js","sources":["../../../../v1/components/calendar/date-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\nimport { PropsBase, PropsSingleRequired } from \"react-day-picker\";\n\nimport { Popover } from \"../popover\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldProps?: InputFieldProps;\n  calendarProps?: PropsSingleRequired & PropsBase;\n  onSelect?: (date: Date) => void;\n  value?: Date;\n  children?:\n    | React.ReactNode\n    | ((props: { selectedDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  timeZone?: string;\n}\n\nexport function DatePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n}: DatePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [selectedDate, setSelectedDate] = useState(value);\n  const [error, setError] = useState<string>();\n\n  const formattedDate = dayjs(selectedDate).format(dateFormat);\n\n  const isDropdownOpenRef = useRef(false);\n  const inputFieldRef = useRef<HTMLInputElement | null>(null);\n  const contentRef = useRef<HTMLDivElement | null>(null);\n  const isInputFieldFocused = useRef(false);\n  const selectedDateRef = useRef(selectedDate);\n\n  useEffect(() => {\n    selectedDateRef.current = selectedDate;\n  }, [selectedDate]);\n\n  function isElementOutside(el: HTMLElement) {\n    return (\n      !isDropdownOpenRef.current && // Month and Year dropdown from Date picker\n      !inputFieldRef.current?.contains(el) && // InputField\n      !contentRef.current?.contains(el)\n    );\n  }\n\n  const handleMouseDown = useCallback((event: MouseEvent) => {\n    const el = event.target as HTMLElement | null;\n    if (el && isElementOutside(el)) removeEventListeners();\n  }, []);\n\n  function registerEventListeners() {\n    isInputFieldFocused.current = true;\n    document.addEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  function removeEventListeners(skipUpdate = false) {\n    isInputFieldFocused.current = false;\n    setShowCalendar(false);\n\n    const updatedVal = dayjs(selectedDateRef.current).format(dateFormat);\n\n    if (inputFieldRef.current) inputFieldRef.current.value = updatedVal;\n    if (!error && !skipUpdate) onSelect(dayjs(updatedVal).toDate());\n\n    document.removeEventListener(\"mouseup\", handleMouseDown);\n  }\n\n  const handleSelect = (day: Date) => {\n    setSelectedDate(day);\n    onSelect(day);\n    setError(undefined);\n    removeEventListeners(true);\n  };\n\n  function onDropdownOpen() {\n    isDropdownOpenRef.current = true;\n  }\n\n  function onOpenChange(open?: boolean) {\n    if (\n      !isDropdownOpenRef.current &&\n      !(isInputFieldFocused.current && showCalendar)\n    ) {\n      setShowCalendar(Boolean(open));\n    }\n\n    isDropdownOpenRef.current = false;\n  }\n\n  function handleInputFocus() {\n    if (isInputFieldFocused.current) return;\n    if (!showCalendar) setShowCalendar(true);\n  }\n\n  function handleInputBlur(event: React.FocusEvent) {\n    if (isInputFieldFocused.current) {\n      const el = event.relatedTarget as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    } else {\n      registerEventListeners();\n      setTimeout(() => inputFieldRef.current?.select());\n    }\n  }\n\n  function handleKeyUp(event: React.KeyboardEvent) {\n    if (event.code === \"Enter\" && inputFieldRef.current) {\n      inputFieldRef.current.blur();\n      removeEventListeners();\n    }\n  }\n\n  function handleInputChange(event: React.ChangeEvent<HTMLInputElement>) {\n    const { value } = event.target;\n\n    const format = value.includes(\"/\")\n      ? \"DD/MM/YYYY\"\n      : value.includes(\"-\")\n      ? \"DD-MM-YYYY\"\n      : undefined;\n    const date = dayjs(value, format);\n\n    const isValidDate = date.isValid();\n\n    const isAfter =\n      calendarProps?.startMonth !== undefined\n        ? dayjs(date).isSameOrAfter(calendarProps.startMonth)\n        : true;\n    const isBefore =\n      calendarProps?.endMonth !== undefined\n        ? dayjs(date).isSameOrBefore(calendarProps.endMonth)\n        : true;\n\n    const isValid =\n      isValidDate && isAfter && isBefore && dayjs(date).isSameOrBefore(dayjs());\n\n    if (isValid) {\n      setSelectedDate(date.toDate());\n      setError(undefined);\n    } else {\n      setError(\"Invalid date\");\n    }\n  }\n\n  const defaultTrigger = (\n    <InputField\n      ref={inputFieldRef}\n      size=\"small\"\n      placeholder=\"Select date\"\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      defaultValue={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      error={error}\n      onKeyUp={handleKeyUp}\n      className={styles.datePickerInput}\n    />\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ selectedDate: formattedDate })\n      : children ? <div>{children}</div> : defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n\n      <Popover.Content\n        side={side}\n        className={styles.calendarPopover}\n        ref={contentRef}\n      >\n        <Calendar\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          onDropdownOpen={onDropdownOpen}\n          mode=\"single\"\n          selected={selectedDate}\n          month={selectedDate}\n          onSelect={handleSelect}\n          onMonthChange={setSelectedDate}\n        />\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/v1/components/calendar/range-picker.cjs

@@ -13,10 +13,11 @@ var inputField = require('../input-field/input-field.cjs');
 function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
     to: new Date(),
     from: new Date(),
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, }) {
     const [showCalendar, setShowCalendar] = React.useState(false);
     const [currentRangeField, setCurrentRangeField] = React.useState("from");
     const [selectedRange, setSelectedRange] = React.useState(value);
+    const [currentMonth, setCurrentMonth] = React.useState(selectedRange?.from);
     const prevSelectedRangeRef = React.useRef(selectedRange);
     const startDate = selectedRange.from
         ? dayjs_min.default(selectedRange.from).format(dateFormat)
@@ -24,6 +25,19 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
     const endDate = selectedRange.to
         ? dayjs_min.default(selectedRange.to).format(dateFormat)
         : "";
+    // Ensures two months are visible even when 
+    // current month is the last allowed month (endMonth).
+    const computedDefaultMonth = React.useMemo(() => {
+        let month = currentMonth;
+        if (calendarProps?.endMonth) {
+            const endMonth = dayjs_min.default(calendarProps.endMonth);
+            const fromMonth = dayjs_min.default(currentMonth);
+            if (fromMonth.isSame(endMonth, 'month')) {
+                month = endMonth.subtract(1, 'month').toDate();
+            }
+        }
+        return month;
+    }, [currentMonth, calendarProps?.endMonth]);
     // 1st click will select the start date.
     // 2nd click will select the end date.
     // 3rd click will select the start date again.
@@ -50,12 +64,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             }
         }
         setSelectedRange(newRange);
-        // Return the range with +1 day for the end date in the callback
-        const callbackRange = {
-            from: newRange.from,
-            to: newRange.to ? dayjs_min.default(newRange.to).add(1, "day").toDate() : undefined,
-        };
-        onSelect(callbackRange);
+        onSelect(newRange);
     };
     function onOpenChange(open) {
         const currOpen = Boolean(open);
@@ -70,11 +79,11 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             prevSelectedRangeRef.current = selectedRange;
         }
     }
-    const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: "small", ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: "small", ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, readOnly: true })] }));
+    const defaultTrigger = (jsxRuntime.jsxRuntimeExports.jsxs(flex.Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...(inputFieldsProps.startDate ?? {}), value: startDate, className: calendar_module.default.datePickerInput, readOnly: true }), jsxRuntime.jsxRuntimeExports.jsx(inputField.InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntime.jsxRuntimeExports.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...(inputFieldsProps.endDate ?? {}), value: endDate, className: calendar_module.default.datePickerInput, readOnly: true })] }));
     const trigger = typeof children === "function"
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: [jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, mode: "range", selected: selectedRange, onSelect: handleSelect }), footer && (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: "center", justify: "center", className: calendar_module.default.calendarFooter, children: footer }))] })] }));
+    return (jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsxRuntimeExports.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsxRuntimeExports.jsxs(popover.Popover.Content, { side: side, className: calendar_module.default.calendarPopover, children: [jsxRuntime.jsxRuntimeExports.jsx(calendar.Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: "range", month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntime.jsxRuntimeExports.jsx(flex.Flex, { align: "center", justify: "center", className: calendar_module.default.calendarFooter, children: footer }))] })] }));
 }
 
 exports.RangePicker = RangePicker;

package/dist/v1/components/calendar/range-picker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    // Return the range with +1 day for the end date in the callback\n    const callbackRange = {\n      from: newRange.from,\n      to: newRange.to ? dayjs(newRange.to).add(1, \"day\").toDate() : undefined,\n    };\n    onSelect(callbackRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap={\"medium\"} className={pickerGroupClassName}>\n      <InputField\n        size=\"small\"\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        readOnly\n      />\n\n      <InputField\n        size=\"small\"\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          mode=\"range\"\n          selected={selectedRange}\n          onSelect={handleSelect}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useState","useRef","dayjs","_jsxs","Flex","_jsx","InputField","CalendarIcon","Popover","styles","Calendar"],"mappings":"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"}
+{"version":3,"file":"range-picker.cjs","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n  const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // Ensures two months are visible even when \n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n      \n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap=\"medium\" className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder=\"Select start date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        className={styles.datePickerInput}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder=\"Select end date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        className={styles.datePickerInput}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode=\"range\"\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["useState","useRef","dayjs","useMemo","_jsxs","Flex","_jsx","InputField","CalendarIcon","styles","Popover","Calendar"],"mappings":";;;;;;;;;;;;AA8BM,SAAU,WAAW,CAAC,EAC1B,IAAI,GAAG,KAAK,EACZ,UAAU,GAAG,YAAY,EACzB,gBAAgB,GAAG,EAAE,EACrB,aAAa,EACb,QAAQ,GAAG,MAAO,GAAC,EACnB,KAAK,GAAG;IACN,EAAE,EAAE,IAAI,IAAI,EAAE;IACd,IAAI,EAAE,IAAI,IAAI,EAAE;CACjB,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAgB,GAAG,IAAI,EACvB,MAAM,EACN,QAAQ,GACS,EAAA;IACjB,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;IACxD,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAC7CA,cAAQ,CAAc,MAAM,CAAC,CAAC;IAChC,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC,CAAC;AAC1D,IAAA,MAAM,CAAC,YAAY,EAAE,eAAe,CAAC,GAAGA,cAAQ,CAAC,aAAa,EAAE,IAAI,CAAC,CAAC;AAEtE,IAAA,MAAM,oBAAoB,GAAGC,YAAM,CAAC,aAAa,CAAC,CAAC;AAEnD,IAAA,MAAM,SAAS,GAAG,aAAa,CAAC,IAAI;UAChCC,iBAAK,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;UAC5C,EAAE,CAAC;AACP,IAAA,MAAM,OAAO,GAAG,aAAa,CAAC,EAAE;UAC5BA,iBAAK,CAAC,aAAa,CAAC,EAAE,CAAC,CAAC,MAAM,CAAC,UAAU,CAAC;UAC1C,EAAE,CAAC;;;AAIP,IAAA,MAAM,oBAAoB,GAAGC,aAAO,CAAC,MAAK;QACxC,IAAI,KAAK,GAAG,YAAY,CAAC;AACzB,QAAA,IAAI,aAAa,EAAE,QAAQ,EAAE;YAC3B,MAAM,QAAQ,GAAGD,iBAAK,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;AAC/C,YAAA,MAAM,SAAS,GAAGA,iBAAK,CAAC,YAAY,CAAC,CAAC;YAEtC,IAAI,SAAS,CAAC,MAAM,CAAC,QAAQ,EAAE,OAAO,CAAC,EAAE;AACvC,gBAAA,KAAK,GAAG,QAAQ,CAAC,QAAQ,CAAC,CAAC,EAAE,OAAO,CAAC,CAAC,MAAM,EAAE,CAAC;aAChD;SACF;AACD,QAAA,OAAO,KAAK,CAAC;KACd,EAAE,CAAC,YAAY,EAAE,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC;;;;AAK5C,IAAA,MAAM,YAAY,GAAG,CAAC,KAAgB,EAAE,WAAiB,KAAI;;AAE3D,QAAA,IAAI,QAAmB,CAAC;AAExB,QAAA,IAAI,iBAAiB,KAAK,MAAM,EAAE;;AAEhC,YAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;YACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;SAC5B;aAAM;;AAEL,YAAA,MAAM,IAAI,GAAG,aAAa,CAAC,IAAI,CAAC;AAEhC,YAAA,IAAIA,iBAAK,CAAC,WAAW,CAAC,CAAC,QAAQ,CAACA,iBAAK,CAAC,IAAI,CAAC,CAAC,EAAE;;AAE5C,gBAAA,QAAQ,GAAG,EAAE,IAAI,EAAE,WAAW,EAAE,CAAC;gBACjC,oBAAoB,CAAC,IAAI,CAAC,CAAC;aAC5B;iBAAM;;gBAEL,QAAQ,GAAG,EAAE,IAAI,EAAE,EAAE,EAAE,WAAW,EAAE,CAAC;gBACrC,oBAAoB,CAAC,MAAM,CAAC,CAAC;aAC9B;SACF;QAED,gBAAgB,CAAC,QAAQ,CAAC,CAAC;QAC3B,QAAQ,CAAC,QAAQ,CAAC,CAAC;AACrB,KAAC,CAAC;IAEF,SAAS,YAAY,CAAC,IAAc,EAAA;AAClC,QAAA,MAAM,QAAQ,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;QAE/B,eAAe,CAAC,QAAQ,CAAC,CAAC;;AAG1B,QAAA,IAAI,CAAC,QAAQ,KAAK,CAAC,SAAS,CAAC,MAAM,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;AACvD,YAAA,gBAAgB,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAC/C,YAAA,QAAQ,CAAC,oBAAoB,CAAC,OAAO,CAAC,CAAC;SACxC;;QAGD,IAAI,CAAC,QAAQ,IAAI,SAAS,CAAC,MAAM,IAAI,OAAO,CAAC,MAAM,EAAE;AACnD,YAAA,oBAAoB,CAAC,OAAO,GAAG,aAAa,CAAC;SAC9C;KACF;IAED,MAAM,cAAc,IAClBE,iCAAA,CAACC,SAAI,EAAC,EAAA,GAAG,EAAC,QAAQ,EAAC,SAAS,EAAE,oBAAoB,EAAA,QAAA,EAAA,CAChDC,gCAAC,CAAAC,qBAAU,EACT,EAAA,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,mBAAmB,EAC/B,YAAY,EAAE,gBAAgB,GAAGD,gCAAA,CAACE,2BAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EAAA,IACxD,gBAAgB,CAAC,SAAS,IAAI,EAAE,CAAC,EACtC,KAAK,EAAE,SAAS,EAChB,SAAS,EAAEC,uBAAM,CAAC,eAAe,EACjC,QAAQ,EACR,IAAA,EAAA,CAAA,EAEFH,iCAACC,qBAAU,EAAA,EACT,IAAI,EAAC,OAAO,EACZ,WAAW,EAAC,iBAAiB,EAC7B,YAAY,EAAE,gBAAgB,GAAGD,gCAAC,CAAAE,2BAAY,EAAG,EAAA,CAAA,GAAG,SAAS,EACzD,IAAC,gBAAgB,CAAC,OAAO,IAAI,EAAE,CAAC,EACpC,KAAK,EAAE,OAAO,EACd,SAAS,EAAEC,uBAAM,CAAC,eAAe,EACjC,QAAQ,EAAA,IAAA,EAAA,CACR,CACG,EAAA,CAAA,CACR,CAAC;AAEF,IAAA,MAAM,OAAO,GACX,OAAO,QAAQ,KAAK,UAAU;UAC1B,QAAQ,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC;AAClC,UAAE,QAAQ,IAAI,cAAc,CAAC;IAEjC,QACEL,iCAAC,CAAAM,eAAO,EAAC,EAAA,IAAI,EAAE,YAAY,EAAE,YAAY,EAAE,YAAY,EAAA,QAAA,EAAA,CACrDJ,iCAACI,eAAO,CAAC,OAAO,EAAA,EAAC,OAAO,EAAA,IAAA,EAAA,QAAA,EAAE,OAAO,EAAmB,CAAA,EACpDN,iCAAC,CAAAM,eAAO,CAAC,OAAO,IAAC,IAAI,EAAE,IAAI,EAAE,SAAS,EAAED,uBAAM,CAAC,eAAe,EAC5D,QAAA,EAAA,CAAAH,gCAAA,CAACK,iBAAQ,EAAA,EACP,eAAe,EAAE,KAAK,EACtB,cAAc,EAAE,CAAC,EACjB,YAAY,EAAE,aAAa,CAAC,IAAI,EAChC,QAAQ,EAAE,IAAI,EAAA,GACV,aAAa,EACjB,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,oBAAoB,EAC3B,QAAQ,EAAE,aAAa,EACvB,QAAQ,EAAE,YAAY,EACtB,aAAa,EAAE,eAAe,EAAA,CAC9B,EACD,MAAM,KACLL,gCAAA,CAACD,SAAI,EAAA,EACH,KAAK,EAAC,QAAQ,EACd,OAAO,EAAC,QAAQ,EAChB,SAAS,EAAEI,uBAAM,CAAC,cAAc,EAAA,QAAA,EAE/B,MAAM,EAAA,CACF,CACR,CAAA,EAAA,CACe,CACV,EAAA,CAAA,EACV;AACJ;;;;"}

package/dist/v1/components/calendar/range-picker.d.ts

@@ -17,7 +17,8 @@ interface RangePickerProps {
     }) => React.ReactNode);
     showCalendarIcon?: boolean;
     footer?: React.ReactNode;
+    timeZone?: string;
 }
-export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function RangePicker({ side, dateFormat, inputFieldsProps, calendarProps, onSelect, value, pickerGroupClassName, children, showCalendarIcon, footer, timeZone, }: RangePickerProps): import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=range-picker.d.ts.map

package/dist/v1/components/calendar/range-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,GACP,EAAE,gBAAgB,2CAsHlB"}
+{"version":3,"file":"range-picker.d.ts","sourceRoot":"","sources":["../../../../v1/components/calendar/range-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAO5E,OAAO,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAE7D,UAAU,gBAAgB;IACxB,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,gBAAgB,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,eAAe,CAAC;QAAC,OAAO,CAAC,EAAE,eAAe,CAAA;KAAE,CAAC;IAC9E,aAAa,CAAC,EAAE,kBAAkB,GAAG,SAAS,CAAC;IAC/C,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;IACrC,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,QAAQ,CAAC,EACL,KAAK,CAAC,SAAS,GACf,CAAC,CAAC,KAAK,EAAE;QAAE,SAAS,EAAE,MAAM,CAAC;QAAC,OAAO,EAAE,MAAM,CAAA;KAAE,KAAK,KAAK,CAAC,SAAS,CAAC,CAAC;IACzE,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAID,wBAAgB,WAAW,CAAC,EAC1B,IAAY,EACZ,UAAyB,EACzB,gBAAqB,EACrB,aAAa,EACb,QAAmB,EACnB,KAGC,EACD,oBAAoB,EACpB,QAAQ,EACR,gBAAuB,EACvB,MAAM,EACN,QAAQ,GACT,EAAE,gBAAgB,2CAwIlB"}

package/dist/v1/components/calendar/range-picker.js

@@ -1,7 +1,7 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
 import { CalendarIcon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import dayjs from '../../node_modules/.pnpm/dayjs@1.11.11/node_modules/dayjs/dayjs.min.js';
-import { useState, useRef } from 'react';
+import { useState, useRef, useMemo } from 'react';
 import { Flex } from '../flex/flex.js';
 import { Popover } from '../popover/popover.js';
 import { Calendar } from './calendar.js';
@@ -11,10 +11,11 @@ import { InputField } from '../input-field/input-field.js';
 function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps = {}, calendarProps, onSelect = () => { }, value = {
     to: new Date(),
     from: new Date(),
-}, pickerGroupClassName, children, showCalendarIcon = true, footer, }) {
+}, pickerGroupClassName, children, showCalendarIcon = true, footer, timeZone, }) {
     const [showCalendar, setShowCalendar] = useState(false);
     const [currentRangeField, setCurrentRangeField] = useState("from");
     const [selectedRange, setSelectedRange] = useState(value);
+    const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);
     const prevSelectedRangeRef = useRef(selectedRange);
     const startDate = selectedRange.from
         ? dayjs(selectedRange.from).format(dateFormat)
@@ -22,6 +23,19 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
     const endDate = selectedRange.to
         ? dayjs(selectedRange.to).format(dateFormat)
         : "";
+    // Ensures two months are visible even when 
+    // current month is the last allowed month (endMonth).
+    const computedDefaultMonth = useMemo(() => {
+        let month = currentMonth;
+        if (calendarProps?.endMonth) {
+            const endMonth = dayjs(calendarProps.endMonth);
+            const fromMonth = dayjs(currentMonth);
+            if (fromMonth.isSame(endMonth, 'month')) {
+                month = endMonth.subtract(1, 'month').toDate();
+            }
+        }
+        return month;
+    }, [currentMonth, calendarProps?.endMonth]);
     // 1st click will select the start date.
     // 2nd click will select the end date.
     // 3rd click will select the start date again.
@@ -48,12 +62,7 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             }
         }
         setSelectedRange(newRange);
-        // Return the range with +1 day for the end date in the callback
-        const callbackRange = {
-            from: newRange.from,
-            to: newRange.to ? dayjs(newRange.to).add(1, "day").toDate() : undefined,
-        };
-        onSelect(callbackRange);
+        onSelect(newRange);
     };
     function onOpenChange(open) {
         const currOpen = Boolean(open);
@@ -68,11 +77,11 @@ function RangePicker({ side = "top", dateFormat = "DD/MM/YYYY", inputFieldsProps
             prevSelectedRangeRef.current = selectedRange;
         }
     }
-    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: "small", ...(inputFieldsProps.startDate ?? {}), value: startDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: "small", ...(inputFieldsProps.endDate ?? {}), value: endDate, trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, readOnly: true })] }));
+    const defaultTrigger = (jsxRuntimeExports.jsxs(Flex, { gap: "medium", className: pickerGroupClassName, children: [jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select start date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, ...(inputFieldsProps.startDate ?? {}), value: startDate, className: styles.datePickerInput, readOnly: true }), jsxRuntimeExports.jsx(InputField, { size: 'small', placeholder: "Select end date", trailingIcon: showCalendarIcon ? jsxRuntimeExports.jsx(CalendarIcon, {}) : undefined, ...(inputFieldsProps.endDate ?? {}), value: endDate, className: styles.datePickerInput, readOnly: true })] }));
     const trigger = typeof children === "function"
         ? children({ startDate, endDate })
         : children || defaultTrigger;
-    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, mode: "range", selected: selectedRange, onSelect: handleSelect }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
+    return (jsxRuntimeExports.jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntimeExports.jsx(Popover.Trigger, { asChild: true, children: trigger }), jsxRuntimeExports.jsxs(Popover.Content, { side: side, className: styles.calendarPopover, children: [jsxRuntimeExports.jsx(Calendar, { showOutsideDays: false, numberOfMonths: 2, defaultMonth: selectedRange.from, required: true, ...calendarProps, timeZone: timeZone, mode: "range", month: computedDefaultMonth, selected: selectedRange, onSelect: handleSelect, onMonthChange: setCurrentMonth }), footer && (jsxRuntimeExports.jsx(Flex, { align: "center", justify: "center", className: styles.calendarFooter, children: footer }))] })] }));
 }
 
 export { RangePicker };

package/dist/v1/components/calendar/range-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    // Return the range with +1 day for the end date in the callback\n    const callbackRange = {\n      from: newRange.from,\n      to: newRange.to ? dayjs(newRange.to).add(1, \"day\").toDate() : undefined,\n    };\n    onSelect(callbackRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap={\"medium\"} className={pickerGroupClassName}>\n      <InputField\n        size=\"small\"\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        readOnly\n      />\n\n      <InputField\n        size=\"small\"\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          mode=\"range\"\n          selected={selectedRange}\n          onSelect={handleSelect}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}
+{"version":3,"file":"range-picker.js","sources":["../../../../v1/components/calendar/range-picker.tsx"],"sourcesContent":["import { CalendarIcon } from \"@radix-ui/react-icons\";\nimport dayjs from \"dayjs\";\nimport { useRef, useState, useMemo } from \"react\";\nimport { DateRange, PropsBase, PropsRangeRequired } from \"react-day-picker\";\n\nimport { Flex } from \"../flex\";\nimport { Popover } from \"../popover\";\nimport { Calendar } from \"./calendar\";\nimport styles from \"./calendar.module.css\";\nimport { InputField } from \"../input-field\";\nimport { InputFieldProps } from \"../input-field/input-field\";\n\ninterface RangePickerProps {\n  side?: \"top\" | \"right\" | \"bottom\" | \"left\";\n  dateFormat?: string;\n  inputFieldsProps?: { startDate?: InputFieldProps; endDate?: InputFieldProps };\n  calendarProps?: PropsRangeRequired & PropsBase;\n  onSelect?: (date: DateRange) => void;\n  pickerGroupClassName?: string;\n  value?: DateRange;\n  children?:\n    | React.ReactNode\n    | ((props: { startDate: string; endDate: string }) => React.ReactNode);\n  showCalendarIcon?: boolean;\n  footer?: React.ReactNode;\n  timeZone?: string;\n}\n\ntype RangeFields = keyof DateRange;\n\nexport function RangePicker({\n  side = \"top\",\n  dateFormat = \"DD/MM/YYYY\",\n  inputFieldsProps = {},\n  calendarProps,\n  onSelect = () => {},\n  value = {\n    to: new Date(),\n    from: new Date(),\n  },\n  pickerGroupClassName,\n  children,\n  showCalendarIcon = true,\n  footer,\n  timeZone,\n}: RangePickerProps) {\n  const [showCalendar, setShowCalendar] = useState(false);\n  const [currentRangeField, setCurrentRangeField] =\n    useState<RangeFields>(\"from\");\n  const [selectedRange, setSelectedRange] = useState(value);\n  const [currentMonth, setCurrentMonth] = useState(selectedRange?.from);\n\n  const prevSelectedRangeRef = useRef(selectedRange);\n\n  const startDate = selectedRange.from\n    ? dayjs(selectedRange.from).format(dateFormat)\n    : \"\";\n  const endDate = selectedRange.to\n    ? dayjs(selectedRange.to).format(dateFormat)\n    : \"\";\n\n  // Ensures two months are visible even when \n  // current month is the last allowed month (endMonth).\n  const computedDefaultMonth = useMemo(() => {\n    let month = currentMonth;\n    if (calendarProps?.endMonth) {\n      const endMonth = dayjs(calendarProps.endMonth);\n      const fromMonth = dayjs(currentMonth);\n      \n      if (fromMonth.isSame(endMonth, 'month')) {\n        month = endMonth.subtract(1, 'month').toDate();\n      }\n    }\n    return month;\n  }, [currentMonth, calendarProps?.endMonth]);\n\n  // 1st click will select the start date.\n  // 2nd click will select the end date.\n  // 3rd click will select the start date again.\n  const handleSelect = (range: DateRange, selectedDay: Date) => {\n    // TODO: Remove custom logic and reuse the default logic from react-day-picker\n    let newRange: DateRange;\n\n    if (currentRangeField === \"from\") {\n      // First click - set from date and prepare for to date selection\n      newRange = { from: selectedDay };\n      setCurrentRangeField(\"to\");\n    } else {\n      // Second click - setting to date\n      const from = selectedRange.from;\n\n      if (dayjs(selectedDay).isBefore(dayjs(from))) {\n        // If selected date is before current from date, start new range\n        newRange = { from: selectedDay };\n        setCurrentRangeField(\"to\");\n      } else {\n        // Set the to date\n        newRange = { from, to: selectedDay };\n        setCurrentRangeField(\"from\");\n      }\n    }\n\n    setSelectedRange(newRange);\n    onSelect(newRange);\n  };\n\n  function onOpenChange(open?: boolean) {\n    const currOpen = Boolean(open);\n\n    setShowCalendar(currOpen);\n\n    // Reset selected range if calendar is closed and start or end date is empty\n    if (!currOpen && (!startDate.length || !endDate.length)) {\n      setSelectedRange(prevSelectedRangeRef.current);\n      onSelect(prevSelectedRangeRef.current);\n    }\n\n    // Update previous selected range reference when both start and end dates are selected\n    if (!currOpen && startDate.length && endDate.length) {\n      prevSelectedRangeRef.current = selectedRange;\n    }\n  }\n\n  const defaultTrigger = (\n    <Flex gap=\"medium\" className={pickerGroupClassName}>\n      <InputField\n        size='small'\n        placeholder=\"Select start date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        {...(inputFieldsProps.startDate ?? {})}\n        value={startDate}\n        className={styles.datePickerInput}\n        readOnly\n      />\n\n      <InputField\n        size='small'\n        placeholder=\"Select end date\"\n        trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n        {...(inputFieldsProps.endDate ?? {})}\n        value={endDate}\n        className={styles.datePickerInput}\n        readOnly\n      />\n    </Flex>\n  );\n\n  const trigger =\n    typeof children === \"function\"\n      ? children({ startDate, endDate })\n      : children || defaultTrigger;\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content side={side} className={styles.calendarPopover}>\n        <Calendar\n          showOutsideDays={false}\n          numberOfMonths={2}\n          defaultMonth={selectedRange.from}\n          required={true}\n          {...calendarProps}\n          timeZone={timeZone}\n          mode=\"range\"\n          month={computedDefaultMonth}\n          selected={selectedRange}\n          onSelect={handleSelect}\n          onMonthChange={setCurrentMonth}\n        />\n        {footer && (\n          <Flex\n            align=\"center\"\n            justify=\"center\"\n            className={styles.calendarFooter}\n          >\n            {footer}\n          </Flex>\n        )}\n      </Popover.Content>\n    </Popover>\n  );\n}\n"],"names":["_jsxs","_jsx"],"mappings":"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"}

package/dist/v1/components/dialog/dialog.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 var jsxRuntime = require('../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.cjs');
-var index = require('../../node_modules/.pnpm/@radix-ui_react-dialog@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.cjs');
+var index = require('../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.13_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.cjs');
 var reactIcons_esm = require('../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.cjs');
 var index$1 = require('../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.cjs');
 var clsx = require('../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.cjs');

package/dist/v1/components/dialog/dialog.js

@@ -1,5 +1,5 @@
 import { j as jsxRuntimeExports } from '../../node_modules/.pnpm/react@18.2.0/node_modules/react/jsx-runtime.js';
-import { Portal as $5d3850c4d0b4e6c7$export$602eac185826482c, Overlay as $5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, Content as $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, Root as $5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, Trigger as $5d3850c4d0b4e6c7$export$41fb9f06171c75f4, Close as $5d3850c4d0b4e6c7$export$f39c2d165cd861fe, Title as $5d3850c4d0b4e6c7$export$f99233281efd08a0, Description as $5d3850c4d0b4e6c7$export$393edc798c47379d } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.0.4_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.js';
+import { Portal, Overlay, Content, Root, Trigger, Close, Title, Description } from '../../node_modules/.pnpm/@radix-ui_react-dialog@1.1.13_@types_react-dom@18.0.11_@types_react@18.2.12_react-dom@18.3.1_react@18.2.0__react@18.2.0/node_modules/@radix-ui/react-dialog/dist/index.js';
 import { Cross1Icon } from '../../node_modules/.pnpm/@radix-ui_react-icons@1.3.0_react@18.2.0/node_modules/@radix-ui/react-icons/dist/react-icons.esm.js';
 import { cva } from '../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js';
 import { clsx } from '../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.js';
@@ -8,27 +8,27 @@ import { Flex } from '../flex/flex.js';
 import styles from './dialog.module.css.js';
 
 const dialogContent = cva(styles.dialogContent);
-const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, ...props }, ref) => (jsxRuntimeExports.jsxs($5d3850c4d0b4e6c7$export$602eac185826482c, { children: [jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$c6fdb837b070b4ff, { className: clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? "dialog-description" : undefined, ...props, children: children })] })));
-DialogContent.displayName = $5d3850c4d0b4e6c7$export$7c6e2c02157bb7d2.displayName;
+const DialogContent = forwardRef(({ className, children, ariaLabel, ariaDescription, overlayBlur = false, overlayClassName, overlayStyle, width, ...props }, ref) => (jsxRuntimeExports.jsxs(Portal, { children: [jsxRuntimeExports.jsx(Overlay, { className: clsx(styles.dialogOverlay, overlayClassName, overlayBlur && styles.overlayBlur), style: overlayStyle, "aria-hidden": "true", role: "presentation" }), jsxRuntimeExports.jsx(Content, { ref: ref, className: dialogContent({ className }), style: { width, ...props.style }, "aria-label": ariaLabel, "aria-describedby": ariaDescription ? "dialog-description" : undefined, ...props, children: children })] })));
+DialogContent.displayName = Content.displayName;
 const DialogHeader = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { justify: "between", align: "center", className: clsx(styles.header, className), children: children }));
 const DialogFooter = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { gap: 5, justify: "end", className: clsx(styles.footer, className), children: children }));
 const DialogBody = ({ children, className, }) => (jsxRuntimeExports.jsx(Flex, { direction: "column", gap: 3, className: clsx(styles.body, className), children: children }));
 function CloseButton({ className, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f39c2d165cd861fe, { className: clsx(styles.close, className), "aria-label": "Close dialog", ...props, children: jsxRuntimeExports.jsx(Cross1Icon, {}) }));
+    return (jsxRuntimeExports.jsx(Close, { className: clsx(styles.close, className), "aria-label": "Close dialog", ...props, children: jsxRuntimeExports.jsx(Cross1Icon, {}) }));
 }
 function DialogTitle({ children, className, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$f99233281efd08a0, { ...props, role: "heading", "aria-level": 1, className: clsx(styles.title, className), children: children }));
+    return (jsxRuntimeExports.jsx(Title, { ...props, role: "heading", "aria-level": 1, className: clsx(styles.title, className), children: children }));
 }
 function DialogDescription({ children, className, ...props }) {
-    return (jsxRuntimeExports.jsx($5d3850c4d0b4e6c7$export$393edc798c47379d, { ...props, className: clsx(styles.description, className), id: "dialog-description", role: "document", children: children }));
+    return (jsxRuntimeExports.jsx(Description, { ...props, className: clsx(styles.description, className), id: "dialog-description", role: "document", children: children }));
 }
-const Dialog = Object.assign($5d3850c4d0b4e6c7$export$be92b6f5f03c0fe9, {
-    Trigger: $5d3850c4d0b4e6c7$export$41fb9f06171c75f4,
+const Dialog = Object.assign(Root, {
+    Trigger: Trigger,
     Content: DialogContent,
     Header: DialogHeader,
     Footer: DialogFooter,
     Body: DialogBody,
-    Close: $5d3850c4d0b4e6c7$export$f39c2d165cd861fe,
+    Close: Close,
     CloseButton: CloseButton,
     Title: DialogTitle,
     Description: DialogDescription,