@economic/taco 8.1.3 → 8.2.0-alpha-core-actions.0

package/dist/components/Banner/Banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { IconButton } from '../IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <IconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner"],"mappings":";;;;;AAoBO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAA,sBAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzC,cAAc,KAAK,GACnB,UACA,UACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;"}
+{"version":3,"file":"Banner.js","sources":["../../../src/components/Banner/Banner.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { State } from '../../types';\nimport { getBannerIcon } from './util';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\nimport { useLocalization } from '../Provider/Localization';\n\nexport type BannerProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** Content can be any react element, for e.g. a `div` */\n    children: React.ReactNode;\n    /** State will change the icon displayed in banner */\n    state: State;\n    onClose?: () => void;\n};\n\nexport type BannerTexts = {\n    /** Aria-label for the close icon button of banner */\n    close: string;\n};\n\nexport const Banner = React.forwardRef(function Banner(props: BannerProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, state, onClose } = props;\n    const { texts } = useLocalization();\n    const className = cn('bg-white relative flex items-center gap-2 py-2 px-4 leading-6 shadow-md z-10', props.className);\n\n    return (\n        <div className={className} data-taco=\"banner\" ref={ref}>\n            {getBannerIcon(state)}\n            {children}\n            {onClose ? (\n                <LegacyIconButton\n                    aria-label={texts.banner.close}\n                    className=\"-mr-2 ml-auto self-start\"\n                    icon=\"close\"\n                    appearance=\"discrete\"\n                    onClick={onClose}\n                />\n            ) : null}\n        </div>\n    );\n});\n"],"names":["Banner"],"mappings":";;;;;AAoBO,MAAM,SAAS,MAAM,WAAW,SAASA,QAAO,OAAoB,KAAgC;AACvG,QAAM,EAAE,UAAU,OAAO,QAAY,IAAA;AAC/B,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,YAAY,GAAG,gFAAgF,MAAM,SAAS;AAGhH,SAAA,sBAAA,cAAC,OAAI,EAAA,WAAsB,aAAU,UAAS,OACzC,cAAc,KAAK,GACnB,UACA,UACG,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAY,MAAM,OAAO;AAAA,MACzB,WAAU;AAAA,MACV,MAAK;AAAA,MACL,YAAW;AAAA,MACX,SAAS;AAAA,IAAA;AAAA,MAEb,IACR;AAER,CAAC;"}

package/dist/components/Calendar/Calendar.cjs

@@ -6,7 +6,7 @@ const dateFns = require("date-fns");
 const range = require("lodash/range");
 const cn = require("clsx");
 const Localization = require("../Provider/Localization.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Tooltip = require("../Tooltip/Tooltip.cjs");
 ;/* empty css               */
 function _interopNamespaceDefault(e) {
@@ -84,7 +84,7 @@ const Calendar = (props) => {
       className,
       components: {
         NextMonthButton: (props2) => /* @__PURE__ */ React__namespace.createElement(Tooltip.Tooltip, { title: texts.calendar.actions.nextMonth }, /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
+          IconButton.LegacyIconButton,
           {
             appearance: "discrete",
             icon: "chevron-right",
@@ -95,7 +95,7 @@ const Calendar = (props) => {
           }
         )),
         PreviousMonthButton: (props2) => /* @__PURE__ */ React__namespace.createElement(Tooltip.Tooltip, { title: texts.calendar.actions.previousMonth }, /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
+          IconButton.LegacyIconButton,
           {
             appearance: "discrete",
             icon: "chevron-left",

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 { IconButton } from '../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                            <IconButton\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                            <IconButton\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","IconButton"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AA2CA,MAAM,cAAc,CAAC,EAAE,mBAA4D;AACzE,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAElC,QAAM,2BAA2B,MAAY;AACnCC,UAAAA,6BAAY,KAAK;AAGvBA,WAAM,SAAS,EAAE;AACjBA,WAAM,WAAW,CAAC;AAClBA,WAAM,WAAW,CAAC;AAElB,iBAAaA,MAAK;AAAA,EACtB;AAEI,SAAAC,iCAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,WAAU;AAAA,MACV,SAAS;AAAA,MACT,aAAU;AAAA,IAAA;AAAA,IACT,MAAM,SAAS,QAAQ;AAAA,EAC5B;AAER;AAEA,MAAM,iBAAiB,CAAC,UAAyB;AACvC,QAAA,EAAE,MAAM,IAAIF,6BAAgB;AAC5B,QAAA,EAAE,UAAU,MAAA,IAAU;AAGxB,SAAAE,iCAAA,cAAC,YAAO,WAAU,YAAW,MAAK,SAAQ,UAAoB,SACzD,MAAM,SAAS,OAAO,IAAI,CAAC,OAAO,MAC/BA,iCAAA,cAAC,UAAO,EAAA,KAAK,OAAO,OAAO,EAAA,GACtB,KACL,CACH,CACL;AAER;AAEA,MAAM,4BAAY,KAAK;AACvB,MAAM,sBAAsBC,QAAAA,YAAYC,QAAAA,SAAS,OAAO,EAAE,CAAC;AAC3D,MAAM,oBAAoBC,QAAAA,UAAUC,QAAAA,SAAS,OAAO,EAAE,CAAC;AAEvD,MAAM,gBAAgB,CAAC,UAAyB;AACtC,QAAA,EAAE,UAAU,MAAA,IAAU;AAEtB,QAAA,QAAQJ,iBAAM,QAAQ,MAAM;AAC9B,WAAO,MAAM,oBAAoB,YAAA,GAAe,kBAAkB,gBAAgB,CAAC;AAAA,EACvF,GAAG,EAAE;AAGD,SAAAA,iCAAA,cAAC,YAAO,WAAU,YAAW,MAAK,QAAO,UAAoB,SACxD,MAAM,IAAI,UACNA,iCAAA,cAAA,UAAA,EAAO,KAAK,MAAM,OAAO,QACrB,OAAO,IAAI,CAChB,CACH,CACL;AAER;AAEa,MAAA,WAAW,CAAC,UAAyB;AAC9C,QAAM,EAAE,UAAU,cAAc,OAAO,cAAc,GAAG,eAAe;AACjE,QAAA,CAAC,cAAc,eAAe,IAAIA,iBAAM,SAAS,SAAa,oBAAA,MAAM;AACpE,QAAA,EAAE,MAAM,IAAIF,6BAAgB;AAElCE,mBAAM,UAAU,MAAM;AAClB,QAAI,iBAAiB,OAAO;AACR,sBAAA,SAAa,oBAAA,MAAM;AAAA,IAAA;AAAA,EACvC,GACD,CAAC,KAAK,CAAC;AAEV,QAAM,YAAY,GAAG,sCAAsC,WAAW,SAAS;AAE/E,QAAM,eAAkD,CAAC,GAAG,MAAM,WAAW,MAAM;AAC3E,QAAA,UAAU,WAAW,UAAU,UAAU;AACzC;AAAA,IAAA;AAGJ,iBAAa,MAAM,CAA0C;AAAA,EACjE;AAGI,SAAAA,iCAAA,cAAC,OAAI,EAAA,aAAU,WACX,GAAAA,iCAAA;AAAA,IAACK,eAAA;AAAA,IAAA;AAAA,MACG,eAAc;AAAA,MACd;AAAA,MACA,YAAY;AAAA,QACR,iBAAiB,CAAAC,WACbN,iCAAA,cAACO,QAAAA,WAAQ,OAAO,MAAM,SAAS,QAAQ,UACnC,GAAAP,iCAAA;AAAA,UAACQ,WAAA;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASF,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ,qBAAqB,CAAAA,WACjBN,iCAAA,cAACO,QAAAA,WAAQ,OAAO,MAAM,SAAS,QAAQ,cACnC,GAAAP,iCAAA;AAAA,UAACQ,WAAA;AAAA,UAAA;AAAA,YACG,YAAW;AAAA,YACX,MAAK;AAAA,YACL,cAAY,MAAM,SAAS,QAAQ;AAAA,YACnC,SAASF,OAAM;AAAA,YACf,SAAO;AAAA,YACP,aAAU;AAAA,UAAA;AAAA,QAAA,CAElB;AAAA,QAEJ;AAAA,QACA;AAAA,QACA,UAAU,MACLN,iCAAA,cAAA,SAAA,MACIA,iCAAA,cAAA,MAAA,MACI,MAAM,SAAS,cAAc,IAAI,CAAC,SAAS,UAAU;AAClD,gBAAM,QAAQ,MAAM,SAAS,YAAY,MAAM,SAAS,SAAS,KAAK;AAElE,iBAAAA,iCAAA,cAAC,MAAG,EAAA,KAAK,SAAS,cAAY,OAAO,WAAU,iBAAgB,OAAO,MAAA,GACjE,OACL;AAAA,QAAA,CAEP,CACL,CACJ;AAAA,MAER;AAAA,MACA,UAAU;AAAA,MACV,UAAU;AAAA,MACV,QAASA,iCAAA,cAAA,aAAA,EAAY,aAA4B,CAAA;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;;"}
+{"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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"}

package/dist/components/Calendar/Calendar.js

@@ -4,7 +4,7 @@ import { startOfYear, endOfYear, subYears, addYears } from "date-fns";
 import range from "lodash/range";
 import cn from "clsx";
 import { useLocalization } from "../Provider/Localization.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { Tooltip } from "../Tooltip/Tooltip.js";
 /* empty css             */
 const TodayButton = ({ handleChange }) => {
@@ -65,7 +65,7 @@ const Calendar = (props) => {
       className,
       components: {
         NextMonthButton: (props2) => /* @__PURE__ */ React.createElement(Tooltip, { title: texts.calendar.actions.nextMonth }, /* @__PURE__ */ React.createElement(
-          IconButton,
+          LegacyIconButton,
           {
             appearance: "discrete",
             icon: "chevron-right",
@@ -76,7 +76,7 @@ const Calendar = (props) => {
           }
         )),
         PreviousMonthButton: (props2) => /* @__PURE__ */ React.createElement(Tooltip, { title: texts.calendar.actions.previousMonth }, /* @__PURE__ */ React.createElement(
-          IconButton,
+          LegacyIconButton,
           {
             appearance: "discrete",
             icon: "chevron-left",

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 { IconButton } from '../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                            <IconButton\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                            <IconButton\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 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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"}

package/dist/components/Card/Card.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const cn = require("clsx");
-const IconButton = require("../IconButton/IconButton.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Truncate = require("../Truncate/Truncate.cjs");
 ;/* empty css            */
 const Localization = require("../Provider/Localization.cjs");
@@ -40,7 +40,7 @@ const Card = React__namespace.forwardRef(function Card2(props, ref) {
   const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", 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.IconButton,
+    IconButton.LegacyIconButton,
     {
       "aria-label": localization.texts.card.menu,
       icon: "ellipsis-horizontal",

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 { IconButton } from '../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                        <IconButton\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","IconButton"],"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>) => 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;;"}

package/dist/components/Card/Card.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import cn from "clsx";
-import { IconButton } from "../IconButton/IconButton.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { Truncate } from "../Truncate/Truncate.js";
 /* empty css          */
 import { useLocalization } from "../Provider/Localization.js";
@@ -21,7 +21,7 @@ const Card = React.forwardRef(function Card2(props, ref) {
   const cardClassName = cn("bg-white flex flex-col rounded-lg pt-4 border border-solid border-gray-200", 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(
-    IconButton,
+    LegacyIconButton,
     {
       "aria-label": localization.texts.card.menu,
       icon: "ellipsis-horizontal",

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 { IconButton } from '../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                        <IconButton\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>) => 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;"}

package/dist/components/Combobox/Combobox.cjs

@@ -7,7 +7,7 @@ const Input = require("../Input/Input.cjs");
 const useCombobox = require("./useCombobox.cjs");
 const ScrollableList = require("../Listbox/ScrollableList.cjs");
 const useBoundingClientRectListener = require("../../hooks/useBoundingClientRectListener.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 const Localization = require("../Provider/Localization.cjs");
 ;/* empty css               */
 function _interopNamespaceDefault(e) {
@@ -46,7 +46,7 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
       ...input,
       autoComplete: "off",
       button: props.readOnly ? void 0 : props.inline ? /* @__PURE__ */ React__namespace.createElement(
-        IconButton.IconButton,
+        IconButton.LegacyIconButton,
         {
           "aria-hidden": true,
           appearance: "discrete",
@@ -60,7 +60,7 @@ const Combobox = React__namespace.forwardRef(function Combobox2(props, forwarded
           tabIndex: -1
         }
       ) : dialog ? /* @__PURE__ */ React__namespace.createElement(
-        IconButton.IconButton,
+        IconButton.LegacyIconButton,
         {
           "aria-label": texts.combobox.tooltip,
           icon: "list-search",

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 { IconButton } from '../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                        <IconButton\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                        <IconButton\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","IconButton","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>) => 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;;"}

package/dist/components/Combobox/Combobox.js

@@ -5,7 +5,7 @@ import { Input } from "../Input/Input.js";
 import { useCombobox } from "./useCombobox.js";
 import { ScrollableList } from "../Listbox/ScrollableList.js";
 import { useBoundingClientRectListener } from "../../hooks/useBoundingClientRectListener.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 import { useLocalization } from "../Provider/Localization.js";
 /* empty css             */
 const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
@@ -27,7 +27,7 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
       ...input,
       autoComplete: "off",
       button: props.readOnly ? void 0 : props.inline ? /* @__PURE__ */ React.createElement(
-        IconButton,
+        LegacyIconButton,
         {
           "aria-hidden": true,
           appearance: "discrete",
@@ -41,7 +41,7 @@ const Combobox = React.forwardRef(function Combobox2(props, forwardedRef) {
           tabIndex: -1
         }
       ) : dialog ? /* @__PURE__ */ React.createElement(
-        IconButton,
+        LegacyIconButton,
         {
           "aria-label": texts.combobox.tooltip,
           icon: "list-search",

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 { IconButton } from '../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                        <IconButton\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                        <IconButton\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>) => 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;"}

package/dist/components/Datepicker/Datepicker.cjs

@@ -7,7 +7,7 @@ const Calendar = require("../Calendar/Calendar.cjs");
 const Input = require("../Input/Input.cjs");
 const Localization = require("../Provider/Localization.cjs");
 const useDatepicker = require("./useDatepicker.cjs");
-const IconButton = require("../IconButton/IconButton.cjs");
+const IconButton = require("../LegacyComponents/IconButton/IconButton.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -70,7 +70,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
         popover.Popover.Trigger,
         {
           render: /* @__PURE__ */ React__namespace.createElement(
-            IconButton.IconButton,
+            IconButton.LegacyIconButton,
             {
               "aria-label": texts.datepicker.expand,
               "data-taco": "toggle-calendar-button",

package/dist/components/Datepicker/Datepicker.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","IconButton","Calendar"],"mappings":"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"}
+{"version":3,"file":"Datepicker.cjs","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["React","PopoverPrimitive","Datepicker","useDatepicker","useLocalization","Input","LegacyIconButton","Calendar"],"mappings":"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"}

package/dist/components/Datepicker/Datepicker.js

@@ -5,7 +5,7 @@ import { Calendar } from "../Calendar/Calendar.js";
 import { Input } from "../Input/Input.js";
 import { useLocalization } from "../Provider/Localization.js";
 import { useDatepicker } from "./useDatepicker.js";
-import { IconButton } from "../IconButton/IconButton.js";
+import { LegacyIconButton } from "../LegacyComponents/IconButton/IconButton.js";
 const PopoverArrow = () => /* @__PURE__ */ React.createElement(Popover.Arrow, { className: "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180" }, /* @__PURE__ */ React.createElement("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none" }, /* @__PURE__ */ React.createElement(
   "path",
   {
@@ -51,7 +51,7 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
         Popover.Trigger,
         {
           render: /* @__PURE__ */ React.createElement(
-            IconButton,
+            LegacyIconButton,
             {
               "aria-label": texts.datepicker.expand,
               "data-taco": "toggle-calendar-button",

package/dist/components/Datepicker/Datepicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <IconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}
+{"version":3,"file":"Datepicker.js","sources":["../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Popover as PopoverPrimitive } from '@base-ui/react/popover';\nimport cn from 'clsx';\n\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\nimport { Input, InputProps } from '../Input/Input';\nimport { useLocalization } from '../Provider/Localization';\nimport { useDatepicker } from './useDatepicker';\nimport { LegacyIconButton } from '../LegacyComponents/IconButton/IconButton';\n\nexport type DatepickerTexts = {\n    /** Aria-label for calendar */\n    calendar: string;\n    /** Clear button text */\n    clear: string;\n    /**\n     * Aria-label for calendar icon button in the input.\n     * Calendar will open when user clicks this icon button.\n     */\n    expand: string;\n    /** Shortcut heading text */\n    shortcuts: string;\n};\n\nexport type DatePickerShortcut = {\n    onClick: (event: React.MouseEvent) => void;\n    text: string;\n};\n\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\n    /** [Calendar](component:calendar) component associated with the DatePicker */\n    calendar?: CalendarProps;\n    /** List of shortcuts */\n    shortcuts?: DatePickerShortcut[];\n    /** Title for the shortcuts panel */\n    shortcutsText?: string;\n    /** Handler to be called when the clear button is clicked */\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\n    /**\n     * Date value of the calendar.\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\n     */\n    value?: Date | string;\n};\n\nconst PopoverArrow = () => (\n    <PopoverPrimitive.Arrow className=\"data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=right]:left-[-13px] data-[side=top]:bottom-[-8px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n        <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\" fill=\"none\">\n            <path\n                d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                className=\"fill-[canvas] \"\n            />\n            <path\n                d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                className=\"fill-gray-200\"\n            />\n            <path d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\" />\n        </svg>\n    </PopoverPrimitive.Arrow>\n);\n\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\n    const { calendar, input } = useDatepicker(otherProps, ref);\n    const [open, setOpen] = React.useState(false);\n\n    const { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n    const popoverContentRef = React.useRef<HTMLDivElement>(null);\n\n    const handlePopoverClick = React.useCallback((event: React.MouseEvent) => {\n        // Prevent the mouse click event from bubbling up to the parent element\n        event.stopPropagation();\n    }, []);\n\n    const handleCloseAutoFocus = () => input.ref.current;\n\n    const handleOpenAutoFocus = () => {\n        const currentDay: HTMLButtonElement | null = popoverContentRef?.current?.querySelector('td.rdp-selected button') ?? null;\n\n        return currentDay;\n    };\n\n    // Allow preventing default keyDown behaviour if consumer (in our internal case it's Table3) wants to handle it.\n    // We need to have this option for the situations, when Datepicker is used as inline edititng control in Table3,\n    // without it, datepicker cannot be set into detailed editing mode by pressing \"Enter\",\n    // because input.onKeydown is triggering 'focusout', which resets the detailed edititng mode.\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        props.onKeyDown?.(event);\n\n        if (!event.defaultPrevented) {\n            input.onKeyDown?.(event);\n        }\n    };\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <PopoverPrimitive.Root modal=\"trap-focus\" open={open} onOpenChange={setOpen}>\n                <Input\n                    {...input}\n                    onKeyDown={handleInputKeyDown}\n                    button={\n                        input.readOnly ? undefined : (\n                            <PopoverPrimitive.Trigger\n                                render={\n                                    <LegacyIconButton\n                                        aria-label={texts.datepicker.expand}\n                                        data-taco=\"toggle-calendar-button\"\n                                        disabled={input.disabled || input.readOnly}\n                                        icon=\"calendar\"\n                                        tabIndex={-1}\n                                        tooltip={texts.datepicker.calendar}\n                                    />\n                                }\n                            />\n                        )\n                    }\n                />\n\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Positioner sideOffset={8}>\n                        <PopoverPrimitive.Popup\n                            initialFocus={handleOpenAutoFocus}\n                            finalFocus={handleCloseAutoFocus}\n                            className=\"yt-shadow group rounded border border-transparent bg-white p-3 outline-none\">\n                            <PopoverArrow />\n                            <div ref={popoverContentRef} className=\"-m-3 flex\" onClick={handlePopoverClick}>\n                                <Calendar\n                                    {...calendar}\n                                    onChange={(date: Date, event?: React.MouseEvent<Element>) => {\n                                        calendar.onChange(date, event);\n                                        setOpen(false);\n                                    }}\n                                />\n                                {shortcuts && (\n                                    <div className=\"flex flex-col border-l border-gray-100\">\n                                        <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\n                                            {shortcutsText ?? texts.datepicker.shortcuts}\n                                        </span>\n                                        <ul>\n                                            {shortcuts.map(shortcut => (\n                                                <li key={shortcut.text}>\n                                                    <button\n                                                        type=\"button\"\n                                                        className=\"hover:wcag-gray-100 flex w-full items-start px-4 py-1 text-xs\"\n                                                        data-taco=\"datepicker-shortcut\"\n                                                        onClick={event => {\n                                                            shortcut.onClick(event);\n                                                            setOpen(false);\n                                                        }}>\n                                                        {shortcut.text}\n                                                    </button>\n                                                </li>\n                                            ))}\n                                        </ul>\n                                        {handleReset && (\n                                            <button\n                                                type=\"button\"\n                                                className=\"mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                data-taco=\"datepicker-clear-button\"\n                                                onClick={event => {\n                                                    handleReset(event);\n                                                    setOpen(false);\n                                                }}>\n                                                {texts.datepicker.clear}\n                                            </button>\n                                        )}\n                                    </div>\n                                )}\n                            </div>\n                        </PopoverPrimitive.Popup>\n                    </PopoverPrimitive.Positioner>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["PopoverPrimitive","Datepicker"],"mappings":"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"}

package/dist/components/Dialog/components/Content.cjs

@@ -7,7 +7,7 @@ const useDraggable = require("../../../utils/hooks/useDraggable.cjs");
 const mergeRefs = require("../../../utils/mergeRefs.cjs");
 const Context = require("../Context.cjs");
 const Localization = require("../../Provider/Localization.cjs");
-const IconButton = require("../../IconButton/IconButton.cjs");
+const IconButton = require("../../LegacyComponents/IconButton/IconButton.cjs");
 const util = require("../util.cjs");
 const Backdrop = require("../../Backdrop/Backdrop.cjs");
 function _interopNamespaceDefault(e) {
@@ -100,7 +100,7 @@ const Content = React__namespace.forwardRef(function DialogContent(props, forwar
       {
         onClick: dialog$1.onClose,
         render: /* @__PURE__ */ React__namespace.createElement(
-          IconButton.IconButton,
+          IconButton.LegacyIconButton,
           {
             appearance: "discrete",
             "aria-label": texts.dialog.close,