@raystack/apsara 0.53.2 → 0.53.4

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

@@ -113,7 +113,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
             setError('Invalid date');
         }
     }
-    const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, defaultValue: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
+    const defaultTrigger = (jsxRuntime.jsx(inputField.InputField, { size: 'small', placeholder: 'Select date', error: error, className: calendar_module.default.datePickerInput, trailingIcon: showCalendarIcon ? jsxRuntime.jsx(reactIcons_esm.CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsxRuntime.jsx("div", { children: children })) : (jsxRuntime.jsx("div", { children: defaultTrigger }));
     return (jsxRuntime.jsxs(popover.Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsxRuntime.jsx(popover.Popover.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(popover.Popover.Content, { ref: contentRef, ...popoverProps, className: index.cx(calendar_module.default.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsxRuntime.jsx(calendar.Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\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  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\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  const isElementOutside = useCallback((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(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\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      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      defaultValue={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\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"],"mappings":";;;;;;;;;;;;;;AAeAA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
+{"version":3,"file":"date-picker.cjs","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\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  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\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  const isElementOutside = useCallback((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(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\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      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\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"],"mappings":";;;;;;;;;;;;;;AAeAA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}

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

@@ -111,7 +111,7 @@ function DatePicker({ dateFormat = 'DD/MM/YYYY', inputFieldProps, calendarProps,
             setError('Invalid date');
         }
     }
-    const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, defaultValue: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
+    const defaultTrigger = (jsx(InputField, { size: 'small', placeholder: 'Select date', error: error, className: styles.datePickerInput, trailingIcon: showCalendarIcon ? jsx(CalendarIcon, {}) : undefined, ...inputFieldProps, ref: inputFieldRef, value: formattedDate, onChange: handleInputChange, onFocus: handleInputFocus, onBlur: handleInputBlur, onKeyUp: handleKeyUp }));
     const trigger = typeof children === 'function' ? (children({ selectedDate: formattedDate })) : children ? (jsx("div", { children: children })) : (jsx("div", { children: defaultTrigger }));
     return (jsxs(Popover, { open: showCalendar, onOpenChange: onOpenChange, children: [jsx(Popover.Trigger, { asChild: true, children: trigger }), jsx(Popover.Content, { ref: contentRef, ...popoverProps, className: cx(styles.calendarPopover, popoverProps?.className), side: popoverProps?.side ?? 'top', children: jsx(Calendar, { required: true, ...calendarProps, timeZone: timeZone, onDropdownOpen: onDropdownOpen, mode: 'single', selected: selectedDate, month: selectedDate, onSelect: handleSelect, onMonthChange: setSelectedDate }) })] }));
 }

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

@@ -1 +1 @@
-{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\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  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\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  const isElementOutside = useCallback((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(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\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      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      defaultValue={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\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":[],"mappings":";;;;;;;;;;;;AAeA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}
+{"version":3,"file":"date-picker.js","sources":["../../../components/calendar/date-picker.tsx"],"sourcesContent":["'use client';\n\nimport { CalendarIcon } from '@radix-ui/react-icons';\nimport { cx } from 'class-variance-authority';\nimport dayjs from 'dayjs';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { useCallback, useEffect, useRef, useState } from 'react';\nimport { PropsBase, PropsSingleRequired } from 'react-day-picker';\nimport { InputField } from '../input-field';\nimport { InputFieldProps } from '../input-field/input-field';\nimport { Popover } from '../popover';\nimport { PopoverContentProps } from '../popover/popover';\nimport { Calendar } from './calendar';\nimport styles from './calendar.module.css';\n\ndayjs.extend(customParseFormat);\n\ninterface DatePickerProps {\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  popoverProps?: PopoverContentProps;\n}\n\nexport function DatePicker({\n  dateFormat = 'DD/MM/YYYY',\n  inputFieldProps,\n  calendarProps,\n  value = new Date(),\n  onSelect = () => {},\n  children,\n  showCalendarIcon = true,\n  timeZone,\n  popoverProps\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  const isElementOutside = useCallback((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(\n    (event: MouseEvent) => {\n      const el = event.target as HTMLElement | null;\n      if (el && isElementOutside(el)) removeEventListeners();\n    },\n    [isElementOutside]\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      size='small'\n      placeholder='Select date'\n      error={error}\n      className={styles.datePickerInput}\n      trailingIcon={showCalendarIcon ? <CalendarIcon /> : undefined}\n      {...inputFieldProps}\n      ref={inputFieldRef}\n      value={formattedDate}\n      onChange={handleInputChange}\n      onFocus={handleInputFocus}\n      onBlur={handleInputBlur}\n      onKeyUp={handleKeyUp}\n    />\n  );\n\n  const trigger =\n    typeof children === 'function' ? (\n      children({ selectedDate: formattedDate })\n    ) : children ? (\n      <div>{children}</div>\n    ) : (\n      <div>{defaultTrigger}</div>\n    );\n\n  return (\n    <Popover open={showCalendar} onOpenChange={onOpenChange}>\n      <Popover.Trigger asChild>{trigger}</Popover.Trigger>\n      <Popover.Content\n        ref={contentRef}\n        {...popoverProps}\n        className={cx(styles.calendarPopover, popoverProps?.className)}\n        side={popoverProps?.side ?? 'top'}\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":[],"mappings":";;;;;;;;;;;;AAeA;AAgBgB;;;;;AAiBd;AACA;AACA;AACA;AACA;;AAGE;AACF;AAEA;AACE;;;;AAOF;AAEI;AACA;AAAgC;AAClC;AAIF;AACE;AACA;;AAGF;AACE;;AAGA;;AAE2B;AAC3B;;AAEA;;AAGF;;;;;AAKA;AAEA;AACE;;;;;AAQE;;AAGF;;AAGF;;;AAEE;;;;AAIA;AACE;AACA;AAAgC;;;AAEhC;;;;;;AAOA;AACA;;;;AAKF;AAEA;AACE;AACA;AACE;;;AAIJ;AAEA;;;AAIA;;;AAKA;;AAIE;;;;;;;AAOJ;AAiBA;;AAgCF;;"}

package/dist/components/data-table/components/filters.cjs

@@ -2,6 +2,7 @@
 'use strict';
 
 var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var filter = require('../../../icons/assets/filter.svg.cjs');
 var filters = require('../../../types/filters.cjs');
 var button = require('../../button/button.cjs');
@@ -12,15 +13,25 @@ var iconButton = require('../../icon-button/icon-button.cjs');
 var useDataTable = require('../hooks/useDataTable.cjs');
 var useFilters = require('../hooks/useFilters.cjs');
 
-function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter }) {
+function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, children }) {
     const availableFilters = columnList?.filter(col => !appliedFiltersSet.has(col.id));
-    return availableFilters.length > 0 ? (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsxRuntime.jsx(iconButton.IconButton, { size: 4, children: jsxRuntime.jsx(filter.ReactComponent, {}) })) : (jsxRuntime.jsx(button.Button, { variant: 'text', size: 'small', leadingIcon: jsxRuntime.jsx(filter.ReactComponent, {}), color: 'neutral', children: "Filter" })) }), jsxRuntime.jsx(dropdownMenu.DropdownMenu.Content, { children: availableFilters?.map(column => {
+    const trigger = React.useMemo(() => {
+        if (typeof children === 'function')
+            return children({ availableFilters, appliedFilters: appliedFiltersSet });
+        else if (children)
+            return children;
+        else if (appliedFiltersSet.size > 0)
+            return (jsxRuntime.jsx(iconButton.IconButton, { size: 4, children: jsxRuntime.jsx(filter.ReactComponent, {}) }));
+        else
+            return (jsxRuntime.jsx(button.Button, { variant: 'text', size: 'small', leadingIcon: jsxRuntime.jsx(filter.ReactComponent, {}), color: 'neutral', children: "Filter" }));
+    }, [children, appliedFiltersSet, availableFilters]);
+    return availableFilters.length > 0 ? (jsxRuntime.jsxs(dropdownMenu.DropdownMenu, { children: [jsxRuntime.jsx(dropdownMenu.DropdownMenu.Trigger, { asChild: true, children: trigger }), jsxRuntime.jsx(dropdownMenu.DropdownMenu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
                     return (jsxRuntime.jsx(dropdownMenu.DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
-function Filters() {
+function Filters({ classNames, className, trigger }) {
     const { table, tableQuery } = useDataTable.useDataTable();
     const columns = table?.getAllColumns();
     const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange } = useFilters.useFilters();
@@ -39,7 +50,7 @@ function Filters() {
             ...filter
         };
     }) || [];
-    return (jsxRuntime.jsxs(flex.Flex, { gap: 3, children: [jsxRuntime.jsx(flex.Flex, { gap: 3, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
+    return (jsxRuntime.jsxs(flex.Flex, { gap: 3, className: className, children: [jsxRuntime.jsx(flex.Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsxRuntime.jsx(filterChip.FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) }), jsxRuntime.jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
 
 exports.Filters = Filters;

package/dist/components/data-table/components/filters.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3}>\n      <Flex gap={3}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAmBA;;AASE;AAoBQ;;;;AAWV;;;AAIE;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;;AAgCR;;"}
+{"version":3,"file":"filters.cjs","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      <Flex gap={3} className={classNames?.container}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n            className={classNames?.filterChips}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AA+BF;;"}

package/dist/components/data-table/components/filters.d.ts

@@ -1,2 +1,17 @@
-export declare function Filters<TData, TValue>(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from 'react';
+import { DataTableColumn } from '../data-table.types';
+type Trigger<TData, TValue> = ReactNode | (({ availableFilters, appliedFilters }: {
+    availableFilters: DataTableColumn<TData, TValue>[];
+    appliedFilters: Set<string>;
+}) => ReactNode);
+export declare function Filters<TData, TValue>({ classNames, className, trigger }: {
+    classNames?: {
+        container?: string;
+        filterChips?: string;
+        addFilter?: string;
+    };
+    className?: string;
+    trigger?: Trigger<TData, TValue>;
+}): import("react/jsx-runtime").JSX.Element;
+export {};
 //# sourceMappingURL=filters.d.ts.map

package/dist/components/data-table/components/filters.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AA6DA,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,6CA8DpC"}
+{"version":3,"file":"filters.d.ts","sourceRoot":"","sources":["../../../../components/data-table/components/filters.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAQ3C,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAItD,KAAK,OAAO,CAAC,KAAK,EAAE,MAAM,IACtB,SAAS,GACT,CAAC,CAAC,EACA,gBAAgB,EAChB,cAAc,EACf,EAAE;IACD,gBAAgB,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,CAAC,EAAE,CAAC;IACnD,cAAc,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;CAC7B,KAAK,SAAS,CAAC,CAAC;AA4DrB,wBAAgB,OAAO,CAAC,KAAK,EAAE,MAAM,EAAE,EACrC,UAAU,EACV,SAAS,EACT,OAAO,EACR,EAAE;IACD,UAAU,CAAC,EAAE;QACX,SAAS,CAAC,EAAE,MAAM,CAAC;QACnB,WAAW,CAAC,EAAE,MAAM,CAAC;QACrB,SAAS,CAAC,EAAE,MAAM,CAAC;KACpB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC;CAClC,2CAiEA"}

package/dist/components/data-table/components/filters.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
 import { ReactComponent as SvgFilter } from '../../../icons/assets/filter.svg.js';
 import { FilterType } from '../../../types/filters.js';
 import { Button } from '../../button/button.js';
@@ -10,15 +11,25 @@ import { IconButton } from '../../icon-button/icon-button.js';
 import { useDataTable } from '../hooks/useDataTable.js';
 import { useFilters } from '../hooks/useFilters.js';
 
-function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter }) {
+function AddFilter({ columnList = [], appliedFiltersSet, onAddFilter, children }) {
     const availableFilters = columnList?.filter(col => !appliedFiltersSet.has(col.id));
-    return availableFilters.length > 0 ? (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: appliedFiltersSet.size > 0 ? (jsx(IconButton, { size: 4, children: jsx(SvgFilter, {}) })) : (jsx(Button, { variant: 'text', size: 'small', leadingIcon: jsx(SvgFilter, {}), color: 'neutral', children: "Filter" })) }), jsx(DropdownMenu.Content, { children: availableFilters?.map(column => {
+    const trigger = useMemo(() => {
+        if (typeof children === 'function')
+            return children({ availableFilters, appliedFilters: appliedFiltersSet });
+        else if (children)
+            return children;
+        else if (appliedFiltersSet.size > 0)
+            return (jsx(IconButton, { size: 4, children: jsx(SvgFilter, {}) }));
+        else
+            return (jsx(Button, { variant: 'text', size: 'small', leadingIcon: jsx(SvgFilter, {}), color: 'neutral', children: "Filter" }));
+    }, [children, appliedFiltersSet, availableFilters]);
+    return availableFilters.length > 0 ? (jsxs(DropdownMenu, { children: [jsx(DropdownMenu.Trigger, { asChild: true, children: trigger }), jsx(DropdownMenu.Content, { children: availableFilters?.map(column => {
                     const columnDef = column.columnDef;
                     const id = columnDef.accessorKey || column.id;
                     return (jsx(DropdownMenu.Item, { onClick: () => onAddFilter(column), children: columnDef.header || id }, id));
                 }) })] })) : null;
 }
-function Filters() {
+function Filters({ classNames, className, trigger }) {
     const { table, tableQuery } = useDataTable();
     const columns = table?.getAllColumns();
     const { onAddFilter, handleRemoveFilter, handleFilterValueChange, handleFilterOperationChange } = useFilters();
@@ -37,7 +48,7 @@ function Filters() {
             ...filter
         };
     }) || [];
-    return (jsxs(Flex, { gap: 3, children: [jsx(Flex, { gap: 3, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options }, filter.name))) }), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter })] }));
+    return (jsxs(Flex, { gap: 3, className: className, children: [jsx(Flex, { gap: 3, className: classNames?.container, children: appliedFilters.map(filter => (jsx(FilterChip, { label: filter.label, value: filter.value, onRemove: () => handleRemoveFilter(filter.name), onValueChange: value => handleFilterValueChange(filter.name, value), onOperationChange: operator => handleFilterOperationChange(filter.name, operator), columnType: filter.filterType, options: filter.options, className: classNames?.filterChips }, filter.name))) }), jsx(AddFilter, { columnList: columnList, appliedFiltersSet: appliedFiltersSet, onAddFilter: onAddFilter, children: trigger })] }));
 }
 
 export { Filters };

package/dist/components/data-table/components/filters.js.map

@@ -1 +1 @@
-{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>\n        {appliedFiltersSet.size > 0 ? (\n          <IconButton size={4}>\n            <FilterIcon />\n          </IconButton>\n        ) : (\n          <Button\n            variant='text'\n            size='small'\n            leadingIcon={<FilterIcon />}\n            color='neutral'\n          >\n            Filter\n          </Button>\n        )}\n      </DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>() {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3}>\n      <Flex gap={3}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      />\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAmBA;;AASE;AAoBQ;;;;AAWV;;;AAIE;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;;AAgCR;;"}
+{"version":3,"file":"filters.js","sources":["../../../../components/data-table/components/filters.tsx"],"sourcesContent":["'use client';\n\nimport { ReactNode, useMemo } from 'react';\nimport { FilterIcon } from '~/icons';\nimport { FilterOperatorTypes, FilterType } from '~/types/filters';\nimport { Button } from '../../button';\nimport { DropdownMenu } from '../../dropdown-menu';\nimport { FilterChip } from '../../filter-chip';\nimport { Flex } from '../../flex';\nimport { IconButton } from '../../icon-button';\nimport { DataTableColumn } from '../data-table.types';\nimport { useDataTable } from '../hooks/useDataTable';\nimport { useFilters } from '../hooks/useFilters';\n\ntype Trigger<TData, TValue> =\n  | ReactNode\n  | (({\n      availableFilters,\n      appliedFilters\n    }: {\n      availableFilters: DataTableColumn<TData, TValue>[];\n      appliedFilters: Set<string>;\n    }) => ReactNode);\n\ninterface AddFilterProps<TData, TValue> {\n  columnList: DataTableColumn<TData, TValue>[];\n  appliedFiltersSet: Set<string>;\n  onAddFilter: (column: DataTableColumn<TData, TValue>) => void;\n  children?: Trigger<TData, TValue>;\n}\n\nfunction AddFilter<TData, TValue>({\n  columnList = [],\n  appliedFiltersSet,\n  onAddFilter,\n  children\n}: AddFilterProps<TData, TValue>) {\n  const availableFilters = columnList?.filter(\n    col => !appliedFiltersSet.has(col.id)\n  );\n\n  const trigger = useMemo(() => {\n    if (typeof children === 'function')\n      return children({ availableFilters, appliedFilters: appliedFiltersSet });\n    else if (children) return children;\n    else if (appliedFiltersSet.size > 0)\n      return (\n        <IconButton size={4}>\n          <FilterIcon />\n        </IconButton>\n      );\n    else\n      return (\n        <Button\n          variant='text'\n          size='small'\n          leadingIcon={<FilterIcon />}\n          color='neutral'\n        >\n          Filter\n        </Button>\n      );\n  }, [children, appliedFiltersSet, availableFilters]);\n\n  return availableFilters.length > 0 ? (\n    <DropdownMenu>\n      <DropdownMenu.Trigger asChild>{trigger}</DropdownMenu.Trigger>\n      <DropdownMenu.Content>\n        {availableFilters?.map(column => {\n          const columnDef = column.columnDef;\n          const id = columnDef.accessorKey || column.id;\n          return (\n            <DropdownMenu.Item key={id} onClick={() => onAddFilter(column)}>\n              {columnDef.header || id}\n            </DropdownMenu.Item>\n          );\n        })}\n      </DropdownMenu.Content>\n    </DropdownMenu>\n  ) : null;\n}\n\nexport function Filters<TData, TValue>({\n  classNames,\n  className,\n  trigger\n}: {\n  classNames?: {\n    container?: string;\n    filterChips?: string;\n    addFilter?: string;\n  };\n  className?: string;\n  trigger?: Trigger<TData, TValue>;\n}) {\n  const { table, tableQuery } = useDataTable();\n  const columns = table?.getAllColumns() as DataTableColumn<TData, TValue>[];\n\n  const {\n    onAddFilter,\n    handleRemoveFilter,\n    handleFilterValueChange,\n    handleFilterOperationChange\n  } = useFilters<TData, TValue>();\n\n  const columnList = columns?.filter(\n    column => column.columnDef.enableColumnFilter\n  );\n\n  const appliedFiltersSet = new Set(\n    tableQuery?.filters?.map(filter => filter.name)\n  );\n\n  const appliedFilters =\n    tableQuery?.filters?.map(filter => {\n      const columnDef = columns?.find(col => {\n        const columnDef = col.columnDef;\n        const id = columnDef.accessorKey || col.id;\n        return id === filter.name;\n      })?.columnDef;\n      return {\n        filterType: columnDef?.filterType || FilterType.string,\n        label: (columnDef?.header as string) || '',\n        options: columnDef?.filterOptions || [],\n        ...filter\n      };\n    }) || [];\n\n  return (\n    <Flex gap={3} className={className}>\n      <Flex gap={3} className={classNames?.container}>\n        {appliedFilters.map(filter => (\n          <FilterChip\n            key={filter.name}\n            label={filter.label}\n            value={filter.value}\n            onRemove={() => handleRemoveFilter(filter.name)}\n            onValueChange={value => handleFilterValueChange(filter.name, value)}\n            onOperationChange={operator =>\n              handleFilterOperationChange(\n                filter.name,\n                operator as FilterOperatorTypes\n              )\n            }\n            columnType={filter.filterType}\n            options={filter.options}\n            className={classNames?.filterChips}\n          />\n        ))}\n      </Flex>\n      <AddFilter\n        columnList={columnList}\n        appliedFiltersSet={appliedFiltersSet}\n        onAddFilter={onAddFilter}\n      >\n        {trigger}\n      </AddFilter>\n    </Flex>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;AA+BA;;AAUE;;;AAGO;AAAc;AACd;AACH;;;;AAkBJ;AAKQ;;;;AAWV;AAEM;;AAcJ;AAEA;AAOA;;;;AAWM;;AAEA;;;AAGA;AACA;AACA;AACA;;;AAIN;AA+BF;;"}

package/dist/components/data-table/data-table.cjs

@@ -5,6 +5,7 @@ var jsxRuntime = require('react/jsx-runtime');
 var index$1 = require('../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@tanstack/react-table/build/lib/index.cjs');
 var React = require('react');
 var content = require('./components/content.cjs');
+var filters = require('./components/filters.cjs');
 var search = require('./components/search.cjs');
 var toolbar = require('./components/toolbar.cjs');
 var context = require('./context.cjs');
@@ -106,7 +107,8 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
 const DataTable = Object.assign(DataTableRoot, {
     Content: content.Content,
     Toolbar: toolbar.Toolbar,
-    Search: search.TableSearch
+    Search: search.TableSearch,
+    Filters: filters.Filters
 });
 
 exports.DataTable = DataTable;

package/dist/components/data-table/data-table.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));\n    setColumnVisibility(initialColumnVisibility);\n  }, [defaultTableQuery, initialColumnVisibility]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: setColumnVisibility,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  Toolbar: Toolbar,\n  Search: TableSearch\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAiCA;;AAcE;;;AAQA;AAEA;AAKA;AACE;;AAEF;;;;;AAeE;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;AAEA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;AAYC;AAED;AAKF;;AAGE;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.cjs","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));\n    setColumnVisibility(initialColumnVisibility);\n  }, [defaultTableQuery, initialColumnVisibility]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: setColumnVisibility,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;AAkCA;;AAcE;;;AAQA;AAEA;AAKA;AACE;;AAEF;;;;;AAeE;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;AAEA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;AAYC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACD;;"}

package/dist/components/data-table/data-table.d.ts

@@ -1,4 +1,5 @@
 import { Content } from './components/content';
+import { Filters } from './components/filters';
 import { Toolbar } from './components/toolbar';
 import { DataTableProps } from './data-table.types';
 declare function DataTableRoot<TData, TValue>({ data, columns, query, mode, isLoading, loadingRowCount, defaultSort, children, onTableQueryChange, onLoadMore, onRowClick }: React.PropsWithChildren<DataTableProps<TData, TValue>>): import("react/jsx-runtime").JSX.Element;
@@ -6,6 +7,7 @@ export declare const DataTable: typeof DataTableRoot & {
     Content: typeof Content;
     Toolbar: typeof Toolbar;
     Search: import("react").ForwardRefExoticComponent<import("../search/search").SearchProps & import("react").RefAttributes<HTMLInputElement>>;
+    Filters: typeof Filters;
 };
 export {};
 //# sourceMappingURL=data-table.d.ts.map

package/dist/components/data-table/data-table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACX,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA2HxD;AAED,eAAO,MAAM,SAAS;;;;CAIpB,CAAC"}
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../components/data-table/data-table.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,OAAO,EACL,cAAc,EAMf,MAAM,oBAAoB,CAAC;AAW5B,iBAAS,aAAa,CAAC,KAAK,EAAE,MAAM,EAAE,EACpC,IAAS,EACT,OAAO,EACP,KAAK,EACL,IAAe,EACf,SAAiB,EACjB,eAAmB,EACnB,WAAW,EACX,QAAQ,EACR,kBAAkB,EAClB,UAAU,EACV,UAAU,EACX,EAAE,KAAK,CAAC,iBAAiB,CAAC,cAAc,CAAC,KAAK,EAAE,MAAM,CAAC,CAAC,2CA2HxD;AAED,eAAO,MAAM,SAAS;;;;;CAKpB,CAAC"}

package/dist/components/data-table/data-table.js

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 import { useReactTable } from '../../node_modules/.pnpm/@tanstack_react-table@8.9.2_react-dom@19.1.1_react@19.1.1__react@19.1.1/node_modules/@tanstack/react-table/build/lib/index.js';
 import { useState, useRef, useMemo, useCallback, useEffect } from 'react';
 import { Content } from './components/content.js';
+import { Filters } from './components/filters.js';
 import { TableSearch } from './components/search.js';
 import { Toolbar } from './components/toolbar.js';
 import { TableContext } from './context.js';
@@ -104,7 +105,8 @@ function DataTableRoot({ data = [], columns, query, mode = 'client', isLoading =
 const DataTable = Object.assign(DataTableRoot, {
     Content: Content,
     Toolbar: Toolbar,
-    Search: TableSearch
+    Search: TableSearch,
+    Filters: Filters
 });
 
 export { DataTable };

package/dist/components/data-table/data-table.js.map

@@ -1 +1 @@
-{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));\n    setColumnVisibility(initialColumnVisibility);\n  }, [defaultTableQuery, initialColumnVisibility]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: setColumnVisibility,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  Toolbar: Toolbar,\n  Search: TableSearch\n});\n"],"names":[],"mappings":";;;;;;;;;;;;AAiCA;;AAcE;;;AAQA;AAEA;AAKA;AACE;;AAEF;;;;;AAeE;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;AAEA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;AAYC;AAED;AAKF;;AAGE;AACA;AACA;AACD;;"}
+{"version":3,"file":"data-table.js","sources":["../../../components/data-table/data-table.tsx"],"sourcesContent":["'use client';\n\nimport {\n  VisibilityState,\n  getCoreRowModel,\n  getExpandedRowModel,\n  getFilteredRowModel,\n  getSortedRowModel,\n  useReactTable\n} from '@tanstack/react-table';\nimport { useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { Content } from './components/content';\nimport { Filters } from './components/filters';\nimport { TableSearch } from './components/search';\nimport { Toolbar } from './components/toolbar';\nimport { TableContext } from './context';\nimport {\n  DataTableProps,\n  GroupedData,\n  InternalQuery,\n  TableContextType,\n  TableQueryUpdateFn,\n  defaultGroupOption\n} from './data-table.types';\nimport {\n  getColumnsWithFilterFn,\n  getDefaultTableQuery,\n  getInitialColumnVisibility,\n  groupData,\n  hasQueryChanged,\n  queryToTableState,\n  transformToDataTableQuery\n} from './utils';\n\nfunction DataTableRoot<TData, TValue>({\n  data = [],\n  columns,\n  query,\n  mode = 'client',\n  isLoading = false,\n  loadingRowCount = 3,\n  defaultSort,\n  children,\n  onTableQueryChange,\n  onLoadMore,\n  onRowClick\n}: React.PropsWithChildren<DataTableProps<TData, TValue>>) {\n  const defaultTableQuery = getDefaultTableQuery(defaultSort, query);\n  const initialColumnVisibility = getInitialColumnVisibility(columns);\n\n  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>(\n    initialColumnVisibility\n  );\n  const [tableQuery, setTableQuery] =\n    useState<InternalQuery>(defaultTableQuery);\n\n  const oldQueryRef = useRef<InternalQuery | null>(null);\n\n  const reactTableState = useMemo(\n    () => queryToTableState(tableQuery),\n    [tableQuery]\n  );\n\n  const onDisplaySettingsReset = useCallback(() => {\n    setTableQuery(prev => ({ ...prev, ...defaultTableQuery }));\n    setColumnVisibility(initialColumnVisibility);\n  }, [defaultTableQuery, initialColumnVisibility]);\n\n  const group_by = tableQuery.group_by?.[0];\n\n  const columnsWithFilters = useMemo(\n    () => getColumnsWithFilterFn<TData, TValue>(columns, tableQuery.filters),\n    [columns, tableQuery.filters]\n  );\n\n  const groupedData = useMemo(\n    () => groupData(data, group_by, columns),\n    [data, group_by, columns]\n  );\n\n  useEffect(() => {\n    if (\n      tableQuery &&\n      onTableQueryChange &&\n      hasQueryChanged(oldQueryRef.current, tableQuery) &&\n      mode === 'server'\n    ) {\n      onTableQueryChange(transformToDataTableQuery(tableQuery));\n      oldQueryRef.current = tableQuery;\n    }\n  }, [tableQuery, onTableQueryChange]);\n\n  const table = useReactTable({\n    data: groupedData as unknown as TData[],\n    columns: columnsWithFilters,\n    getCoreRowModel: getCoreRowModel(),\n    getExpandedRowModel: getExpandedRowModel(),\n    getSubRows: row => (row as unknown as GroupedData<TData>)?.subRows || [],\n    getSortedRowModel: mode === 'server' ? undefined : getSortedRowModel(),\n    getFilteredRowModel: mode === 'server' ? undefined : getFilteredRowModel(),\n    manualSorting: mode === 'server',\n    manualFiltering: mode === 'server',\n    onColumnVisibilityChange: setColumnVisibility,\n    globalFilterFn: mode === 'server' ? undefined : 'auto',\n    initialState: {\n      columnVisibility: initialColumnVisibility\n    },\n    filterFromLeafRows: true,\n    state: {\n      ...reactTableState,\n      columnVisibility: columnVisibility,\n      expanded:\n        group_by && group_by !== defaultGroupOption.id ? true : undefined\n    }\n  });\n\n  function updateTableQuery(fn: TableQueryUpdateFn) {\n    setTableQuery(prev => fn(prev));\n  }\n\n  const loadMoreData = useCallback(() => {\n    if (mode === 'server' && onLoadMore) {\n      onLoadMore();\n    }\n  }, [mode, onLoadMore]);\n\n  const searchQuery = query?.search;\n  useEffect(() => {\n    if (searchQuery) {\n      updateTableQuery(prev => ({\n        ...prev,\n        search: searchQuery\n      }));\n    }\n  }, [searchQuery]);\n\n  const contextValue: TableContextType<TData, TValue> = useMemo(() => {\n    return {\n      table,\n      columns,\n      mode,\n      isLoading,\n      loadMoreData,\n      tableQuery,\n      updateTableQuery,\n      onDisplaySettingsReset,\n      defaultSort,\n      loadingRowCount,\n      onRowClick\n    };\n  }, [\n    table,\n    columns,\n    mode,\n    isLoading,\n    loadMoreData,\n    tableQuery,\n    updateTableQuery,\n    onDisplaySettingsReset,\n    defaultSort,\n    loadingRowCount,\n    onRowClick\n  ]);\n\n  return (\n    <TableContext.Provider value={contextValue}>\n      {children}\n    </TableContext.Provider>\n  );\n}\n\nexport const DataTable = Object.assign(DataTableRoot, {\n  Content: Content,\n  Toolbar: Toolbar,\n  Search: TableSearch,\n  Filters: Filters\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;AAkCA;;AAcE;;;AAQA;AAEA;AAKA;AACE;;AAEF;;;;;AAeE;;AAGE;;AAGA;AACA;;AAEJ;;AAGE;AACA;;;;AAIA;AACA;;;AAGA;;AAEA;AACE;AACD;AACD;AACA;AACE;AACA;AACA;AAED;AACF;;;;AAMD;AACE;AACE;;AAEJ;AAEA;;;AAGI;AACE;AACA;AACD;;AAEL;AAEA;;;;;;;;;;;;;;AAcA;;;;;;;;;;;;AAYC;AAED;AAKF;;AAGE;AACA;AACA;AACA;AACD;;"}

package/dist/components/headline/headline.cjs

@@ -8,33 +8,38 @@ var headline_module = require('./headline.module.css.cjs');
 const headline = index.cva(headline_module.default.headline, {
     variants: {
         size: {
-            t1: headline_module.default["headline-t1"],
-            t2: headline_module.default["headline-t2"],
-            t3: headline_module.default["headline-t3"],
-            t4: headline_module.default["headline-t4"],
-            small: headline_module.default["headline-small"],
-            medium: headline_module.default["headline-medium"],
-            large: headline_module.default["headline-large"],
+            t1: headline_module.default['headline-t1'],
+            t2: headline_module.default['headline-t2'],
+            t3: headline_module.default['headline-t3'],
+            t4: headline_module.default['headline-t4'],
+            small: headline_module.default['headline-small'],
+            medium: headline_module.default['headline-medium'],
+            large: headline_module.default['headline-large']
+        },
+        weight: {
+            regular: headline_module.default['headline-weight-regular'],
+            medium: headline_module.default['headline-weight-medium']
         },
         align: {
-            left: headline_module.default["headline-align-left"],
-            center: headline_module.default["headline-align-center"],
-            right: headline_module.default["headline-align-right"],
+            left: headline_module.default['headline-align-left'],
+            center: headline_module.default['headline-align-center'],
+            right: headline_module.default['headline-align-right']
         },
         truncate: {
-            true: headline_module.default["headline-truncate"],
-        },
+            true: headline_module.default['headline-truncate']
+        }
     },
     defaultVariants: {
-        size: "t2",
-        align: "left",
-        truncate: false,
-    },
+        size: 't2',
+        weight: 'medium',
+        align: 'left',
+        truncate: false
+    }
 });
-const Headline = React.forwardRef(({ className, size, align, truncate, as: Component = "h2", ...props }, ref) => {
-    return (jsxRuntime.jsx(Component, { ref: ref, className: headline({ size, align, truncate, className }), ...props }));
+const Headline = React.forwardRef(({ className, size, weight, align, truncate, as: Component = 'h2', ...props }, ref) => {
+    return (jsxRuntime.jsx(Component, { ref: ref, className: headline({ size, weight, align, truncate, className }), ...props }));
 });
-Headline.displayName = "Headline";
+Headline.displayName = 'Headline';
 
 exports.Headline = Headline;
 //# sourceMappingURL=headline.cjs.map

package/dist/components/headline/headline.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"headline.cjs","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes } from \"react\";\n\nimport styles from \"./headline.module.css\";\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles[\"headline-t1\"],\n      t2: styles[\"headline-t2\"],\n      t3: styles[\"headline-t3\"],\n      t4: styles[\"headline-t4\"],\n      small: styles[\"headline-small\"],\n      medium: styles[\"headline-medium\"],\n      large: styles[\"headline-large\"],\n    },\n    align: {\n      left: styles[\"headline-align-left\"],\n      center: styles[\"headline-align-center\"],\n      right: styles[\"headline-align-right\"],\n    },\n    truncate: {\n      true: styles[\"headline-truncate\"],\n    },\n  },\n  defaultVariants: {\n    size: \"t2\",\n    align: \"left\",\n    truncate: false,\n  },\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: \"t1\" | \"t2\" | \"t3\" | \"t4\" | \"small\" | \"medium\" | \"large\";\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    { className, size, align, truncate, as: Component = \"h2\", ...props },\n    ref,\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, align, truncate, className })}\n        {...props}\n      />\n    );\n  },\n);\n\nHeadline.displayName = \"Headline\";\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,QAAQ,GAAGA,SAAG,CAACC,uBAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAEA,uBAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,uBAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAEA,uBAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAEA,uBAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAEA,uBAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAGC,gBAAU,CAChC,CACE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,KACD;IACF,QACEC,cAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EACrD,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"headline.cjs","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, forwardRef } from 'react';\n\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    {\n      className,\n      size,\n      weight,\n      align,\n      truncate,\n      as: Component = 'h2',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, weight, align, truncate, className })}\n        {...props}\n      />\n    );\n  }\n);\n\nHeadline.displayName = 'Headline';\n"],"names":["cva","styles","forwardRef","_jsx"],"mappings":";;;;;;;AAKA,MAAM,QAAQ,GAAGA,SAAG,CAACC,uBAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAEA,uBAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAEA,uBAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAEA,uBAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAEA,uBAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAEA,uBAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAEA,uBAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAEA,uBAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAEA,uBAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAEA,uBAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAGC,gBAAU,CAChC,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEC,cAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}

package/dist/components/headline/headline.d.ts

@@ -1,7 +1,8 @@
-import { type VariantProps } from "class-variance-authority";
-import { HTMLAttributes } from "react";
+import { type VariantProps } from 'class-variance-authority';
+import { HTMLAttributes } from 'react';
 declare const headline: (props?: ({
     size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | null | undefined;
+    weight?: "medium" | "regular" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
@@ -9,10 +10,11 @@ export type HeadlineBaseProps = VariantProps<typeof headline> & {
     /**
      * @remarks Use "t1" | "t2" | "t3" | "t4"
      */
-    size?: "t1" | "t2" | "t3" | "t4" | "small" | "medium" | "large";
+    size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';
 };
 export declare const Headline: import("react").ForwardRefExoticComponent<VariantProps<(props?: ({
     size?: "small" | "medium" | "large" | "t1" | "t2" | "t3" | "t4" | null | undefined;
+    weight?: "medium" | "regular" | null | undefined;
     align?: "center" | "left" | "right" | null | undefined;
     truncate?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {

package/dist/components/headline/headline.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"headline.d.ts","sourceRoot":"","sources":["../../../components/headline/headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAc,cAAc,EAAE,MAAM,OAAO,CAAC;AAInD,QAAA,MAAM,QAAQ;;;;8EAyBZ,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjE,CAAC;AAOF,eAAO,MAAM,QAAQ;;;;;IAXnB;;OAEG;;;;sDAsBJ,CAAC"}
+{"version":3,"file":"headline.d.ts","sourceRoot":"","sources":["../../../components/headline/headline.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,YAAY,EAAO,MAAM,0BAA0B,CAAC;AAClE,OAAO,EAAE,cAAc,EAAc,MAAM,OAAO,CAAC;AAInD,QAAA,MAAM,QAAQ;;;;;8EA8BZ,CAAC;AAEH,MAAM,MAAM,iBAAiB,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,GAAG;IAC9D;;OAEG;IACH,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;CACjE,CAAC;AAOF,eAAO,MAAM,QAAQ;;;;;;IAXnB;;OAEG;;;;sDA8BJ,CAAC"}

package/dist/components/headline/headline.js

@@ -6,33 +6,38 @@ import styles from './headline.module.css.js';
 const headline = cva(styles.headline, {
     variants: {
         size: {
-            t1: styles["headline-t1"],
-            t2: styles["headline-t2"],
-            t3: styles["headline-t3"],
-            t4: styles["headline-t4"],
-            small: styles["headline-small"],
-            medium: styles["headline-medium"],
-            large: styles["headline-large"],
+            t1: styles['headline-t1'],
+            t2: styles['headline-t2'],
+            t3: styles['headline-t3'],
+            t4: styles['headline-t4'],
+            small: styles['headline-small'],
+            medium: styles['headline-medium'],
+            large: styles['headline-large']
+        },
+        weight: {
+            regular: styles['headline-weight-regular'],
+            medium: styles['headline-weight-medium']
         },
         align: {
-            left: styles["headline-align-left"],
-            center: styles["headline-align-center"],
-            right: styles["headline-align-right"],
+            left: styles['headline-align-left'],
+            center: styles['headline-align-center'],
+            right: styles['headline-align-right']
         },
         truncate: {
-            true: styles["headline-truncate"],
-        },
+            true: styles['headline-truncate']
+        }
     },
     defaultVariants: {
-        size: "t2",
-        align: "left",
-        truncate: false,
-    },
+        size: 't2',
+        weight: 'medium',
+        align: 'left',
+        truncate: false
+    }
 });
-const Headline = forwardRef(({ className, size, align, truncate, as: Component = "h2", ...props }, ref) => {
-    return (jsx(Component, { ref: ref, className: headline({ size, align, truncate, className }), ...props }));
+const Headline = forwardRef(({ className, size, weight, align, truncate, as: Component = 'h2', ...props }, ref) => {
+    return (jsx(Component, { ref: ref, className: headline({ size, weight, align, truncate, className }), ...props }));
 });
-Headline.displayName = "Headline";
+Headline.displayName = 'Headline';
 
 export { Headline };
 //# sourceMappingURL=headline.js.map

package/dist/components/headline/headline.js.map

@@ -1 +1 @@
-{"version":3,"file":"headline.js","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { cva, type VariantProps } from \"class-variance-authority\";\nimport { forwardRef, HTMLAttributes } from \"react\";\n\nimport styles from \"./headline.module.css\";\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles[\"headline-t1\"],\n      t2: styles[\"headline-t2\"],\n      t3: styles[\"headline-t3\"],\n      t4: styles[\"headline-t4\"],\n      small: styles[\"headline-small\"],\n      medium: styles[\"headline-medium\"],\n      large: styles[\"headline-large\"],\n    },\n    align: {\n      left: styles[\"headline-align-left\"],\n      center: styles[\"headline-align-center\"],\n      right: styles[\"headline-align-right\"],\n    },\n    truncate: {\n      true: styles[\"headline-truncate\"],\n    },\n  },\n  defaultVariants: {\n    size: \"t2\",\n    align: \"left\",\n    truncate: false,\n  },\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: \"t1\" | \"t2\" | \"t3\" | \"t4\" | \"small\" | \"medium\" | \"large\";\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    { className, size, align, truncate, as: Component = \"h2\", ...props },\n    ref,\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, align, truncate, className })}\n        {...props}\n      />\n    );\n  },\n);\n\nHeadline.displayName = \"Headline\";\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,KAAK,EAAE,EACpE,GAAG,KACD;IACF,QACEA,GAAC,CAAA,SAAS,EACR,EAAA,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EACrD,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}
+{"version":3,"file":"headline.js","sources":["../../../components/headline/headline.tsx"],"sourcesContent":["import { type VariantProps, cva } from 'class-variance-authority';\nimport { HTMLAttributes, forwardRef } from 'react';\n\nimport styles from './headline.module.css';\n\nconst headline = cva(styles.headline, {\n  variants: {\n    size: {\n      t1: styles['headline-t1'],\n      t2: styles['headline-t2'],\n      t3: styles['headline-t3'],\n      t4: styles['headline-t4'],\n      small: styles['headline-small'],\n      medium: styles['headline-medium'],\n      large: styles['headline-large']\n    },\n    weight: {\n      regular: styles['headline-weight-regular'],\n      medium: styles['headline-weight-medium']\n    },\n    align: {\n      left: styles['headline-align-left'],\n      center: styles['headline-align-center'],\n      right: styles['headline-align-right']\n    },\n    truncate: {\n      true: styles['headline-truncate']\n    }\n  },\n  defaultVariants: {\n    size: 't2',\n    weight: 'medium',\n    align: 'left',\n    truncate: false\n  }\n});\n\nexport type HeadlineBaseProps = VariantProps<typeof headline> & {\n  /**\n   * @remarks Use \"t1\" | \"t2\" | \"t3\" | \"t4\"\n   */\n  size?: 't1' | 't2' | 't3' | 't4' | 'small' | 'medium' | 'large';\n};\n\ntype HeadlineProps = HeadlineBaseProps &\n  HTMLAttributes<HTMLHeadingElement> & {\n    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n  };\n\nexport const Headline = forwardRef<HTMLHeadingElement, HeadlineProps>(\n  (\n    {\n      className,\n      size,\n      weight,\n      align,\n      truncate,\n      as: Component = 'h2',\n      ...props\n    },\n    ref\n  ) => {\n    return (\n      <Component\n        ref={ref}\n        className={headline({ size, weight, align, truncate, className })}\n        {...props}\n      />\n    );\n  }\n);\n\nHeadline.displayName = 'Headline';\n"],"names":["_jsx"],"mappings":";;;;;AAKA,MAAM,QAAQ,GAAG,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE;AACpC,IAAA,QAAQ,EAAE;AACR,QAAA,IAAI,EAAE;AACJ,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,EAAE,EAAE,MAAM,CAAC,aAAa,CAAC;AACzB,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAC/B,YAAA,MAAM,EAAE,MAAM,CAAC,iBAAiB,CAAC;AACjC,YAAA,KAAK,EAAE,MAAM,CAAC,gBAAgB,CAAC;AAChC,SAAA;AACD,QAAA,MAAM,EAAE;AACN,YAAA,OAAO,EAAE,MAAM,CAAC,yBAAyB,CAAC;AAC1C,YAAA,MAAM,EAAE,MAAM,CAAC,wBAAwB,CAAC;AACzC,SAAA;AACD,QAAA,KAAK,EAAE;AACL,YAAA,IAAI,EAAE,MAAM,CAAC,qBAAqB,CAAC;AACnC,YAAA,MAAM,EAAE,MAAM,CAAC,uBAAuB,CAAC;AACvC,YAAA,KAAK,EAAE,MAAM,CAAC,sBAAsB,CAAC;AACtC,SAAA;AACD,QAAA,QAAQ,EAAE;AACR,YAAA,IAAI,EAAE,MAAM,CAAC,mBAAmB,CAAC;AAClC,SAAA;AACF,KAAA;AACD,IAAA,eAAe,EAAE;AACf,QAAA,IAAI,EAAE,IAAI;AACV,QAAA,MAAM,EAAE,QAAQ;AAChB,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,KAAK;AAChB,KAAA;AACF,CAAA,CAAC,CAAC;AAcI,MAAM,QAAQ,GAAG,UAAU,CAChC,CACE,EACE,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,QAAQ,EACR,EAAE,EAAE,SAAS,GAAG,IAAI,EACpB,GAAG,KAAK,EACT,EACD,GAAG,KACD;AACF,IAAA,QACEA,GAAA,CAAC,SAAS,EAAA,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC,EAC7D,GAAA,KAAK,EACT,CAAA,EACF;AACJ,CAAC,EACD;AAEF,QAAQ,CAAC,WAAW,GAAG,UAAU;;;;"}