@clickhouse/click-ui 0.2.0-test.0 → 0.2.1-rc.8

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

@@ -1,9 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
 import { isSameDate } from '@h6s/calendar';
 import * as RadixPopover from '@radix-ui/react-popover';
 import { styled } from 'styled-components';
 import { DatePickerInput, CalendarRenderer, DateTableCell } from './Common.js';
+import { shiftToTimezone, shiftFromTimezone } from './utils.js';
 
 const DAYS_IN_WEEK = 7;
 const PopoverTrigger = styled(RadixPopover.Trigger).withConfig({
@@ -20,17 +21,25 @@ const PopoverContent = styled(RadixPopover.Content).withConfig({
     border-radius: ${theme.click.genericMenu.panel.radii.all};
   `);
 const Calendar = ({
+  allowOnlyDatesList,
   calendarBody,
   closeDatepicker,
   futureDatesDisabled,
   selectedDate,
   setSelectedDate,
-  autoFocus = false
+  autoFocus = false,
+  timezone
 }) => {
   const allDays = calendarBody.value.flatMap((week) => week.value);
   const totalDays = allDays.length;
-  const today = /* @__PURE__ */ new Date();
-  const initialFocusIndex = allDays.findIndex((day) => selectedDate ? isSameDate(selectedDate, day.value) : isSameDate(today, day.value));
+  const today = shiftToTimezone(/* @__PURE__ */ new Date(), timezone);
+  const shiftedSelected = selectedDate ? shiftToTimezone(selectedDate, timezone) : void 0;
+  const shiftedAllowList = useMemo(() => {
+    return allowOnlyDatesList?.map((date) => {
+      return shiftToTimezone(date, timezone);
+    });
+  }, [allowOnlyDatesList, timezone]);
+  const initialFocusIndex = allDays.findIndex((day) => shiftedSelected ? isSameDate(shiftedSelected, day.value) : isSameDate(today, day.value));
   const [focusedDayIndex, setFocusedDayIndex] = useState(initialFocusIndex >= 0 ? initialFocusIndex : 0);
   const dayRefs = useRef([]);
   useEffect(() => {
@@ -44,30 +53,30 @@ const Calendar = ({
       return () => clearTimeout(timeoutId);
     }
   }, [autoFocus, initialFocusIndex]);
-  const onDayKeyDown = useCallback((e, index, fullDate, isDisabled) => {
+  const onDayKeyDown = useCallback((event, index, fullDate, isDisabled) => {
     let newIndex = index;
-    switch (e.key) {
+    switch (event.key) {
       case "ArrowRight":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + 1) % totalDays;
         break;
       case "ArrowLeft":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - 1 + totalDays) % totalDays;
         break;
       case "ArrowDown":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index + DAYS_IN_WEEK) % totalDays;
         break;
       case "ArrowUp":
-        e.preventDefault();
+        event.preventDefault();
         newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;
         break;
       case "Enter":
       case " ":
-        e.preventDefault();
+        event.preventDefault();
         if (!isDisabled) {
-          setSelectedDate(fullDate);
+          setSelectedDate(shiftFromTimezone(fullDate, timezone));
           closeDatepicker();
         }
         return;
@@ -76,7 +85,7 @@ const Calendar = ({
     }
     setFocusedDayIndex(newIndex);
     dayRefs.current[newIndex]?.focus();
-  }, [totalDays, setSelectedDate, closeDatepicker]);
+  }, [totalDays, setSelectedDate, closeDatepicker, timezone]);
   let dayIndex = 0;
   return calendarBody.value.map(({
     key: weekKey,
@@ -88,16 +97,20 @@ const Calendar = ({
       key: dayKey,
       value: fullDate
     }) => {
-      const isSelected = selectedDate && isSameDate(selectedDate, fullDate);
+      const isSelected = shiftedSelected && isSameDate(shiftedSelected, fullDate);
       const isPresent = isSameDate(today, fullDate);
-      const isDisabled = futureDatesDisabled ? fullDate > today : false;
+      const isNotAllowed = shiftedAllowList && shiftedAllowList.length > 0 && !shiftedAllowList.some((shiftedDate) => {
+        return isSameDate(shiftedDate, fullDate);
+      });
+      const isFutureDisabled = futureDatesDisabled && fullDate > today;
+      const isDisabled = isNotAllowed || isFutureDisabled;
       const currentIndex = dayIndex;
       dayIndex++;
       const handleClick = () => {
         if (isDisabled) {
           return false;
         }
-        setSelectedDate(fullDate);
+        setSelectedDate(shiftFromTimezone(fullDate, timezone));
         closeDatepicker();
       };
       return /* @__PURE__ */ jsx(DateTableCell, { ref: (el) => {
@@ -107,11 +120,13 @@ const Calendar = ({
   });
 };
 const DatePicker = ({
+  allowOnlyDatesList,
   date,
   disabled = false,
   futureDatesDisabled = false,
   onSelectDate,
-  placeholder
+  placeholder,
+  timezone = "system"
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [selectedDate, setSelectedDate] = useState();
@@ -163,8 +178,8 @@ const DatePicker = ({
     }
   }, []);
   return /* @__PURE__ */ jsxs(RadixPopover.Root, { onOpenChange, open: isOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, partialMonth, partialYear, placeholder, selectedDate }) }),
-    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(PopoverContent, { align: "start", sideOffset: 4, children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, onYearSelect, onMonthSelect, selectedDate, children: (body) => /* @__PURE__ */ jsx(Calendar, { autoFocus: autoFocusCalendar, calendarBody: body, closeDatepicker: onCloseDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: onDateSelect }) }) }) })
+    /* @__PURE__ */ jsx(PopoverTrigger, { disabled, onKeyDown: onTriggerKeyDown, children: /* @__PURE__ */ jsx(DatePickerInput, { "data-testid": "datepicker-input-container", disabled, isActive: isOpen, partialMonth, partialYear, placeholder, selectedDate, timezone }) }),
+    /* @__PURE__ */ jsx(RadixPopover.Portal, { children: /* @__PURE__ */ jsx(PopoverContent, { align: "start", sideOffset: 4, children: /* @__PURE__ */ jsx(CalendarRenderer, { calendarOptions, onYearSelect, onMonthSelect, selectedDate, timezone, children: (body) => /* @__PURE__ */ jsx(Calendar, { allowOnlyDatesList, autoFocus: autoFocusCalendar, calendarBody: body, closeDatepicker: onCloseDatePicker, futureDatesDisabled, selectedDate, setSelectedDate: onDateSelect, timezone }) }) }) })
   ] });
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport { DatePickerProps } from './DatePicker.types';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: fit-content;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n  z-index: 1;\n  outline: none;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `}\n\n  &:focus {\n    outline: none;\n  }\n`;\n\ninterface CalendarProps {\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  selectedDate?: Date;\n  setSelectedDate: (selectedDate: Date) => void;\n  autoFocus?: boolean;\n}\n\nconst Calendar = ({\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  selectedDate,\n  setSelectedDate,\n  autoFocus = false,\n}: CalendarProps) => {\n  const allDays = calendarBody.value.flatMap(week => week.value);\n  const totalDays = allDays.length;\n\n  const today = new Date();\n  const initialFocusIndex = allDays.findIndex(day =>\n    selectedDate ? isSameDate(selectedDate, day.value) : isSameDate(today, day.value)\n  );\n\n  const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n    initialFocusIndex >= 0 ? initialFocusIndex : 0\n  );\n  const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n  useEffect(() => {\n    dayRefs.current[focusedDayIndex]?.focus();\n  }, [focusedDayIndex]);\n\n  useEffect(() => {\n    if (autoFocus && initialFocusIndex >= 0) {\n      const timeoutId = setTimeout(() => {\n        dayRefs.current[initialFocusIndex]?.focus();\n      }, 0);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, initialFocusIndex]);\n\n  const onDayKeyDown = useCallback(\n    (\n      e: KeyboardEvent<HTMLTableCellElement>,\n      index: number,\n      fullDate: Date,\n      isDisabled: boolean\n    ) => {\n      let newIndex = index;\n\n      switch (e.key) {\n        case 'ArrowRight':\n          e.preventDefault();\n          newIndex = (index + 1) % totalDays;\n          break;\n        case 'ArrowLeft':\n          e.preventDefault();\n          newIndex = (index - 1 + totalDays) % totalDays;\n          break;\n        case 'ArrowDown':\n          e.preventDefault();\n          newIndex = (index + DAYS_IN_WEEK) % totalDays;\n          break;\n        case 'ArrowUp':\n          e.preventDefault();\n          newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n          break;\n        case 'Enter':\n        case ' ':\n          e.preventDefault();\n          if (!isDisabled) {\n            setSelectedDate(fullDate);\n            closeDatepicker();\n          }\n          return;\n        default:\n          return;\n      }\n\n      setFocusedDayIndex(newIndex);\n      dayRefs.current[newIndex]?.focus();\n    },\n    [totalDays, setSelectedDate, closeDatepicker]\n  );\n\n  let dayIndex = 0;\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const isSelected = selectedDate && isSameDate(selectedDate, fullDate);\n          const isPresent = isSameDate(today, fullDate);\n          const isDisabled = futureDatesDisabled ? fullDate > today : false;\n          const currentIndex = dayIndex;\n          dayIndex++;\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(fullDate);\n            closeDatepicker();\n          };\n\n          return (\n            <DateTableCell\n              ref={el => {\n                dayRefs.current[currentIndex] = el;\n              }}\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n              tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n              role=\"gridcell\"\n              aria-label={fullDate.toDateString()}\n            >\n              {date}\n            </DateTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\nexport const DatePicker = ({\n  date,\n  disabled = false,\n  futureDatesDisabled = false,\n  onSelectDate,\n  placeholder,\n}: DatePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedDate, setSelectedDate] = useState<Date>();\n  const [partialYear, setPartialYear] = useState<number>();\n  const [partialMonth, setPartialMonth] = useState<number>();\n  const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n  const calendarOptions: UseCalendarOptions = {};\n\n  if (selectedDate) {\n    calendarOptions.defaultDate = selectedDate;\n  }\n\n  useEffect(() => {\n    if (date) {\n      setSelectedDate(date);\n    }\n  }, [date]);\n\n  const resetPartialState = useCallback(() => {\n    setPartialYear(undefined);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        resetPartialState();\n        setAutoFocusCalendar(false);\n      }\n    },\n    [resetPartialState]\n  );\n\n  const onCloseDatePicker = useCallback(() => {\n    setIsOpen(false);\n    resetPartialState();\n  }, [resetPartialState]);\n\n  const onDateSelect = useCallback(\n    (date: Date): void => {\n      setSelectedDate(date);\n      onSelectDate(date);\n      resetPartialState();\n    },\n    [onSelectDate, resetPartialState]\n  );\n\n  const onYearSelect = useCallback((year: number) => {\n    setPartialYear(year);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onMonthSelect = useCallback((year: number, month: number) => {\n    setPartialYear(year);\n    setPartialMonth(month);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n      setAutoFocusCalendar(true);\n    }\n  }, []);\n\n  return (\n    <Popover.Root\n      onOpenChange={onOpenChange}\n      open={isOpen}\n    >\n      <PopoverTrigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DatePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          partialMonth={partialMonth}\n          partialYear={partialYear}\n          placeholder={placeholder}\n          selectedDate={selectedDate}\n        />\n      </PopoverTrigger>\n      <Popover.Portal>\n        <PopoverContent\n          align=\"start\"\n          sideOffset={4}\n        >\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            onYearSelect={onYearSelect}\n            onMonthSelect={onMonthSelect}\n            selectedDate={selectedDate}\n          >\n            {body => (\n              <Calendar\n                autoFocus={autoFocusCalendar}\n                calendarBody={body}\n                closeDatepicker={onCloseDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                selectedDate={selectedDate}\n                setSelectedDate={onDateSelect}\n              />\n            )}\n          </CalendarRenderer>\n        </PopoverContent>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","allDays","value","flatMap","week","totalDays","length","today","Date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","e","index","fullDate","isDisabled","newIndex","key","preventDefault","dayIndex","map","weekKey","date","isCurrentMonth","dayKey","isSelected","isPresent","currentIndex","handleClick","el","toDateString","DatePicker","disabled","onSelectDate","placeholder","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","defaultDate","resetPartialState","undefined","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","body"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { isSameDate, UseCalendarOptions } from '@h6s/calendar';\nimport * as Popover from '@radix-ui/react-popover';\nimport { styled } from 'styled-components';\nimport { Body, CalendarRenderer, DatePickerInput, DateTableCell } from './Common';\nimport { shiftFromTimezone, shiftToTimezone, Timezone } from './utils';\n\nconst DAYS_IN_WEEK = 7;\n\nconst PopoverTrigger = styled(Popover.Trigger)`\n  background: none;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  width: fit-content;\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  &:focus-visible {\n    outline: none;\n  }\n`;\n\nconst PopoverContent = styled(Popover.Content)`\n  z-index: 1;\n  outline: none;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `}\n\n  &:focus {\n    outline: none;\n  }\n`;\n\ninterface CalendarProps {\n  allowOnlyDatesList?: Array<Date>;\n  calendarBody: Body;\n  closeDatepicker: () => void;\n  futureDatesDisabled: boolean;\n  selectedDate?: Date;\n  setSelectedDate: (selectedDate: Date) => void;\n  autoFocus?: boolean;\n  timezone: Timezone;\n}\n\nconst Calendar = ({\n  allowOnlyDatesList,\n  calendarBody,\n  closeDatepicker,\n  futureDatesDisabled,\n  selectedDate,\n  setSelectedDate,\n  autoFocus = false,\n  timezone,\n}: CalendarProps) => {\n  const allDays = calendarBody.value.flatMap(week => week.value);\n  const totalDays = allDays.length;\n\n  const today = shiftToTimezone(new Date(), timezone);\n\n  const shiftedSelected = selectedDate\n    ? shiftToTimezone(selectedDate, timezone)\n    : undefined;\n\n  const shiftedAllowList = useMemo(() => {\n    return allowOnlyDatesList?.map(date => {\n      return shiftToTimezone(date, timezone);\n    });\n  }, [allowOnlyDatesList, timezone]);\n\n  const initialFocusIndex = allDays.findIndex(day =>\n    shiftedSelected\n      ? isSameDate(shiftedSelected, day.value)\n      : isSameDate(today, day.value)\n  );\n\n  const [focusedDayIndex, setFocusedDayIndex] = useState<number>(\n    initialFocusIndex >= 0 ? initialFocusIndex : 0\n  );\n  const dayRefs = useRef<Array<HTMLTableCellElement | null>>([]);\n\n  useEffect(() => {\n    dayRefs.current[focusedDayIndex]?.focus();\n  }, [focusedDayIndex]);\n\n  useEffect(() => {\n    if (autoFocus && initialFocusIndex >= 0) {\n      const timeoutId = setTimeout(() => {\n        dayRefs.current[initialFocusIndex]?.focus();\n      }, 0);\n      return () => clearTimeout(timeoutId);\n    }\n  }, [autoFocus, initialFocusIndex]);\n\n  const onDayKeyDown = useCallback(\n    (\n      event: KeyboardEvent<HTMLTableCellElement>,\n      index: number,\n      fullDate: Date,\n      isDisabled: boolean\n    ) => {\n      let newIndex = index;\n\n      switch (event.key) {\n        case 'ArrowRight':\n          event.preventDefault();\n          newIndex = (index + 1) % totalDays;\n          break;\n        case 'ArrowLeft':\n          event.preventDefault();\n          newIndex = (index - 1 + totalDays) % totalDays;\n          break;\n        case 'ArrowDown':\n          event.preventDefault();\n          newIndex = (index + DAYS_IN_WEEK) % totalDays;\n          break;\n        case 'ArrowUp':\n          event.preventDefault();\n          newIndex = (index - DAYS_IN_WEEK + totalDays) % totalDays;\n          break;\n        case 'Enter':\n        case ' ':\n          event.preventDefault();\n          if (!isDisabled) {\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          }\n          return;\n        default:\n          return;\n      }\n\n      setFocusedDayIndex(newIndex);\n      dayRefs.current[newIndex]?.focus();\n    },\n    [totalDays, setSelectedDate, closeDatepicker, timezone]\n  );\n\n  let dayIndex = 0;\n\n  return calendarBody.value.map(({ key: weekKey, value: week }) => {\n    return (\n      <tr key={weekKey}>\n        {week.map(({ date, isCurrentMonth, key: dayKey, value: fullDate }) => {\n          const isSelected = shiftedSelected && isSameDate(shiftedSelected, fullDate);\n          const isPresent = isSameDate(today, fullDate);\n\n          const isNotAllowed =\n            shiftedAllowList &&\n            shiftedAllowList.length > 0 &&\n            !shiftedAllowList.some((shiftedDate: Date) => {\n              return isSameDate(shiftedDate, fullDate);\n            });\n\n          const isFutureDisabled = futureDatesDisabled && fullDate > today;\n          const isDisabled = isNotAllowed || isFutureDisabled;\n          const currentIndex = dayIndex;\n          dayIndex++;\n\n          const handleClick = () => {\n            if (isDisabled) {\n              return false;\n            }\n            setSelectedDate(shiftFromTimezone(fullDate, timezone));\n            closeDatepicker();\n          };\n\n          return (\n            <DateTableCell\n              ref={el => {\n                dayRefs.current[currentIndex] = el;\n              }}\n              $isCurrentMonth={isCurrentMonth}\n              $isDisabled={isDisabled}\n              $isSelected={isSelected}\n              $isPresent={isPresent}\n              key={dayKey}\n              onClick={handleClick}\n              onKeyDown={e => onDayKeyDown(e, currentIndex, fullDate, isDisabled)}\n              tabIndex={currentIndex === focusedDayIndex ? 0 : -1}\n              role=\"gridcell\"\n              aria-label={fullDate.toDateString()}\n            >\n              {date}\n            </DateTableCell>\n          );\n        })}\n      </tr>\n    );\n  });\n};\n\nexport interface DatePickerProps {\n  allowOnlyDatesList?: Array<Date>;\n  date?: Date;\n  disabled?: boolean;\n  futureDatesDisabled?: boolean;\n  onSelectDate: (selectedDate: Date) => void;\n  placeholder?: string;\n  timezone?: Timezone;\n}\n\nexport const DatePicker = ({\n  allowOnlyDatesList,\n  date,\n  disabled = false,\n  futureDatesDisabled = false,\n  onSelectDate,\n  placeholder,\n  timezone = 'system',\n}: DatePickerProps) => {\n  const [isOpen, setIsOpen] = useState<boolean>(false);\n  const [selectedDate, setSelectedDate] = useState<Date>();\n  const [partialYear, setPartialYear] = useState<number>();\n  const [partialMonth, setPartialMonth] = useState<number>();\n  const [autoFocusCalendar, setAutoFocusCalendar] = useState<boolean>(false);\n\n  const calendarOptions: UseCalendarOptions = {};\n\n  if (selectedDate) {\n    calendarOptions.defaultDate = selectedDate;\n  }\n\n  useEffect(() => {\n    if (date) {\n      setSelectedDate(date);\n    }\n  }, [date]);\n\n  const resetPartialState = useCallback(() => {\n    setPartialYear(undefined);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onOpenChange = useCallback(\n    (open: boolean) => {\n      setIsOpen(open);\n      if (!open) {\n        resetPartialState();\n        setAutoFocusCalendar(false);\n      }\n    },\n    [resetPartialState]\n  );\n\n  const onCloseDatePicker = useCallback(() => {\n    setIsOpen(false);\n    resetPartialState();\n  }, [resetPartialState]);\n\n  const onDateSelect = useCallback(\n    (date: Date): void => {\n      setSelectedDate(date);\n      onSelectDate(date);\n      resetPartialState();\n    },\n    [onSelectDate, resetPartialState]\n  );\n\n  const onYearSelect = useCallback((year: number) => {\n    setPartialYear(year);\n    setPartialMonth(undefined);\n  }, []);\n\n  const onMonthSelect = useCallback((year: number, month: number) => {\n    setPartialYear(year);\n    setPartialMonth(month);\n  }, []);\n\n  const onTriggerKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault();\n      setIsOpen(true);\n      setAutoFocusCalendar(true);\n    }\n  }, []);\n\n  return (\n    <Popover.Root\n      onOpenChange={onOpenChange}\n      open={isOpen}\n    >\n      <PopoverTrigger\n        disabled={disabled}\n        onKeyDown={onTriggerKeyDown}\n      >\n        <DatePickerInput\n          data-testid=\"datepicker-input-container\"\n          disabled={disabled}\n          isActive={isOpen}\n          partialMonth={partialMonth}\n          partialYear={partialYear}\n          placeholder={placeholder}\n          selectedDate={selectedDate}\n          timezone={timezone}\n        />\n      </PopoverTrigger>\n      <Popover.Portal>\n        <PopoverContent\n          align=\"start\"\n          sideOffset={4}\n        >\n          <CalendarRenderer\n            calendarOptions={calendarOptions}\n            onYearSelect={onYearSelect}\n            onMonthSelect={onMonthSelect}\n            selectedDate={selectedDate}\n            timezone={timezone}\n          >\n            {body => (\n              <Calendar\n                allowOnlyDatesList={allowOnlyDatesList}\n                autoFocus={autoFocusCalendar}\n                calendarBody={body}\n                closeDatepicker={onCloseDatePicker}\n                futureDatesDisabled={futureDatesDisabled}\n                selectedDate={selectedDate}\n                setSelectedDate={onDateSelect}\n                timezone={timezone}\n              />\n            )}\n          </CalendarRenderer>\n        </PopoverContent>\n      </Popover.Portal>\n    </Popover.Root>\n  );\n};\n"],"names":["DAYS_IN_WEEK","PopoverTrigger","styled","Popover","Trigger","withConfig","componentId","PopoverContent","Content","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","Calendar","allowOnlyDatesList","calendarBody","closeDatepicker","futureDatesDisabled","selectedDate","setSelectedDate","autoFocus","timezone","allDays","value","flatMap","week","totalDays","length","today","shiftToTimezone","Date","shiftedSelected","undefined","shiftedAllowList","useMemo","map","date","initialFocusIndex","findIndex","day","isSameDate","focusedDayIndex","setFocusedDayIndex","useState","dayRefs","useRef","useEffect","current","focus","timeoutId","setTimeout","clearTimeout","onDayKeyDown","useCallback","event","index","fullDate","isDisabled","newIndex","key","preventDefault","shiftFromTimezone","dayIndex","weekKey","isCurrentMonth","dayKey","isSelected","isPresent","isNotAllowed","some","shiftedDate","isFutureDisabled","currentIndex","handleClick","el","e","toDateString","DatePicker","disabled","onSelectDate","placeholder","isOpen","setIsOpen","partialYear","setPartialYear","partialMonth","setPartialMonth","autoFocusCalendar","setAutoFocusCalendar","calendarOptions","defaultDate","resetPartialState","onOpenChange","open","onCloseDatePicker","onDateSelect","onYearSelect","year","onMonthSelect","month","onTriggerKeyDown","body"],"mappings":"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"}

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

@@ -1,31 +1,57 @@
+import '../../utils/date.js';
 import dayjs from 'dayjs';
 
 const locale = "en-US";
-const selectedDateFormatter = new Intl.DateTimeFormat(locale, {
+const createFormatter = (options) => {
+  const timezoneFormatters = {};
+  return (timezone, date) => {
+    if (!timezoneFormatters[timezone]) {
+      const opts = timezone === "UTC" ? {
+        ...options,
+        timeZone: "UTC"
+      } : options;
+      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);
+    }
+    return timezoneFormatters[timezone].format(date);
+  };
+};
+const formatSelectedDate = createFormatter({
   day: "2-digit",
   month: "short",
   year: "numeric"
 });
-const weekdayFormatter = new Intl.DateTimeFormat(locale, {
+const formatWeekday = createFormatter({
   weekday: "short"
 });
-const selectedDateTimeFormatter = new Intl.DateTimeFormat(locale, {
+const formatSelectedDateTime = createFormatter({
   day: "2-digit",
   month: "short",
   hour: "2-digit",
   minute: "2-digit"
 });
-const selectedDateTimeFormatterWithSeconds = new Intl.DateTimeFormat(locale, {
+const formatSelectedDateTimeWithSeconds = createFormatter({
   day: "2-digit",
   month: "short",
   hour: "2-digit",
   minute: "2-digit",
   second: "2-digit"
 });
-const headerDateFormatter = new Intl.DateTimeFormat(locale, {
+const formatDateHeader = createFormatter({
   month: "short",
   year: "numeric"
 });
+const shiftToTimezone = (date, timezone) => {
+  if (timezone !== "UTC") {
+    return date;
+  }
+  return new Date(date.getTime() + date.getTimezoneOffset() * 6e4);
+};
+const shiftFromTimezone = (date, timezone) => {
+  if (timezone !== "UTC") {
+    return date;
+  }
+  return new Date(date.getTime() - date.getTimezoneOffset() * 6e4);
+};
 const getPredefinedMonthsForDateRangePicker = (numberOfMonths) => {
   const now = dayjs();
   if (numberOfMonths < 0) {
@@ -59,16 +85,16 @@ const datesAreWithinMaxRange = (startDate, endDate, maxRangeLength) => {
 const isDateRangeTheWholeMonth = ({
   startDate,
   endDate
-}) => {
-  if (startDate.getMonth() !== endDate.getMonth()) {
+}, timezone = "system") => {
+  const start = timezone === "UTC" ? dayjs.utc(startDate) : dayjs(startDate);
+  const end = timezone === "UTC" ? dayjs.utc(endDate) : dayjs(endDate);
+  if (start.month() !== end.month()) {
     return false;
   }
-  const start = dayjs(startDate);
-  const end = dayjs(endDate);
   const startDateIsFirstDay = start.isSame(start.startOf("month"), "day");
   const endDateIsLastDay = end.isSame(end.endOf("month"), "day");
   return startDateIsFirstDay && endDateIsLastDay;
 };
 
-export { datesAreWithinMaxRange, getPredefinedMonthsForDateRangePicker, headerDateFormatter, isDateRangeTheWholeMonth, selectedDateFormatter, selectedDateTimeFormatter, selectedDateTimeFormatterWithSeconds, weekdayFormatter };
+export { datesAreWithinMaxRange, formatDateHeader, formatSelectedDate, formatSelectedDateTime, formatSelectedDateTimeWithSeconds, formatWeekday, getPredefinedMonthsForDateRangePicker, isDateRangeTheWholeMonth, shiftFromTimezone, shiftToTimezone };
 //# sourceMappingURL=utils.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import dayjs from 'dayjs';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nexport const selectedDateFormatter = new Intl.DateTimeFormat(locale, {\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const weekdayFormatter = new Intl.DateTimeFormat(locale, { weekday: 'short' });\n\nexport const selectedDateTimeFormatter = new Intl.DateTimeFormat(locale, {\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const selectedDateTimeFormatterWithSeconds = new Intl.DateTimeFormat(locale, {\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const selectedDateTimeDateFormatter = new Intl.DateTimeFormat(locale, {\n  day: '2-digit',\n  month: 'short',\n});\n\nexport const timeFormatter = new Intl.DateTimeFormat(locale, {\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const headerDateFormatter = new Intl.DateTimeFormat(locale, {\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const datesAreWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days'));\n\n  return daysDifference <= maxRangeLength;\n};\n\nexport const isDateRangeTheWholeMonth = ({ startDate, endDate }: DateRange): boolean => {\n  if (startDate.getMonth() !== endDate.getMonth()) {\n    return false;\n  }\n\n  const start = dayjs(startDate);\n  const end = dayjs(endDate);\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n"],"names":["locale","selectedDateFormatter","Intl","DateTimeFormat","day","month","year","weekdayFormatter","weekday","selectedDateTimeFormatter","hour","minute","selectedDateTimeFormatterWithSeconds","second","headerDateFormatter","getPredefinedMonthsForDateRangePicker","numberOfMonths","now","dayjs","lastSixMonths","i","Math","abs","date","subtract","push","startDate","startOf","toDate","endDate","endOf","reverse","nextSixMonths","add","datesAreWithinMaxRange","maxRangeLength","daysDifference","diff","isDateRangeTheWholeMonth","getMonth","start","end","startDateIsFirstDay","isSame","endDateIsLastDay"],"mappings":"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"}
+{"version":3,"file":"utils.js","sources":["../../../../src/components/DatePicker/utils.ts"],"sourcesContent":["import { dayjs } from '@/utils/date';\n\nexport type Timezone = 'system' | 'UTC';\n\nexport interface DateRange {\n  startDate: Date;\n  endDate: Date;\n}\n\nconst locale = 'en-US';\n\nexport type Meridiem = 'am' | 'pm';\n\nexport interface Time {\n  hour: number;\n  minutes: number;\n}\n\nexport interface DateRangeListItem {\n  dateRange: DateRange;\n  label: string;\n}\n\nconst createFormatter = (options: Intl.DateTimeFormatOptions) => {\n  const timezoneFormatters: Partial<Record<Timezone, Intl.DateTimeFormat>> = {};\n\n  return (timezone: Timezone, date: Date): string => {\n    if (!timezoneFormatters[timezone]) {\n      const opts = timezone === 'UTC' ? { ...options, timeZone: 'UTC' } : options;\n      timezoneFormatters[timezone] = new Intl.DateTimeFormat(locale, opts);\n    }\n    return timezoneFormatters[timezone].format(date);\n  };\n};\n\nexport const formatSelectedDate = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  year: 'numeric',\n});\n\nexport const formatWeekday = createFormatter({ weekday: 'short' });\n\nexport const formatSelectedDateTime = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n});\n\nexport const formatSelectedDateTimeWithSeconds = createFormatter({\n  day: '2-digit',\n  month: 'short',\n  hour: '2-digit',\n  minute: '2-digit',\n  second: '2-digit',\n});\n\nexport const formatDateHeader = createFormatter({\n  month: 'short',\n  year: 'numeric',\n});\n\n// In UTC mode, shift by the host offset so local-time getters return UTC\n// values. shiftFromTimezone reverses it.\n//\n// Caveat: round-tripping across a DST boundary drifts by an hour — each\n// direction reads getTimezoneOffset on its own input. Call sites don't\n// round-trip the same Date, so this hasn't bitten us.\nexport const shiftToTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() + date.getTimezoneOffset() * 60_000);\n};\n\nexport const shiftFromTimezone = (date: Date, timezone: Timezone): Date => {\n  if (timezone !== 'UTC') {\n    return date;\n  }\n  return new Date(date.getTime() - date.getTimezoneOffset() * 60_000);\n};\n\nexport const getPredefinedMonthsForDateRangePicker = (\n  numberOfMonths: number\n): DateRange[] => {\n  const now = dayjs();\n\n  if (numberOfMonths < 0) {\n    const lastSixMonths: DateRange[] = [];\n    for (let i = 0; i < Math.abs(numberOfMonths); i++) {\n      const date = now.subtract(i, 'month');\n      if (date.date() === 1 && date.month() === now.month()) {\n        continue;\n      }\n      lastSixMonths.push({\n        startDate: date.startOf('month').toDate(),\n        endDate: i === 0 ? now.toDate() : date.endOf('month').toDate(),\n      });\n    }\n\n    return lastSixMonths.reverse();\n  }\n\n  const nextSixMonths: DateRange[] = [];\n  for (let i = 0; i < numberOfMonths; i++) {\n    const date = now.add(i, 'month');\n    nextSixMonths.push({\n      startDate: date.startOf('month').toDate(),\n      endDate: date.endOf('month').toDate(),\n    });\n  }\n\n  return nextSixMonths;\n};\n\nexport const getPredefinedTimePeriodsForDateTimePicker = (): DateRangeListItem[] => {\n  const now = dayjs();\n\n  const fifteenMinutesAgo = now.subtract(15, 'minute');\n  const thirtyMinutesAgo = now.subtract(30, 'minute');\n  const oneHourAgo = now.subtract(1, 'hour');\n  const sixHoursAgo = now.subtract(6, 'hour');\n  const oneDayAgo = now.subtract(1, 'day');\n  const oneMonthAgo = now.subtract(1, 'month');\n\n  const dateRangeList: DateRangeListItem[] = [\n    {\n      dateRange: {\n        startDate: fifteenMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 15 minutes',\n    },\n    {\n      dateRange: {\n        startDate: thirtyMinutesAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 30 minutes',\n    },\n    {\n      dateRange: {\n        startDate: oneHourAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past hour',\n    },\n    {\n      dateRange: {\n        startDate: sixHoursAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past 6 hours',\n    },\n    {\n      dateRange: {\n        startDate: oneDayAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past day',\n    },\n    {\n      dateRange: {\n        startDate: oneMonthAgo.toDate(),\n        endDate: now.toDate(),\n      },\n      label: 'Past month',\n    },\n  ];\n\n  return dateRangeList;\n};\n\nexport const getNextNDatesForDatePickerAllowOnlyList = (numberOfDays: number): Date[] => {\n  const now = dayjs();\n\n  return Array.from({ length: numberOfDays }, (_, i) =>\n    now.add(i, 'day').startOf('day').toDate()\n  );\n};\n\nexport const datesAreWithinMaxRange = (\n  startDate: Date,\n  endDate: Date,\n  maxRangeLength: number\n): boolean => {\n  const daysDifference = Math.abs(dayjs(startDate).diff(dayjs(endDate), 'days'));\n\n  return daysDifference <= maxRangeLength;\n};\n\nexport const isDateRangeTheWholeMonth = (\n  { startDate, endDate }: DateRange,\n  timezone: Timezone = 'system'\n): boolean => {\n  const start = timezone === 'UTC' ? dayjs.utc(startDate) : dayjs(startDate);\n  const end = timezone === 'UTC' ? dayjs.utc(endDate) : dayjs(endDate);\n\n  if (start.month() !== end.month()) {\n    return false;\n  }\n\n  const startDateIsFirstDay = start.isSame(start.startOf('month'), 'day');\n  const endDateIsLastDay = end.isSame(end.endOf('month'), 'day');\n\n  return startDateIsFirstDay && endDateIsLastDay;\n};\n"],"names":["locale","createFormatter","options","timezoneFormatters","timezone","date","opts","timeZone","Intl","DateTimeFormat","format","formatSelectedDate","day","month","year","formatWeekday","weekday","formatSelectedDateTime","hour","minute","formatSelectedDateTimeWithSeconds","second","formatDateHeader","shiftToTimezone","Date","getTime","getTimezoneOffset","shiftFromTimezone","getPredefinedMonthsForDateRangePicker","numberOfMonths","now","dayjs","lastSixMonths","i","Math","abs","subtract","push","startDate","startOf","toDate","endDate","endOf","reverse","nextSixMonths","add","datesAreWithinMaxRange","maxRangeLength","daysDifference","diff","isDateRangeTheWholeMonth","start","utc","end","startDateIsFirstDay","isSame","endDateIsLastDay"],"mappings":";;;AASA,MAAMA,MAAAA,GAAS,OAAA;AAcf,MAAMC,eAAAA,GAAkBA,CAACC,OAAAA,KAAwC;AAC/D,EAAA,MAAMC,qBAAqE,EAAC;AAE5E,EAAA,OAAO,CAACC,UAAoBC,IAAAA,KAAuB;AACjD,IAAA,IAAI,CAACF,kBAAAA,CAAmBC,QAAQ,CAAA,EAAG;AACjC,MAAA,MAAME,IAAAA,GAAOF,aAAa,KAAA,GAAQ;AAAA,QAAE,GAAGF,OAAAA;AAAAA,QAASK,QAAAA,EAAU;AAAA,OAAM,GAAIL,OAAAA;AACpEC,MAAAA,kBAAAA,CAAmBC,QAAQ,CAAA,GAAI,IAAII,IAAAA,CAAKC,cAAAA,CAAeT,QAAQM,IAAI,CAAA;AAAA,IACrE;AACA,IAAA,OAAOH,kBAAAA,CAAmBC,QAAQ,CAAA,CAAEM,MAAAA,CAAOL,IAAI,CAAA;AAAA,EACjD,CAAA;AACF,CAAA;AAEO,MAAMM,qBAAqBV,eAAAA,CAAgB;AAAA,EAChDW,GAAAA,EAAK,SAAA;AAAA,EACLC,KAAAA,EAAO,OAAA;AAAA,EACPC,IAAAA,EAAM;AACR,CAAC;AAEM,MAAMC,gBAAgBd,eAAAA,CAAgB;AAAA,EAAEe,OAAAA,EAAS;AAAQ,CAAC;AAE1D,MAAMC,yBAAyBhB,eAAAA,CAAgB;AAAA,EACpDW,GAAAA,EAAK,SAAA;AAAA,EACLC,KAAAA,EAAO,OAAA;AAAA,EACPK,IAAAA,EAAM,SAAA;AAAA,EACNC,MAAAA,EAAQ;AACV,CAAC;AAEM,MAAMC,oCAAoCnB,eAAAA,CAAgB;AAAA,EAC/DW,GAAAA,EAAK,SAAA;AAAA,EACLC,KAAAA,EAAO,OAAA;AAAA,EACPK,IAAAA,EAAM,SAAA;AAAA,EACNC,MAAAA,EAAQ,SAAA;AAAA,EACRE,MAAAA,EAAQ;AACV,CAAC;AAEM,MAAMC,mBAAmBrB,eAAAA,CAAgB;AAAA,EAC9CY,KAAAA,EAAO,OAAA;AAAA,EACPC,IAAAA,EAAM;AACR,CAAC;AAQM,MAAMS,eAAAA,GAAkBA,CAAClB,IAAAA,EAAYD,QAAAA,KAA6B;AACvE,EAAA,IAAIA,aAAa,KAAA,EAAO;AACtB,IAAA,OAAOC,IAAAA;AAAAA,EACT;AACA,EAAA,OAAO,IAAImB,KAAKnB,IAAAA,CAAKoB,OAAAA,KAAYpB,IAAAA,CAAKqB,iBAAAA,KAAsB,GAAM,CAAA;AACpE;AAEO,MAAMC,iBAAAA,GAAoBA,CAACtB,IAAAA,EAAYD,QAAAA,KAA6B;AACzE,EAAA,IAAIA,aAAa,KAAA,EAAO;AACtB,IAAA,OAAOC,IAAAA;AAAAA,EACT;AACA,EAAA,OAAO,IAAImB,KAAKnB,IAAAA,CAAKoB,OAAAA,KAAYpB,IAAAA,CAAKqB,iBAAAA,KAAsB,GAAM,CAAA;AACpE;AAEO,MAAME,qCAAAA,GAAwCA,CACnDC,cAAAA,KACgB;AAChB,EAAA,MAAMC,MAAMC,KAAAA,EAAM;AAElB,EAAA,IAAIF,iBAAiB,CAAA,EAAG;AACtB,IAAA,MAAMG,gBAA6B,EAAA;AACnC,IAAA,KAAA,IAASC,IAAI,CAAA,EAAGA,CAAAA,GAAIC,KAAKC,GAAAA,CAAIN,cAAc,GAAGI,CAAAA,EAAAA,EAAK;AACjD,MAAA,MAAM5B,IAAAA,GAAOyB,GAAAA,CAAIM,QAAAA,CAASH,CAAAA,EAAG,OAAO,CAAA;AACpC,MAAA,IAAI5B,IAAAA,CAAKA,MAAK,KAAM,CAAA,IAAKA,KAAKQ,KAAAA,EAAM,KAAMiB,GAAAA,CAAIjB,KAAAA,EAAM,EAAG;AACrD,QAAA;AAAA,MACF;AACAmB,MAAAA,aAAAA,CAAcK,IAAAA,CAAK;AAAA,QACjBC,SAAAA,EAAWjC,IAAAA,CAAKkC,OAAAA,CAAQ,OAAO,EAAEC,MAAAA,EAAO;AAAA,QACxCC,OAAAA,EAASR,CAAAA,KAAM,CAAA,GAAIH,GAAAA,CAAIU,MAAAA,KAAWnC,IAAAA,CAAKqC,KAAAA,CAAM,OAAO,CAAA,CAAEF,MAAAA;AAAO,OAC9D,CAAA;AAAA,IACH;AAEA,IAAA,OAAOR,cAAcW,OAAAA,EAAQ;AAAA,EAC/B;AAEA,EAAA,MAAMC,gBAA6B,EAAA;AACnC,EAAA,KAAA,IAASX,CAAAA,GAAI,CAAA,EAAGA,CAAAA,GAAIJ,cAAAA,EAAgBI,CAAAA,EAAAA,EAAK;AACvC,IAAA,MAAM5B,IAAAA,GAAOyB,GAAAA,CAAIe,GAAAA,CAAIZ,CAAAA,EAAG,OAAO,CAAA;AAC/BW,IAAAA,aAAAA,CAAcP,IAAAA,CAAK;AAAA,MACjBC,SAAAA,EAAWjC,IAAAA,CAAKkC,OAAAA,CAAQ,OAAO,EAAEC,MAAAA,EAAO;AAAA,MACxCC,OAAAA,EAASpC,IAAAA,CAAKqC,KAAAA,CAAM,OAAO,EAAEF,MAAAA;AAAO,KACrC,CAAA;AAAA,EACH;AAEA,EAAA,OAAOI,aAAAA;AACT;AAoEO,MAAME,sBAAAA,GAAyBA,CACpCR,SAAAA,EACAG,OAAAA,EACAM,cAAAA,KACY;AACZ,EAAA,MAAMC,cAAAA,GAAiBd,IAAAA,CAAKC,GAAAA,CAAIJ,KAAAA,CAAMO,SAAS,CAAA,CAAEW,IAAAA,CAAKlB,KAAAA,CAAMU,OAAO,CAAA,EAAG,MAAM,CAAC,CAAA;AAE7E,EAAA,OAAOO,cAAAA,IAAkBD,cAAAA;AAC3B;AAEO,MAAMG,2BAA2BA,CACtC;AAAA,EAAEZ,SAAAA;AAAAA,EAAWG;AAAmB,CAAA,EAChCrC,WAAqB,QAAA,KACT;AACZ,EAAA,MAAM+C,KAAAA,GAAQ/C,aAAa,KAAA,GAAQ2B,KAAAA,CAAMqB,IAAId,SAAS,CAAA,GAAIP,MAAMO,SAAS,CAAA;AACzE,EAAA,MAAMe,GAAAA,GAAMjD,aAAa,KAAA,GAAQ2B,KAAAA,CAAMqB,IAAIX,OAAO,CAAA,GAAIV,MAAMU,OAAO,CAAA;AAEnE,EAAA,IAAIU,KAAAA,CAAMtC,KAAAA,EAAM,KAAMwC,GAAAA,CAAIxC,OAAM,EAAG;AACjC,IAAA,OAAO,KAAA;AAAA,EACT;AAEA,EAAA,MAAMyC,sBAAsBH,KAAAA,CAAMI,MAAAA,CAAOJ,MAAMZ,OAAAA,CAAQ,OAAO,GAAG,KAAK,CAAA;AACtE,EAAA,MAAMiB,mBAAmBH,GAAAA,CAAIE,MAAAA,CAAOF,IAAIX,KAAAA,CAAM,OAAO,GAAG,KAAK,CAAA;AAE7D,EAAA,OAAOY,mBAAAA,IAAuBE,gBAAAA;AAChC;;;;"}

package/dist/esm/components/Dialog/index.js

@@ -83,16 +83,24 @@ const TitleArea = styled.div.withConfig({
 }) => $onlyClose ? "flex-end" : "space-between", ({
   theme
 }) => theme.sizes[9]);
-const Title = styled.h2.withConfig({
+const Title = styled(RadixDialog.Title).withConfig({
   componentId: "sc-1wr6otn-4"
 })(["font:", ";padding:0;margin:0;"], ({
   theme
 }) => theme.click.dialog.typography.title.default);
+const Description = styled(RadixDialog.Description).withConfig({
+  componentId: "sc-1wr6otn-5"
+})(["font:", ";color:", ";padding:0;margin:0;"], ({
+  theme
+}) => theme.click.dialog.typography.description.default, ({
+  theme
+}) => theme.click.dialog.color.description.default);
 const CloseButton = ({
   onClose
 }) => /* @__PURE__ */ jsx(RadixDialog.Close, { asChild: true, children: /* @__PURE__ */ jsx(CrossButton, { onClick: onClose, children: /* @__PURE__ */ jsx(SvgImage, { name: "cross", size: "lg" }) }) });
 const DialogContent = ({
   title,
+  description,
   children,
   showClose,
   onClose,
@@ -112,6 +120,7 @@ const DialogContent = ({
         ] }),
         /* @__PURE__ */ jsx(Spacer, { size: "sm" })
       ] }),
+      description ? /* @__PURE__ */ jsx(Description, { children: description }) : /* @__PURE__ */ jsx(RadixDialog.Description, { hidden: true }),
       children
     ] })
   ] });

package/dist/esm/components/Dialog/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n  width: fit-content;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n  if (asChild) {\n    // Pass all props to RadixDialog.Trigger, no styled wrapper\n    return (\n      <RadixDialog.Trigger\n        asChild\n        {...props}\n      >\n        {children}\n      </RadixDialog.Trigger>\n    );\n  }\n  // Use styled Trigger if not asChild\n  return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n  '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n  '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n  background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n  position: fixed;\n  inset: 0;\n  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n  background: ${({ theme }) => theme.click.dialog.color.background.default};\n  border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n  padding-block: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n  padding-inline: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n  box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n  border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n  width: 75%;\n  max-width: 670px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-height: 75%;\n  overflow: auto;\n  transform: translate(-50%, -50%);\n  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    max-height: 100%;\n    border-radius: 0;\n    width: 100%;\n  }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n  display: flex;\n  justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n  align-items: center;\n  min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled.h2`\n  font: ${({ theme }) => theme.click.dialog.typography.title.default};\n  padding: 0;\n  margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  ...props\n}: DialogContentProps) => {\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      {showOverlay && <DialogOverlay />}\n      <ContentArea\n        data-testid=\"click-dialog-contentarea\"\n        $reducePadding={reducePadding}\n        {...props}\n      >\n        {(title || showClose) && (\n          <>\n            <TitleArea $onlyClose={!!showClose && !title}>\n              {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </TitleArea>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n\n        {children}\n      </ContentArea>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","Trigger","styled","RadixDialog","withConfig","componentId","DialogTrigger","asChild","displayName","DialogClose","label","type","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","h2","typography","title","CloseButton","onClose","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as RadixDialog from '@radix-ui/react-dialog';\nimport { keyframes, styled } from 'styled-components';\nimport { Button, ButtonProps } from '@/components/Button';\nimport { Icon } from '@/components/Icon';\nimport { Spacer } from '@/components/Spacer';\nimport { CrossButton } from '@/components/CrossButton';\nimport { DialogContentProps, DialogProps, DialogTriggerProps } from './Dialog.types';\n\nexport const Dialog = ({ children, ...props }: DialogProps) => {\n  return <RadixDialog.Root {...props}>{children}</RadixDialog.Root>;\n};\n\n// Dialog Trigger\nconst Trigger = styled(RadixDialog.Trigger)`\n  width: fit-content;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n`;\n\nconst DialogTrigger = ({ children, asChild, ...props }: DialogTriggerProps) => {\n  if (asChild) {\n    // Pass all props to RadixDialog.Trigger, no styled wrapper\n    return (\n      <RadixDialog.Trigger\n        asChild\n        {...props}\n      >\n        {children}\n      </RadixDialog.Trigger>\n    );\n  }\n  // Use styled Trigger if not asChild\n  return <Trigger {...props}>{children}</Trigger>;\n};\n\nDialogTrigger.displayName = 'DialogTrigger';\nDialog.Trigger = DialogTrigger;\n\nconst DialogClose = ({ label = 'Close', type = 'secondary', ...props }: ButtonProps) => (\n  <RadixDialog.Close asChild>\n    <Button\n      type={type}\n      label={label}\n      {...props}\n    />\n  </RadixDialog.Close>\n);\n\nDialogClose.displayName = 'DialogClose';\nDialog.Close = DialogClose;\n\n// Dialog Content\nconst overlayShow = keyframes({\n  '0%': { opacity: 0 },\n  '100%': { opacity: 1 },\n});\n\nconst contentShow = keyframes({\n  '0%': { opacity: 0, transform: 'translate(-50%, -48%) scale(.96)' },\n  '100%': { opacity: 1, transform: 'translate(-50%, -50%) scale(1)' },\n});\n\nconst DialogOverlay = styled(RadixDialog.Overlay)`\n  background-color: ${({ theme }) => theme.click.dialog.color.opaqueBackground.default};\n  position: fixed;\n  inset: 0;\n  animation: ${overlayShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n`;\n\nconst ContentArea = styled(RadixDialog.Content)<{ $reducePadding?: boolean }>`\n  background: ${({ theme }) => theme.click.dialog.color.background.default};\n  border-radius: ${({ theme }) => theme.click.dialog.radii.all};\n  padding-block: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.y};\n  padding-inline: ${({ theme, $reducePadding = false }) =>\n    $reducePadding ? theme.sizes[4] : theme.click.dialog.space.x};\n  box-shadow: ${({ theme }) => theme.click.dialog.shadow.default};\n  border: 1px solid ${({ theme }) => theme.click.global.color.stroke.default};\n  width: 75%;\n  max-width: 670px;\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  max-height: 75%;\n  overflow: auto;\n  transform: translate(-50%, -50%);\n  animation: ${contentShow} 150ms cubic-bezier(0.16, 1, 0.3, 1);\n  outline: none;\n\n  @media (max-width: ${({ theme }) => theme.breakpoint.sizes.sm}) {\n    max-height: 100%;\n    border-radius: 0;\n    width: 100%;\n  }\n`;\n\nconst TitleArea = styled.div<{ $onlyClose?: boolean }>`\n  display: flex;\n  justify-content: ${({ $onlyClose }) => ($onlyClose ? 'flex-end' : 'space-between')};\n  align-items: center;\n  min-height: ${({ theme }) => theme.sizes[9]}; // 32px\n`;\n\nconst Title = styled(RadixDialog.Title)`\n  font: ${({ theme }) => theme.click.dialog.typography.title.default};\n  padding: 0;\n  margin: 0;\n`;\n\nconst Description = styled(RadixDialog.Description)`\n  font: ${({ theme }) => theme.click.dialog.typography.description.default};\n  color: ${({ theme }) => theme.click.dialog.color.description.default};\n  padding: 0;\n  margin: 0;\n`;\n\nconst CloseButton = ({ onClose }: { onClose?: () => void }) => (\n  <RadixDialog.Close asChild>\n    <CrossButton onClick={onClose}>\n      <Icon\n        name=\"cross\"\n        size=\"lg\"\n      />\n    </CrossButton>\n  </RadixDialog.Close>\n);\n\nconst DialogContent = ({\n  title,\n  description,\n  children,\n  showClose,\n  onClose,\n  forceMount,\n  container,\n  showOverlay = true,\n  reducePadding = false,\n  ...props\n}: DialogContentProps) => {\n  return (\n    <RadixDialog.Portal\n      forceMount={forceMount}\n      container={container}\n    >\n      {showOverlay && <DialogOverlay />}\n      <ContentArea\n        data-testid=\"click-dialog-contentarea\"\n        $reducePadding={reducePadding}\n        {...props}\n      >\n        {(title || showClose) && (\n          <>\n            <TitleArea $onlyClose={!!showClose && !title}>\n              {title && <Title data-testid=\"click-dialog-title\">{title}</Title>}\n              {showClose && (\n                <CloseButton\n                  data-testid=\"click-dialog-close\"\n                  onClose={onClose}\n                />\n              )}\n            </TitleArea>\n            <Spacer size=\"sm\" />\n          </>\n        )}\n        {description ? (\n          <Description>{description}</Description>\n        ) : (\n          <RadixDialog.Description hidden />\n        )}\n        {children}\n      </ContentArea>\n    </RadixDialog.Portal>\n  );\n};\n\nDialogContent.displayName = 'DialogContent';\nDialog.Content = DialogContent;\n"],"names":["Dialog","children","props","Trigger","styled","RadixDialog","withConfig","componentId","DialogTrigger","asChild","displayName","DialogClose","label","type","Close","overlayShow","keyframes","opacity","contentShow","transform","DialogOverlay","Overlay","theme","click","dialog","color","opaqueBackground","default","ContentArea","Content","background","radii","all","$reducePadding","sizes","space","y","x","shadow","global","stroke","breakpoint","sm","TitleArea","div","$onlyClose","Title","typography","title","Description","description","CloseButton","onClose","Icon","DialogContent","showClose","forceMount","container","showOverlay","reducePadding"],"mappings":"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"}

package/dist/esm/components/GenericMenu/index.js

@@ -75,7 +75,7 @@ const GenericMenuItem = styled.div.withConfig({
       cursor: pointer;
     }
     [data-input-modality="keyboard"] &[data-highlighted] {
-      outline: 2px solid ${theme.click.genericMenu.item.color[colorKey].stroke.focus};
+      outline: 2px solid ${theme.click.global.color.accent.default};
       outline-offset: -2px;
     }
     &[data-state="open"] {

package/dist/esm/components/GenericMenu/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n  $type: 'popover' | 'dropdown-menu' | 'context-menu';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  align-items: flex-start;\n  pointer-events: auto;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `};\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: 1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n      }\n  `\n      : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n  $type: 'popover' | 'hover-card';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n    background: ${theme.click.popover.color.panel.background.default};\n    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n    border-radius: ${theme.click.popover.radii.all};\n    box-shadow: ${theme.click.popover.shadow.default};\n  `}\n  ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n  ${({ theme }) => `\n    fill: ${theme.click.genericMenu.panel.color.background.default};\n    stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n  `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n  display: flex;\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ theme, $type = 'default' }) => {\n    const colorKey = $type === 'danger' ? 'danger' : 'default';\n    return `\n    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n    gap: ${theme.click.genericMenu.item.space.gap};\n    font: ${theme.click.genericMenu.item.typography.label.default};\n    background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n    color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n    &[data-highlighted] {\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      cursor: pointer;\n    }\n    [data-input-modality=\"keyboard\"] &[data-highlighted] {\n      outline: 2px solid ${theme.click.genericMenu.item.color[colorKey].stroke.focus};\n      outline-offset: -2px;\n    }\n    &[data-state=\"open\"] {\n      background:${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      cursor: pointer;\n    }\n    &[data-state=\"checked\"], &[data-selected=\"true\"]  {\n      background:${theme.click.genericMenu.item.color[colorKey].background.active};\n      color:${theme.click.genericMenu.item.color[colorKey].text.active};\n      font: ${theme.click.genericMenu.item.typography.label.active};\n    }\n    &[data-disabled] {\n      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};\n      font: ${theme.click.genericMenu.item.typography.label.disabled};\n      pointer-events: none;\n    }\n    &:visited {\n      color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      a {\n        color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      }\n    }\n  `;\n  }};\n  position: relative;\n  &:hover .dropdown-arrow,\n  &[data-state='open'] .dropdown-arrow {\n    left: 0.5rem;\n  }\n  &[hidden] {\n    display: none;\n  }\n`;\n"],"names":["GenericMenuPanel","styled","div","withConfig","componentId","$type","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","$showArrow","GenericPopoverMenuPanel","popover","space","y","x","Arrow","svg","GenericMenuItem","colorKey","item","gap","typography","label","text","hover","focus","active","disabled"],"mappings":";;AAEO,MAAMA,gBAAAA,GAAmBC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,mDAAA,EAAA,uGAAA,GAAA,EAAA,GAAA,GAKf,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,OACd,CAAC;AAAA,EAAEA;AAAM,CAAA,KAAMA,OAMvC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,sBAAA,EACKA,MAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA,gBAAA,EACxDN,MAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMC,KAAAA,CAAMG,WAAWD,OAAO,CAAA;AAAA,gBAAA,EACtDN,KAAAA,CAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMK,OAAOF,OAAO,CAAA;AAAA,mBAAA,EACzCN,KAAAA,CAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMM,MAAMC,GAAG,CAAA;AAAA,EAAA,CAAA,EAExD,CAAC;AAAA,EAAEC;AAAW,CAAA,KACdA,UAAAA,GACI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA,GAeA,EAAE;AAGH,MAAMC,uBAAAA,GAA0BjB,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,qCAAA,EAAA,mDAAA,EAAA,mHAAA,GAAA,EAAA,GAAA,GAKtB,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,OACd,CAAC;AAAA,EAAEA;AAAM,CAAA,KAAMA,OAOvC,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAM;AAAA,sBAAA,EACKA,MAAMC,KAAAA,CAAMY,OAAAA,CAAQT,KAAAA,CAAMD,KAAAA,CAAME,OAAOC,OAAO,CAAA;AAAA,gBAAA,EACpDN,MAAMC,KAAAA,CAAMY,OAAAA,CAAQT,KAAAA,CAAMD,KAAAA,CAAMI,WAAWD,OAAO,CAAA;AAAA,aAAA,EACrDN,KAAAA,CAAMC,KAAAA,CAAMY,OAAAA,CAAQC,KAAAA,CAAMC,CAAC,IAAIf,KAAAA,CAAMC,KAAAA,CAAMY,OAAAA,CAAQC,KAAAA,CAAME,CAAC,CAAA;AAAA,mBAAA,EACpDhB,KAAAA,CAAMC,KAAAA,CAAMY,OAAAA,CAAQJ,KAAAA,CAAMC,GAAG,CAAA;AAAA,gBAAA,EAChCV,KAAAA,CAAMC,KAAAA,CAAMY,OAAAA,CAAQL,MAAAA,CAAOF,OAAO,CAAA;AAAA,EAAA,CAAA,EAEhD,CAAC;AAAA,EAAEK;AAAW,CAAA,KAAOA,UAAAA,GAAa,oBAAoB,EAAG;AAGtD,MAAMM,KAAAA,GAAQtB,MAAAA,CAAOuB,GAAAA,CAAGrB,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,kDAAA,EAAA,GAAA,GAE3B,CAAC;AAAA,EAAEE;AAAM,CAAA,KAAM;AAAA,UAAA,EACPA,MAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMC,KAAAA,CAAMG,WAAWD,OAAO,CAAA;AAAA,YAAA,EACpDN,MAAMC,KAAAA,CAAMC,WAAAA,CAAYC,KAAAA,CAAMC,KAAAA,CAAMC,OAAOC,OAAO,CAAA;AAAA,EAAA,CAC7D;AAGI,MAAMa,eAAAA,GAAkBxB,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,4PAAA,EAAA,uHAAA,GAiBrC,CAAC;AAAA,EAAEE,KAAAA;AAAAA,EAAOD,KAAAA,GAAQ;AAAU,CAAA,KAAM;AAClC,EAAA,MAAMqB,QAAAA,GAAWrB,KAAAA,KAAU,QAAA,GAAW,QAAA,GAAW,SAAA;AACjD,EAAA,OAAO;AAAA,aAAA,EACIC,KAAAA,CAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKP,KAAAA,CAAMC,CAAC,CAAA,CAAA,EAAIf,KAAAA,CAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKP,KAAAA,CAAME,CAAC,CAAA;AAAA,SAAA,EAChFhB,KAAAA,CAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKP,MAAMQ,GAAG,CAAA;AAAA,UAAA,EACrCtB,MAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKE,UAAAA,CAAWC,MAAMlB,OAAO,CAAA;AAAA,gBAAA,EAC/CN,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEb,WAAWD,OAAO,CAAA;AAAA,WAAA,EACpEN,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKnB,OAAO,CAAA;AAAA;AAAA,YAAA,EAExDN,MAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKE,UAAAA,CAAWC,MAAME,KAAK,CAAA;AAAA,kBAAA,EAC7C1B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEb,WAAWmB,KAAK,CAAA;AAAA,YAAA,EACnE1B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKC,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,yBAAA,EAI1C1B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEf,OAAOsB,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAIjE3B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEb,WAAWmB,KAAK,CAAA;AAAA,YAAA,EAClE1B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKC,KAAK,CAAA;AAAA,YAAA,EACvD1B,MAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKE,UAAAA,CAAWC,MAAME,KAAK,CAAA;AAAA;AAAA;AAAA;AAAA,iBAAA,EAI9C1B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEb,WAAWqB,MAAM,CAAA;AAAA,YAAA,EACnE5B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKG,MAAM,CAAA;AAAA,YAAA,EACxD5B,MAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKE,UAAAA,CAAWC,MAAMI,MAAM,CAAA;AAAA;AAAA;AAAA,YAAA,EAGpD5B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKI,QAAQ,CAAA;AAAA,YAAA,EAC1D7B,MAAMC,KAAAA,CAAMC,WAAAA,CAAYmB,IAAAA,CAAKE,UAAAA,CAAWC,MAAMK,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA,aAAA,EAIrD7B,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKnB,OAAO,CAAA;AAAA;AAAA,eAAA,EAEvDN,KAAAA,CAAMC,MAAMC,WAAAA,CAAYmB,IAAAA,CAAKjB,MAAMgB,QAAQ,CAAA,CAAEK,KAAKnB,OAAO,CAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAIxE,CAAC;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/GenericMenu/GenericMenu.tsx"],"sourcesContent":["import { styled } from 'styled-components';\n\nexport const GenericMenuPanel = styled.div<{\n  $type: 'popover' | 'dropdown-menu' | 'context-menu';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  align-items: flex-start;\n  pointer-events: auto;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.genericMenu.panel.color.stroke.default};\n    background: ${theme.click.genericMenu.panel.color.background.default};\n    box-shadow: ${theme.click.genericMenu.panel.shadow.default};\n    border-radius: ${theme.click.genericMenu.panel.radii.all};\n  `};\n  ${({ $showArrow }) =>\n    $showArrow\n      ? `\n      &[data-side=\"bottom\"] {\n        margin-top: -1px;\n      }\n      &[data-side=\"top\"] {\n        margin-bottom: 1px;\n      }\n      &[data-side=\"left\"] {\n        margin-right: -1px;\n      }\n      }\n      &[data-side=\"right\"] {\n        margin-left: -1px;\n      }\n  `\n      : ''};\n`;\n\nexport const GenericPopoverMenuPanel = styled.div<{\n  $type: 'popover' | 'hover-card';\n  $showArrow?: boolean;\n}>`\n  outline: none;\n  max-width: var(--radix-${({ $type }) => $type}-content-available-width);\n  max-height: var(--radix-${({ $type }) => $type}-content-available-height);\n  overflow: hidden;\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  z-index: 1;\n\n  ${({ theme }) => `\n    border: 1px solid ${theme.click.popover.color.panel.stroke.default};\n    background: ${theme.click.popover.color.panel.background.default};\n    padding: ${theme.click.popover.space.y} ${theme.click.popover.space.x};\n    border-radius: ${theme.click.popover.radii.all};\n    box-shadow: ${theme.click.popover.shadow.default};\n  `}\n  ${({ $showArrow }) => ($showArrow ? 'margin: -1px 0;' : '')};\n`;\n\nexport const Arrow = styled.svg`\n  filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 4px 6px);\n  ${({ theme }) => `\n    fill: ${theme.click.genericMenu.panel.color.background.default};\n    stroke: ${theme.click.genericMenu.panel.color.stroke.default};\n  `};\n`;\n\nexport const GenericMenuItem = styled.div<{ $type?: 'default' | 'danger' }>`\n  display: flex;\n  width: 100%;\n  width: -moz-available;\n  width: -webkit-fill-available;\n  width: fill-available;\n  width: stretch;\n  align-items: center;\n  justify-content: flex-start;\n  cursor: default;\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  &:focus {\n    outline: none;\n  }\n\n  ${({ theme, $type = 'default' }) => {\n    const colorKey = $type === 'danger' ? 'danger' : 'default';\n    return `\n    padding: ${theme.click.genericMenu.item.space.y} ${theme.click.genericMenu.item.space.x};\n    gap: ${theme.click.genericMenu.item.space.gap};\n    font: ${theme.click.genericMenu.item.typography.label.default};\n    background: ${theme.click.genericMenu.item.color[colorKey].background.default};\n    color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n    &[data-highlighted] {\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      background: ${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      cursor: pointer;\n    }\n    [data-input-modality=\"keyboard\"] &[data-highlighted] {\n      outline: 2px solid ${theme.click.global.color.accent.default};\n      outline-offset: -2px;\n    }\n    &[data-state=\"open\"] {\n      background:${theme.click.genericMenu.item.color[colorKey].background.hover};\n      color:${theme.click.genericMenu.item.color[colorKey].text.hover};\n      font: ${theme.click.genericMenu.item.typography.label.hover};\n      cursor: pointer;\n    }\n    &[data-state=\"checked\"], &[data-selected=\"true\"]  {\n      background:${theme.click.genericMenu.item.color[colorKey].background.active};\n      color:${theme.click.genericMenu.item.color[colorKey].text.active};\n      font: ${theme.click.genericMenu.item.typography.label.active};\n    }\n    &[data-disabled] {\n      color:${theme.click.genericMenu.item.color[colorKey].text.disabled};\n      font: ${theme.click.genericMenu.item.typography.label.disabled};\n      pointer-events: none;\n    }\n    &:visited {\n      color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      a {\n        color: ${theme.click.genericMenu.item.color[colorKey].text.default};\n      }\n    }\n  `;\n  }};\n  position: relative;\n  &:hover .dropdown-arrow,\n  &[data-state='open'] .dropdown-arrow {\n    left: 0.5rem;\n  }\n  &[hidden] {\n    display: none;\n  }\n`;\n"],"names":["GenericMenuPanel","styled","div","withConfig","componentId","$type","theme","click","genericMenu","panel","color","stroke","default","background","shadow","radii","all","$showArrow","GenericPopoverMenuPanel","popover","space","y","x","Arrow","svg","GenericMenuItem","colorKey","item","gap","typography","label","text","hover","global","accent","active","disabled"],"mappings":"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"}

package/dist/esm/components/InputWrapper/index.js

@@ -200,7 +200,7 @@ const InputStartContent = styled.div.withConfig({
   `);
 const InputEndContent = styled.div.withConfig({
   componentId: "sc-1aco97m-8"
-})(["", ""], ({
+})(["white-space:nowrap;flex-shrink:0;", ""], ({
   theme
 }) => `
     padding-right: ${theme.click.field.space.x};

package/dist/esm/components/InputWrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\n\nconst Wrapper = styled.div<{\n  $error: boolean;\n  $resize: 'none' | 'vertical' | 'horizontal' | 'both';\n}>`\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  align-items: center;\n\n  span:first-of-type {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  ${({ theme, $error, $resize }) => `\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.click.field.typography.fieldText.default};\n    color: ${theme.click.field.color.text.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    background: ${theme.click.field.color.background.default};\n\n    *:autofill,\n    *:-webkit-autofill  {\n      -webkit-box-shadow: 0 0 0px 50vh ${\n        theme.click.field.color.background.default\n      } inset;\n      -webkit-text-fill-color: ${theme.click.field.color.text.default};\n      caret-color: ${theme.click.field.color.text.default};\n    }\n\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${theme.click.field.color.background.hover};\n      color: ${theme.click.field.color.text.hover};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.hover\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.hover};\n        caret-color: ${theme.click.field.color.text.hover};\n      }\n    }\n    ${\n      $resize === 'none'\n        ? ''\n        : `\n      resize: ${$resize};\n      overflow: auto;\n    `\n    }\n    ${\n      $error\n        ? `\n      font: ${theme.click.field.typography.fieldText.error};\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.error};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.error};\n        caret-color: ${theme.click.field.color.text.error};\n      }\n\n      &:hover {\n        border: 1px solid ${theme.click.field.color.stroke.error};\n        color: ${theme.click.field.color.text.error};\n        *:autofill,\n        *:-webkit-autofill {\n          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n          -webkit-text-fill-color: ${theme.click.field.color.text.error};\n          caret-color: ${theme.click.field.color.text.error};\n        }\n      }\n    `\n        : `\n    &:focus-within,\n    &[data-state=\"open\"] {\n      font: ${theme.click.field.typography.fieldText.active};\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.active};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.active};\n        caret-color: ${theme.click.field.color.text.active};\n      }\n    }\n    `\n    };\n    &:disabled, &.disabled {\n      font: ${theme.click.field.typography.fieldText.disabled};\n      border: 1px solid ${theme.click.field.color.stroke.disabled};\n      background: ${theme.click.field.color.background.disabled};\n      color: ${theme.click.field.color.text.disabled};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.disabled\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};\n        caret-color: ${theme.click.field.color.text.disabled};\n      }\n    }\n  `}\n`;\n\nconst StyledLabel = styled(Label)<{ $labelColor?: string }>`\n  ${({ $labelColor }) => `\n    ${$labelColor ? `color: ${$labelColor};` : ''}\n  `}\n`;\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <Wrapper\n          $error={!!error}\n          $resize={resize}\n          data-resize={resize}\n          className={disabled ? `disabled ${className}` : className}\n        >\n          {children}\n        </Wrapper>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <StyledLabel\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          $labelColor={labelColor}\n        >\n          {label}\n        </StyledLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nexport const InputElement = styled.input<{\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n}>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  ${({ theme, $hasStartContent, $hasEndContent }) => `\n    padding: ${theme.click.field.space.y} 0;\n    padding-left: ${$hasStartContent ? '0' : theme.click.field.space.x};\n    padding-right: ${$hasEndContent ? '0' : theme.click.field.space.x};\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n\n    &:disabled, &.disabled {\n      &::placeholder {\n      color: ${theme.click.field.color.placeholder.disabled};\n    }\n  `}\n`;\n\nexport const NumberInputElement = styled(InputElement)<{ $hideControls?: boolean }>`\n  ${({ $hideControls }) => `\n    ${\n      $hideControls\n        ? `\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    -moz-appearance: textfield;\n    `\n        : ''\n    }\n  `}\n`;\n\nexport const TextAreaElement = styled.textarea`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  resize: none;\n  ${({ theme }) => `\n    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};\n    align-self: stretch;\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n  `}\n`;\n\nexport const IconButton = styled.button`\n  background: transparent;\n  color: inherit;\n  border: none;\n  padding: 0;\n  outline: none;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  ${({ theme }) => `\n      padding: ${theme.click.field.space.y} 0;\n  `}\n`;\n\nexport const IconWrapper = styled.svg`\n  ${({ theme }) => `\n    &:first-of-type {\n      padding-left: ${theme.click.field.space.gap};\n    }\n    &:last-of-type {\n      padding-right: ${theme.click.field.space.x};\n    }\n  `}\n`;\n\nexport const InputStartContent = styled.div`\n  ${({ theme }) => `\n    padding-left: ${theme.click.field.space.x};\n    cursor: text;\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n\nexport const InputEndContent = styled.div`\n  ${({ theme }) => `\n    padding-right: ${theme.click.field.space.x};\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","$error","$resize","click","field","space","gap","radii","all","typography","fieldText","default","color","text","stroke","background","hover","error","active","disabled","StyledLabel","Label","$labelColor","InputWrapper","className","id","label","labelColor","children","orientation","dir","resize","InputElement","input","$hasStartContent","$hasEndContent","y","x","placeholder","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","button","svg","InputStartContent","InputEndContent"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/InputWrapper/InputWrapper.tsx"],"sourcesContent":["import { Error, FormElementContainer, FormRoot } from '@/components/FormContainer';\nimport { Label } from '@/components/Label';\nimport { styled } from 'styled-components';\nimport { ReactNode } from 'react';\n\nconst Wrapper = styled.div<{\n  $error: boolean;\n  $resize: 'none' | 'vertical' | 'horizontal' | 'both';\n}>`\n  width: inherit;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  align-items: center;\n\n  span:first-of-type {\n    max-width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  ${({ theme, $error, $resize }) => `\n    gap: ${theme.click.field.space.gap};\n    border-radius: ${theme.click.field.radii.all};\n    font: ${theme.click.field.typography.fieldText.default};\n    color: ${theme.click.field.color.text.default};\n    border: 1px solid ${theme.click.field.color.stroke.default};\n    background: ${theme.click.field.color.background.default};\n\n    *:autofill,\n    *:-webkit-autofill  {\n      -webkit-box-shadow: 0 0 0px 50vh ${\n        theme.click.field.color.background.default\n      } inset;\n      -webkit-text-fill-color: ${theme.click.field.color.text.default};\n      caret-color: ${theme.click.field.color.text.default};\n    }\n\n    &:hover {\n      border: 1px solid ${theme.click.field.color.stroke.hover};\n      background: ${theme.click.field.color.background.hover};\n      color: ${theme.click.field.color.text.hover};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.hover\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.hover};\n        caret-color: ${theme.click.field.color.text.hover};\n      }\n    }\n    ${\n      $resize === 'none'\n        ? ''\n        : `\n      resize: ${$resize};\n      overflow: auto;\n    `\n    }\n    ${\n      $error\n        ? `\n      font: ${theme.click.field.typography.fieldText.error};\n      border: 1px solid ${theme.click.field.color.stroke.error};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.error};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.error};\n        caret-color: ${theme.click.field.color.text.error};\n      }\n\n      &:hover {\n        border: 1px solid ${theme.click.field.color.stroke.error};\n        color: ${theme.click.field.color.text.error};\n        *:autofill,\n        *:-webkit-autofill {\n          -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.error} inset;\n          -webkit-text-fill-color: ${theme.click.field.color.text.error};\n          caret-color: ${theme.click.field.color.text.error};\n        }\n      }\n    `\n        : `\n    &:focus-within,\n    &[data-state=\"open\"] {\n      font: ${theme.click.field.typography.fieldText.active};\n      border: 1px solid ${theme.click.field.color.stroke.active};\n      background: ${theme.click.field.color.background.active};\n      color: ${theme.click.field.color.text.active};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${theme.click.field.color.background.active} inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.active};\n        caret-color: ${theme.click.field.color.text.active};\n      }\n    }\n    `\n    };\n    &:disabled, &.disabled {\n      font: ${theme.click.field.typography.fieldText.disabled};\n      border: 1px solid ${theme.click.field.color.stroke.disabled};\n      background: ${theme.click.field.color.background.disabled};\n      color: ${theme.click.field.color.text.disabled};\n\n      *:autofill,\n      *:-webkit-autofill {\n        -webkit-box-shadow: 0 0 0px 50vh ${\n          theme.click.field.color.background.disabled\n        } inset;\n        -webkit-text-fill-color: ${theme.click.field.color.text.disabled};\n        caret-color: ${theme.click.field.color.text.disabled};\n      }\n    }\n  `}\n`;\n\nconst StyledLabel = styled(Label)<{ $labelColor?: string }>`\n  ${({ $labelColor }) => `\n    ${$labelColor ? `color: ${$labelColor};` : ''}\n  `}\n`;\n\nexport interface WrapperProps {\n  className?: string;\n  id: string;\n  label?: ReactNode;\n  labelColor?: string;\n  error?: ReactNode;\n  disabled?: boolean;\n  children: ReactNode;\n  orientation?: 'vertical' | 'horizontal';\n  dir?: 'start' | 'end';\n  resize?: 'none' | 'vertical' | 'horizontal' | 'both';\n}\n\nexport const InputWrapper = ({\n  className,\n  id,\n  label = '',\n  labelColor,\n  error,\n  disabled,\n  children,\n  orientation,\n  dir,\n  resize = 'none',\n}: WrapperProps) => {\n  return (\n    <FormRoot\n      $orientation={orientation}\n      $dir={dir}\n      $addLabelPadding\n    >\n      <FormElementContainer>\n        <Wrapper\n          $error={!!error}\n          $resize={resize}\n          data-resize={resize}\n          className={disabled ? `disabled ${className}` : className}\n        >\n          {children}\n        </Wrapper>\n        {!!error && error !== true && <Error>{error}</Error>}\n      </FormElementContainer>\n      {label && (\n        <StyledLabel\n          htmlFor={id}\n          disabled={disabled}\n          error={!!error}\n          $labelColor={labelColor}\n        >\n          {label}\n        </StyledLabel>\n      )}\n    </FormRoot>\n  );\n};\n\nexport const InputElement = styled.input<{\n  $hasStartContent?: boolean;\n  $hasEndContent?: boolean;\n}>`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  ${({ theme, $hasStartContent, $hasEndContent }) => `\n    padding: ${theme.click.field.space.y} 0;\n    padding-left: ${$hasStartContent ? '0' : theme.click.field.space.x};\n    padding-right: ${$hasEndContent ? '0' : theme.click.field.space.x};\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n\n    &:disabled, &.disabled {\n      &::placeholder {\n      color: ${theme.click.field.color.placeholder.disabled};\n    }\n  `}\n`;\n\nexport const NumberInputElement = styled(InputElement)<{ $hideControls?: boolean }>`\n  ${({ $hideControls }) => `\n    ${\n      $hideControls\n        ? `\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    -moz-appearance: textfield;\n    `\n        : ''\n    }\n  `}\n`;\n\nexport const TextAreaElement = styled.textarea`\n  background: transparent;\n  border: none;\n  outline: none;\n  width: 100%;\n  color: inherit;\n  font: inherit;\n  resize: none;\n  ${({ theme }) => `\n    padding: ${theme.click.field.space.y} ${theme.click.field.space.x};\n    align-self: stretch;\n    &::placeholder {\n      color: ${theme.click.field.color.placeholder.default};\n    }\n  `}\n`;\n\nexport const IconButton = styled.button`\n  background: transparent;\n  color: inherit;\n  border: none;\n  padding: 0;\n  outline: none;\n  &:not(:disabled) {\n    cursor: pointer;\n  }\n  ${({ theme }) => `\n      padding: ${theme.click.field.space.y} 0;\n  `}\n`;\n\nexport const IconWrapper = styled.svg`\n  ${({ theme }) => `\n    &:first-of-type {\n      padding-left: ${theme.click.field.space.gap};\n    }\n    &:last-of-type {\n      padding-right: ${theme.click.field.space.x};\n    }\n  `}\n`;\n\nexport const InputStartContent = styled.div`\n  ${({ theme }) => `\n    padding-left: ${theme.click.field.space.x};\n    cursor: text;\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n\nexport const InputEndContent = styled.div`\n  white-space: nowrap;\n  flex-shrink: 0;\n  ${({ theme }) => `\n    padding-right: ${theme.click.field.space.x};\n    gap: ${theme.click.field.space.gap};\n    display: flex;\n    align-self: stretch;\n    align-items: center;\n  `}\n`;\n"],"names":["Wrapper","styled","div","withConfig","componentId","theme","$error","$resize","click","field","space","gap","radii","all","typography","fieldText","default","color","text","stroke","background","hover","error","active","disabled","StyledLabel","Label","$labelColor","InputWrapper","className","id","label","labelColor","children","orientation","dir","resize","InputElement","input","$hasStartContent","$hasEndContent","y","x","placeholder","NumberInputElement","$hideControls","TextAreaElement","textarea","IconButton","button","svg","InputStartContent","InputEndContent"],"mappings":"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"}