@economic/taco 10.0.1-improve-publish-scripts.0 → 10.0.1-react-19.0

package/dist/components/Calendar/Calendar.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.cjs","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker, DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white text-xs p-2', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["useLocalization","today","React","startOfYear","subYears","endOfYear","addYears","DayPicker","props","Tooltip","LegacyIconButton"],"mappings":"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"}
+{"version":3,"file":"Calendar.cjs","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker, DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["useLocalization","today","React","startOfYear","subYears","endOfYear","addYears","DayPicker","props","Tooltip","LegacyIconButton"],"mappings":"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"}

package/dist/components/Calendar/Calendar.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { DayPicker } from "react-day-picker";
-import { startOfYear, endOfYear, subYears, addYears } from "date-fns";
+import { startOfYear, subYears, endOfYear, addYears } from "date-fns";
 import range from "lodash/range";
 import cn from "clsx";
 import { useLocalization } from "../Provider/Localization.js";
@@ -51,7 +51,7 @@ const Calendar = (props) => {
       setVisibleMonth(value ?? /* @__PURE__ */ new Date());
     }
   }, [value]);
-  const className = cn("flex flex-col bg-white text-xs p-2", otherProps.className);
+  const className = cn("flex flex-col bg-white p-2 text-xs", otherProps.className);
   const handleSelect = (_, date, modifiers, e) => {
     if (modifiers.outside || modifiers.disabled) {
       return;

package/dist/components/Calendar/Calendar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker, DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white text-xs p-2', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DayPicker, DropdownProps, Matcher, OnSelectHandler } from 'react-day-picker';\nimport { addYears, endOfYear, startOfYear, subYears } from 'date-fns';\nimport range from 'lodash/range';\nimport cn from 'clsx';\n\nimport { useLocalization } from '../Provider/Localization';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\n\nimport './Calendar.css';\n\nexport type CalendarTextsActions = {\n    /** Aria-label for previous month action button */\n    previousMonth: string;\n    /** Aria-label for next month action button */\n    nextMonth: string;\n    /** Aria-label for previous year action button */\n    previousYear: string;\n    /** Aria-label for next year action button */\n    nextYear: string;\n    /** Text displayed within today action button */\n    today: string;\n};\n\nexport type CalendarTexts = {\n    /** Text and aria-label for action buttons in Calendar */\n    actions: CalendarTextsActions;\n    /** Text abbreviation for months in Calendar's header, starting with January */\n    months: string[];\n    /** Text abbreviation for days in Calendar's header, starting with Sunday */\n    weekdaysShort: string[];\n    /** Text for days in Calendar's header, starting with Sunday */\n    weekdays: string[];\n};\n\nexport type CalendarProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'> & {\n    /** Handler called when a day is clicked in calendar */\n    onChange: (date: Date, event?: React.MouseEvent<Element>) => void;\n    value?: Date;\n    disabledDays?: Matcher[];\n};\n\nconst TodayButton = ({ handleChange }: { handleChange: (month: Date) => void }) => {\n    const { texts } = useLocalization();\n\n    const handleCalendarClickToday = (): void => {\n        const today = new Date();\n\n        // set to midday to avoid UTC offset causing dates to be mismatched server side\n        today.setHours(12);\n        today.setMinutes(0);\n        today.setSeconds(0);\n\n        handleChange(today);\n    };\n    return (\n        <button\n            type=\"button\"\n            className=\"cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n            onClick={handleCalendarClickToday}\n            data-taco=\"calendar-today-button\">\n            {texts.calendar.actions.today}\n        </button>\n    );\n};\n\nconst MonthsDropdown = (props: DropdownProps) => {\n    const { texts } = useLocalization();\n    const { onChange, value } = props;\n\n    return (\n        <select className=\"h-8 px-2\" name=\"month\" onChange={onChange} value={value}>\n            {texts.calendar.months.map((month, i) => (\n                <option key={month} value={i}>\n                    {month}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nconst today = new Date();\nconst startDateOfCalendar = startOfYear(subYears(today, 50));\nconst endDateOfCalendar = endOfYear(addYears(today, 10));\n\nconst YearsDropdown = (props: DropdownProps) => {\n    const { onChange, value } = props;\n\n    const years = React.useMemo(() => {\n        return range(startDateOfCalendar.getFullYear(), endDateOfCalendar.getFullYear() + 1);\n    }, []);\n\n    return (\n        <select className=\"h-8 px-2\" name=\"year\" onChange={onChange} value={value}>\n            {years.map(year => (\n                <option key={year} value={year}>\n                    {String(year)}\n                </option>\n            ))}\n        </select>\n    );\n};\n\nexport const Calendar = (props: CalendarProps) => {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n    const { texts } = useLocalization();\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const className = cn('flex flex-col bg-white p-2 text-xs', otherProps.className);\n\n    const handleSelect: OnSelectHandler<Date | undefined> = (_, date, modifiers, e) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, e as React.MouseEvent<Element, MouseEvent>);\n    };\n\n    return (\n        <div data-taco=\"calendar\">\n            <DayPicker\n                captionLayout=\"dropdown\"\n                className={className}\n                components={{\n                    NextMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.nextMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-right\"\n                                aria-label={texts.calendar.actions.nextMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-next-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    PreviousMonthButton: props => (\n                        <Tooltip title={texts.calendar.actions.previousMonth}>\n                            <LegacyIconButton\n                                appearance=\"discrete\"\n                                icon=\"chevron-left\"\n                                aria-label={texts.calendar.actions.previousMonth}\n                                onClick={props.onClick}\n                                rounded\n                                data-taco=\"calendar-prev-month-button\"\n                            />\n                        </Tooltip>\n                    ),\n                    MonthsDropdown,\n                    YearsDropdown,\n                    Weekdays: () => (\n                        <thead>\n                            <tr>\n                                {texts.calendar.weekdaysShort.map((weekday, index) => {\n                                    const label = texts.calendar.weekdays && texts.calendar.weekdays[index];\n                                    return (\n                                        <th key={weekday} aria-label={label} className=\"rdp-head_cell\" title={label}>\n                                            {weekday}\n                                        </th>\n                                    );\n                                })}\n                            </tr>\n                        </thead>\n                    ),\n                }}\n                disabled={disabledDays}\n                endMonth={endDateOfCalendar}\n                footer={<TodayButton handleChange={handleChange} />}\n                mode=\"single\"\n                month={visibleMonth}\n                navLayout=\"after\" // needed to have the right tab-focus order\n                numberOfMonths={1}\n                onMonthChange={setVisibleMonth}\n                onSelect={handleSelect}\n                required={false}\n                selected={value}\n                startMonth={startDateOfCalendar}\n                weekStartsOn={1}\n            />\n        </div>\n    );\n};\n"],"names":["today","props"],"mappings":";;;;;;;;;AA2CA,MAAM,cAAc,CAAC,EAAE,mBAA4D;AAC/E,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,2BAA2B,MAAY;AACzC,UAAMA,6BAAY,KAAA;AAGlBA,WAAM,SAAS,EAAE;AACjBA,WAAM,WAAW,CAAC;AAClBA,WAAM,WAAW,CAAC;AAElB,iBAAaA,MAAK;AAAA,EACtB;AACA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAU;AAAA,IAAA;AAAA,IACT,MAAM,SAAS,QAAQ;AAAA,EAAA;AAGpC;AAEA,MAAM,iBAAiB,CAAC,UAAyB;AAC7C,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,EAAE,UAAU,MAAA,IAAU;AAE5B,SACI,sBAAA,cAAC,YAAO,WAAU,YAAW,MAAK,SAAQ,UAAoB,SACzD,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,MAC/B,sBAAA,cAAC,UAAA,EAAO,KAAK,OAAO,OAAO,EAAA,GACtB,KACL,CACH,CACL;AAER;AAEA,MAAM,4BAAY,KAAA;AAClB,MAAM,sBAAsB,YAAY,SAAS,OAAO,EAAE,CAAC;AAC3D,MAAM,oBAAoB,UAAU,SAAS,OAAO,EAAE,CAAC;AAEvD,MAAM,gBAAgB,CAAC,UAAyB;AAC5C,QAAM,EAAE,UAAU,MAAA,IAAU;AAE5B,QAAM,QAAQ,MAAM,QAAQ,MAAM;AAC9B,WAAO,MAAM,oBAAoB,YAAA,GAAe,kBAAkB,YAAA,IAAgB,CAAC;AAAA,EACvF,GAAG,CAAA,CAAE;AAEL,SACI,sBAAA,cAAC,YAAO,WAAU,YAAW,MAAK,QAAO,UAAoB,SACxD,MAAM,IAAI,UACP,sBAAA,cAAC,UAAA,EAAO,KAAK,MAAM,OAAO,QACrB,OAAO,IAAI,CAChB,CACH,CACL;AAER;AAEO,MAAM,WAAW,CAAC,UAAyB;AAC9C,QAAM,EAAE,UAAU,cAAc,OAAO,cAAc,GAAG,eAAe;AACvE,QAAM,CAAC,cAAc,eAAe,IAAI,MAAM,SAAS,SAAS,oBAAI,MAAM;AAC1E,QAAM,EAAE,MAAA,IAAU,gBAAA;AAElB,QAAM,UAAU,MAAM;AAClB,QAAI,iBAAiB,OAAO;AACxB,sBAAgB,SAAS,oBAAI,MAAM;AAAA,IACvC;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,GAAG,sCAAsC,WAAW,SAAS;AAE/E,QAAM,eAAkD,CAAC,GAAG,MAAM,WAAW,MAAM;AAC/E,QAAI,UAAU,WAAW,UAAU,UAAU;AACzC;AAAA,IACJ;AAEA,iBAAa,MAAM,CAA0C;AAAA,EACjE;AAEA,SACI,sBAAA,cAAC,OAAA,EAAI,aAAU,WAAA,GACX,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,eAAc;AAAA,MACd;AAAA,MACA,YAAY;AAAA,QACR,iBAAiB,CAAAC,WACb,sBAAA,cAAC,WAAQ,OAAO,MAAM,SAAS,QAAQ,UAAA,GACnC,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASA,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ,qBAAqB,CAAAA,WACjB,sBAAA,cAAC,WAAQ,OAAO,MAAM,SAAS,QAAQ,cAAA,GACnC,sBAAA;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASA,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ;AAAA,QACA;AAAA,QACA,UAAU,MACN,sBAAA,cAAC,SAAA,MACG,sBAAA,cAAC,MAAA,MACI,MAAM,SAAS,cAAc,IAAI,CAAC,SAAS,UAAU;AAClD,gBAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,SAAS,KAAK;AACtE,iBACI,sBAAA,cAAC,MAAA,EAAG,KAAK,SAAS,cAAY,OAAO,WAAU,iBAAgB,OAAO,MAAA,GACjE,OACL;AAAA,QAER,CAAC,CACL,CACJ;AAAA,MAAA;AAAA,MAGR,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAAQ,sBAAA,cAAC,aAAA,EAAY,aAAA,CAA4B;AAAA,MACjD,MAAK;AAAA,MACL,OAAO;AAAA,MACP,WAAU;AAAA,MACV,gBAAgB;AAAA,MAChB,eAAe;AAAA,MACf,UAAU;AAAA,MACV,UAAU;AAAA,MACV,UAAU;AAAA,MACV,YAAY;AAAA,MACZ,cAAc;AAAA,IAAA;AAAA,EAAA,CAEtB;AAER;"}

package/dist/components/Card/Card.cjs

@@ -37,7 +37,7 @@ const Content = React__namespace.forwardRef(function CardContent(externalProps,
 const Card = React__namespace.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
   const localization = Localization.useLocalization();
-  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", className);
+  const cardClassName = cn("flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4", className);
   const headerContainerAlignment = title ? "justify-between" : "justify-end";
   return /* @__PURE__ */ React__namespace.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, (title || menu) && /* @__PURE__ */ React__namespace.createElement("div", { className: cn("flex px-4 pb-2", headerContainerAlignment) }, title && /* @__PURE__ */ React__namespace.createElement(Truncate.Truncate, { tooltip: title }, /* @__PURE__ */ React__namespace.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu && /* @__PURE__ */ React__namespace.createElement(
     IconButton.LegacyIconButton,

package/dist/components/Card/Card.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,wDAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACKF,iCAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACIA,iCAAA,cAAAG,SAAAA,UAAA,EAAS,SAAS,SACdH,iCAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAA;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}
+{"version":3,"file":"Card.cjs","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["React","Card","useLocalization","Truncate","LegacyIconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAYA,MAAM,UAAUA,iBAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,wDAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAOA,iBAAM,WAAsC,SAASC,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAeC,aAAAA,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACIF,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACPA,iCAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACGA,iCAAA,cAACG,SAAAA,UAAA,EAAS,SAAS,SACfH,iCAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACGA,iCAAA;AAAA,IAACI,WAAAA;AAAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;;"}

package/dist/components/Card/Card.d.ts

@@ -7,7 +7,7 @@ export type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {
     /** Title of the Card */
     title?: string | React.ReactElement;
     /** Menu component associated with the Card */
-    menu?: (props: Partial<MenuProps>) => JSX.Element;
+    menu?: (props: Partial<MenuProps>) => React.JSX.Element;
 };
 export type CardTexts = {
     /** Text and aria-label for menu button in Card */

package/dist/components/Card/Card.js

@@ -18,7 +18,7 @@ const Content = React.forwardRef(function CardContent(externalProps, ref) {
 const Card = React.forwardRef(function Card2(props, ref) {
   const { title, menu, children, className, ...otherProps } = props;
   const localization = useLocalization();
-  const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", className);
+  const cardClassName = cn("flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4", className);
   const headerContainerAlignment = title ? "justify-between" : "justify-end";
   return /* @__PURE__ */ React.createElement("div", { ...otherProps, className: cardClassName, "data-taco": "card", ref }, (title || menu) && /* @__PURE__ */ React.createElement("div", { className: cn("flex px-4 pb-2", headerContainerAlignment) }, title && /* @__PURE__ */ React.createElement(Truncate, { tooltip: title }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 flex-grow truncate text-left" }, title)), menu && /* @__PURE__ */ React.createElement(
     LegacyIconButton,

package/dist/components/Card/Card.js.map

@@ -1 +1 @@
-{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAYA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAClB;AAAA,IACA,MAAM;AAAA,EACV;AACA,6CAAQ,OAAK,EAAA,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAgB;AAC/B,QAAA,gBAAgB,GAAG,8EAA8E,SAAS;AAE1G,QAAA,2BAA2B,QAAQ,oBAAoB;AAE7D,SACK,sBAAA,cAAA,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EACxD,GAAA,SACI,sBAAA,cAAA,UAAA,EAAS,SAAS,SACd,sBAAA,cAAA,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAGtB,CAAA,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}
+{"version":3,"file":"Card.js","sources":["../../../src/components/Card/Card.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { MenuProps } from '../Menu/Menu';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { Truncate } from '../Truncate/Truncate';\nimport './style.css';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    noPadding?: boolean;\n};\n\nconst Content = React.forwardRef<HTMLDivElement, CardContentProps>(function CardContent(externalProps, ref) {\n    const { noPadding, ...props } = externalProps;\n    const className = cn(\n        'flex-grow overflow-auto',\n        {\n            'px-4 pb-4': !noPadding,\n        },\n        props.className\n    );\n    return <div {...props} className={className} data-taco=\"card-content\" ref={ref} />;\n});\n\nexport type CardProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** Title of the Card */\n    title?: string | React.ReactElement;\n    /** Menu component associated with the Card */\n    menu?: (props: Partial<MenuProps>) => React.JSX.Element;\n};\n\nexport type CardTexts = {\n    /** Text and aria-label for menu button in Card */\n    menu: string;\n};\n\nexport const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(props, ref) {\n    const { title, menu, children, className, ...otherProps } = props;\n    const localization = useLocalization();\n    const cardClassName = cn('flex flex-col rounded-lg border border-solid border-gray-200 bg-white pt-4', className);\n    // if title is not passed menu should be shifted to the end of the container\n    const headerContainerAlignment = title ? 'justify-between' : 'justify-end';\n\n    return (\n        <div {...otherProps} className={cardClassName} data-taco=\"card\" ref={ref}>\n            {(title || menu) && (\n                <div className={cn('flex px-4 pb-2', headerContainerAlignment)}>\n                    {title && (\n                        <Truncate tooltip={title}>\n                            <h4 className=\"mb-0 flex-grow truncate text-left\">{title}</h4>\n                        </Truncate>\n                    )}\n                    {menu && (\n                        <LegacyIconButton\n                            aria-label={localization.texts.card.menu}\n                            icon=\"ellipsis-horizontal\"\n                            appearance=\"discrete\"\n                            menu={menu}\n                            className=\"-mt-[4px]\"\n                        />\n                    )}\n                </div>\n            )}\n            {children}\n        </div>\n    );\n}) as React.ForwardRefExoticComponent<CardProps> & {\n    Content: React.ForwardRefExoticComponent<CardContentProps>;\n};\nCard.Content = Content;\n"],"names":["Card"],"mappings":";;;;;;AAYA,MAAM,UAAU,MAAM,WAA6C,SAAS,YAAY,eAAe,KAAK;AACxG,QAAM,EAAE,WAAW,GAAG,MAAA,IAAU;AAChC,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,aAAa,CAAC;AAAA,IAAA;AAAA,IAElB,MAAM;AAAA,EAAA;AAEV,6CAAQ,OAAA,EAAK,GAAG,OAAO,WAAsB,aAAU,gBAAe,KAAU;AACpF,CAAC;AAcM,MAAM,OAAO,MAAM,WAAsC,SAASA,MAAK,OAAO,KAAK;AACtF,QAAM,EAAE,OAAO,MAAM,UAAU,WAAW,GAAG,eAAe;AAC5D,QAAM,eAAe,gBAAA;AACrB,QAAM,gBAAgB,GAAG,8EAA8E,SAAS;AAEhH,QAAM,2BAA2B,QAAQ,oBAAoB;AAE7D,SACI,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAW,eAAe,aAAU,QAAO,QAC1D,SAAS,SACP,sBAAA,cAAC,SAAI,WAAW,GAAG,kBAAkB,wBAAwB,EAAA,GACxD,SACG,sBAAA,cAAC,UAAA,EAAS,SAAS,SACf,sBAAA,cAAC,MAAA,EAAG,WAAU,oCAAA,GAAqC,KAAM,CAC7D,GAEH,QACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,aAAa,MAAM,KAAK;AAAA,MACpC,MAAK;AAAA,MACL,YAAW;AAAA,MACX;AAAA,MACA,WAAU;AAAA,IAAA;AAAA,EAAA,CAGtB,GAEH,QACL;AAER,CAAC;AAGD,KAAK,UAAU;"}

package/dist/components/Checkbox/Checkbox.cjs

@@ -27,17 +27,17 @@ const Checkbox = React__namespace.forwardRef(function Checkbox2(props, externalR
   const id = useId.useId(props.id);
   const ref = useMergedRef.useMergedRef(externalRef);
   const className = cn(
-    "bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none",
+    "peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed",
     invalid ? {
-      "border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700": !props.disabled,
-      "border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50": props.disabled
+      "border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700": !props.disabled,
+      "checked:wcag-red-500/50 indeterminate:wcag-red-500/50 border-red-500/50": props.disabled
     } : {
-      "border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
-      "border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
+      "border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
+      "border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500": props.disabled
     }
   );
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked);
+    onChange?.(event.target.checked);
   };
   let labelledByProps = null;
   if (label) {

package/dist/components/Checkbox/Checkbox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACnB,QAAA,MAAMC,0BAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,GAAA;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACVJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACAA,iCAAA;AAAA,MAACK,KAAA;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACDL,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWI,GAAAA,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;;"}
+{"version":3,"file":"Checkbox.cjs","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'checked:wcag-red-500/50 indeterminate:wcag-red-500/50 border-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["React","Checkbox","useId","useMergedRef","clsx","Icon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAqCO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAKC,MAAAA,MAAM,MAAM,EAAE;AACzB,QAAM,MAAMC,aAAAA,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEAH,mBAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACFA,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAWI,GAAAA;AAAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACVJ,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAETA,iCAAA;AAAA,MAACK,KAAAA;AAAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,0DACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACDL,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAWI,GAAAA,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;;"}

package/dist/components/Checkbox/Checkbox.js

@@ -8,17 +8,17 @@ const Checkbox = React.forwardRef(function Checkbox2(props, externalRef) {
   const id = useId(props.id);
   const ref = useMergedRef(externalRef);
   const className = cn(
-    "bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none",
+    "peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed",
     invalid ? {
-      "border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700": !props.disabled,
-      "border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50": props.disabled
+      "border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700": !props.disabled,
+      "checked:wcag-red-500/50 indeterminate:wcag-red-500/50 border-red-500/50": props.disabled
     } : {
-      "border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
-      "border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50": props.disabled
+      "border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700": !props.disabled,
+      "border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500": props.disabled
     }
   );
   const handleChange = (event) => {
-    onChange == null ? void 0 : onChange(event.target.checked);
+    onChange?.(event.target.checked);
   };
   let labelledByProps = null;
   if (label) {

package/dist/components/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed peer text-white appearance-none',\n        invalid\n            ? {\n                  'border-red-500 hover:border-red-700 checked:border-red-500 indeterminate:border-red-500 checked:bg-red-500 indeterminate:bg-red-500 checked:hover:border-red-700 indeterminate:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'border-red-500/50 checked:wcag-red-500/50 indeterminate:wcag-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 hover:border-gray-300 checked:border-blue-500 indeterminate:border-blue-500 checked:bg-blue-500 indeterminate:bg-blue-500 checked:hover:border-blue-700 indeterminate:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 checked:bg-blue-500 checked:border-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 opacity-50':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAqCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACjH,QAAA,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AACtF,QAAA,KAAK,MAAM,MAAM,EAAE;AACnB,QAAA,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EAExB;AAEM,QAAA,eAAe,CAAC,UAA+C;AACtD,yCAAA,MAAM,OAAO;AAAA,EAC5B;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACW,sBAAA;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IACJ;AAAA,EAAA;AAIE,QAAA,gBAAgB,CAAC,UAAiD;AAChE,QAAA,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAe;AACrB,YAAM,cAAc,MAAM;AAAA,IAAA;AAAA,EAElC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAAA;AAAA,EAC3E,GACD,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QACpB;AAAA,QACA,MAAM;AAAA,MACV;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IACT;AAAA,IACA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEvC;AAGJ,MAAI,OAAO;AACD,UAAA,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAK,EAAA,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAAA;AAID,SAAA;AACX,CAAC;AACD,SAAS,cAAc;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn, { clsx } from 'clsx';\nimport { Icon } from '../Icon/Icon';\nimport { useId } from '../../hooks/useId';\nimport { useMergedRef } from '../../hooks/useMergedRef';\n\ntype CheckboxBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'children' | 'onChange'> & {\n    /**\n     * Indeterminate state should only be used with sub-checkboxes. The indeterminate state is shown if not all\n     * sub-checkboxes are selected. This only affects the style, changing the icon in the checkbox.\n     */\n    indeterminate?: boolean;\n    /* Whether the checkbox is in an invalid state */\n    invalid?: boolean;\n    /** Label for the checkbox */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\nexport interface UncontrolledCheckboxProps extends CheckboxBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\nexport interface ControlledCheckboxProps extends CheckboxBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type CheckboxProps = UncontrolledCheckboxProps | ControlledCheckboxProps;\n\nexport const Checkbox = React.forwardRef(function Checkbox(props: CheckboxProps, externalRef: React.Ref<HTMLInputElement>) {\n    const { checked, defaultChecked, indeterminate, invalid, label, onChange, ...otherProps } = props;\n    const id = useId(props.id);\n    const ref = useMergedRef<HTMLInputElement>(externalRef);\n\n    const className = cn(\n        'peer h-5 w-5 flex-shrink-0 appearance-none rounded border bg-white text-sm text-white focus-visible:yt-focus enabled:cursor-pointer disabled:cursor-not-allowed',\n        invalid\n            ? {\n                  'border-red-500 checked:border-red-500 checked:bg-red-500 indeterminate:border-red-500 indeterminate:bg-red-500 hover:border-red-700 checked:hover:border-red-700 checked:hover:bg-red-700 indeterminate:hover:border-red-700 indeterminate:hover:bg-red-700':\n                      !props.disabled,\n                  'checked:wcag-red-500/50 indeterminate:wcag-red-500/50 border-red-500/50': props.disabled,\n              }\n            : {\n                  'border-gray-200 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500 hover:border-gray-300 checked:hover:border-blue-700 checked:hover:bg-blue-700 indeterminate:hover:border-blue-700 indeterminate:hover:bg-blue-700':\n                      !props.disabled,\n                  'border-gray-100 opacity-50 checked:border-blue-500 checked:bg-blue-500 indeterminate:border-blue-500 indeterminate:bg-blue-500':\n                      props.disabled,\n              }\n    );\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        onChange?.(event.target.checked);\n    };\n\n    let labelledByProps: Record<string, string> | null = null;\n\n    if (label) {\n        labelledByProps = {\n            'aria-labelledby': `${id}-label`,\n            id,\n        };\n    }\n\n    // the enter keyboard shortcut isn't supported by default, but we want it\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            event.preventDefault();\n            event.currentTarget.click();\n        }\n    };\n\n    React.useEffect(() => {\n        if (ref.current) {\n            (ref.current as HTMLInputElement).indeterminate = Boolean(indeterminate);\n        }\n    }, [ref, indeterminate]);\n\n    const element = (\n        <div\n            className={clsx(\n                'relative inline-flex w-fit',\n                {\n                    'mt-[0.1rem]': !label,\n                    'self-start': !!label,\n                },\n                props.className\n            )}\n            data-taco=\"checkbox-input-wrapper\">\n            <input\n                {...otherProps}\n                {...labelledByProps}\n                aria-invalid={invalid}\n                checked={checked}\n                className={className}\n                data-taco=\"checkbox\"\n                defaultChecked={defaultChecked}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                ref={ref}\n                type=\"checkbox\"\n            />\n            <Icon\n                aria-hidden\n                className=\"pointer-events-none invisible absolute !h-5 !w-5 peer-checked:visible peer-indeterminate:visible\"\n                color=\"white\"\n                data-taco=\"checkbox-icon\"\n                name={indeterminate ? 'line' : 'tick'}\n            />\n        </div>\n    );\n\n    if (label) {\n        const labelContainerClassName = cn('flex items-center gap-2', {\n            'cursor-not-allowed text-gray-300': props.disabled,\n        });\n\n        return (\n            <span className={labelContainerClassName} data-taco=\"checkbox-container\">\n                {element}\n                <label\n                    className={clsx(props.disabled ? 'cursor-not-allowed text-gray-300' : 'cursor-pointer')}\n                    htmlFor={id}\n                    id={`${id}-label`}>\n                    {label}\n                </label>\n            </span>\n        );\n    }\n\n    return element;\n});\nCheckbox.displayName = 'Checkbox';\n"],"names":["Checkbox"],"mappings":";;;;;AAqCO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,aAA0C;AACvH,QAAM,EAAE,SAAS,gBAAgB,eAAe,SAAS,OAAO,UAAU,GAAG,WAAA,IAAe;AAC5F,QAAM,KAAK,MAAM,MAAM,EAAE;AACzB,QAAM,MAAM,aAA+B,WAAW;AAEtD,QAAM,YAAY;AAAA,IACd;AAAA,IACA,UACM;AAAA,MACI,+PACI,CAAC,MAAM;AAAA,MACX,2EAA2E,MAAM;AAAA,IAAA,IAErF;AAAA,MACI,yQACI,CAAC,MAAM;AAAA,MACX,kIACI,MAAM;AAAA,IAAA;AAAA,EACd;AAGV,QAAM,eAAe,CAAC,UAA+C;AACjE,eAAW,MAAM,OAAO,OAAO;AAAA,EACnC;AAEA,MAAI,kBAAiD;AAErD,MAAI,OAAO;AACP,sBAAkB;AAAA,MACd,mBAAmB,GAAG,EAAE;AAAA,MACxB;AAAA,IAAA;AAAA,EAER;AAGA,QAAM,gBAAgB,CAAC,UAAiD;AACpE,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,eAAA;AACN,YAAM,cAAc,MAAA;AAAA,IACxB;AAAA,EACJ;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,IAAI,SAAS;AACZ,UAAI,QAA6B,gBAAgB,QAAQ,aAAa;AAAA,IAC3E;AAAA,EACJ,GAAG,CAAC,KAAK,aAAa,CAAC;AAEvB,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,WAAW;AAAA,QACP;AAAA,QACA;AAAA,UACI,eAAe,CAAC;AAAA,UAChB,cAAc,CAAC,CAAC;AAAA,QAAA;AAAA,QAEpB,MAAM;AAAA,MAAA;AAAA,MAEV,aAAU;AAAA,IAAA;AAAA,IACV,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACH,GAAG;AAAA,QACJ,gBAAc;AAAA,QACd;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV;AAAA,QACA,UAAU;AAAA,QACV,WAAW;AAAA,QACX;AAAA,QACA,MAAK;AAAA,MAAA;AAAA,IAAA;AAAA,IAET,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,eAAW;AAAA,QACX,WAAU;AAAA,QACV,OAAM;AAAA,QACN,aAAU;AAAA,QACV,MAAM,gBAAgB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACnC;AAIR,MAAI,OAAO;AACP,UAAM,0BAA0B,GAAG,2BAA2B;AAAA,MAC1D,oCAAoC,MAAM;AAAA,IAAA,CAC7C;AAED,+CACK,QAAA,EAAK,WAAW,yBAAyB,aAAU,wBAC/C,SACD,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAW,KAAK,MAAM,WAAW,qCAAqC,gBAAgB;AAAA,QACtF,SAAS;AAAA,QACT,IAAI,GAAG,EAAE;AAAA,MAAA;AAAA,MACR;AAAA,IAAA,CAET;AAAA,EAER;AAEA,SAAO;AACX,CAAC;AACD,SAAS,cAAc;"}

package/dist/components/Combobox/Combobox.cjs

@@ -34,7 +34,7 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
   const { texts } = Localization.useLocalization();
   const selectDimensions = useBoundingClientRectListener.useBoundingClientRectListener(internalRef);
   const className = cn(
-    "inline-flex relative  w-full",
+    "relative inline-flex w-full",
     {
       "yt-combobox--inline": props.inline
     },
@@ -53,9 +53,8 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
           className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
           icon: popover$1.open ? "chevron-up" : "chevron-down",
           onClick: () => {
-            var _a;
             popover$1.onOpenChange(true);
-            (_a = input.ref.current) == null ? void 0 : _a.focus();
+            input.ref.current?.focus();
           },
           tabIndex: -1
         }
@@ -67,9 +66,8 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
           disabled: props.readOnly || props.disabled,
           dialog,
           onFocus: (event) => {
-            var _a;
             event.preventDefault();
-            (_a = input.ref.current) == null ? void 0 : _a.focus();
+            input.ref.current?.focus();
           },
           ref: button.ref,
           tabIndex: -1,
@@ -91,7 +89,7 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
       {
         ...list,
         className: cn("max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500"),
-        style: { minWidth: selectDimensions == null ? void 0 : selectDimensions.width },
+        style: { minWidth: selectDimensions?.width },
         tabIndex: popover$1.open ? 0 : -1
       }
     ))

package/dist/components/Combobox/Combobox.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative  w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACjE,QAAA,EAAE,UAAU,QAAQ,OAAOC,SAAAA,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEjF,QAAA,cAAcH,iBAAM,OAAO,IAAI;AAC/B,QAAA,EAAE,MAAM,IAAII,6BAAgB;AAC5B,QAAA,mBAAmBC,4DAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,EACJ;AAGI,SAAAL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAC7E,GAAAA,iCAAA;AAAA,IAACM,MAAA;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAA;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;;AACXA,sBAAQ,aAAa,IAAI;AACnB,wBAAA,IAAI,YAAJ,mBAAa;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAA;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;;AAErD,kBAAM,eAAe;AACf,wBAAA,IAAI,YAAJ,mBAAa;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAEZ,GACCP,iCAAA,cAAAQ,QAAA,QAAiB,MAAjB,EAAuB,GAAGN,UACvB,GAAAF,iCAAA,cAACQ,QAAiB,QAAA,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAO;AAAA,MAC7D,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACXR,iCAAA,cAAAQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAClC,GAAAR,iCAAA;AAAA,MAACS,eAAA;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,qDAAkB,MAAM;AAAA,QAC3C,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAErC,CAAA;AAAA,EAER,CAAA,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Combobox.cjs","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["React","Combobox","popover","useCombobox","useLocalization","useBoundingClientRectListener","Input","LegacyIconButton","PopoverPrimitive","ScrollableList"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEO,MAAM,WAAWA,iBAAM,WAAW,SAASC,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAA,SAAOC,WAAS,SAASC,YAAAA,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAcH,iBAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAUI,6BAAA;AAClB,QAAM,mBAAmBC,8BAAAA,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACIL,iCAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7EA,iCAAA;AAAA,IAACM,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/BN,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAML,UAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACXA,sBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACAF,iCAAA;AAAA,QAACO,WAAAA;AAAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZP,iCAAA,cAACQ,QAAAA,QAAiB,MAAjB,EAAuB,GAAGN,UAAA,GACvBF,iCAAA,cAACQ,QAAAA,QAAiB,QAAjB,MACGR,iCAAA;AAAA,IAACQ,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZR,iCAAA,cAACQ,QAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClCR,iCAAA;AAAA,MAACS,eAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAUP,UAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Combobox/Combobox.d.ts

@@ -44,7 +44,7 @@ interface InlineComboboxProps extends ComboboxBaseProps {
     inline: boolean;
 }
 interface DialogComboboxProps extends ComboboxBaseProps {
-    dialog: (props: Partial<DialogProps>) => JSX.Element;
+    dialog: (props: Partial<DialogProps>) => React.JSX.Element;
     inline?: never;
 }
 export type ComboboxProps = InlineComboboxProps | DialogComboboxProps;

package/dist/components/Combobox/Combobox.js

@@ -15,7 +15,7 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
   const { texts } = useLocalization();
   const selectDimensions = useBoundingClientRectListener(internalRef);
   const className = cn(
-    "inline-flex relative  w-full",
+    "relative inline-flex w-full",
     {
       "yt-combobox--inline": props.inline
     },
@@ -34,9 +34,8 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
           className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
           icon: popover.open ? "chevron-up" : "chevron-down",
           onClick: () => {
-            var _a;
             popover.onOpenChange(true);
-            (_a = input.ref.current) == null ? void 0 : _a.focus();
+            input.ref.current?.focus();
           },
           tabIndex: -1
         }
@@ -48,9 +47,8 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
           disabled: props.readOnly || props.disabled,
           dialog,
           onFocus: (event) => {
-            var _a;
             event.preventDefault();
-            (_a = input.ref.current) == null ? void 0 : _a.focus();
+            input.ref.current?.focus();
           },
           ref: button.ref,
           tabIndex: -1,
@@ -72,7 +70,7 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
       {
         ...list,
         className: cn("max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500"),
-        style: { minWidth: selectDimensions == null ? void 0 : selectDimensions.width },
+        style: { minWidth: selectDimensions?.width },
         tabIndex: popover.open ? 0 : -1
       }
     ))

package/dist/components/Combobox/Combobox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'inline-flex relative  w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAkEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACjE,QAAA,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEjF,QAAA,cAAc,MAAM,OAAO,IAAI;AAC/B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAC5B,QAAA,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IACjC;AAAA,IACA;AAAA,EACJ;AAGI,SAAA,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAC7E,GAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;;AACX,oBAAQ,aAAa,IAAI;AACnB,wBAAA,IAAI,YAAJ,mBAAa;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;;AAErD,kBAAM,eAAe;AACf,wBAAA,IAAI,YAAJ,mBAAa;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAEZ,GACC,sBAAA,cAAAC,QAAiB,MAAjB,EAAuB,GAAG,QACvB,GAAA,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAO;AAAA,MAC7D,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACX,sBAAA,cAAAA,QAAiB,OAAjB,EAAuB,cAAc,MAClC,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,qDAAkB,MAAM;AAAA,QAC3C,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAErC,CAAA;AAAA,EAER,CAAA,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/Combobox/Combobox.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\n\nimport { Input, InputProps } from '../Input/Input';\nimport { useCombobox } from './useCombobox';\nimport { ScrollableList, ScrollableListItem, ScrollableListItemValue } from '../Listbox/ScrollableList';\nimport { useBoundingClientRectListener } from '../../hooks/useBoundingClientRectListener';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { useLocalization } from '../Provider/Localization';\nimport './Combobox.css';\n\nexport type ComboboxTexts = {\n    /* Tooltip shown for the dialog button */\n    tooltip: string;\n};\n\nexport type ComboboxItem = ScrollableListItem;\nexport type ComboboxValue = ScrollableListItemValue;\n\ntype ComboboxBaseProps = Omit<InputProps, 'defaultValue' | 'button' | 'onChange' | 'value'> & {\n    /** Array of options in combobox */\n    data?: ComboboxItem[];\n    /**\n     * Initial value of the input in combobox.\n     * This is used when combobox is mounted, if no value is provided.\n     * *Note* that combobox is a controlled component, setting this will also trigger the `onChange` event\n     */\n    defaultValue?: ComboboxValue;\n    /** Set what value should have an empty option in combobox */\n    emptyValue?: ComboboxValue;\n    /** Draws attention to the combobox by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /** Displays loading state in listbox */\n    loading?: boolean;\n    /**\n     * Handler called when user chooses an option from the provided suggestions.\n     * Suggestions will be calculated based on the input value.\n     * There are two ways to choose an option: either click on it, or navigate using keyboard and press `enter`\n     */\n    onChange?: React.ChangeEventHandler<HTMLInputElement>;\n    /** Handler called when the user enters a query **/\n    onSearch?: (query: string) => void | Promise<void>;\n    /** Value of the input in combobox */\n    value?: ComboboxValue;\n    /** Custom renderer for displaying the selected value in the input field. If not provided, defaults to displaying the option's value. */\n    valueRenderer?: (option: ComboboxItem | undefined) => string;\n};\n\ninterface InlineComboboxProps extends ComboboxBaseProps {\n    dialog?: never;\n    /**\n     * Combobox will display its data when input is clicked/focused, even if the input is empty.\n     * *Note* that default combobox will display matching data only when user starts typing in input.\n     */\n    inline: boolean; // Example 3 on https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html\n}\n\ninterface DialogComboboxProps extends ComboboxBaseProps {\n    dialog: (props: Partial<DialogProps>) => React.JSX.Element;\n    inline?: never;\n}\n\nexport type ComboboxProps = InlineComboboxProps | DialogComboboxProps;\n\nexport const Combobox = React.forwardRef(function Combobox(props: ComboboxProps, forwardedRef: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, dialog, style, ...otherProps } = props;\n    const { combobox, button, input, popover, list } = useCombobox(otherProps, forwardedRef);\n\n    const internalRef = React.useRef(null);\n    const { texts } = useLocalization();\n    const selectDimensions = useBoundingClientRectListener(internalRef);\n    const className = cn(\n        'relative inline-flex w-full',\n        {\n            'yt-combobox--inline': props.inline,\n        },\n        externalClassName\n    );\n\n    return (\n        <div {...combobox} className={className} data-taco=\"combobox\" style={style} ref={internalRef}>\n            <Input\n                {...input}\n                autoComplete=\"off\"\n                button={\n                    props.readOnly ? undefined : props.inline ? (\n                        <LegacyIconButton\n                            // In case of inline combobox, this icon button acts only as visual chevron representation,\n                            // so should be taken out of screen reader scope.\n                            aria-hidden\n                            appearance=\"discrete\"\n                            className=\"!border-l-0 focus:!border-none focus:!shadow-none active:!border-none\"\n                            icon={popover.open ? 'chevron-up' : 'chevron-down'}\n                            onClick={() => {\n                                popover.onOpenChange(true);\n                                input.ref.current?.focus();\n                            }}\n                            tabIndex={-1}\n                        />\n                    ) : dialog ? (\n                        <LegacyIconButton\n                            aria-label={texts.combobox.tooltip}\n                            icon=\"list-search\"\n                            disabled={props.readOnly || props.disabled}\n                            dialog={dialog}\n                            onFocus={(event: React.FocusEvent<HTMLButtonElement>) => {\n                                // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element\n                                event.preventDefault();\n                                input.ref.current?.focus();\n                            }}\n                            ref={button.ref}\n                            tabIndex={-1}\n                            tooltip={texts.combobox.tooltip}\n                        />\n                    ) : undefined\n                }\n            />\n            <PopoverPrimitive.Root {...popover}>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner\n                        align=\"start\"\n                        anchor={internalRef}\n                        collisionAvoidance={{ side: 'flip', fallbackAxisSide: 'none' }}\n                        side=\"bottom\"\n                        sideOffset={4}>\n                        <PopoverPrimitive.Popup initialFocus={false}>\n                            <ScrollableList\n                                {...list}\n                                className={cn('max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)] !border-blue-500')}\n                                style={{ minWidth: selectDimensions?.width }}\n                                tabIndex={popover.open ? 0 : -1}\n                            />\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </div>\n    );\n});\n"],"names":["Combobox","PopoverPrimitive"],"mappings":";;;;;;;;;;AAkEO,MAAM,WAAW,MAAM,WAAW,SAASA,UAAS,OAAsB,cAA2C;AACxH,QAAM,EAAE,WAAW,mBAAmB,QAAQ,OAAO,GAAG,eAAe;AACvE,QAAM,EAAE,UAAU,QAAQ,OAAO,SAAS,SAAS,YAAY,YAAY,YAAY;AAEvF,QAAM,cAAc,MAAM,OAAO,IAAI;AACrC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,mBAAmB,8BAA8B,WAAW;AAClE,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,uBAAuB,MAAM;AAAA,IAAA;AAAA,IAEjC;AAAA,EAAA;AAGJ,SACI,sBAAA,cAAC,SAAK,GAAG,UAAU,WAAsB,aAAU,YAAW,OAAc,KAAK,YAAA,GAC7E,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,cAAa;AAAA,MACb,QACI,MAAM,WAAW,SAAY,MAAM,SAC/B,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UAGG,eAAW;AAAA,UACX,YAAW;AAAA,UACX,WAAU;AAAA,UACV,MAAM,QAAQ,OAAO,eAAe;AAAA,UACpC,SAAS,MAAM;AACX,oBAAQ,aAAa,IAAI;AACzB,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,UAAU;AAAA,QAAA;AAAA,MAAA,IAEd,SACA,sBAAA;AAAA,QAAC;AAAA,QAAA;AAAA,UACG,cAAY,MAAM,SAAS;AAAA,UAC3B,MAAK;AAAA,UACL,UAAU,MAAM,YAAY,MAAM;AAAA,UAClC;AAAA,UACA,SAAS,CAAC,UAA+C;AAErD,kBAAM,eAAA;AACN,kBAAM,IAAI,SAAS,MAAA;AAAA,UACvB;AAAA,UACA,KAAK,OAAO;AAAA,UACZ,UAAU;AAAA,UACV,SAAS,MAAM,SAAS;AAAA,QAAA;AAAA,MAAA,IAE5B;AAAA,IAAA;AAAA,EAAA,GAGZ,sBAAA,cAACC,QAAiB,MAAjB,EAAuB,GAAG,QAAA,GACvB,sBAAA,cAACA,QAAiB,QAAjB,MACG,sBAAA;AAAA,IAACA,QAAiB;AAAA,IAAjB;AAAA,MACG,OAAM;AAAA,MACN,QAAQ;AAAA,MACR,oBAAoB,EAAE,MAAM,QAAQ,kBAAkB,OAAA;AAAA,MACtD,MAAK;AAAA,MACL,YAAY;AAAA,IAAA;AAAA,IACZ,sBAAA,cAACA,QAAiB,OAAjB,EAAuB,cAAc,MAAA,GAClC,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,WAAW,GAAG,2EAA2E;AAAA,QACzF,OAAO,EAAE,UAAU,kBAAkB,MAAA;AAAA,QACrC,UAAU,QAAQ,OAAO,IAAI;AAAA,MAAA;AAAA,IAAA,CAErC;AAAA,EAAA,CAER,CACJ,CACJ;AAER,CAAC;"}

package/dist/components/Combobox/useCombobox.cjs

@@ -85,7 +85,7 @@ const useCombobox = (props, ref) => {
       return;
     }
     const option = data[index];
-    if ((option == null ? void 0 : option.value) === value) {
+    if (option?.value === value) {
       setInputValue(convertToInputValue(value));
     } else {
       setInputValueByIndex(index, event);
@@ -157,7 +157,7 @@ const useCombobox = (props, ref) => {
     }
     if (onChange && event.target.value !== convertToInputValue(value)) {
       event.detail = util.sanitizeItem(item);
-      const parents = util.getOptionParents(flattenedData, item == null ? void 0 : item.path);
+      const parents = util.getOptionParents(flattenedData, item?.path);
       if (parents !== null && parents.length > 0) {
         event.detail.parents = parents;
       }