@economic/taco 1.37.0 → 1.38.0

package/dist/esm/packages/taco/src/components/Table2/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number;\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/Table2/types.ts"],"sourcesContent":["import React from 'react';\nimport {\n    ColumnFiltersState,\n    ColumnOrderState,\n    ColumnSizingState,\n    OnChangeFn,\n    Row,\n    SortingState,\n    VisibilityState,\n} from '@tanstack/react-table';\nimport { DialogProps } from '../Dialog/Dialog';\nimport { IconName } from '../Icon/Icon';\nimport { MenuProps } from '../Menu/Menu';\n\nexport enum Table2FilterComparator {\n    Contains,\n    DoesNotContain,\n    IsEqualTo,\n    IsNotEqualTo,\n    IsGreaterThan,\n    IsLessThan,\n    IsBetween,\n    IsOneOf,\n    IsNoneOf,\n    IsAllOf,\n    IsEmpty,\n    IsNotEmpty,\n}\n\nexport type Table2Filter<TType = any> = {\n    comparator?: Table2FilterComparator;\n    value: TType | TType[];\n};\n\nexport type ColumnOffsetState = Record<string, number | undefined>;\nexport type RowDensity = 'compact' | 'normal' | 'comfortable' | 'spacious';\nexport type CellAlignment = 'left' | 'center' | 'right';\n\nexport type SortDirection = 'asc' | 'desc';\nexport type ColumnDataType = 'auto' | 'alphanumeric' | 'alphanumericCaseSensitive' | 'datetime' | 'boolean';\n\nexport type Table2ColumnHeaderRenderer<TType = any> = (value: any, row: TType) => JSX.Element | string | null;\nexport type Table2ColumnHeaderMenu = (props: Partial<MenuProps>) => JSX.Element;\nexport type Table2ColumnFooterRenderer = (values: any[]) => JSX.Element | string | null;\n\nexport type Table2ColumnControlProps = {\n    className?: string;\n    disabled?: boolean;\n    invalid?: boolean;\n    onBlur: (newValue?: any) => Promise<void>;\n    onFocus: React.FocusEventHandler;\n    readOnly?: boolean;\n    ref: React.RefObject<HTMLElement>;\n    setValue: (value: any) => void;\n    value: any;\n    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,\n    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this\n    // data attribute we make sure the event is coming from a control component, and then we can make sure\n    // keyboard shortcut works as expected.\n    'data-inline-editing-component'?: 'true';\n};\nexport type Table2ColumnControlRenderer<TType = any> =\n    | ((props: Table2ColumnControlProps, row?: TType) => JSX.Element)\n    | 'datepicker'\n    | 'input'\n    | 'switch';\n\nexport type SortFn<TType = unknown> = (rowA: TType, rowB: TType, columnId: string) => -1 | 0 | 1;\n\nexport type Table2ColumnProps<TType = any> = {\n    accessor: string;\n    align?: CellAlignment;\n    className?: string | ((row: Row<TType>) => string);\n    control?: Table2ColumnControlRenderer<TType>;\n    dataType?: ColumnDataType;\n    defaultActiveColumnIndex?: number;\n    defaultActiveRowIndex?: number;\n    defaultHidden?: boolean;\n    disableFiltering?: boolean;\n    disableHiding?: boolean;\n    disableReordering?: boolean;\n    disableResizing?: boolean;\n    disableSorting?: boolean;\n    defaultWidth?: number | 'grow';\n    header: string;\n    headerClassName?: string;\n    footer?: Table2ColumnFooterRenderer;\n    renderer?: Table2ColumnHeaderRenderer<TType>;\n    menu?: Table2ColumnHeaderMenu;\n    minWidth?: number;\n    sort?: SortDirection;\n    sortFn?: SortFn<TType>;\n    tooltip?: string;\n};\n\nexport type Table2ActionProps<TType> = {\n    dialog?: (rows: TType[], resetSelectedRows: () => void) => (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean | ((rows: TType[]) => boolean);\n    icon: IconName | ((rows: TType[]) => IconName);\n    onClick?: (rows: TType[], resetSelectedRows: () => void) => void;\n    text: string | ((rows: TType[]) => string);\n    visible?: boolean | ((rows: TType[]) => boolean);\n};\n\nexport type Table2RowActionRenderer<TType = unknown> = (row: TType) => JSX.Element | null;\n\nexport type Table2Settings = {\n    columnFilters?: ColumnFiltersState;\n    columnOrder?: ColumnOrderState;\n    columnSizing?: ColumnSizingState;\n    columnVisibility?: VisibilityState;\n    frozenColumnCount?: number;\n    globalFilter?: string;\n    rowDensity?: RowDensity;\n    sorting?: SortingState;\n};\n\nexport type RowClickHandler<TType = any> = (row: TType) => void;\nexport type RowDragHandler<TType = any> = (\n    rows: TType[],\n    showPlaceholder: (string) => void,\n    setDataTransfer: (data: string) => void\n) => void;\nexport type RowDropHandler<TType = any> = (event: React.DragEvent, row: TType) => void;\nexport type RowSelectionHandler<TType = any> = (rows: TType[]) => void;\nexport type RowExpansionRenderer<TType = any> = (row: TType) => (() => JSX.Element) | null;\nexport type SortHandler = OnChangeFn<SortingState>;\nexport type SettingsHandler = OnChangeFn<Table2Settings>;\nexport type SaveHandlerErrorResponse = Record<string, string | undefined | null> | null;\nexport type SaveHandler<TType = any> = (row: TType, accessor: string) => Promise<SaveHandlerErrorResponse | void>;\n\nexport type DataColumnIndexes = {\n    dataColumnStartOffset: number;\n    dataColumnEndOffset: number;\n};\n\nexport type Table2Children<TType = any> = (React.ReactElement<Table2ColumnProps<TType>> | boolean | null | undefined)[];\n\nexport type Table2Props<TType = any> = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    actionsForRow?: Table2RowActionRenderer<TType>[];\n    actionsForRowLength?: number;\n    children: Table2Children;\n    className?: string;\n    data: TType[];\n    defaultActiveRowIndex?: number;\n    disableColumnFiltering?: boolean;\n    disableColumnHiding?: boolean;\n    disableColumnFreezing?: boolean;\n    disableColumnReordering?: boolean;\n    disableColumnResizing?: boolean;\n    disableRowDensity?: boolean;\n    disableRowExpansion?: boolean;\n    disableRowSelection?: boolean;\n    disableMultipleRowSelection?: boolean;\n    disableSearch?: boolean;\n    disableSorting?: boolean;\n    emptyState?: () => JSX.Element;\n    expandedRowRenderer?: RowExpansionRenderer<TType>;\n    length?: number;\n    loadMore?: () => Promise<void>;\n    manualColumnFiltering?: boolean;\n    manualSearch?: boolean;\n    manualSorting?: boolean;\n    onChangeSettings?: SettingsHandler;\n    onRowClick?: RowClickHandler<TType>;\n    onRowDrag?: RowDragHandler<TType>;\n    onRowDrop?: RowDropHandler<TType>;\n    onRowSelect?: RowSelectionHandler<TType>;\n    onSave?: SaveHandler<TType>;\n    toolbarLeft?: JSX.Element;\n    toolbarRight?: JSX.Element;\n    settings?: Table2Settings;\n    _experimentalActionsForTable?: Table2ActionProps<TType>[];\n    _experimentalActionsForTableSummary?: (rows: TType[]) => JSX.Element | string;\n};\n"],"names":["Table2FilterComparator"],"mappings":"IAcYA;AAAZ,WAAYA,sBAAsB;EAC9BA,2EAAQ;EACRA,uFAAc;EACdA,6EAAS;EACTA,mFAAY;EACZA,qFAAa;EACbA,+EAAU;EACVA,6EAAS;EACTA,yEAAO;EACPA,2EAAQ;EACRA,yEAAO;EACPA,0EAAO;EACPA,gFAAU;AACd,CAAC,EAbWA,sBAAsB,KAAtBA,sBAAsB;;;;"}

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

@@ -1,5 +1,6 @@
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { getButtonClasses } from '../Button/util.js';
 import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
 
 const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
@@ -11,7 +12,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
@@ -26,7 +27,7 @@ const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4', '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 ', props.className);
   return /*#__PURE__*/createElement(List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -34,19 +35,31 @@ const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute 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"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // 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"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/createElement(Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
@@ -54,7 +67,7 @@ const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,

package/dist/esm/packages/taco/src/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 cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\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 type TabListProps = React.HTMLAttributes<HTMLDivElement>;\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};\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\nexport type ForwardedTabsWithStatics = 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\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        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { Orientation } from '../../types';\nimport { getButtonClasses } from '../Button/util';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\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 type TabListProps = React.HTMLAttributes<HTMLDivElement>;\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};\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\nexport type ForwardedTabsWithStatics = 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\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    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'border-grey-300 flex flex-row m-0 mb-4',\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    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { children, id, disabled, ...otherProps } = props;\n\n    const triggerClassName = cn(\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        // horizontal\n        '[[aria-orientation=\"vertical\"]_&]:pr-1'\n    );\n    const buttonClassName = cn(\n        getButtonClasses(),\n        'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3'\n    );\n    const activeClassName = cn(\n        'pointer-events-none absolute 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\"]_&]:-mb-px [[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\"]_&]:-mr-px [[aria-orientation=\"vertical\"]_&]:w-0.5'\n    );\n\n    return (\n        <TabsPrimitive.Trigger {...otherProps} className={triggerClassName} disabled={disabled} ref={ref} value={id}>\n            <span className={buttonClassName}>{children}</span>\n            <span className={activeClassName} />\n        </TabsPrimitive.Trigger>\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('[&[data-orientation=\"vertical\"]]:grow outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","triggerClassName","buttonClassName","getButtonClasses","activeClassName","TabContent","List","Trigger","Content"],"mappings":";;;;;MA8DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB;IACI,aAAa,EAAEH,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAChB,wCAAwC,EACxC,sCAAsC,EACtC,qIAAqI,EACrIT,KAAK,CAACQ,SAAS,CAClB;EAED,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEG,QAAQ;IAAEF,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAEvD,MAAMmB,gBAAgB,GAAGV,EAAE,CACvB,sFAAsF;;EAEtF,0CAA0C;;EAE1C,wCAAwC,CAC3C;EACD,MAAMW,eAAe,GAAGX,EAAE,CACtBY,gBAAgB,EAAE,EAClB,6GAA6G,CAChH;EACD,MAAMC,eAAe,GAAGb,EAAE,CACtB,0EAA0E;;EAE1E,2QAA2Q;;EAE3Q,8PAA8P,CACjQ;EAED,oBACIV,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEW,gBAAgB;IAAED,QAAQ,EAAEA,QAAQ;IAAEjB,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;mBACrGH;IAAMS,SAAS,EAAEY;KAAkBhB,QAAQ,CAAQ,eACnDL;IAAMS,SAAS,EAAEc;IAAmB,CAChB;AAEhC,CAAC,CAAC;AAEF,MAAMC,UAAU,gBAAGxB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,oDAAoD,EAAET,KAAK,CAACQ,SAAS,CAAC;EAE3F,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAAC0B,IAAI,GAAGT,OAAO;AACnBjB,IAAI,CAAC2B,OAAO,GAAGR,UAAU;AACzBnB,IAAI,CAAC4B,OAAO,GAAGH,UAAU;;;;"}

package/dist/index.css

@@ -638,23 +638,3 @@
 #yt-table__drag__placeholder {
     @apply flex w-3/12 rounded bg-blue-500 p-4 font-bold text-white;
 }
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] {
-    @apply m-0 mr-4 flex-col border-0 border-r;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply h-8 py-0;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__list {
-    @apply flex-initial;
-}
-
-.yt-tabs.yt-tabs--vertical .yt-tab__panel {
-    @apply flex-grow;
-}
-
-.yt-tabs .yt-tab__list[aria-orientation='vertical'] .yt-tab {
-    @apply rounded-none rounded-l border-0 border-r-2;
-}

package/dist/taco.cjs.development.js

@@ -3786,25 +3786,25 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;
+      return `wcag-blue-500 enabled:hover:wcag-blue-700 enabled:hover:active:wcag-blue-500 disabled:bg-blue-500/50`;
     case 'danger':
-      return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;
+      return `wcag-red-500 enabled:hover:wcag-red-700 enabled:hover:active:wcag-red-500 disabled:bg-red-500/50`;
     case 'ghost':
-      return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
+      return `bg-white border border-blue-500 text-blue-500 enabled:hover:bg-blue-100 enabled:hover:text-blue-700 disabled:border-blue-500/50 disabled:text-blue-500/50`;
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-700 hover:focus:text-grey-700 disabled:hover:text-black `;
+          return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;
         }
-        return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
+        return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
       }
     default:
-      return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;
+      return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -3865,9 +3865,7 @@ const Base = /*#__PURE__*/React.forwardRef(function IconButtonBase(props, ref) {
   } = props;
   const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
-    rounded: !rounded,
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled
+    rounded: !rounded
   }, props.className);
   if (!icon) {
     return null;
@@ -4146,8 +4144,6 @@ const Base$1 = /*#__PURE__*/React.forwardRef(function ButtonBase(props, ref) {
     ...otherProps
   } = props;
   const className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
-    'cursor-not-allowed opacity-50': props.disabled,
-    'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
   }, props.className);
   return createButtonWithTooltip({
@@ -4355,7 +4351,6 @@ const useId = nativeId => {
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
-    highlighted,
     indeterminate,
     invalid,
     label,
@@ -4363,14 +4358,14 @@ const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus:yt-focus',
-  //hover:shadow-[0_0_0_1px_rgba(235,235,235,1)]
-  {
-    'border-grey-300 text-blue-500 hover:text-blue-300 focus:border-blue-500 focus:hover:border-blue-300': !props.disabled && !invalid,
-    'border-grey-200 text-blue-300 cursor-not-allowed': props.disabled,
-    'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
-    'border-red-500 text-red-500 hover:text-red-300 hover:border-red-300 focus:border-red-500 focus:hover:border-red-300': invalid && !props.disabled,
+  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 mt-[0.1rem] focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
     'self-start': !!label
+  }, invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
+    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
   }, props.className);
   let handleChange;
   if (onChange) {
@@ -4421,28 +4416,28 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+  return cn('peer text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)] focus-visible:yt-focus', {
     'bg-white': !props.highlighted && !readOnly,
     // default
-    'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
-    'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
+    'border-grey-300 enabled:hover:border-grey-500 disabled:border-grey-200': !invalid,
     // disabled
-    'border-grey-200 text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
+    'text-opacity-25 cursor-not-allowed placeholder:text-grey-700': disabled,
     // highlighted
-    'bg-[rgba(255,255,0,0.075)]': props.highlighted && disabled,
-    'bg-[rgba(255,255,0,0.2)]': props.highlighted && !disabled,
+    'bg-yellow-100/50': props.highlighted && disabled,
+    'bg-yellow-100': props.highlighted && !disabled,
     // invalid
-    'border-red focus:border-red-300 focus:yt-focus-red active:border-red-700': invalid,
-    'hover:shadow-[0_0_0.15rem_theme(colors.red.500)]': invalid && !disabled,
+    'border-red-500 enabled:hover:border-red-700 disabled:border-red-500/50': invalid,
     // readOnly
     'cursor-not-allowed text-black bg-grey-200': readOnly
   });
 };
-const getButtonStateClasses = invalid => {
+const getButtonStateClasses = (invalid, disabled = false) => {
   if (invalid) {
-    return 'border !border-red-500 group-peer-focus:!border-red-300 focus:yt-focus-red group-focus:group-active:!border-red-300 transition-colors ease-in';
+    return cn('border border-red-500 group-peer-hover:enabled:border-red-700 transition-colors ease-in', {
+      'border-red-500/30': disabled
+    });
   }
-  return 'border border-grey-300 focus:!border-blue-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 transition-colors transition-opacity ease-in';
+  return 'border border-grey-300 group-peer-hover:enabled:border-grey-500 transition-colors transition-opacity ease-in';
 };
 
 const debounce = (fn, delay) => {
@@ -4587,7 +4582,7 @@ const Input = /*#__PURE__*/React.forwardRef(function LegacyInput(props, ref) {
   let postfix;
   if (button) {
     const disabled = button.props.disabled || attributes.disabled;
-    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid), button.props.className);
+    const buttonClassName = cn('items-center focus:z-10 flex justify-center rounded-l-none rounded-r h-full focus:rounded focus:outline-none', getButtonStateClasses(attributes.invalid, disabled), button.props.className);
     postfix = /*#__PURE__*/React.cloneElement(button, {
       className: buttonClassName,
       disabled
@@ -5611,14 +5606,11 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
     "data-taco": "datepicker",
     style: style
   }, /*#__PURE__*/React.createElement(Input, Object.assign({}, input, {
-    button: /*#__PURE__*/React.createElement(Tooltip, {
-      title: texts.datepicker.calendar
-    }, /*#__PURE__*/React.createElement(IconButton, {
+    button: /*#__PURE__*/React.createElement(IconButton, {
       "aria-label": texts.datepicker.expand,
       disabled: input.disabled || input.readOnly,
       icon: "calendar",
       tabIndex: -1,
-      className: " border-grey-300 group-peer-focus:!border-blue-300 group-peer-focus:group-peer-active:!border-blue-700 flex h-full items-center justify-center rounded-l-none rounded-r border transition-colors transition-opacity ease-in focus:z-10 focus:rounded focus:!border-blue-300 focus:outline-none",
       popover: props => /*#__PURE__*/React.createElement(Popover, Object.assign({}, props), /*#__PURE__*/React.createElement(Popover.Content, null, ({
         close
       }) => /*#__PURE__*/React.createElement("div", {
@@ -5644,14 +5636,15 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         }
       }, shortcut.text)))), handleReset && /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: "my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+        className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
         onClick: event => {
           event.persist();
           handleReset(event);
           close();
         }
-      }, texts.datepicker.clear)))))
-    }))
+      }, texts.datepicker.clear))))),
+      tooltip: texts.datepicker.calendar
+    })
   })));
 });
 Datepicker.displayName = 'Datepicker';
@@ -6146,15 +6139,16 @@ const InnerContent = /*#__PURE__*/React__default.forwardRef(function InnerConten
     children,
     ...otherProps
   } = props;
-  const cName = cn('grow-1 p-4', className);
+  const cName = cn('grow flex flex-col', {
+    'overflow-y-hidden': isScrollable,
+    'p-4': !isScrollable
+  }, className);
   return /*#__PURE__*/React__default.createElement("div", Object.assign({}, otherProps, {
     className: cName,
     ref: ref
   }), isScrollable ? /*#__PURE__*/React__default.createElement(ScrollArea, {
-    className: "w-full gap-y-0.5"
-  }, children) : {
-    children
-  });
+    className: "w-full gap-y-0.5 p-4"
+  }, children) : children);
 });
 const Portal = props => {
   const {
@@ -6447,7 +6441,7 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-grey-700': !invalid,
     'text-red-500': invalid,
     'opacity-50': disabled
-  }, props.className);
+  });
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
@@ -7245,10 +7239,12 @@ const RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(pro
     ...otherProps
   } = props;
   const isDisabled = context.disabled || props.disabled;
-  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2', {
-    'border-grey-300 hover:border-4 focus:yt-focus aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-300': !isDisabled && !context.invalid,
-    'border-grey-200 cursor-not-allowed aria-checked:bg-blue-300 aria-checked:border-blue-300 ': isDisabled,
-    'border-red-500 hover:border-4 text-red-500 focus:border-red-500 focus:yt-focus-red aria-checked:bg-red-500 aria-checked:border-red': context.invalid && !isDisabled
+  const className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mt-[0.2rem] rounded-full bg-white border-2 focus-visible:yt-focus disabled:cursor-not-allowed hover:border-4', context.invalid ? {
+    'border-red-500 hover:border-red-700 aria-checked:bg-red-500 aria-checked:border-red-500 hover:aria-checked:border-red-700': !isDisabled,
+    'border-red-500/50 aria-checked:bg-red-500/50 aria-checked:border-red-500/50': isDisabled
+  } : {
+    'border-grey-500 hover:border-grey-700 aria-checked:bg-blue-500 aria-checked:border-blue-500 hover:aria-checked:border-blue-700': !isDisabled,
+    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked:border-blue-500/50': isDisabled
   });
   const labelClassName = cn('flex items-center gap-2', {
     'cursor-pointer': !isDisabled,
@@ -9170,10 +9166,9 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
   }, /*#__PURE__*/React__default.createElement("span", null, children), description ? /*#__PURE__*/React__default.createElement("span", {
     className: "text-grey-700 -mt-1.5 mb-1.5 text-xs"
   }, description) : null)), popover ? /*#__PURE__*/React__default.createElement(IconButton, {
-    rounded: true,
     icon: "ellipsis-vertical",
     appearance: "discrete",
-    className: cn('group-aria-current:visible invisible ml-auto -mr-2 focus:!shadow-none group-hover:visible', {
+    className: cn('group-aria-current:visible invisible -mr-1 ml-auto !h-5 min-h-[theme(spacing.6)] !w-5 min-w-[theme(spacing.6)] hover:!bg-black/[.08] focus:!shadow-none group-hover:visible', {
       '!visible': isMobileDevice((_window = window) === null || _window === void 0 ? void 0 : _window.navigator)
     }),
     onClick: event => {
@@ -9977,10 +9972,10 @@ const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     ...otherProps
   } = props;
   const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex', {
+  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
     'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-300 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-300 focus:yt-focus': !props.disabled,
-    'bg-grey-100 cursor-not-allowed aria-checked:bg-blue-300': props.disabled
+    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
+    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
   }, props.className);
   let labelledByProps = null;
   if (label) {
@@ -12959,7 +12954,9 @@ const Header$1 = function Header(props) {
       const nextSizes = {
         ...sizes
       };
-      if (size) {
+      if (size === 'grow') {
+        nextSizes[header.id] = '1fr';
+      } else if (typeof size === 'number') {
         nextSizes[header.id] = !isInternalFrozenColumn(header.id) && size < MIN_COLUMN_SIZE ? MIN_COLUMN_SIZE : size;
       } else {
         delete nextSizes[header.id];
@@ -13063,7 +13060,7 @@ const HeaderMenu = ({
     '!flex': open
   });
   const menuItems = [];
-  if (table.options.enableHiding) {
+  if (table.options.enableHiding && header.column.getCanHide()) {
     // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
     const handleClick = () => setTimeout(() => header.column.toggleVisibility(), 1);
     menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
@@ -13174,8 +13171,9 @@ function useColumnDefinitions(children, options, tableRef) {
     React__default.Children.toArray(children).filter(child => !!child).forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child)) {
         var _child$props$minWidth;
-        if (child.props.defaultWidth) {
-          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth;
+        const defaultWidth = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        if (defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = defaultWidth;
         }
         if (child.props.defaultHidden && options.enableColumnHiding) {
           defaultColumnVisibility[child.props.accessor] = false;
@@ -13211,7 +13209,7 @@ function useColumnDefinitions(children, options, tableRef) {
             className: child.props.className,
             control: child.props.control,
             dataType: child.props.dataType,
-            defaultWidth: child.props.defaultWidth,
+            defaultWidth,
             disableReordering: child.props.disableReordering,
             menu: child.props.menu,
             tooltip: child.props.tooltip
@@ -13632,7 +13630,9 @@ const useGridTemplate = table => {
     } else if (isInternalColumn(column.id)) {
       size = `${column.getSize()}px`;
     } else if (width) {
-      if (isLastColumn) {
+      if (width === '1fr') {
+        size = 'minmax(max-content, 1fr)';
+      } else if (isLastColumn) {
         size = `minmax(${width}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy
@@ -14965,7 +14965,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
     orientation = 'horizontal',
     ...otherProps
   } = props;
-  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+  const className = cn({
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Root, Object.assign({}, otherProps, {
@@ -14980,7 +14980,7 @@ const Tabs = /*#__PURE__*/React.forwardRef(function Tabs(props, ref) {
   }), children);
 });
 const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
-  const className = cn('yt-tab__list border-b border-grey-300 flex flex-row m-0 mb-4', props.className);
+  const className = cn('border-grey-300 flex flex-row m-0 mb-4', '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 ', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.List, Object.assign({}, props, {
     className: className,
     ref: ref
@@ -14988,19 +14988,31 @@ const TabList = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
 });
 const TabTrigger = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
   const {
+    children,
     id,
     disabled,
     ...otherProps
   } = props;
-  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  const triggerClassName = cn('group relative p-0.5 outline-none disabled:cursor-not-allowed disabled:text-black/50',
+  // horizontal
+  '[[aria-orientation="horizontal"]_&]:pb-1',
+  // horizontal
+  '[[aria-orientation="vertical"]_&]:pr-1');
+  const buttonClassName = cn(getButtonClasses(), 'group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-grey-200 pointer-events-none rounded px-3');
+  const activeClassName = cn('pointer-events-none absolute 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"]_&]:-mb-px [[aria-orientation="horizontal"]_&]:h-0.5',
+  // 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"]_&]:-mr-px [[aria-orientation="vertical"]_&]:w-0.5');
   return /*#__PURE__*/React.createElement(TabsPrimitive.Trigger, Object.assign({}, otherProps, {
-    className: className,
+    className: triggerClassName,
     disabled: disabled,
     ref: ref,
-    style: {
-      transition: 'border 0.2s ease-in'
-    },
     value: id
+  }), /*#__PURE__*/React.createElement("span", {
+    className: buttonClassName
+  }, children), /*#__PURE__*/React.createElement("span", {
+    className: activeClassName
   }));
 });
 const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
@@ -15008,7 +15020,7 @@ const TabContent = /*#__PURE__*/React.forwardRef(function Tab(props, ref) {
     id,
     ...otherProps
   } = props;
-  const className = cn('yt-tab__panel outline-none', props.className);
+  const className = cn('[&[data-orientation="vertical"]]:grow outline-none', props.className);
   return /*#__PURE__*/React.createElement(TabsPrimitive.Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,
@@ -15189,7 +15201,7 @@ const Button$3 = /*#__PURE__*/React__default.forwardRef(function Button(props, r
     ref: ref
   }));
 });
-const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getButtonClasses$1 = (rounded = true) => cn('!h-9 !w-9 flex-shrink-0 flex-grow-0 cursor-pointer relative', 'focus:!outline-none focus:!shadow-none focus-visible:!yt-focus-dark ', 'bg-transparent enabled:hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white', {
   '!rounded-full': rounded
 });
 
@@ -15215,7 +15227,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }) : null, children, isNew ? /*#__PURE__*/React__default.createElement(Badge, {
     color: "blue",
     small: true,
-    className: "absolute top-0 right-0 -mt-1.5 -mr-2.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
+    className: "absolute right-0 top-0 -mr-2.5 -mt-1.5 !h-3 !px-0.5 text-[0.55rem] font-normal"
   }, texts.header.new) : null);
   if (tooltip) {
     return /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -15224,7 +15236,7 @@ const Link$1 = /*#__PURE__*/React__default.forwardRef(function Link(props, ref)
   }
   return link;
 });
-const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', '!text-white hover:text-white focus:text-white', {
+const getLinkClasses = (icon = undefined) => cn('flex h-8 flex-shrink-0 flex-grow-0 cursor-pointer items-center justify-center ', 'focus:!shadow-none focus:!outline-none focus-visible:!yt-focus-dark', 'bg-transparent hover:bg-white/[.08] focus:bg-white/[.08] aria-current-page:bg-white/[.08]', 'text-white hover:text-white focus:text-white', {
   '!rounded-full !h-9 !w-9': icon,
   'whitespace-nowrap px-3 rounded text-sm hidden lg:flex': !icon
 });