@economic/taco 1.26.2 → 1.28.0

package/dist/esm/packages/taco/src/components/Calendar/Calendar.js

@@ -1,5 +1,6 @@
 import { forwardRef, useState, useEffect, createElement, memo } from 'react';
 import cn from 'classnames';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import ReactDayPicker from 'react-day-picker';
@@ -31,7 +32,7 @@ const Navbar = /*#__PURE__*/memo(({
     onMonthChange(new Date(year.value, month.value));
   };
   return /*#__PURE__*/createElement("div", {
-    className: "mb-2 flex items-center justify-between"
+    className: "mb-1 flex items-center justify-between"
   }, /*#__PURE__*/createElement("form", {
     className: "inline-flex space-x-1"
   }, /*#__PURE__*/createElement("select", {
@@ -50,19 +51,23 @@ const Navbar = /*#__PURE__*/memo(({
   }, years.map(year => /*#__PURE__*/createElement("option", {
     key: year,
     value: year
-  }, String(year))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(IconButton, {
+  }, String(year))))), /*#__PURE__*/createElement("div", null, /*#__PURE__*/createElement(Tooltip, {
+    title: actions.previousMonth
+  }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-left",
     "aria-label": actions.previousMonth,
     onClick: () => onPreviousClick(),
     rounded: true
-  }), /*#__PURE__*/createElement(IconButton, {
+  })), /*#__PURE__*/createElement(Tooltip, {
+    title: actions.nextMonth
+  }, /*#__PURE__*/createElement(IconButton, {
     appearance: "discrete",
     icon: "chevron-right",
     "aria-label": actions.nextMonth,
     onClick: () => onNextClick(),
     rounded: true
-  })));
+  }))));
 });
 const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
   const {
@@ -80,6 +85,7 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
     if (visibleMonth !== value) {
       setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
+    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
   }, [value]);
   const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
@@ -95,7 +101,7 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
     today.setSeconds(0);
     handleChange(today);
   };
-  const className = cn('flex bg-white text-xs p-4', otherProps.className);
+  const className = cn('flex bg-white text-xs p-2', otherProps.className);
   return /*#__PURE__*/createElement("div", {
     "data-taco": "calendar"
   }, /*#__PURE__*/createElement(ReactDayPicker, Object.assign({}, otherProps, {
@@ -105,6 +111,7 @@ const Calendar = /*#__PURE__*/forwardRef(function Calendar(props, ref) {
     locale: locale.substring(0, 2),
     firstDayOfWeek: 1,
     months: texts.calendar.months,
+    weekdaysLong: texts.calendar.weekdays,
     weekdaysShort: texts.calendar.weekdaysShort,
     navbarElement: navProps => /*#__PURE__*/createElement(Navbar, Object.assign({}, navProps, {
       onMonthChange: setVisibleMonth,

package/dist/esm/packages/taco/src/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 cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\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};\n\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-2 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-left\"\n                        aria-label={actions.previousMonth}\n                        onClick={() => onPreviousClick()}\n                        rounded\n                    />\n                    <IconButton\n                        appearance=\"discrete\"\n                        icon=\"chevron-right\"\n                        aria-label={actions.nextMonth}\n                        onClick={() => onNextClick()}\n                        rounded\n                    />\n                </div>\n            </div>\n        );\n    }\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<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\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\n    const className = cn('flex bg-white text-xs p-4', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","IconButton","appearance","icon","previousMonth","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}
+{"version":3,"file":"Calendar.js","sources":["../../../../../../../src/components/Calendar/Calendar.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport ReactDayPicker, { NavbarElementProps, Modifier } from 'react-day-picker';\nimport { useLocalization } from '../Provider/Localization';\nimport './Calendar.css';\nimport { IconButton } from '../IconButton/IconButton';\nimport { Tooltip } from '../Tooltip/Tooltip';\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\n/** @internal */\ntype CustomNavbarElementProps = NavbarElementProps & {\n    onMonthChange: (month: Date) => void;\n    value?: Date;\n};\n\nconst thisYear = new Date().getFullYear();\nconst years: number[] = [];\n\nfor (let i = thisYear - 50; i <= thisYear + 10; i += 1) {\n    years.push(i);\n}\n\nconst Navbar = React.memo(\n    ({ onMonthChange, onNextClick, onPreviousClick, value = new Date() }: CustomNavbarElementProps): JSX.Element => {\n        const {\n            texts: {\n                calendar: { actions, months },\n            },\n        } = useLocalization();\n\n        const handleChange = function handleChange(event) {\n            const { year, month } = event.target.form;\n            onMonthChange(new Date(year.value, month.value));\n        };\n\n        return (\n            <div className=\"mb-1 flex items-center justify-between\">\n                <form className=\"inline-flex space-x-1\">\n                    <select className=\"h-8 px-2\" name=\"month\" onChange={handleChange} value={value.getMonth()}>\n                        {months.map((month, i) => (\n                            <option key={month} value={i}>\n                                {month}\n                            </option>\n                        ))}\n                    </select>\n                    <select className=\"h-8 px-2\" name=\"year\" onChange={handleChange} value={value.getFullYear()}>\n                        {years.map(year => (\n                            <option key={year} value={year}>\n                                {String(year)}\n                            </option>\n                        ))}\n                    </select>\n                </form>\n                <div>\n                    <Tooltip title={actions.previousMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-left\"\n                            aria-label={actions.previousMonth}\n                            onClick={() => onPreviousClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                    <Tooltip title={actions.nextMonth}>\n                        <IconButton\n                            appearance=\"discrete\"\n                            icon=\"chevron-right\"\n                            aria-label={actions.nextMonth}\n                            onClick={() => onNextClick()}\n                            rounded\n                        />\n                    </Tooltip>\n                </div>\n            </div>\n        );\n    }\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<HTMLDivElement>) => void;\n    value?: Date;\n    disabledDays?: Modifier[];\n};\n\nexport const Calendar = React.forwardRef(function Calendar(props: CalendarProps, ref: React.Ref<ReactDayPicker>) {\n    const { onChange: handleChange, value, disabledDays, ...otherProps } = props;\n    const { locale, texts } = useLocalization();\n    const [visibleMonth, setVisibleMonth] = React.useState(value ?? new Date());\n\n    React.useEffect(() => {\n        if (visibleMonth !== value) {\n            setVisibleMonth(value ?? new Date());\n        }\n        // visibleMonth in deps array breaking month switching logic. It should not be in deps array.\n    }, [value]);\n\n    const handleDayClick = (date, modifiers, event) => {\n        if (modifiers.outside || modifiers.disabled) {\n            return;\n        }\n\n        handleChange(date, event);\n    };\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\n    const className = cn('flex bg-white text-xs p-2', otherProps.className);\n\n    return (\n        <div data-taco=\"calendar\">\n            <ReactDayPicker\n                {...otherProps}\n                className={className}\n                month={visibleMonth}\n                selectedDays={value}\n                locale={locale.substring(0, 2)}\n                firstDayOfWeek={1}\n                months={texts.calendar.months}\n                weekdaysLong={texts.calendar.weekdays}\n                weekdaysShort={texts.calendar.weekdaysShort}\n                navbarElement={navProps => <Navbar {...navProps} onMonthChange={setVisibleMonth} value={visibleMonth} />}\n                onDayClick={handleDayClick}\n                onMonthChange={setVisibleMonth}\n                onTodayButtonClick={handleCalendarClickToday}\n                captionElement={() => null}\n                todayButton={texts.calendar.actions.today}\n                numberOfMonths={1}\n                ref={ref}\n                disabledDays={disabledDays}\n            />\n        </div>\n    );\n});\n"],"names":["thisYear","Date","getFullYear","years","i","push","Navbar","React","onMonthChange","onNextClick","onPreviousClick","value","texts","calendar","actions","months","useLocalization","handleChange","event","year","month","target","form","className","name","onChange","getMonth","map","key","String","Tooltip","title","previousMonth","IconButton","appearance","icon","onClick","rounded","nextMonth","Calendar","props","ref","disabledDays","otherProps","locale","visibleMonth","setVisibleMonth","handleDayClick","date","modifiers","outside","disabled","handleCalendarClickToday","today","setHours","setMinutes","setSeconds","cn","ReactDayPicker","selectedDays","substring","firstDayOfWeek","weekdaysLong","weekdays","weekdaysShort","navbarElement","navProps","onDayClick","onTodayButtonClick","captionElement","todayButton","numberOfMonths"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Combobox/useCombobox.js

@@ -1,6 +1,6 @@
 import { useRef, useState, useMemo, useEffect } from 'react';
-import { useMergedRef } from '../../hooks/useMergedRef.js';
 import { v4 } from 'uuid';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
 import debounce from 'lodash-es/debounce';
 import { getId } from '../Listbox/ScrollableList.js';
 import { createCustomKeyboardEvent } from '../../utils/input.js';

package/dist/esm/packages/taco/src/components/Datepicker/Datepicker.js

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { Tooltip } from '../Tooltip/Tooltip.js';
 import { IconButton } from '../IconButton/IconButton.js';
 import { useLocalization } from '../Provider/Localization.js';
 import { Calendar } from '../Calendar/Calendar.js';
@@ -29,10 +30,14 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/createElement(IconButton, {
+    button: /*#__PURE__*/createElement(Tooltip, {
+      title: texts.datepicker.calendar
+    }, /*#__PURE__*/createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
+      tabIndex: -1,
+      className: " border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none",
       popover: props => /*#__PURE__*/createElement(Popover, Object.assign({}, props), /*#__PURE__*/createElement(Popover.Content, null, ({
         close
       }) => /*#__PURE__*/createElement("div", {
@@ -41,8 +46,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
         onChange: (date, event) => {
           calendar.onChange(date, event);
           close();
-        },
-        tabIndex: -1
+        }
       })), shortcuts && /*#__PURE__*/createElement("div", {
         className: "border-grey-300 flex flex-col border-l"
       }, /*#__PURE__*/createElement("span", {
@@ -66,7 +70,7 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
           close();
         }
       }, texts.datepicker.clear)))))
-    })
+    }))
   })));
 });
 Datepicker.displayName = 'Datepicker';

package/dist/esm/packages/taco/src/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 cn from 'classnames';\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';\nimport { Popover } from '../Popover/Popover';\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;\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 { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <IconButton\n                        aria-label={texts.datepicker.expand}\n                        disabled={input.disabled || input.readOnly}\n                        icon=\"calendar\"\n                        popover={props => (\n                            <Popover {...props}>\n                                <Popover.Content>\n                                    {({ close }) => (\n                                        <div className=\"-m-3 flex\">\n                                            <Calendar\n                                                {...calendar}\n                                                onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\n                                                    calendar.onChange(date, event);\n                                                    close();\n                                                }}\n                                                tabIndex={-1}\n                                            />\n                                            {shortcuts && (\n                                                <div className=\"border-grey-300 flex flex-col border-l\">\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-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                                    onClick={event => {\n                                                                        event.persist();\n                                                                        shortcut.onClick(event);\n                                                                        close();\n                                                                    }}>\n                                                                    {shortcut.text}\n                                                                </button>\n                                                            </li>\n                                                        ))}\n                                                    </ul>\n                                                    {handleReset && (\n                                                        <button\n                                                            type=\"button\"\n                                                            className=\"my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                            onClick={event => {\n                                                                event.persist();\n                                                                handleReset(event);\n                                                                close();\n                                                            }}>\n                                                            {texts.datepicker.clear}\n                                                        </button>\n                                                    )}\n                                                </div>\n                                            )}\n                                        </div>\n                                    )}\n                                </Popover.Content>\n                            </Popover>\n                        )}\n                    />\n                }\n            />\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","IconButton","datepicker","expand","disabled","readOnly","icon","popover","Popover","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","key","text","type","onClick","persist","clear","displayName"],"mappings":";;;;;;;;;MA4CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAU,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,UAAU;oBACKL,KAAK,CAACM,UAAU,CAACC,MAAM;MACnCC,QAAQ,EAAEV,KAAK,CAACU,QAAQ,IAAIV,KAAK,CAACW,QAAQ;MAC1CC,IAAI,EAAC,UAAU;MACfC,OAAO,EAAExB,KAAK,iBACVD,cAAC0B,OAAO,oBAAKzB,KAAK,gBACdD,cAAC0B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,kBACP5B;QAAKG,SAAS,EAAC;sBACXH,cAAC6B,QAAQ,oBACDlB,QAAQ;QACZmB,QAAQ,EAAE,CAACC,IAAU,EAAEC,KAAwC;UAC3DrB,QAAQ,CAACmB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;SACV;QACDK,QAAQ,EAAE,CAAC;SACb,EACDzB,SAAS,iBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACM,UAAU,CAACZ,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC0B,GAAG,CAACC,QAAQ,iBACnBnC;QAAIoC,GAAG,EAAED,QAAQ,CAACE;sBACdrC;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,+DAA+D;QACzEoC,OAAO,EAAEP,KAAK;UACVA,KAAK,CAACQ,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACP,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVO,QAAQ,CAACE,IAAI,CACT,CAEhB,CAAC,CACD,EACJ/B,WAAW,iBACRN;QACIsC,IAAI,EAAC,QAAQ;QACbnC,SAAS,EAAC,sHAAsH;QAChIoC,OAAO,EAAEP,KAAK;UACVA,KAAK,CAACQ,OAAO,EAAE;UACflC,WAAW,CAAC0B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVd,KAAK,CAACM,UAAU,CAACqB,KAAK,CAE9B,CAER,CAER,CACa;;KAKpC,CACC;AAEf,CAAC;AACD1C,UAAU,CAAC2C,WAAW,GAAG,YAAY;;;;"}
+{"version":3,"file":"Datepicker.js","sources":["../../../../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\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';\nimport { Popover } from '../Popover/Popover';\nimport { Tooltip } from '../Tooltip/Tooltip';\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;\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 { texts } = useLocalization();\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\n\n    return (\n        <span className={className} data-taco=\"datepicker\" style={style}>\n            <Input\n                {...input}\n                button={\n                    <Tooltip title={texts.datepicker.calendar}>\n                        <IconButton\n                            aria-label={texts.datepicker.expand}\n                            disabled={input.disabled || input.readOnly}\n                            icon=\"calendar\"\n                            tabIndex={-1}\n                            className=\" border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none\"\n                            popover={props => (\n                                <Popover {...props}>\n                                    <Popover.Content>\n                                        {({ close }) => (\n                                            <div className=\"-m-3 flex\">\n                                                <Calendar\n                                                    {...calendar}\n                                                    onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\n                                                        calendar.onChange(date, event);\n                                                        close();\n                                                    }}\n                                                />\n                                                {shortcuts && (\n                                                    <div className=\"border-grey-300 flex flex-col border-l\">\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-grey-200 flex w-full items-start px-4 py-1 text-xs\"\n                                                                        onClick={event => {\n                                                                            event.persist();\n                                                                            shortcut.onClick(event);\n                                                                            close();\n                                                                        }}>\n                                                                        {shortcut.text}\n                                                                    </button>\n                                                                </li>\n                                                            ))}\n                                                        </ul>\n                                                        {handleReset && (\n                                                            <button\n                                                                type=\"button\"\n                                                                className=\"my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300\"\n                                                                onClick={event => {\n                                                                    event.persist();\n                                                                    handleReset(event);\n                                                                    close();\n                                                                }}>\n                                                                {texts.datepicker.clear}\n                                                            </button>\n                                                        )}\n                                                    </div>\n                                                )}\n                                            </div>\n                                        )}\n                                    </Popover.Content>\n                                </Popover>\n                            )}\n                        />\n                    </Tooltip>\n                }\n            />\n        </span>\n    );\n});\nDatepicker.displayName = 'Datepicker';\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","Tooltip","title","datepicker","IconButton","expand","disabled","readOnly","icon","tabIndex","popover","Popover","Content","close","Calendar","onChange","date","event","map","shortcut","key","text","type","onClick","persist","clear","displayName"],"mappings":";;;;;;;;;;MA6CaA,UAAU,gBAAGC,UAAgB,CAAC,SAASD,UAAU,CAACE,KAAsB,EAAEC,GAAgC;EACnH,MAAM;IAAEC,SAAS,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC,WAAW;IAAEC,KAAK;IAAEC,SAAS;IAAEC,aAAa;IAAE,GAAGC;GAAY,GAAGT,KAAK;EACpH,MAAM;IAAEU,QAAQ;IAAEC;GAAO,GAAGC,aAAa,CAACH,UAAU,EAAER,GAAG,CAAC;EAC1D,MAAM;IAAEY;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAA2C,EAAEZ,iBAAiB,CAAC;EAEpF,oBACIJ;IAAMG,SAAS,EAAEA,SAAS;iBAAY,YAAY;IAACI,KAAK,EAAEA;kBACtDP,cAACiB,KAAK,oBACEL,KAAK;IACTM,MAAM,eACFlB,cAACmB,OAAO;MAACC,KAAK,EAAEN,KAAK,CAACO,UAAU,CAACV;oBAC7BX,cAACsB,UAAU;oBACKR,KAAK,CAACO,UAAU,CAACE,MAAM;MACnCC,QAAQ,EAAEZ,KAAK,CAACY,QAAQ,IAAIZ,KAAK,CAACa,QAAQ;MAC1CC,IAAI,EAAC,UAAU;MACfC,QAAQ,EAAE,CAAC,CAAC;MACZxB,SAAS,EAAC,gSAAgS;MAC1SyB,OAAO,EAAE3B,KAAK,iBACVD,cAAC6B,OAAO,oBAAK5B,KAAK,gBACdD,cAAC6B,OAAO,CAACC,OAAO,QACX,CAAC;QAAEC;OAAO,kBACP/B;QAAKG,SAAS,EAAC;sBACXH,cAACgC,QAAQ,oBACDrB,QAAQ;QACZsB,QAAQ,EAAE,CAACC,IAAU,EAAEC,KAAwC;UAC3DxB,QAAQ,CAACsB,QAAQ,CAACC,IAAI,EAAEC,KAAK,CAAC;UAC9BJ,KAAK,EAAE;;SAEb,EACDvB,SAAS,iBACNR;QAAKG,SAAS,EAAC;sBACXH;QAAMG,SAAS,EAAC;SACXM,aAAa,aAAbA,aAAa,cAAbA,aAAa,GAAIK,KAAK,CAACO,UAAU,CAACb,SAAS,CACzC,eACPR,0BACKQ,SAAS,CAAC4B,GAAG,CAACC,QAAQ,iBACnBrC;QAAIsC,GAAG,EAAED,QAAQ,CAACE;sBACdvC;QACIwC,IAAI,EAAC,QAAQ;QACbrC,SAAS,EAAC,+DAA+D;QACzEsC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfL,QAAQ,CAACI,OAAO,CAACN,KAAK,CAAC;UACvBJ,KAAK,EAAE;;SAEVM,QAAQ,CAACE,IAAI,CACT,CAEhB,CAAC,CACD,EACJjC,WAAW,iBACRN;QACIwC,IAAI,EAAC,QAAQ;QACbrC,SAAS,EAAC,sHAAsH;QAChIsC,OAAO,EAAEN,KAAK;UACVA,KAAK,CAACO,OAAO,EAAE;UACfpC,WAAW,CAAC6B,KAAK,CAAC;UAClBJ,KAAK,EAAE;;SAEVjB,KAAK,CAACO,UAAU,CAACsB,KAAK,CAE9B,CAER,CAER,CACa;MAG5B;KAGZ,CACC;AAEf,CAAC;AACD5C,UAAU,CAAC6C,WAAW,GAAG,YAAY;;;;"}

package/dist/esm/packages/taco/src/components/Drawer/Drawer.js

@@ -1,9 +1,9 @@
 import { forwardRef, useState, useMemo, useCallback, useEffect, createElement } from 'react';
 import cn from 'classnames';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root } from '@radix-ui/react-dialog';
 import { DrawerContext } from './Context.js';
 import { Content, InnerContent, Title, Footer, Close, Actions } from './components/Content.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Trigger } from './components/Trigger.js';
 
 const Outlet = /*#__PURE__*/forwardRef(function Outlet(props, ref) {

package/dist/esm/packages/taco/src/components/Drawer/components/Content.js

@@ -4,10 +4,10 @@ import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { IconButton } from '../../IconButton/IconButton.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { Group } from '../../Group/Group.js';
-import { useCurrentMenu } from '../../Menu/Context.js';
 import { Title as Title$1, Close as Close$1, Portal as Portal$1, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
 import { useDraggable } from '../../../utils/hooks/useDraggable.js';
+import { Group } from '../../Group/Group.js';
+import { useCurrentMenu } from '../../Menu/Context.js';
 import { useCurrentDrawer } from '../Context.js';
 import { getBackdropClassNames, getDrawerContainerClassNames, getDrawerContentClassNames, getDrawerDragHandlerClassNames } from '../util.js';
 import { useGlobalKeyboardShortcut } from '../../../hooks/useGlobalKeyboardShortcut.js';

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js

@@ -2,9 +2,9 @@ import React__default from 'react';
 import { Icon } from '../../Icon/Icon.js';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
-import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { Root, Trigger, Content } from '@radix-ui/react-popover';
 import { createCustomKeyboardEvent } from '../../../utils/input.js';
+import { useControllableState } from '@radix-ui/react-use-controllable-state';
 import { SearchInput } from '../../SearchInput/SearchInput.js';
 import { Root as Root$1 } from '../../../primitives/Collection/components/Root.js';
 import '../../../primitives/Collection/Collection.js';

package/dist/esm/packages/taco/src/components/Header/components/Button.js

@@ -4,19 +4,15 @@ import { IconButton } from '../../IconButton/IconButton.js';
 
 const Button = /*#__PURE__*/React__default.forwardRef(function Button(props, ref) {
   const {
-    as = 'li',
     ...attributes
   } = props;
   const className = cn(getButtonClasses(), props.className);
-  const Tag = as;
-  return /*#__PURE__*/React__default.createElement(Tag, {
-    className: "contents"
-  }, /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
+  return /*#__PURE__*/React__default.createElement(IconButton, Object.assign({}, attributes, {
     appearance: "discrete",
     className: className,
     "data-taco": "header-button",
     ref: ref
-  })));
+  }));
 });
 const getButtonClasses = () => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer !rounded-full relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white');
 

package/dist/esm/packages/taco/src/components/Header/components/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton, IconButtonProps } from '../../IconButton/IconButton';\n\nexport type ButtonProps = Omit<IconButtonProps, 'appearance' | 'aria-label'> & {\n    as?: string;\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { as = 'li', ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n    const Tag = as as any;\n\n    return (\n        <Tag className=\"contents\">\n            <IconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />\n        </Tag>\n    );\n});\n\nexport const getButtonClasses = () =>\n    cn(\n        '!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer !rounded-full relative',\n        'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ',\n        'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        '!text-white hover:text-white focus:text-white'\n    );\n"],"names":["Button","React","forwardRef","props","ref","as","attributes","className","cn","getButtonClasses","Tag","IconButton","appearance"],"mappings":";;;;MASaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAiC,SAASF,MAAM,CAACG,KAAK,EAAEC,GAAG;EAC7F,MAAM;IAAEC,EAAE,GAAG,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EAC1C,MAAMI,SAAS,GAAGC,EAAE,CAACC,gBAAgB,EAAE,EAAEN,KAAK,CAACI,SAAS,CAAC;EACzD,MAAMG,GAAG,GAAGL,EAAS;EAErB,oBACIJ,6BAACS,GAAG;IAACH,SAAS,EAAC;kBACXN,6BAACU,UAAU,oBAAKL,UAAU;IAAEM,UAAU,EAAC,UAAU;IAACL,SAAS,EAAEA,SAAS;iBAAY,eAAe;IAACH,GAAG,EAAEA;KAAO,CAC5G;AAEd,CAAC;MAEYK,gBAAgB,GAAG,MAC5BD,EAAE,CACE,2EAA2E,EAC3E,sEAAsE,EACtE,2FAA2F,EAC3F,+CAA+C;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../../../../../src/components/Header/components/Button.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconButton, IconButtonProps } from '../../IconButton/IconButton';\n\nexport type ButtonProps = Omit<IconButtonProps, 'appearance' | 'aria-label'> & {\n    'aria-label': string;\n};\n\nexport const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Button(props, ref) {\n    const { ...attributes } = props;\n    const className = cn(getButtonClasses(), props.className);\n\n    return <IconButton {...attributes} appearance=\"discrete\" className={className} data-taco=\"header-button\" ref={ref} />;\n});\n\nexport const getButtonClasses = () =>\n    cn(\n        '!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer !rounded-full relative',\n        'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ',\n        'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        '!text-white hover:text-white focus:text-white'\n    );\n"],"names":["Button","React","forwardRef","props","ref","attributes","className","cn","getButtonClasses","IconButton","appearance"],"mappings":";;;;MAQaA,MAAM,gBAAGC,cAAK,CAACC,UAAU,CAAiC,SAASF,MAAM,CAACG,KAAK,EAAEC,GAAG;EAC7F,MAAM;IAAE,GAAGC;GAAY,GAAGF,KAAK;EAC/B,MAAMG,SAAS,GAAGC,EAAE,CAACC,gBAAgB,EAAE,EAAEL,KAAK,CAACG,SAAS,CAAC;EAEzD,oBAAOL,6BAACQ,UAAU,oBAAKJ,UAAU;IAAEK,UAAU,EAAC,UAAU;IAACJ,SAAS,EAAEA,SAAS;iBAAY,eAAe;IAACF,GAAG,EAAEA;KAAO;AACzH,CAAC;MAEYI,gBAAgB,GAAG,MAC5BD,EAAE,CACE,2EAA2E,EAC3E,sEAAsE,EACtE,2FAA2F,EAC3F,+CAA+C;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/Link.js

@@ -7,7 +7,6 @@ import { useLocalization } from '../../Provider/Localization.js';
 
 const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
-    as = 'li',
     children,
     icon,
     isNew,
@@ -17,9 +16,8 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
   const {
     texts
   } = useLocalization();
-  const Tag = as;
   const className = cn(getLinkClasses(icon), 'relative', props.className);
-  let link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
+  const link = /*#__PURE__*/React__default.createElement("a", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "header-link",
     ref: ref,
@@ -32,13 +30,11 @@ const Link = /*#__PURE__*/React__default.forwardRef(function Link(props, ref) {
     className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
   }, texts.header.new) : null);
   if (tooltip) {
-    link = /*#__PURE__*/React__default.createElement(Tooltip, {
+    return /*#__PURE__*/React__default.createElement(Tooltip, {
       title: tooltip
     }, link);
   }
-  return /*#__PURE__*/React__default.createElement(Tag, {
-    className: "contents"
-  }, link);
+  return link;
 });
 const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
   '!rounded-full !h-9 !w-9': icon,

package/dist/esm/packages/taco/src/components/Header/components/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    as?: string;\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { as = 'li', children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const Tag = as as any;\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    let link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    className=\"absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        link = <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return <Tag className=\"contents\">{link}</Tag>;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["Link","React","forwardRef","props","ref","as","children","icon","isNew","tooltip","otherProps","texts","useLocalization","Tag","className","cn","getLinkClasses","link","tabIndex","Icon","name","Badge","color","small","header","new","Tooltip","title","undefined"],"mappings":";;;;;;;MA2BaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA+B,SAASF,IAAI,CAACG,KAAK,EAAEC,GAAG;EACvF,MAAM;IAAEC,EAAE,GAAG,IAAI;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC1E,MAAM;IAAEQ;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,GAAG,GAAGR,EAAS;EACrB,MAAMS,SAAS,GAAGC,EAAE,CAACC,cAAc,CAACT,IAAI,CAAC,EAAE,UAAU,EAAEJ,KAAK,CAACW,SAAS,CAAC;EAEvE,IAAIG,IAAI,gBACJhB,oDAAOS,UAAU;IAAEI,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACV,GAAG,EAAEA,GAAG;IAAEc,QAAQ,EAAE;MAChFX,IAAI,gBAAGN,6BAACkB,IAAI;IAACC,IAAI,EAAEb;IAAQ,GAAG,IAAI,EAClCD,QAAQ,EACRE,KAAK,gBACFP,6BAACoB,KAAK;IACFC,KAAK,EAAC,MAAM;IACZC,KAAK;IACLT,SAAS,EAAC;KACTH,KAAK,CAACa,MAAM,CAACC,GAAG,CACb,GACR,IAAI,CAEf;EAED,IAAIhB,OAAO,EAAE;IACTQ,IAAI,gBAAGhB,6BAACyB,OAAO;MAACC,KAAK,EAAElB;OAAUQ,IAAI,CAAW;;EAGpD,oBAAOhB,6BAACY,GAAG;IAACC,SAAS,EAAC;KAAYG,IAAI,CAAO;AACjD,CAAC;MAEYD,cAAc,GAAG,CAACT,OAA6BqB,SAAS,KACjEb,EAAE,CACE,gFAAgF,EAChF,qEAAqE,EACrE,2FAA2F,EAC3F,+CAA+C,EAC/C;EACI,yBAAyB,EAAER,IAAI;EAC/B,uDAAuD,EAAE,CAACA;CAC7D;;;;"}
+{"version":3,"file":"Link.js","sources":["../../../../../../../../src/components/Header/components/Link.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName } from '../../Icon/Icon';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Badge } from '../../Badge/Badge';\nimport { useLocalization } from '../../Provider/Localization';\n\nexport type BaseLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {\n    tooltip?: string;\n};\n\ninterface LinkPropsWithoutIcon extends BaseLinkProps {\n    children: JSX.Element | string;\n    icon?: never;\n    isNew?: never;\n}\n\ninterface LinkPropsWithIcon extends Omit<BaseLinkProps, 'aria-label'> {\n    'aria-label': string;\n    children?: never;\n    icon: IconName;\n    isNew?: boolean;\n}\n\nexport type LinkProps = LinkPropsWithoutIcon | LinkPropsWithIcon;\n\nexport const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(props, ref) {\n    const { children, icon, isNew, tooltip, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const className = cn(getLinkClasses(icon), 'relative', props.className);\n\n    const link = (\n        <a {...otherProps} className={className} data-taco=\"header-link\" ref={ref} tabIndex={0}>\n            {icon ? <Icon name={icon} /> : null}\n            {children}\n            {isNew ? (\n                <Badge\n                    color=\"blue\"\n                    small\n                    className=\"absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal\">\n                    {texts.header.new}\n                </Badge>\n            ) : null}\n        </a>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{link}</Tooltip>;\n    }\n\n    return link;\n});\n\nexport const getLinkClasses = (icon: IconName | undefined = undefined) =>\n    cn(\n        'flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ',\n        'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark',\n        'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]',\n        '!text-white hover:text-white focus:text-white',\n        {\n            '!rounded-full !h-9 !w-9': icon,\n            'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon,\n        }\n    );\n"],"names":["Link","React","forwardRef","props","ref","children","icon","isNew","tooltip","otherProps","texts","useLocalization","className","cn","getLinkClasses","link","tabIndex","Icon","name","Badge","color","small","header","new","Tooltip","title","undefined"],"mappings":";;;;;;;MA0BaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAA+B,SAASF,IAAI,CAACG,KAAK,EAAEC,GAAG;EACvF,MAAM;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,KAAK;IAAEC,OAAO;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC/D,MAAM;IAAEO;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,SAAS,GAAGC,EAAE,CAACC,cAAc,CAACR,IAAI,CAAC,EAAE,UAAU,EAAEH,KAAK,CAACS,SAAS,CAAC;EAEvE,MAAMG,IAAI,gBACNd,oDAAOQ,UAAU;IAAEG,SAAS,EAAEA,SAAS;iBAAY,aAAa;IAACR,GAAG,EAAEA,GAAG;IAAEY,QAAQ,EAAE;MAChFV,IAAI,gBAAGL,6BAACgB,IAAI;IAACC,IAAI,EAAEZ;IAAQ,GAAG,IAAI,EAClCD,QAAQ,EACRE,KAAK,gBACFN,6BAACkB,KAAK;IACFC,KAAK,EAAC,MAAM;IACZC,KAAK;IACLT,SAAS,EAAC;KACTF,KAAK,CAACY,MAAM,CAACC,GAAG,CACb,GACR,IAAI,CAEf;EAED,IAAIf,OAAO,EAAE;IACT,oBAAOP,6BAACuB,OAAO;MAACC,KAAK,EAAEjB;OAAUO,IAAI,CAAW;;EAGpD,OAAOA,IAAI;AACf,CAAC;MAEYD,cAAc,GAAG,CAACR,OAA6BoB,SAAS,KACjEb,EAAE,CACE,gFAAgF,EAChF,qEAAqE,EACrE,2FAA2F,EAC3F,+CAA+C,EAC/C;EACI,yBAAyB,EAAEP,IAAI;EAC/B,uDAAuD,EAAE,CAACA;CAC7D;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js

@@ -3,131 +3,24 @@ import cn from 'classnames';
 import { useLocalization } from '../../Provider/Localization.js';
 import { Button } from '../../Button/Button.js';
 import { useMergedRef } from '../../../hooks/useMergedRef.js';
-import { Menu } from '../../Menu/Menu.js';
-import { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener.js';
+import { OverflowGroup } from '../../OverflowGroup/OverflowGroup.js';
 import { getLinkClasses } from './Link.js';
-import { Portal } from '@radix-ui/react-portal';
 
-const getChildWidths = parent => {
-  const widths = [];
-  for (let index = 0; index < parent.children.length; index++) {
-    var _parent$children$inde, _childRect$width;
-    const childRect = (_parent$children$inde = parent.children[index].firstElementChild) === null || _parent$children$inde === void 0 ? void 0 : _parent$children$inde.getBoundingClientRect();
-    widths.push((_childRect$width = childRect === null || childRect === void 0 ? void 0 : childRect.width) !== null && _childRect$width !== void 0 ? _childRect$width : 0);
-  }
-  return widths;
-};
-const ChildrenWidth = ({
-  setWidth,
-  children
-}) => {
-  const ref = React__default.useRef(null);
-  const [show, setShow] = React__default.useState(true);
-  React__default.useEffect(() => {
-    // Calculate the width of children, and then hides the portal
-    if (ref.current && show) {
-      setWidth(getChildWidths(ref.current));
-      setShow(false);
-    }
-  }, [show]);
-  React__default.useEffect(() => {
-    // If children changes, then we render the children to calculate their width
-    if (!show) {
-      setShow(true);
-    }
-  }, [children]);
-  return show ? /*#__PURE__*/React__default.createElement(Portal, {
-    className: cn('invisible absolute z-[-10] flex translate-x-[-1000px]'),
-    ref: ref
-  }, children) : null;
-};
-const useBoundaryIndex = (wrapperWidth, buttonRef, childWidths) => {
-  // Primary navigation has a gap of gap-1, so we need to take the gap value in account as well
-  // left gap + right gap = 8px
-  const GAP = 8;
-  return React__default.useMemo(() => {
-    if (childWidths.length && wrapperWidth && buttonRef.current) {
-      const realWidth = wrapperWidth - buttonRef.current.getBoundingClientRect().width - GAP;
-      let boundary;
-      let total = 0;
-      childWidths.every((width, index) => {
-        const nextWidth = total + width + GAP;
-        if (nextWidth > realWidth) {
-          boundary = index;
-          return false;
-        }
-        total = nextWidth;
-        return true;
-      });
-      return boundary;
-    }
-    return undefined;
-  }, [childWidths, wrapperWidth]);
-};
 const PrimaryNavigation = /*#__PURE__*/React__default.forwardRef(function PrimaryNavigation(props, ref) {
-  var _rect$width;
   const {
     texts
   } = useLocalization();
   const internalRef = useMergedRef(ref);
-  const rect = useBoundingClientRectListener(internalRef);
-  const buttonRef = React__default.useRef(null);
-  const [childWidths, setChildWidths] = React__default.useState([]);
-  const boundaryIndex = useBoundaryIndex((_rect$width = rect === null || rect === void 0 ? void 0 : rect.width) !== null && _rect$width !== void 0 ? _rect$width : 0, buttonRef, childWidths);
   const className = cn('flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative', props.className);
-  const moreButtonClassName = cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]');
-  const [visibleChildren, hiddenChildren] = React__default.useMemo(() => {
-    const visibleChildren = [];
-    const hiddenChildren = [];
-    React__default.Children.forEach(props.children, (child, index) => {
-      if ( /*#__PURE__*/React__default.isValidElement(child) && !!child) {
-        if (boundaryIndex && index >= boundaryIndex) {
-          hiddenChildren.push(child);
-        } else {
-          visibleChildren.push(child);
-        }
-      }
-    });
-    return [visibleChildren, hiddenChildren];
-  }, [boundaryIndex, props.children]);
+  const moreButton = /*#__PURE__*/React__default.createElement(Button, {
+    className: cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')
+  }, texts.header.more);
   return /*#__PURE__*/React__default.createElement("nav", Object.assign({}, props, {
     className: className,
     ref: internalRef
-  }), /*#__PURE__*/React__default.createElement("ul", {
-    className: "mb-0 flex h-full w-full items-center gap-1 overflow-hidden px-1"
-  }, visibleChildren, /*#__PURE__*/React__default.createElement("li", {
-    className: cn({
-      invisible: boundaryIndex === undefined
-    })
-  }, /*#__PURE__*/React__default.createElement(Button, {
-    className: moreButtonClassName,
-    menu: menuProps => /*#__PURE__*/React__default.createElement(Menu, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu.Content, {
-      className: "hidden lg:block"
-    }, hiddenChildren.map((child, index) => {
-      const href = child.props.to || child.props.href;
-      const target = href !== null && href !== void 0 && href.startsWith('http') ? '_blank' : '_self';
-      // Removing className prop so that custom styling cannot be applied on Menu.Link
-      const {
-        as,
-        className: _,
-        ...otherProps
-      } = child.props;
-      if (as) {
-        return /*#__PURE__*/React__default.cloneElement(child, {
-          as: Menu.Link,
-          key: index,
-          target,
-          ...otherProps
-        });
-      }
-      return /*#__PURE__*/React__default.createElement(Menu.Link, Object.assign({
-        key: index,
-        target: target
-      }, otherProps));
-    }))),
-    ref: buttonRef
-  }, texts.header.more))), /*#__PURE__*/React__default.createElement(ChildrenWidth, {
-    setWidth: setChildWidths
+  }), /*#__PURE__*/React__default.createElement(OverflowGroup, {
+    className: "h-full flex-grow items-center gap-1 px-1",
+    moreButton: moreButton
   }, props.children));
 });
 

package/dist/esm/packages/taco/src/components/Header/components/PrimaryNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Portal } from '@radix-ui/react-portal';\nimport { getLinkClasses } from './Link';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { useBoundingClientRectListener } from '../../../hooks/useBoundingClientRectListener';\nimport { Button } from '../../Button/Button';\nimport { Menu } from '../../Menu/Menu';\nimport { useLocalization } from '../../Provider/Localization';\n\ntype ChildrenWidthProps = {\n    setWidth: React.Dispatch<React.SetStateAction<number[]>>;\n    children: React.ReactNode;\n};\n\nconst getChildWidths = (parent: HTMLDivElement): number[] => {\n    const widths: number[] = [];\n\n    for (let index = 0; index < parent.children.length; index++) {\n        const childRect = parent.children[index].firstElementChild?.getBoundingClientRect();\n        widths.push(childRect?.width ?? 0);\n    }\n\n    return widths;\n};\n\nconst ChildrenWidth = ({ setWidth, children }: ChildrenWidthProps) => {\n    const ref = React.useRef<HTMLDivElement>(null);\n    const [show, setShow] = React.useState(true);\n\n    React.useEffect(() => {\n        // Calculate the width of children, and then hides the portal\n        if (ref.current && show) {\n            setWidth(getChildWidths(ref.current));\n            setShow(false);\n        }\n    }, [show]);\n\n    React.useEffect(() => {\n        // If children changes, then we render the children to calculate their width\n        if (!show) {\n            setShow(true);\n        }\n    }, [children]);\n\n    return show ? (\n        <Portal className={cn('invisible absolute z-[-10] flex translate-x-[-1000px]')} ref={ref}>\n            {children}\n        </Portal>\n    ) : null;\n};\n\nconst useBoundaryIndex = (wrapperWidth: number, buttonRef: React.RefObject<HTMLButtonElement>, childWidths: number[]) => {\n    // Primary navigation has a gap of gap-1, so we need to take the gap value in account as well\n    // left gap + right gap = 8px\n    const GAP = 8;\n\n    return React.useMemo(() => {\n        if (childWidths.length && wrapperWidth && buttonRef.current) {\n            const realWidth = wrapperWidth - buttonRef.current.getBoundingClientRect().width - GAP;\n            let boundary: number | undefined;\n            let total = 0;\n\n            childWidths.every((width, index) => {\n                const nextWidth = total + width + GAP;\n\n                if (nextWidth > realWidth) {\n                    boundary = index;\n                    return false;\n                }\n\n                total = nextWidth;\n                return true;\n            });\n\n            return boundary;\n        }\n\n        return undefined;\n    }, [childWidths, wrapperWidth]);\n};\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n    const rect = useBoundingClientRectListener(internalRef);\n    const buttonRef = React.useRef<HTMLButtonElement>(null);\n    const [childWidths, setChildWidths] = React.useState<number[]>([]);\n    const boundaryIndex = useBoundaryIndex(rect?.width ?? 0, buttonRef, childWidths);\n\n    const className = cn(\n        'flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative',\n        props.className\n    );\n\n    const moreButtonClassName = cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]');\n\n    const [visibleChildren, hiddenChildren] = React.useMemo(() => {\n        const visibleChildren: JSX.Element[] = [];\n        const hiddenChildren: JSX.Element[] = [];\n\n        React.Children.forEach(props.children, (child, index) => {\n            if (React.isValidElement(child) && !!child) {\n                if (boundaryIndex && index >= boundaryIndex) {\n                    hiddenChildren.push(child);\n                } else {\n                    visibleChildren.push(child);\n                }\n            }\n        });\n\n        return [visibleChildren, hiddenChildren];\n    }, [boundaryIndex, props.children]);\n\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <ul className=\"mb-0 flex h-full w-full items-center gap-1 overflow-hidden px-1\">\n                {visibleChildren}\n                <li className={cn({ invisible: boundaryIndex === undefined })}>\n                    <Button\n                        className={moreButtonClassName}\n                        menu={menuProps => (\n                            <Menu {...menuProps}>\n                                <Menu.Content className=\"hidden lg:block\">\n                                    {hiddenChildren.map((child, index) => {\n                                        const href: string | undefined = child.props.to || child.props.href;\n                                        const target = href?.startsWith('http') ? '_blank' : '_self';\n                                        // Removing className prop so that custom styling cannot be applied on Menu.Link\n                                        const { as, className: _, ...otherProps } = child.props;\n\n                                        if (as) {\n                                            return React.cloneElement(child, {\n                                                as: Menu.Link,\n                                                key: index,\n                                                target,\n                                                ...otherProps,\n                                            });\n                                        }\n\n                                        return <Menu.Link key={index} target={target} {...otherProps} />;\n                                    })}\n                                </Menu.Content>\n                            </Menu>\n                        )}\n                        ref={buttonRef}>\n                        {texts.header.more}\n                    </Button>\n                </li>\n            </ul>\n            <ChildrenWidth setWidth={setChildWidths}>{props.children}</ChildrenWidth>\n        </nav>\n    );\n});\n"],"names":["getChildWidths","parent","widths","index","children","length","childRect","firstElementChild","getBoundingClientRect","push","width","ChildrenWidth","setWidth","ref","React","useRef","show","setShow","useState","useEffect","current","Portal","className","cn","useBoundaryIndex","wrapperWidth","buttonRef","childWidths","GAP","useMemo","realWidth","boundary","total","every","nextWidth","undefined","PrimaryNavigation","forwardRef","props","texts","useLocalization","internalRef","useMergedRef","rect","useBoundingClientRectListener","setChildWidths","boundaryIndex","moreButtonClassName","getLinkClasses","visibleChildren","hiddenChildren","Children","forEach","child","isValidElement","invisible","Button","menu","menuProps","Menu","Content","map","href","to","target","startsWith","as","_","otherProps","cloneElement","Link","key","header","more"],"mappings":"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"}
+{"version":3,"file":"PrimaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/PrimaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { getLinkClasses } from './Link';\nimport { useLocalization } from '../../Provider/Localization';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { Button } from '../../Button/Button';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\n\nexport type PrimaryNavigationProps = React.HTMLAttributes<HTMLElement>;\n\nexport const PrimaryNavigation = React.forwardRef<HTMLElement, PrimaryNavigationProps>(function PrimaryNavigation(props, ref) {\n    const { texts } = useLocalization();\n    const internalRef = useMergedRef<HTMLDivElement>(ref);\n\n    const className = cn(\n        'flex h-full w-full flex-grow items-center overflow-hidden active:outline-none relative',\n        props.className\n    );\n\n    const moreButton = (\n        <Button className={cn(getLinkClasses(), '!bg-transparent aria-expanded:!bg-white/[.08]')}>{texts.header.more}</Button>\n    );\n    return (\n        <nav {...props} className={className} ref={internalRef}>\n            <OverflowGroup className=\"h-full flex-grow items-center gap-1 px-1\" moreButton={moreButton}>\n                {props.children}\n            </OverflowGroup>\n        </nav>\n    );\n});\n"],"names":["PrimaryNavigation","React","forwardRef","props","ref","texts","useLocalization","internalRef","useMergedRef","className","cn","moreButton","Button","getLinkClasses","header","more","OverflowGroup","children"],"mappings":";;;;;;;;MAUaA,iBAAiB,gBAAGC,cAAK,CAACC,UAAU,CAAsC,SAASF,iBAAiB,CAACG,KAAK,EAAEC,GAAG;EACxH,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,WAAW,GAAGC,YAAY,CAAiBJ,GAAG,CAAC;EAErD,MAAMK,SAAS,GAAGC,EAAE,CAChB,wFAAwF,EACxFP,KAAK,CAACM,SAAS,CAClB;EAED,MAAME,UAAU,gBACZV,6BAACW,MAAM;IAACH,SAAS,EAAEC,EAAE,CAACG,cAAc,EAAE,EAAE,+CAA+C;KAAIR,KAAK,CAACS,MAAM,CAACC,IAAI,CAC/G;EACD,oBACId,sDAASE,KAAK;IAAEM,SAAS,EAAEA,SAAS;IAAEL,GAAG,EAAEG;mBACvCN,6BAACe,aAAa;IAACP,SAAS,EAAC,0CAA0C;IAACE,UAAU,EAAEA;KAC3ER,KAAK,CAACc,QAAQ,CACH,CACd;AAEd,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Header/components/SecondaryNavigation.js

@@ -2,8 +2,8 @@ import React__default from 'react';
 import cn from 'classnames';
 
 const SecondaryNavigation = /*#__PURE__*/React__default.forwardRef(function SecondaryNavigation(props, ref) {
-  const className = cn('flex h-full items-center gap-2 mb-0', props.className);
-  return /*#__PURE__*/React__default.createElement("ul", Object.assign({}, props, {
+  const className = cn('flex h-full items-center gap-2 mb-0 flex-shrink-0', props.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     className: className,
     ref: ref
   }));

package/dist/esm/packages/taco/src/components/Header/components/SecondaryNavigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"SecondaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/SecondaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nexport type SecondaryNavigationProps = React.HTMLAttributes<HTMLUListElement>;\n\nexport const SecondaryNavigation = React.forwardRef<HTMLUListElement, SecondaryNavigationProps>(function SecondaryNavigation(\n    props,\n    ref\n) {\n    const className = cn('flex h-full items-center gap-2 mb-0', props.className);\n    return <ul {...props} className={className} ref={ref} />;\n});\n"],"names":["SecondaryNavigation","React","forwardRef","props","ref","className","cn"],"mappings":";;;MAKaA,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CAA6C,SAASF,mBAAmB,CACxHG,KAAK,EACLC,GAAG;EAEH,MAAMC,SAAS,GAAGC,EAAE,CAAC,qCAAqC,EAAEH,KAAK,CAACE,SAAS,CAAC;EAC5E,oBAAOJ,qDAAQE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC5D,CAAC;;;;"}
+{"version":3,"file":"SecondaryNavigation.js","sources":["../../../../../../../../src/components/Header/components/SecondaryNavigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\n\nexport type SecondaryNavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const SecondaryNavigation = React.forwardRef<HTMLDivElement, SecondaryNavigationProps>(function SecondaryNavigation(\n    props,\n    ref\n) {\n    const className = cn('flex h-full items-center gap-2 mb-0 flex-shrink-0', props.className);\n    return <div {...props} className={className} ref={ref} />;\n});\n"],"names":["SecondaryNavigation","React","forwardRef","props","ref","className","cn"],"mappings":";;;MAKaA,mBAAmB,gBAAGC,cAAK,CAACC,UAAU,CAA2C,SAASF,mBAAmB,CACtHG,KAAK,EACLC,GAAG;EAEH,MAAMC,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEH,KAAK,CAACE,SAAS,CAAC;EAC1F,oBAAOJ,sDAASE,KAAK;IAAEE,SAAS,EAAEA,SAAS;IAAED,GAAG,EAAEA;KAAO;AAC7D,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/Icon.js

@@ -17,6 +17,7 @@ const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   return Component ? /*#__PURE__*/React__default.createElement(Component, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "icon",
+    "data-icon-name": name,
     focusable: "false",
     ref: ref,
     role: "img"

package/dist/esm/packages/taco/src/components/Icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\n    ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAI,CAACG,KAAgB,EAAEC,GAA6B;;EAC9F,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACrC,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAI,CAAC;;EAE7B,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEP,KAAK,CAACM,SAAS,EAAE;IACvF,SAAS,sBAAEN,KAAK,CAACM,SAAS,qDAAf,iBAAiBE,QAAQ,CAAC,cAAc;GACtD,CAAC;EAEF,OAAOJ,SAAS,gBACZN,6BAACM,SAAS,oBAAKD,UAAU;IAAEG,SAAS,EAAEA,SAAS;iBAAY,MAAM;IAACG,SAAS,EAAC,OAAO;IAACR,GAAG,EAAEA,GAAG;IAAES,IAAI,EAAC;KAAQ,GAC3G,IAAI;AACZ,CAAC;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { IconName, icons } from './components/index';\n\nexport { icons } from './components/index';\nexport type { IconName } from './components/index';\n\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\n    /** Set what svg icon should be rendered */\n    name: IconName; // this dynamic type causes the type extraction for props to fail\n};\n\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\n    const { name, ...otherProps } = props;\n    const Component = icons[name];\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\n    const className = cn('inline-flex h-[1.715em] w-[1.715em] flex-shrink-0', props.className, {\n        'p-[3px]': props.className?.includes('rounded-full'),\n    });\n\n    return Component ? (\n        <Component\n            {...otherProps}\n            className={className}\n            data-taco=\"icon\"\n            data-icon-name={name}\n            focusable=\"false\"\n            ref={ref}\n            role=\"img\"\n        />\n    ) : null;\n});\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAU,CAAC,SAASF,IAAI,CAACG,KAAgB,EAAEC,GAA6B;;EAC9F,MAAM;IAAEC,IAAI;IAAE,GAAGC;GAAY,GAAGH,KAAK;EACrC,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAI,CAAC;;EAE7B,MAAMI,SAAS,GAAGC,EAAE,CAAC,mDAAmD,EAAEP,KAAK,CAACM,SAAS,EAAE;IACvF,SAAS,sBAAEN,KAAK,CAACM,SAAS,qDAAf,iBAAiBE,QAAQ,CAAC,cAAc;GACtD,CAAC;EAEF,OAAOJ,SAAS,gBACZN,6BAACM,SAAS,oBACFD,UAAU;IACdG,SAAS,EAAEA,SAAS;iBACV,MAAM;sBACAJ,IAAI;IACpBO,SAAS,EAAC,OAAO;IACjBR,GAAG,EAAEA,GAAG;IACRS,IAAI,EAAC;KACP,GACF,IAAI;AACZ,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/WorkflowTemplateBasic.js

@@ -0,0 +1,18 @@
+import { forwardRef, createElement } from 'react';
+
+function IconWorkflowTemplateBasic(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 1l5.762 3.12v6.161L23 13.117v6.763L17.238 23 12 20.164 6.762 23 1 19.88v-6.762l5.238-2.837V4.137L12 1zM6.761 11.183l-4.144 2.244 4.144 2.243 4.143-2.243-4.143-2.244zm4.714 3.12l-4.19 2.269v4.96l4.19-2.27v-4.96zm1.048 4.96l4.19 2.268v-4.96l-4.19-2.268v4.96zm.57-5.837l4.144 2.244 4.144-2.243-4.144-2.244-4.143 2.244zm8.858.877l-4.19 2.269v4.96l4.19-2.27v-4.96zm-9.428-1.753l4.19-2.269V5.305l-4.19 2.27v4.975zm-1.048-4.975l-4.19-2.256v4.962l4.19 2.27V7.574zm-3.62-3.133L12 6.672l4.144-2.243-4.142-2.243-4.145 2.256zm-1.618 17.09v-4.96l-4.19-2.27v4.96l4.19 2.27z",
+    fill: "currentColor"
+  }));
+}
+var WorkflowTemplateBasic = /*#__PURE__*/forwardRef(IconWorkflowTemplateBasic);
+
+export default WorkflowTemplateBasic;
+//# sourceMappingURL=WorkflowTemplateBasic.js.map

package/dist/esm/packages/taco/src/components/Icon/components/WorkflowTemplateBasic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"WorkflowTemplateBasic.js","sources":["../../../../../../../../src/components/Icon/components/WorkflowTemplateBasic.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconWorkflowTemplateBasic(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 1l5.762 3.12v6.161L23 13.117v6.763L17.238 23 12 20.164 6.762 23 1 19.88v-6.762l5.238-2.837V4.137L12 1zM6.761 11.183l-4.144 2.244 4.144 2.243 4.143-2.243-4.143-2.244zm4.714 3.12l-4.19 2.269v4.96l4.19-2.27v-4.96zm1.048 4.96l4.19 2.268v-4.96l-4.19-2.268v4.96zm.57-5.837l4.144 2.244 4.144-2.243-4.144-2.244-4.143 2.244zm8.858.877l-4.19 2.269v4.96l4.19-2.27v-4.96zm-9.428-1.753l4.19-2.269V5.305l-4.19 2.27v4.975zm-1.048-4.975l-4.19-2.256v4.962l4.19 2.27V7.574zm-3.62-3.133L12 6.672l4.144-2.243-4.142-2.243-4.145 2.256zm-1.618 17.09v-4.96l-4.19-2.27v4.96l4.19 2.27z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconWorkflowTemplateBasic);\n"],"names":["IconWorkflowTemplateBasic","props","svgRef","React","xmlns","viewBox","ref","fillRule","clipRule","d","fill"],"mappings":";;AACA,SAASA,yBAAyB,CAACC,KAAoC,EAAEC,MAAiC;EACtG,oBACIC;IAAKC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEJ;KAAYD,KAAK,gBAC9EE;IACII,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,qjBAAqjB;IACvjBC,IAAI,EAAC;IACP,CACA;AAEd;AACA,yCAAeP,UAAgB,CAACH,yBAAyB,CAAC;;;;"}