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

package/dist/components/Table3/util/editing.js

@@ -34,7 +34,6 @@ function willRowMoveAfterFilter(cell, change, localization) {
   );
 }
 function willRowMoveAfterSorting(cell, change, rowIndex) {
-  var _a;
   if (!cell.column.getIsSorted()) {
     return false;
   }
@@ -83,7 +82,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   if (cell.column.getIsSorted() === "desc") {
     resortedRows.reverse();
   }
-  return ((_a = resortedRows[index]) == null ? void 0 : _a.id) !== cell.row.id;
+  return resortedRows[index]?.id !== cell.row.id;
 }
 const TEMPORARY_ROW_ID_PREFIX = "temp-";
 function isTemporaryRow(rowId) {
@@ -94,9 +93,8 @@ function isTemporaryRow(rowId) {
 }
 const shortcut = { key: "e", meta: true, shift: false };
 function isTableScrolled(ref) {
-  var _a, _b, _c, _d;
   if (ref.current) {
-    const height = Number.parseFloat(((_b = (_a = ref.current) == null ? void 0 : _a.querySelector("tbody")) == null ? void 0 : _b.style.height) || "0") + Number.parseFloat(((_d = (_c = ref.current) == null ? void 0 : _c.querySelector("tbody")) == null ? void 0 : _d.style.paddingBottom) || "0");
+    const height = Number.parseFloat(ref.current?.querySelector("tbody")?.style.height || "0") + Number.parseFloat(ref.current?.querySelector("tbody")?.style.paddingBottom || "0");
     const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;
     return [hasVerticalScrollbar, height > ref.current.scrollHeight];
   }

package/dist/components/Table3/util/editing.js.map

@@ -1 +1 @@
-{"version":3,"file":"editing.js","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport { TableFilterValue, TableRef } from '../../../primitives/Table/types';\nimport { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search';\nimport { Localization } from '../../Provider/Localization';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"editing.js","sources":["../../../../src/components/Table3/util/editing.ts"],"sourcesContent":["import React from 'react';\nimport { Cell as ReactTableCell, Row as ReactTableRow, Table as ReactTable } from '@tanstack/react-table';\nimport { TableFilterValue, TableRef } from '../../../primitives/Table/types';\nimport { columnFilterFn } from '../../../primitives/Table/useTableManager/util/filtering';\nimport { globalFilterFn } from '../../../primitives/Table/useTableManager/util/search';\nimport { Localization } from '../../Provider/Localization';\n\nexport function willRowMove<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    rowIndex: number,\n    localization: Localization\n) {\n    const { table } = cell.getContext();\n\n    if (willRowMoveAfterSearch<TType>(cell, change, table, localization)) {\n        return 'search';\n    }\n\n    if (willRowMoveAfterFilter<TType>(cell, change, localization)) {\n        return 'filter';\n    }\n\n    if (willRowMoveAfterSorting<TType>(cell, change, rowIndex)) {\n        return 'sorting';\n    }\n\n    return undefined;\n}\n\nfunction willRowMoveAfterSearch<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    table: ReactTable<TType>,\n    localization: Localization\n) {\n    const searchQuery = table.getState().globalFilter;\n\n    if (!table.options.enableGlobalFilter || !searchQuery) {\n        return false;\n    }\n\n    const rowWithChange = { ...cell.row, original: { ...cell.row.original, [cell.column.id]: change } };\n    return !globalFilterFn(rowWithChange, cell.column.id, searchQuery, localization);\n}\n\nfunction willRowMoveAfterFilter<TType = unknown>(\n    cell: ReactTableCell<TType, unknown>,\n    change: unknown,\n    localization: Localization\n) {\n    if (!cell.column.getIsFiltered()) {\n        return false;\n    }\n\n    return !columnFilterFn(\n        cell.row.original,\n        change,\n        cell.column.columnDef.meta,\n        cell.column.getFilterValue() as TableFilterValue,\n        localization\n    );\n}\n\nfunction willRowMoveAfterSorting<TType = unknown>(cell: ReactTableCell<TType, unknown>, change: unknown, rowIndex: number) {\n    if (!cell.column.getIsSorted()) {\n        return false;\n    }\n\n    const { table } = cell.getContext();\n    const rows = table.getRowModel().rows;\n\n    const miniSortRows: ReactTableRow<TType>[] = [\n        {\n            ...cell.row,\n            original: {\n                ...cell.row.original,\n                [cell.column.id]: change,\n            },\n            getValue: () => change as any,\n        },\n    ];\n\n    let index = 0;\n\n    if (rowIndex > 0) {\n        const previous = rows[rowIndex - 1];\n\n        if (previous) {\n            miniSortRows.unshift(previous);\n            index = 1;\n        }\n    }\n\n    if (rowIndex < rows.length - 1) {\n        const next = rows[rowIndex + 1];\n\n        if (next) {\n            miniSortRows.push(next);\n        }\n    }\n\n    const resortedRows = [...miniSortRows].sort((rowA, rowB) => {\n        const sortFn = cell.column.getSortingFn();\n        const sortUndefined = cell.column.columnDef.sortUndefined;\n\n        if (!table.options.manualSorting && sortUndefined) {\n            const aValue = rowA.getValue(cell.column.id);\n            const bValue = rowB.getValue(cell.column.id);\n\n            const aUndefined = aValue === undefined;\n            const bUndefined = bValue === undefined;\n\n            if (aUndefined || bUndefined) {\n                if (sortUndefined === 'first') return aUndefined ? -1 : 1;\n                if (sortUndefined === 'last') return aUndefined ? 1 : -1;\n\n                return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;\n            }\n        }\n\n        return sortFn(rowA, rowB, cell.column.id);\n    });\n\n    if (cell.column.getIsSorted() === 'desc') {\n        resortedRows.reverse();\n    }\n\n    return resortedRows[index]?.id !== cell.row.id;\n}\n\nexport const TEMPORARY_ROW_ID_PREFIX = 'temp-';\n\nexport function isTemporaryRow(rowId: string | undefined) {\n    if (rowId === undefined) {\n        return false;\n    }\n\n    return String(rowId).startsWith(TEMPORARY_ROW_ID_PREFIX);\n}\n\nexport const shortcut = { key: 'e', meta: true, shift: false };\n\nexport function isTableScrolled(ref: React.RefObject<TableRef>): [boolean, boolean] {\n    if (ref.current) {\n        const height =\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.height || '0') +\n            Number.parseFloat(ref.current?.querySelector('tbody')?.style.paddingBottom || '0');\n\n        const hasVerticalScrollbar = ref.current.scrollHeight > ref.current.clientHeight;\n\n        return [hasVerticalScrollbar, height > ref.current.scrollHeight];\n    }\n\n    return [false, false];\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Tabs/Context.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Context.cjs","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":[],"mappings":";;;AAUa,MAAA,aAAa,MAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;;"}
+{"version":3,"file":"Context.cjs","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":[],"mappings":";;;AAUO,MAAM,aAAa,MAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;;"}

package/dist/components/Tabs/Context.js.map

@@ -1 +1 @@
-{"version":3,"file":"Context.js","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":["React"],"mappings":";AAUa,MAAA,aAAaA,eAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;"}
+{"version":3,"file":"Context.js","sources":["../../../src/components/Tabs/Context.tsx"],"sourcesContent":["import React from 'react';\nimport { Orientation } from '../../types';\n\ntype TabContextValue = {\n    activeTabId?: string;\n    baseId: string;\n    onChange: (id: string) => void;\n    orientation: Orientation;\n};\n\nexport const TabContext = React.createContext<TabContextValue>({\n    activeTabId: undefined,\n    baseId: '',\n    onChange: (_id: string) => undefined,\n    orientation: 'horizontal',\n});\n"],"names":["React"],"mappings":";AAUO,MAAM,aAAaA,eAAM,cAA+B;AAAA,EAC3D,aAAa;AAAA,EACb,QAAQ;AAAA,EACR,UAAU,CAAC,QAAgB;AAAA,EAC3B,aAAa;AACjB,CAAC;"}

package/dist/components/Tabs/Tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\n\nimport { Orientation } from '../../types';\nimport { useControlled } from '../../hooks/useControlled';\nimport { TabContext } from './Context';\nimport { TabContentProps, TabPanel } from './components/TabPanel';\nimport { TabList, TabListProps } from './components/TabList';\nimport { TabTrigger, TabTriggerProps } from './components/Trigger';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["React","Tabs","useControlled","TabContext","FocusScope","TabList","TabTrigger","TabPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAgC;AAC3F,QAAA,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IACnC;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,SAASD,iBAAM,MAAM;AAE3B,QAAM,CAAC,aAAa,cAAc,IAAIE,4BAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACJ;AAEA,wDACKC,QAAW,WAAA,UAAX,EAAoB,OAAO,0DACvBC,kBACG,MAAAJ,iCAAA,cAAC,OAAK,EAAA,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAOK,QAAA;AACZ,KAAK,UAAUC,QAAA;AACf,KAAK,UAAUC,SAAA;;"}
+{"version":3,"file":"Tabs.cjs","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\n\nimport { Orientation } from '../../types';\nimport { useControlled } from '../../hooks/useControlled';\nimport { TabContext } from './Context';\nimport { TabContentProps, TabPanel } from './components/TabPanel';\nimport { TabList, TabListProps } from './components/TabList';\nimport { TabTrigger, TabTriggerProps } from './components/Trigger';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["React","Tabs","useControlled","TabContext","FocusScope","TabList","TabTrigger","TabPanel"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,MAAM,OAAOA,iBAAM,WAAW,SAASC,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAASD,iBAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAIE,4BAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,wDACKC,QAAAA,WAAW,UAAX,EAAoB,OAAO,0DACvBC,kBAAA,MACGJ,iCAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAOK,QAAAA;AACZ,KAAK,UAAUC,QAAAA;AACf,KAAK,UAAUC,SAAAA;;"}

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\n\nimport { Orientation } from '../../types';\nimport { useControlled } from '../../hooks/useControlled';\nimport { TabContext } from './Context';\nimport { TabContentProps, TabPanel } from './components/TabPanel';\nimport { TabList, TabListProps } from './components/TabList';\nimport { TabTrigger, TabTriggerProps } from './components/Trigger';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["Tabs"],"mappings":";;;;;;;;AAsCO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAgC;AAC3F,QAAA,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IACnC;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,SAAS,MAAM,MAAM;AAE3B,QAAM,CAAC,aAAa,cAAc,IAAI,cAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EACJ;AAEA,6CACK,WAAW,UAAX,EAAoB,OAAO,+CACvB,YACG,MAAA,sBAAA,cAAC,OAAK,EAAA,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAO;AACZ,KAAK,UAAU;AACf,KAAK,UAAU;"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport { FocusScope } from '@react-aria/focus';\nimport cn from 'clsx';\n\nimport { Orientation } from '../../types';\nimport { useControlled } from '../../hooks/useControlled';\nimport { TabContext } from './Context';\nimport { TabContentProps, TabPanel } from './components/TabPanel';\nimport { TabList, TabListProps } from './components/TabList';\nimport { TabTrigger, TabTriggerProps } from './components/Trigger';\n\nexport type TabsProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    const baseId = React.useId();\n\n    const [activeTabId, setActiveTabId] = useControlled({\n        defaultValue: defaultId,\n        onChange,\n        value: id,\n    });\n\n    const context = {\n        activeTabId,\n        baseId,\n        onChange: setActiveTabId,\n        orientation,\n    };\n\n    return (\n        <TabContext.Provider value={context}>\n            <FocusScope>\n                <div {...otherProps} className={className} data-taco=\"tabs\" ref={ref}>\n                    {children}\n                </div>\n            </FocusScope>\n        </TabContext.Provider>\n    );\n}) as React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabPanel;\n"],"names":["Tabs"],"mappings":";;;;;;;;AAsCO,MAAM,OAAO,MAAM,WAAW,SAASA,MAAK,OAAkB,KAAgC;AACjG,QAAM,EAAE,IAAI,WAAW,UAAU,UAAU,cAAc,cAAc,GAAG,WAAA,IAAe;AACzF,QAAM,YAAY;AAAA,IACd;AAAA,MACI,eAAe,gBAAgB;AAAA,IAAA;AAAA,IAEnC,MAAM;AAAA,EAAA;AAGV,QAAM,SAAS,MAAM,MAAA;AAErB,QAAM,CAAC,aAAa,cAAc,IAAI,cAAc;AAAA,IAChD,cAAc;AAAA,IACd;AAAA,IACA,OAAO;AAAA,EAAA,CACV;AAED,QAAM,UAAU;AAAA,IACZ;AAAA,IACA;AAAA,IACA,UAAU;AAAA,IACV;AAAA,EAAA;AAGJ,6CACK,WAAW,UAAX,EAAoB,OAAO,+CACvB,YAAA,MACG,sBAAA,cAAC,OAAA,EAAK,GAAG,YAAY,WAAsB,aAAU,QAAO,OACvD,QACL,CACJ,CACJ;AAER,CAAC;AASD,KAAK,OAAO;AACZ,KAAK,UAAU;AACf,KAAK,UAAU;"}

package/dist/components/Tabs/components/TabList.cjs

@@ -16,9 +16,9 @@ const focusManagerOptions = {
 const TabList = React.forwardRef(function Tab(props, ref) {
   const { children, ...otherProps } = props;
   const className = cn(
-    "border-gray-200 flex flex-row m-0 mb-4 print:hidden",
+    "m-0 mb-4 flex flex-row border-gray-200 print:hidden",
     "aria-orientation-horizontal:border-b",
-    "aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col",
+    "aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r",
     props.className
   );
   const context = React.useContext(Context.TabContext);
@@ -27,20 +27,20 @@ const TabList = React.forwardRef(function Tab(props, ref) {
     if (context.orientation === "horizontal") {
       if (event.key === "ArrowRight") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusNext(focusManagerOptions);
+        focusManager?.focusNext(focusManagerOptions);
       }
       if (event.key === "ArrowLeft") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusPrevious(focusManagerOptions);
+        focusManager?.focusPrevious(focusManagerOptions);
       }
     } else if (context.orientation === "vertical") {
       if (event.key === "ArrowUp") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusPrevious(focusManagerOptions);
+        focusManager?.focusPrevious(focusManagerOptions);
       }
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusNext(focusManagerOptions);
+        focusManager?.focusNext(focusManagerOptions);
       }
     }
   };
@@ -48,7 +48,7 @@ const TabList = React.forwardRef(function Tab(props, ref) {
     "div",
     {
       ...otherProps,
-      "aria-orientation": context == null ? void 0 : context.orientation,
+      "aria-orientation": context?.orientation,
       role: "tablist",
       className,
       ref,

package/dist/components/Tabs/components/TabList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = clsx(\n        'border-gray-200 flex flex-row m-0 mb-4 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["clsx","TabContext","useFocusManager","OverflowGroup","LegacyButton"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AACnB,WAAA,QAAQ,aAAa,MAAM,MAAM;AAAA,EAAA;AAEhD;AAEO,MAAM,UAAU,MAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYA;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,UAAU,MAAM,WAAWC,kBAAU;AAC3C,QAAM,eAAeC,MAAAA,gBAAgB;AAE/B,QAAA,gBAAgB,CAAC,UAA+B;AAC9C,QAAA,QAAQ,gBAAgB,cAAc;AAClC,UAAA,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAG3C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAAA,IACnD,WACO,QAAQ,gBAAgB,YAAY;AACvC,UAAA,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAG/C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAAA,IAC/C;AAAA,EAER;AAGI,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,mCAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACX,sBAAA;AAAA,MAACC,cAAA;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiB,sBAAA,cAACC,OAAAA,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjD,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAA;AAC1C,YAAA,MAAM,eAAe,KAAK,GAAG;AACtB,iBAAA,CAAC,MAAM,MAAM;AAAA,QAAA;AAGjB,eAAA;AAAA,MACV,CAAA;AAAA,IAAA;AAAA,EAET;AAER,CAAC;;"}
+{"version":3,"file":"TabList.cjs","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = clsx(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["clsx","TabContext","useFocusManager","OverflowGroup","LegacyButton"],"mappings":";;;;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAU,MAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYA;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAU,MAAM,WAAWC,kBAAU;AAC3C,QAAM,eAAeC,MAAAA,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACX,sBAAA;AAAA,MAACC,cAAAA;AAAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiB,sBAAA,cAACC,OAAAA,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjD,MAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAI,MAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;;"}

package/dist/components/Tabs/components/TabList.js

@@ -14,9 +14,9 @@ const focusManagerOptions = {
 const TabList = React__default.forwardRef(function Tab(props, ref) {
   const { children, ...otherProps } = props;
   const className = cn(
-    "border-gray-200 flex flex-row m-0 mb-4 print:hidden",
+    "m-0 mb-4 flex flex-row border-gray-200 print:hidden",
     "aria-orientation-horizontal:border-b",
-    "aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col",
+    "aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r",
     props.className
   );
   const context = React__default.useContext(TabContext);
@@ -25,20 +25,20 @@ const TabList = React__default.forwardRef(function Tab(props, ref) {
     if (context.orientation === "horizontal") {
       if (event.key === "ArrowRight") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusNext(focusManagerOptions);
+        focusManager?.focusNext(focusManagerOptions);
       }
       if (event.key === "ArrowLeft") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusPrevious(focusManagerOptions);
+        focusManager?.focusPrevious(focusManagerOptions);
       }
     } else if (context.orientation === "vertical") {
       if (event.key === "ArrowUp") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusPrevious(focusManagerOptions);
+        focusManager?.focusPrevious(focusManagerOptions);
       }
       if (event.key === "ArrowDown") {
         event.preventDefault();
-        focusManager == null ? void 0 : focusManager.focusNext(focusManagerOptions);
+        focusManager?.focusNext(focusManagerOptions);
       }
     }
   };
@@ -46,7 +46,7 @@ const TabList = React__default.forwardRef(function Tab(props, ref) {
     "div",
     {
       ...otherProps,
-      "aria-orientation": context == null ? void 0 : context.orientation,
+      "aria-orientation": context?.orientation,
       role: "tablist",
       className,
       ref,

package/dist/components/Tabs/components/TabList.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = clsx(\n        'border-gray-200 flex flex-row m-0 mb-4 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:border-r aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["React","clsx"],"mappings":";;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AACnB,WAAA,QAAQ,aAAa,MAAM,MAAM;AAAA,EAAA;AAEhD;AAEO,MAAM,UAAUA,eAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYC;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EACV;AAEM,QAAA,UAAUD,eAAM,WAAW,UAAU;AAC3C,QAAM,eAAe,gBAAgB;AAE/B,QAAA,gBAAgB,CAAC,UAA+B;AAC9C,QAAA,QAAQ,gBAAgB,cAAc;AAClC,UAAA,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAG3C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAAA,IACnD,WACO,QAAQ,gBAAgB,YAAY;AACvC,UAAA,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAe;AACrB,qDAAc,cAAc;AAAA,MAAmB;AAG/C,UAAA,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAe;AACrB,qDAAc,UAAU;AAAA,MAAmB;AAAA,IAC/C;AAAA,EAER;AAGI,SAAAA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,mCAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACXA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiBA,+BAAA,cAAC,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjDA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAS,UAAA;AAC1C,YAAAA,eAAM,eAAe,KAAK,GAAG;AACtB,iBAAA,CAAC,MAAM,MAAM;AAAA,QAAA;AAGjB,eAAA;AAAA,MACV,CAAA;AAAA,IAAA;AAAA,EAET;AAER,CAAC;"}
+{"version":3,"file":"TabList.js","sources":["../../../../src/components/Tabs/components/TabList.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { OverflowGroup } from '../../OverflowGroup/OverflowGroup';\nimport { LegacyButton } from '../../LegacyComponents/Button/Button';\nimport { useFocusManager } from '@react-aria/focus';\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst focusManagerOptions = {\n    wrap: true,\n    tabbable: false,\n    accept: (element: Element) => {\n        return element.getAttribute('role') === 'tab';\n    },\n};\n\nexport const TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = clsx(\n        'm-0 mb-4 flex flex-row border-gray-200 print:hidden',\n        'aria-orientation-horizontal:border-b',\n        'aria-orientation-vertical:m-0 aria-orientation-vertical:mr-4 aria-orientation-vertical:flex-col aria-orientation-vertical:border-r',\n        props.className\n    );\n\n    const context = React.useContext(TabContext);\n    const focusManager = useFocusManager();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (context.orientation === 'horizontal') {\n            if (event.key === 'ArrowRight') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowLeft') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n        } else if (context.orientation === 'vertical') {\n            if (event.key === 'ArrowUp') {\n                event.preventDefault();\n                focusManager?.focusPrevious(focusManagerOptions);\n            }\n\n            if (event.key === 'ArrowDown') {\n                event.preventDefault();\n                focusManager?.focusNext(focusManagerOptions);\n            }\n        }\n    };\n\n    return (\n        <div\n            {...otherProps}\n            aria-orientation={context?.orientation}\n            role=\"tablist\"\n            className={className}\n            ref={ref}\n            onKeyDown={handleKeyDown}>\n            <OverflowGroup\n                wrapChild\n                className='w-full [[aria-orientation=\"vertical\"]_&]:flex-col'\n                moreButton={(text: string) => <LegacyButton>{text}</LegacyButton>}>\n                {React.Children.toArray(children).filter(child => {\n                    if (React.isValidElement<{ hidden?: boolean }>(child)) {\n                        return !child.props.hidden;\n                    }\n\n                    return true;\n                })}\n            </OverflowGroup>\n        </div>\n    );\n});\n"],"names":["React","clsx"],"mappings":";;;;;;AAUA,MAAM,sBAAsB;AAAA,EACxB,MAAM;AAAA,EACN,UAAU;AAAA,EACV,QAAQ,CAAC,YAAqB;AAC1B,WAAO,QAAQ,aAAa,MAAM,MAAM;AAAA,EAC5C;AACJ;AAEO,MAAM,UAAUA,eAAM,WAAW,SAAS,IAAI,OAAqB,KAAgC;AACtG,QAAM,EAAE,UAAU,GAAG,WAAA,IAAe;AACpC,QAAM,YAAYC;AAAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,IACA,MAAM;AAAA,EAAA;AAGV,QAAM,UAAUD,eAAM,WAAW,UAAU;AAC3C,QAAM,eAAe,gBAAA;AAErB,QAAM,gBAAgB,CAAC,UAA+B;AAClD,QAAI,QAAQ,gBAAgB,cAAc;AACtC,UAAI,MAAM,QAAQ,cAAc;AAC5B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAAA,IACJ,WAAW,QAAQ,gBAAgB,YAAY;AAC3C,UAAI,MAAM,QAAQ,WAAW;AACzB,cAAM,eAAA;AACN,sBAAc,cAAc,mBAAmB;AAAA,MACnD;AAEA,UAAI,MAAM,QAAQ,aAAa;AAC3B,cAAM,eAAA;AACN,sBAAc,UAAU,mBAAmB;AAAA,MAC/C;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,oBAAkB,SAAS;AAAA,MAC3B,MAAK;AAAA,MACL;AAAA,MACA;AAAA,MACA,WAAW;AAAA,IAAA;AAAA,IACXA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAS;AAAA,QACT,WAAU;AAAA,QACV,YAAY,CAAC,SAAiBA,+BAAA,cAAC,oBAAc,IAAK;AAAA,MAAA;AAAA,MACjDA,eAAM,SAAS,QAAQ,QAAQ,EAAE,OAAO,CAAA,UAAS;AAC9C,YAAIA,eAAM,eAAqC,KAAK,GAAG;AACnD,iBAAO,CAAC,MAAM,MAAM;AAAA,QACxB;AAEA,eAAO;AAAA,MACX,CAAC;AAAA,IAAA;AAAA,EACL;AAGZ,CAAC;"}

package/dist/components/Tabs/components/TabPanel.cjs

@@ -8,8 +8,8 @@ const TabPanel = React.forwardRef(function Tab(props, ref) {
   const { id, children, forceMount, ...otherProps } = props;
   const context = React.useContext(Context.TabContext);
   const className = cn(
-    '[&[aria-orientation="vertical"]]:grow outline-none',
-    (context == null ? void 0 : context.activeTabId) === id ? "block" : "hidden",
+    'outline-none [&[aria-orientation="vertical"]]:grow',
+    context?.activeTabId === id ? "block" : "hidden",
     props.className
   );
   const triggerId = utils.createTriggerId(context.baseId, id);

package/dist/components/Tabs/components/TabPanel.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.cjs","sources":["../../../../src/components/Tabs/components/TabPanel.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n\n    /**\n     * Used to force mounting when more control is needed. Useful when\n     * controlling animation with React animation libraries.\n     */\n    forceMount?: true;\n};\n\nexport const TabPanel = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, children, forceMount, ...otherProps } = props;\n\n    const context = React.useContext(TabContext);\n\n    const className = clsx(\n        '[&[aria-orientation=\"vertical\"]]:grow outline-none',\n        context?.activeTabId === id ? 'block' : 'hidden',\n        props.className\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    return (\n        <div\n            {...otherProps}\n            aria-labelledby={triggerId}\n            id={panelId}\n            className={className}\n            data-state={id === context.activeTabId ? 'active' : 'inactive'}\n            hidden={id !== context.activeTabId}\n            ref={ref}\n            role=\"tabpanel\">\n            {id === context.activeTabId || forceMount ? children : null}\n        </div>\n    );\n});\n"],"names":["TabContext","clsx","createTriggerId","createPanelId"],"mappings":";;;;;;AAmBO,MAAM,WAAW,MAAM,WAAW,SAAS,IAAI,OAAwB,KAAgC;AAC1G,QAAM,EAAE,IAAI,UAAU,YAAY,GAAG,WAAe,IAAA;AAE9C,QAAA,UAAU,MAAM,WAAWA,kBAAU;AAE3C,QAAM,YAAYC;AAAAA,IACd;AAAA,KACA,mCAAS,iBAAgB,KAAK,UAAU;AAAA,IACxC,MAAM;AAAA,EACV;AAEA,QAAM,YAAYC,MAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAA,cAAc,QAAQ,QAAQ,EAAE;AAG5C,SAAA,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,IAAI;AAAA,MACJ;AAAA,MACA,cAAY,OAAO,QAAQ,cAAc,WAAW;AAAA,MACpD,QAAQ,OAAO,QAAQ;AAAA,MACvB;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,IACJ,OAAO,QAAQ,eAAe,aAAa,WAAW;AAAA,EAC3D;AAER,CAAC;;"}
+{"version":3,"file":"TabPanel.cjs","sources":["../../../../src/components/Tabs/components/TabPanel.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n\n    /**\n     * Used to force mounting when more control is needed. Useful when\n     * controlling animation with React animation libraries.\n     */\n    forceMount?: true;\n};\n\nexport const TabPanel = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, children, forceMount, ...otherProps } = props;\n\n    const context = React.useContext(TabContext);\n\n    const className = clsx(\n        'outline-none [&[aria-orientation=\"vertical\"]]:grow',\n        context?.activeTabId === id ? 'block' : 'hidden',\n        props.className\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    return (\n        <div\n            {...otherProps}\n            aria-labelledby={triggerId}\n            id={panelId}\n            className={className}\n            data-state={id === context.activeTabId ? 'active' : 'inactive'}\n            hidden={id !== context.activeTabId}\n            ref={ref}\n            role=\"tabpanel\">\n            {id === context.activeTabId || forceMount ? children : null}\n        </div>\n    );\n});\n"],"names":["TabContext","clsx","createTriggerId","createPanelId"],"mappings":";;;;;;AAmBO,MAAM,WAAW,MAAM,WAAW,SAAS,IAAI,OAAwB,KAAgC;AAC1G,QAAM,EAAE,IAAI,UAAU,YAAY,GAAG,eAAe;AAEpD,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAE3C,QAAM,YAAYC;AAAAA,IACd;AAAA,IACA,SAAS,gBAAgB,KAAK,UAAU;AAAA,IACxC,MAAM;AAAA,EAAA;AAGV,QAAM,YAAYC,MAAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,SACI,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,IAAI;AAAA,MACJ;AAAA,MACA,cAAY,OAAO,QAAQ,cAAc,WAAW;AAAA,MACpD,QAAQ,OAAO,QAAQ;AAAA,MACvB;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,IACJ,OAAO,QAAQ,eAAe,aAAa,WAAW;AAAA,EAAA;AAGnE,CAAC;;"}

package/dist/components/Tabs/components/TabPanel.js

@@ -6,8 +6,8 @@ const TabPanel = React__default.forwardRef(function Tab(props, ref) {
   const { id, children, forceMount, ...otherProps } = props;
   const context = React__default.useContext(TabContext);
   const className = cn(
-    '[&[aria-orientation="vertical"]]:grow outline-none',
-    (context == null ? void 0 : context.activeTabId) === id ? "block" : "hidden",
+    'outline-none [&[aria-orientation="vertical"]]:grow',
+    context?.activeTabId === id ? "block" : "hidden",
     props.className
   );
   const triggerId = createTriggerId(context.baseId, id);

package/dist/components/Tabs/components/TabPanel.js.map

@@ -1 +1 @@
-{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/components/TabPanel.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n\n    /**\n     * Used to force mounting when more control is needed. Useful when\n     * controlling animation with React animation libraries.\n     */\n    forceMount?: true;\n};\n\nexport const TabPanel = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, children, forceMount, ...otherProps } = props;\n\n    const context = React.useContext(TabContext);\n\n    const className = clsx(\n        '[&[aria-orientation=\"vertical\"]]:grow outline-none',\n        context?.activeTabId === id ? 'block' : 'hidden',\n        props.className\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    return (\n        <div\n            {...otherProps}\n            aria-labelledby={triggerId}\n            id={panelId}\n            className={className}\n            data-state={id === context.activeTabId ? 'active' : 'inactive'}\n            hidden={id !== context.activeTabId}\n            ref={ref}\n            role=\"tabpanel\">\n            {id === context.activeTabId || forceMount ? children : null}\n        </div>\n    );\n});\n"],"names":["React","clsx"],"mappings":";;;;AAmBO,MAAM,WAAWA,eAAM,WAAW,SAAS,IAAI,OAAwB,KAAgC;AAC1G,QAAM,EAAE,IAAI,UAAU,YAAY,GAAG,WAAe,IAAA;AAE9C,QAAA,UAAUA,eAAM,WAAW,UAAU;AAE3C,QAAM,YAAYC;AAAAA,IACd;AAAA,KACA,mCAAS,iBAAgB,KAAK,UAAU;AAAA,IACxC,MAAM;AAAA,EACV;AAEA,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAG5C,SAAAD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,IAAI;AAAA,MACJ;AAAA,MACA,cAAY,OAAO,QAAQ,cAAc,WAAW;AAAA,MACpD,QAAQ,OAAO,QAAQ;AAAA,MACvB;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,IACJ,OAAO,QAAQ,eAAe,aAAa,WAAW;AAAA,EAC3D;AAER,CAAC;"}
+{"version":3,"file":"TabPanel.js","sources":["../../../../src/components/Tabs/components/TabPanel.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { TabContext } from '../Context';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n\n    /**\n     * Used to force mounting when more control is needed. Useful when\n     * controlling animation with React animation libraries.\n     */\n    forceMount?: true;\n};\n\nexport const TabPanel = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, children, forceMount, ...otherProps } = props;\n\n    const context = React.useContext(TabContext);\n\n    const className = clsx(\n        'outline-none [&[aria-orientation=\"vertical\"]]:grow',\n        context?.activeTabId === id ? 'block' : 'hidden',\n        props.className\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    return (\n        <div\n            {...otherProps}\n            aria-labelledby={triggerId}\n            id={panelId}\n            className={className}\n            data-state={id === context.activeTabId ? 'active' : 'inactive'}\n            hidden={id !== context.activeTabId}\n            ref={ref}\n            role=\"tabpanel\">\n            {id === context.activeTabId || forceMount ? children : null}\n        </div>\n    );\n});\n"],"names":["React","clsx"],"mappings":";;;;AAmBO,MAAM,WAAWA,eAAM,WAAW,SAAS,IAAI,OAAwB,KAAgC;AAC1G,QAAM,EAAE,IAAI,UAAU,YAAY,GAAG,eAAe;AAEpD,QAAM,UAAUA,eAAM,WAAW,UAAU;AAE3C,QAAM,YAAYC;AAAAA,IACd;AAAA,IACA,SAAS,gBAAgB,KAAK,UAAU;AAAA,IACxC,MAAM;AAAA,EAAA;AAGV,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,SACID,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,IAAI;AAAA,MACJ;AAAA,MACA,cAAY,OAAO,QAAQ,cAAc,WAAW;AAAA,MACpD,QAAQ,OAAO,QAAQ;AAAA,MACvB;AAAA,MACA,MAAK;AAAA,IAAA;AAAA,IACJ,OAAO,QAAQ,eAAe,aAAa,WAAW;AAAA,EAAA;AAGnE,CAAC;"}

package/dist/components/Tabs/components/Trigger.cjs

@@ -21,14 +21,14 @@ const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
   );
   const buttonClassName = cn(
     util.getButtonClasses(),
-    "group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
+    "pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100"
   );
   const activeClassName = cn(
     "pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex",
     // horizontal
-    '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5',
+    '[[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5 [[aria-orientation="horizontal"]_&]:rounded-t-sm',
     // vertical
-    '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:w-0.5'
+    '[[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:w-0.5 [[aria-orientation="vertical"]_&]:rounded-l-sm'
   );
   const triggerId = utils.createTriggerId(context.baseId, id);
   const panelId = utils.createPanelId(context.baseId, id);
@@ -36,7 +36,7 @@ const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
     "button",
     {
       ...otherProps,
-      "aria-selected": id === (context == null ? void 0 : context.activeTabId),
+      "aria-selected": id === context?.activeTabId,
       "aria-controls": panelId,
       id: triggerId,
       role: "tab",
@@ -45,7 +45,7 @@ const TabTrigger = React.forwardRef(function Tab(props, forwardedRef) {
       disabled,
       onFocus: () => context.onChange(id),
       ref,
-      tabIndex: (context == null ? void 0 : context.activeTabId) !== void 0 ? id === (context == null ? void 0 : context.activeTabId) ? 0 : -1 : 0
+      tabIndex: context?.activeTabId !== void 0 ? id === context?.activeTabId ? 0 : -1 : 0
     },
     /* @__PURE__ */ React.createElement("span", { className: buttonClassName }, children),
     /* @__PURE__ */ React.createElement("span", { className: activeClassName })

package/dist/components/Tabs/components/Trigger.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = clsx(\n        props.className,\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = clsx(\n        getButtonClasses(),\n        'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n    );\n    const activeClassName = clsx(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:w-0.5'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["TabContext","useMergedRef","clsx","getButtonClasses","createTriggerId","createPanelId","Tooltip"],"mappings":";;;;;;;;;AAsBO,MAAM,aAAa,MAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AACrD,QAAA,UAAU,MAAM,WAAWA,kBAAU;AACrC,QAAA,MAAMC,0BAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpBC,sBAAiB;AAAA,IACjB;AAAA,EACJ;AACA,QAAM,kBAAkBD;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AAEA,QAAM,YAAYE,MAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,QAAO,mCAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,WAAU,mCAAS,iBAAgB,SAAa,QAAO,mCAAS,eAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACvF,sBAAA,cAAA,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5C,sBAAA,cAAC,QAAK,EAAA,WAAW,gBAAiB,CAAA;AAAA,EACtC;AAGJ,MAAI,SAAS;AACT,WAAQ,sBAAA,cAAAC,QAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAAA;AAGtC,SAAA;AACX,CAAC;;"}
+{"version":3,"file":"Trigger.cjs","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = clsx(\n        props.className,\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = clsx(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100'\n    );\n    const activeClassName = clsx(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["TabContext","useMergedRef","clsx","getButtonClasses","createTriggerId","createPanelId","Tooltip"],"mappings":";;;;;;;;;AAsBO,MAAM,aAAa,MAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAU,MAAM,WAAWA,kBAAU;AAC3C,QAAM,MAAMC,aAAAA,aAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkBA;AAAAA,IACpBC,sBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkBD;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAYE,MAAAA,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAUC,MAAAA,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACF,sBAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAa,OAAO,SAAS,cAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACxF,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5C,sBAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAO,sBAAA,cAACC,QAAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;;"}

package/dist/components/Tabs/components/Trigger.d.ts

@@ -9,7 +9,7 @@ export type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {
      */
     disabled?: boolean;
     /** A tooltip to show when hovering over the trigger */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 };
 export declare const TabTrigger: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLButtonElement> & {
     /**
@@ -21,5 +21,5 @@ export declare const TabTrigger: React.ForwardRefExoticComponent<React.HTMLAttri
      */
     disabled?: boolean;
     /** A tooltip to show when hovering over the trigger */
-    tooltip?: string | JSX.Element;
+    tooltip?: string | React.JSX.Element;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/components/Tabs/components/Trigger.js

@@ -19,14 +19,14 @@ const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
   );
   const buttonClassName = cn(
     getButtonClasses(),
-    "group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
+    "pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100"
   );
   const activeClassName = cn(
     "pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex",
     // horizontal
-    '[[aria-orientation="horizontal"]_&]:rounded-t-sm [[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5',
+    '[[aria-orientation="horizontal"]_&]:bottom-0 [[aria-orientation="horizontal"]_&]:left-0 [[aria-orientation="horizontal"]_&]:right-0 [[aria-orientation="horizontal"]_&]:h-0.5 [[aria-orientation="horizontal"]_&]:rounded-t-sm',
     // vertical
-    '[[aria-orientation="vertical"]_&]:rounded-l-sm [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:w-0.5'
+    '[[aria-orientation="vertical"]_&]:bottom-0 [[aria-orientation="vertical"]_&]:right-0 [[aria-orientation="vertical"]_&]:top-0 [[aria-orientation="vertical"]_&]:w-0.5 [[aria-orientation="vertical"]_&]:rounded-l-sm'
   );
   const triggerId = createTriggerId(context.baseId, id);
   const panelId = createPanelId(context.baseId, id);
@@ -34,7 +34,7 @@ const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
     "button",
     {
       ...otherProps,
-      "aria-selected": id === (context == null ? void 0 : context.activeTabId),
+      "aria-selected": id === context?.activeTabId,
       "aria-controls": panelId,
       id: triggerId,
       role: "tab",
@@ -43,7 +43,7 @@ const TabTrigger = React__default.forwardRef(function Tab(props, forwardedRef) {
       disabled,
       onFocus: () => context.onChange(id),
       ref,
-      tabIndex: (context == null ? void 0 : context.activeTabId) !== void 0 ? id === (context == null ? void 0 : context.activeTabId) ? 0 : -1 : 0
+      tabIndex: context?.activeTabId !== void 0 ? id === context?.activeTabId ? 0 : -1 : 0
     },
     /* @__PURE__ */ React__default.createElement("span", { className: buttonClassName }, children),
     /* @__PURE__ */ React__default.createElement("span", { className: activeClassName })

package/dist/components/Tabs/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = clsx(\n        props.className,\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = clsx(\n        getButtonClasses(),\n        'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3'\n    );\n    const activeClassName = clsx(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:rounded-t-sm [[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:rounded-l-sm [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:w-0.5'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["React","clsx"],"mappings":";;;;;;;AAsBO,MAAM,aAAaA,eAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AACrD,QAAA,UAAUA,eAAM,WAAW,UAAU;AACrC,QAAA,MAAM,aAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpB,iBAAiB;AAAA,IACjB;AAAA,EACJ;AACA,QAAM,kBAAkBA;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EACJ;AAEA,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACFD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,QAAO,mCAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,WAAU,mCAAS,iBAAgB,SAAa,QAAO,mCAAS,eAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACvFA,+BAAA,cAAA,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5CA,+BAAA,cAAC,QAAK,EAAA,WAAW,gBAAiB,CAAA;AAAA,EACtC;AAGJ,MAAI,SAAS;AACT,WAAQA,+BAAA,cAAA,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAAA;AAGtC,SAAA;AACX,CAAC;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../src/components/Tabs/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\n\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { getButtonClasses } from '../../LegacyComponents/Button/util';\nimport { TabContext } from '../Context';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { createPanelId, createTriggerId } from './utils';\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n    /** A tooltip to show when hovering over the trigger */\n    tooltip?: string | React.JSX.Element;\n};\n\nexport const TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, forwardedRef: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, tooltip, ...otherProps } = props;\n    const context = React.useContext(TabContext);\n    const ref = useMergedRef<HTMLButtonElement>(forwardedRef);\n\n    const triggerClassName = clsx(\n        props.className,\n        'group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:pb-1',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = clsx(\n        getButtonClasses(),\n        'pointer-events-none rounded px-3 group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100'\n    );\n    const activeClassName = clsx(\n        'pointer-events-none absolute z-[1] hidden bg-blue-500 group-aria-selected:flex',\n        // horizontal\n        '[[aria-orientation=\"horizontal\"]_&]:bottom-0 [[aria-orientation=\"horizontal\"]_&]:left-0 [[aria-orientation=\"horizontal\"]_&]:right-0 [[aria-orientation=\"horizontal\"]_&]:h-0.5 [[aria-orientation=\"horizontal\"]_&]:rounded-t-sm',\n        // vertical\n        '[[aria-orientation=\"vertical\"]_&]:bottom-0 [[aria-orientation=\"vertical\"]_&]:right-0 [[aria-orientation=\"vertical\"]_&]:top-0 [[aria-orientation=\"vertical\"]_&]:w-0.5 [[aria-orientation=\"vertical\"]_&]:rounded-l-sm'\n    );\n\n    const triggerId = createTriggerId(context.baseId, id);\n    const panelId = createPanelId(context.baseId, id);\n\n    const trigger = (\n        <button\n            {...otherProps}\n            aria-selected={id === context?.activeTabId}\n            aria-controls={panelId}\n            id={triggerId}\n            role=\"tab\"\n            type=\"button\"\n            className={triggerClassName}\n            disabled={disabled}\n            onFocus={() => context.onChange(id)}\n            ref={ref}\n            tabIndex={context?.activeTabId !== undefined ? (id === context?.activeTabId ? 0 : -1) : 0}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </button>\n    );\n\n    if (tooltip) {\n        return <Tooltip title={tooltip}>{trigger}</Tooltip>;\n    }\n\n    return trigger;\n});\n"],"names":["React","clsx"],"mappings":";;;;;;;AAsBO,MAAM,aAAaA,eAAM,WAAW,SAAS,IAAI,OAAwB,cAA4C;AACxH,QAAM,EAAE,UAAU,IAAI,UAAU,SAAS,GAAG,eAAe;AAC3D,QAAM,UAAUA,eAAM,WAAW,UAAU;AAC3C,QAAM,MAAM,aAAgC,YAAY;AAExD,QAAM,mBAAmBC;AAAAA,IACrB,MAAM;AAAA,IACN;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAEJ,QAAM,kBAAkBA;AAAAA,IACpB,iBAAA;AAAA,IACA;AAAA,EAAA;AAEJ,QAAM,kBAAkBA;AAAAA,IACpB;AAAA;AAAA,IAEA;AAAA;AAAA,IAEA;AAAA,EAAA;AAGJ,QAAM,YAAY,gBAAgB,QAAQ,QAAQ,EAAE;AACpD,QAAM,UAAU,cAAc,QAAQ,QAAQ,EAAE;AAEhD,QAAM,UACFD,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ,iBAAe,OAAO,SAAS;AAAA,MAC/B,iBAAe;AAAA,MACf,IAAI;AAAA,MACJ,MAAK;AAAA,MACL,MAAK;AAAA,MACL,WAAW;AAAA,MACX;AAAA,MACA,SAAS,MAAM,QAAQ,SAAS,EAAE;AAAA,MAClC;AAAA,MACA,UAAU,SAAS,gBAAgB,SAAa,OAAO,SAAS,cAAc,IAAI,KAAM;AAAA,IAAA;AAAA,IACxFA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,GAAkB,QAAS;AAAA,IAC5CA,+BAAA,cAAC,QAAA,EAAK,WAAW,gBAAA,CAAiB;AAAA,EAAA;AAI1C,MAAI,SAAS;AACT,WAAOA,+BAAA,cAAC,SAAA,EAAQ,OAAO,QAAA,GAAU,OAAQ;AAAA,EAC7C;AAEA,SAAO;AACX,CAAC;"}

package/dist/components/Tag/Tag.cjs

@@ -8,18 +8,20 @@ const Tag = React.forwardRef((props, ref) => {
   const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;
   const textRef = React.useRef(null);
   const className = cn(
-    "inline-flex items-center rounded h-6 cursor-default",
+    "inline-flex h-6 cursor-default items-center rounded",
     {
       "opacity-50": disabled,
       "hover:bg-opacity-100": !disabled,
       "cursor-pointer": !!otherProps.onClick,
       "pointer-events-none": disabled || readOnly
     },
-    tailwind.getSubtleColorShadeClasses(color),
+    // NB: not a `color = 'grey'` prop default — that would render `data-taco-color="grey"` on colorless
+    // tags where the attribute is currently absent. Worth promoting in the next major.
+    tailwind.SUBTLE_COLOR_SHADE_CLASSNAME[color ?? "grey"],
     props.className
   );
   return /* @__PURE__ */ React.createElement("span", { ...otherProps, className, ref, "data-taco": "tag", "data-taco-color": color }, /* @__PURE__ */ React.createElement("span", { className: "flex items-center truncate px-2", ref: textRef }, icon ? typeof icon === "string" ? /* @__PURE__ */ React.createElement(Icon.Icon, { name: icon, className: "-ml-1 mr-1 !h-5 !w-5" }) : React.cloneElement(icon, {
-    className: cn(icon.props.className, "mr-1 -ml-1")
+    className: cn(icon.props.className, "-ml-1 mr-1")
   }) : null, /* @__PURE__ */ React.createElement("span", { className: "truncate" }, children)), onDelete ? /* @__PURE__ */ React.createElement(
     Icon.Icon,
     {

package/dist/components/Tag/Tag.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses } from '../../utils/tailwind';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex items-center rounded h-6 cursor-default',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        getSubtleColorShadeClasses(color),\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, 'mr-1 -ml-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["getSubtleColorShadeClasses","Icon"],"mappings":";;;;;;AAeO,MAAM,MAAM,MAAM,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AACzE,QAAA,UAAU,MAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IACvC;AAAA,IACAA,SAAAA,2BAA2B,KAAK;AAAA,IAChC,MAAM;AAAA,EACV;AAEA,SACK,sBAAA,cAAA,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SAClF,sBAAA,cAAA,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACX,sBAAA,cAAAC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAuB,CAAA,IAEnD,MAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EACnD,CAAA,IAEL,MACH,sBAAA,cAAA,QAAA,EAAK,WAAU,WAAY,GAAA,QAAS,CACzC,GACC,WACG,sBAAA;AAAA,IAACA,KAAA;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,MAEd,IACR;AAER,CAAC;;"}
+{"version":3,"file":"Tag.cjs","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Color } from '../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex h-6 cursor-default items-center rounded',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        // NB: not a `color = 'grey'` prop default — that would render `data-taco-color=\"grey\"` on colorless\n        // tags where the attribute is currently absent. Worth promoting in the next major.\n        SUBTLE_COLOR_SHADE_CLASSNAME[color ?? 'grey'],\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, '-ml-1 mr-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["SUBTLE_COLOR_SHADE_CLASSNAME","Icon"],"mappings":";;;;;;AAeO,MAAM,MAAM,MAAM,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AAC/E,QAAM,UAAU,MAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IAAA;AAAA;AAAA;AAAA,IAIvCA,SAAAA,6BAA6B,SAAS,MAAM;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,SACI,sBAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SACnF,sBAAA,cAAC,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACZ,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAA,CAAuB,IAEnD,MAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EAAA,CACnD,IAEL,MACJ,sBAAA,cAAC,QAAA,EAAK,WAAU,WAAA,GAAY,QAAS,CACzC,GACC,WACG,sBAAA;AAAA,IAACA,KAAAA;AAAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,EAAA,IAEd,IACR;AAER,CAAC;;"}

package/dist/components/Tag/Tag.js

@@ -1,23 +1,25 @@
 import React__default from "react";
 import cn from "clsx";
 import { Icon } from "../Icon/Icon.js";
-import { getSubtleColorShadeClasses } from "../../utils/tailwind.js";
+import { SUBTLE_COLOR_SHADE_CLASSNAME } from "../../utils/tailwind.js";
 const Tag = React__default.forwardRef((props, ref) => {
   const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;
   const textRef = React__default.useRef(null);
   const className = cn(
-    "inline-flex items-center rounded h-6 cursor-default",
+    "inline-flex h-6 cursor-default items-center rounded",
     {
       "opacity-50": disabled,
       "hover:bg-opacity-100": !disabled,
       "cursor-pointer": !!otherProps.onClick,
       "pointer-events-none": disabled || readOnly
     },
-    getSubtleColorShadeClasses(color),
+    // NB: not a `color = 'grey'` prop default — that would render `data-taco-color="grey"` on colorless
+    // tags where the attribute is currently absent. Worth promoting in the next major.
+    SUBTLE_COLOR_SHADE_CLASSNAME[color ?? "grey"],
     props.className
   );
   return /* @__PURE__ */ React__default.createElement("span", { ...otherProps, className, ref, "data-taco": "tag", "data-taco-color": color }, /* @__PURE__ */ React__default.createElement("span", { className: "flex items-center truncate px-2", ref: textRef }, icon ? typeof icon === "string" ? /* @__PURE__ */ React__default.createElement(Icon, { name: icon, className: "-ml-1 mr-1 !h-5 !w-5" }) : React__default.cloneElement(icon, {
-    className: cn(icon.props.className, "mr-1 -ml-1")
+    className: cn(icon.props.className, "-ml-1 mr-1")
   }) : null, /* @__PURE__ */ React__default.createElement("span", { className: "truncate" }, children)), onDelete ? /* @__PURE__ */ React__default.createElement(
     Icon,
     {

package/dist/components/Tag/Tag.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Color } from '../../types';\nimport { getSubtleColorShadeClasses } from '../../utils/tailwind';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex items-center rounded h-6 cursor-default',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        getSubtleColorShadeClasses(color),\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, 'mr-1 -ml-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["React"],"mappings":";;;;AAeO,MAAM,MAAMA,eAAM,WAAsC,CAAC,OAAO,QAAQ;AACrE,QAAA,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AACzE,QAAA,UAAUA,eAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IACvC;AAAA,IACA,2BAA2B,KAAK;AAAA,IAChC,MAAM;AAAA,EACV;AAEA,SACKA,+BAAA,cAAA,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SAClFA,+BAAA,cAAA,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACXA,+BAAA,cAAA,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAuB,CAAA,IAEnDA,eAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EACnD,CAAA,IAEL,MACHA,+BAAA,cAAA,QAAA,EAAK,WAAU,WAAY,GAAA,QAAS,CACzC,GACC,WACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,MAEd,IACR;AAER,CAAC;"}
+{"version":3,"file":"Tag.js","sources":["../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Color } from '../../types';\nimport { SUBTLE_COLOR_SHADE_CLASSNAME } from '../../utils/tailwind';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex h-6 cursor-default items-center rounded',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-100': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        // NB: not a `color = 'grey'` prop default — that would render `data-taco-color=\"grey\"` on colorless\n        // tags where the attribute is currently absent. Worth promoting in the next major.\n        SUBTLE_COLOR_SHADE_CLASSNAME[color ?? 'grey'],\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref} data-taco=\"tag\" data-taco-color={color}>\n            <span className=\"flex items-center truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"-ml-1 mr-1 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, {\n                            className: cn(icon.props.className, '-ml-1 mr-1'),\n                        })\n                    )\n                ) : null}\n                <span className=\"truncate\">{children}</span>\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["React"],"mappings":";;;;AAeO,MAAM,MAAMA,eAAM,WAAsC,CAAC,OAAO,QAAQ;AAC3E,QAAM,EAAE,UAAU,OAAO,UAAU,MAAM,UAAU,UAAU,GAAG,WAAA,IAAe;AAC/E,QAAM,UAAUA,eAAM,OAAuB,IAAI;AAEjD,QAAM,YAAY;AAAA,IACd;AAAA,IACA;AAAA,MACI,cAAc;AAAA,MACd,wBAAwB,CAAC;AAAA,MACzB,kBAAkB,CAAC,CAAC,WAAW;AAAA,MAC/B,uBAAuB,YAAY;AAAA,IAAA;AAAA;AAAA;AAAA,IAIvC,6BAA6B,SAAS,MAAM;AAAA,IAC5C,MAAM;AAAA,EAAA;AAGV,SACIA,+BAAA,cAAC,QAAA,EAAM,GAAG,YAAY,WAAsB,KAAU,aAAU,OAAM,mBAAiB,SACnFA,+BAAA,cAAC,QAAA,EAAK,WAAU,mCAAkC,KAAK,QAAA,GAClD,OACG,OAAO,SAAS,WACZA,+BAAA,cAAC,MAAA,EAAK,MAAM,MAAM,WAAU,uBAAA,CAAuB,IAEnDA,eAAM,aAAa,MAAM;AAAA,IACrB,WAAW,GAAG,KAAK,MAAM,WAAW,YAAY;AAAA,EAAA,CACnD,IAEL,MACJA,+BAAA,cAAC,QAAA,EAAK,WAAU,WAAA,GAAY,QAAS,CACzC,GACC,WACGA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,MAAK;AAAA,MACL,SAAS;AAAA,MACT,WAAU;AAAA,IAAA;AAAA,EAAA,IAEd,IACR;AAER,CAAC;"}