@economic/taco 8.1.2-hanger-base-ui.2 → 8.1.2

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 { Button } from '../../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-300 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) => <Button>{text}</Button>}>\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","Button"],"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,cAAQ,IAAK;AAAA,MAAA;AAAA,MAC3C,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 { Button } from '../../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-100 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) => <Button>{text}</Button>}>\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","Button"],"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,cAAQ,IAAK;AAAA,MAAA;AAAA,MAC3C,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;;"}

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

@@ -14,7 +14,7 @@ const focusManagerOptions = {
 const TabList = React__default.forwardRef(function Tab(props, ref) {
   const { children, ...otherProps } = props;
   const className = cn(
-    "border-gray-300 flex flex-row m-0 mb-4 print:hidden",
+    "border-gray-100 flex flex-row m-0 mb-4 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",
     props.className

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 { Button } from '../../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-300 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) => <Button>{text}</Button>}>\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,cAAQ,IAAK;AAAA,MAAA;AAAA,MAC3CA,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 { Button } from '../../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-100 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) => <Button>{text}</Button>}>\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,cAAQ,IAAK;AAAA,MAAA;AAAA,MAC3CA,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;"}

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

@@ -21,7 +21,7 @@ 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-200 pointer-events-none rounded px-3"
+    "group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
   );
   const activeClassName = cn(
     "pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex",

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 '../../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-200 pointer-events-none rounded px-3'\n    );\n    const activeClassName = clsx(\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    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 '../../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 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    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;;"}

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

@@ -19,7 +19,7 @@ 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-200 pointer-events-none rounded px-3"
+    "group-focus-visible:yt-focus-inset group-enabled:group-hover:wcag-gray-100 pointer-events-none rounded px-3"
   );
   const activeClassName = cn(
     "pointer-events-none absolute hidden bg-blue-500 group-aria-selected:flex",

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 '../../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-200 pointer-events-none rounded px-3'\n    );\n    const activeClassName = clsx(\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    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 '../../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 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    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;"}

package/dist/components/Tag/Tag.cjs

@@ -11,7 +11,7 @@ const Tag = React.forwardRef((props, ref) => {
     "inline-flex items-center rounded h-6 cursor-default",
     {
       "opacity-50": disabled,
-      "hover:bg-opacity-75": !disabled,
+      "hover:bg-opacity-100": !disabled,
       "cursor-pointer": !!otherProps.onClick,
       "pointer-events-none": disabled || readOnly
     },

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-75': !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,uBAAuB,CAAC;AAAA,MACxB,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 { 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;;"}

package/dist/components/Tag/Tag.js

@@ -9,7 +9,7 @@ const Tag = React__default.forwardRef((props, ref) => {
     "inline-flex items-center rounded h-6 cursor-default",
     {
       "opacity-50": disabled,
-      "hover:bg-opacity-75": !disabled,
+      "hover:bg-opacity-100": !disabled,
       "cursor-pointer": !!otherProps.onClick,
       "pointer-events-none": disabled || readOnly
     },

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-75': !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,uBAAuB,CAAC;AAAA,MACxB,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 { 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;"}

package/dist/components/Toast/Toast.cjs

@@ -11,11 +11,11 @@ const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }
   const { texts } = Localization.useLocalization();
   const { autoClose, type = "default" } = options;
   const className = cn("bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden", {
-    "border border-gray-200": type === "default" || type === "loading" || !type,
-    "border border-gray-500": type === "success",
+    "border border-gray-500": type === "default" || type === "loading" || !type,
+    "border border-green-500": type === "success",
     "border border-blue-500": type === "information",
-    "border border-yellow-700": type === "warning",
-    "border border-red": type === "error"
+    "border border-yellow-500": type === "warning",
+    "border border-red-500": type === "error"
   });
   const timer = useTimer.useTimer(autoClose, handleClose);
   const controls = framerMotion.useAnimation();

package/dist/components/Toast/Toast.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.cjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-200': type === 'default' || type === 'loading' || !type,\n        'border border-gray-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-700': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["useLocalization","useTimer","useAnimation","getToastEmptyContentWarning","motion","getBadgeIcon","IconButton"],"mappings":";;;;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,0BAA0B,SAAS;AAAA,IACnC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,qBAAqB,SAAS;AAAA,EAAA,CACjC;AACK,QAAA,QAAQC,SAAAA,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAWC,aAAAA,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAKC,iCAA4B,OAAO,CAAC;AAAA,EAAA;AAGrD,QAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAA,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnBC,KAAAA,aAAa,IAAI;AAAA,IACjB,sBAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvD,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;;"}
+{"version":3,"file":"Toast.cjs","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["useLocalization","useTimer","useAnimation","getToastEmptyContentWarning","motion","getBadgeIcon","IconButton"],"mappings":";;;;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAIA,6BAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQC,SAAAA,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAWC,aAAAA,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAKC,iCAA4B,OAAO,CAAC;AAAA,EAAA;AAGrD,QAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEA,QAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAA,sBAAA;AAAA,IAACC,aAAAA,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnBC,KAAAA,aAAa,IAAI;AAAA,IACjB,sBAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvD,sBAAA;AAAA,MAACC,WAAA;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;;"}

package/dist/components/Toast/Toast.js

@@ -9,11 +9,11 @@ const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }
   const { texts } = useLocalization();
   const { autoClose, type = "default" } = options;
   const className = cn("bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden", {
-    "border border-gray-200": type === "default" || type === "loading" || !type,
-    "border border-gray-500": type === "success",
+    "border border-gray-500": type === "default" || type === "loading" || !type,
+    "border border-green-500": type === "success",
     "border border-blue-500": type === "information",
-    "border border-yellow-700": type === "warning",
-    "border border-red": type === "error"
+    "border border-yellow-500": type === "warning",
+    "border border-red-500": type === "error"
   });
   const timer = useTimer(autoClose, handleClose);
   const controls = useAnimation();

package/dist/components/Toast/Toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-200': type === 'default' || type === 'loading' || !type,\n        'border border-gray-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-700': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,0BAA0B,SAAS;AAAA,IACnC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,qBAAqB,SAAS;AAAA,EAAA,CACjC;AACK,QAAA,QAAQ,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAW,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAK,4BAA4B,OAAO,CAAC;AAAA,EAAA;AAGrDA,iBAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEAA,iBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAAA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnB,aAAa,IAAI;AAAA,IACjBA,+BAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvDA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;"}
+{"version":3,"file":"Toast.js","sources":["../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { motion, useAnimation } from 'framer-motion';\nimport { useTimer } from '../../utils/hooks/useTimer';\nimport { getBadgeIcon, getToastEmptyContentWarning } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow print:hidden', {\n        'border border-gray-500': type === 'default' || type === 'loading' || !type,\n        'border border-green-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-500': type === 'warning',\n        'border border-red-500': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        // oxlint-disable-next-line no-console\n        console.warn(getToastEmptyContentWarning(content));\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content as React.ReactNode}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"-mr-2 cursor-pointer self-start !px-0 text-gray-700\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["React"],"mappings":";;;;;;;AA4Ca,MAAA,QAAQ,CAAC,EAAE,SAAS,aAAa,SAAS,aAAa,SAAS,GAAG,YAAqC;AAC3G,QAAA,EAAE,MAAM,IAAI,gBAAgB;AAClC,QAAM,EAAE,WAAW,OAAO,UAAc,IAAA;AAClC,QAAA,YAAY,GAAG,4FAA4F;AAAA,IAC7G,0BAA0B,SAAS,aAAa,SAAS,aAAa,CAAC;AAAA,IACvE,2BAA2B,SAAS;AAAA,IACpC,0BAA0B,SAAS;AAAA,IACnC,4BAA4B,SAAS;AAAA,IACrC,yBAAyB,SAAS;AAAA,EAAA,CACrC;AACK,QAAA,QAAQ,SAAS,WAAW,WAAW;AAC7C,QAAM,WAAW,aAAa;AAE9B,MAAI,CAAC,SAAS;AAEF,YAAA,KAAK,4BAA4B,OAAO,CAAC;AAAA,EAAA;AAGrDA,iBAAM,UAAU,MAAM;AAClB,QAAI,WAAW;AACX,YAAM,MAAM;AAAA,IAAA;AAAA,EAChB,GACD,CAAC,SAAS,CAAC;AAEd,QAAM,yBAAyB,YAAY;AACvC,UAAM,SAAS,MAAM,EAAE,OAAO,MAAM;AACpC,UAAM,SAAS,MAAM,EAAE,OAAO,GAAG;AAAA,EACrC;AAEAA,iBAAM,UAAU,MAAM;AAClB,QAAI,aAAa;AACU,6BAAA;AAEvB,UAAI,MAAM,SAAS;AACf,cAAM,MAAM;AAAA,MAAA;AAAA,IAChB;AAAA,EACJ,GACD,CAAC,WAAW,CAAC;AAGZ,SAAAA,+BAAA;AAAA,IAAC,OAAO;AAAA,IAAP;AAAA,MACI,GAAG;AAAA,MACJ,SAAS;AAAA,MACT;AAAA,MACA,aAAU;AAAA,MACV,cAAc,MAAM;AAAA,MACpB,cAAc,MAAM;AAAA,IAAA;AAAA,IACnB,aAAa,IAAI;AAAA,IACjBA,+BAAA,cAAA,OAAA,EAAI,WAAU,YAAA,GAAa,OAA2B;AAAA,IACvDA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,YAAW;AAAA,QACX,WAAU;AAAA,QACV,MAAK;AAAA,QACL,cAAY,MAAM,OAAO;AAAA,QACzB,SAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAEjB;AAER;"}

package/dist/components/Tooltip/Tooltip.cjs

@@ -31,7 +31,7 @@ const Tooltip = React__namespace.forwardRef(function Tooltip2(props, ref) {
     {
       ...otherProps,
       className: cn(
-        "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden",
+        "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white print:hidden",
         className
       ),
       "data-taco": "tooltip"
@@ -40,18 +40,18 @@ const Tooltip = React__namespace.forwardRef(function Tooltip2(props, ref) {
       "path",
       {
         d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-        className: "fill-blue-900"
+        className: "fill-gray-900"
       }
     ), /* @__PURE__ */ React__namespace.createElement(
       "path",
       {
         d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-        className: "fill-blue-900"
+        className: "fill-gray-900"
       }
     ), /* @__PURE__ */ React__namespace.createElement(
       "path",
       {
-        className: "fill-blue-900",
+        className: "fill-gray-900",
         d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
       }
     ))),

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            <TooltipPrimitive.Trigger delay={250} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-blue-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-blue-900\"\n                                />\n                                <path\n                                    className=\"fill-blue-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["React","Tooltip","TooltipPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAA6B;AACjG,QAAA,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACC,WAAA;AAAA,EAAA;AAIP,SAAAD,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,SAAjB,EAAyB,OAAO,KAAK,KAAiB,QAAQ,SAAU,CAAA,GACzEF,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EACtD,GAAAF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACTF,iCAAA,cAAAE,QAAAA,QAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC7BF,iCAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAChC,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAET,CAAA,CACJ,CACJ;AAER,CAAC;;"}
+{"version":3,"file":"Tooltip.cjs","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            <TooltipPrimitive.Trigger delay={250} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    className=\"fill-gray-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["React","Tooltip","TooltipPrimitive"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAmBO,MAAM,UAAUA,iBAAM,WAAW,SAASC,SAAQ,OAAqB,KAA6B;AACjG,QAAA,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACC,WAAA;AAAA,EAAA;AAIP,SAAAD,iCAAA,cAACE,QAAAA,QAAiB,MAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,SAAjB,EAAyB,OAAO,KAAK,KAAiB,QAAQ,SAAU,CAAA,GACzEF,iCAAA,cAACE,QAAAA,QAAiB,QAAjB,MACGF,iCAAA,cAACE,QAAAA,QAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EACtD,GAAAF,iCAAA;AAAA,IAACE,QAAAA,QAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACTF,iCAAA,cAAAE,QAAAA,QAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC7BF,iCAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAChC,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAAA,iCAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAET,CAAA,CACJ,CACJ;AAER,CAAC;;"}

package/dist/components/Tooltip/Tooltip.js

@@ -12,7 +12,7 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
     {
       ...otherProps,
       className: cn(
-        "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden",
+        "xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white print:hidden",
         className
       ),
       "data-taco": "tooltip"
@@ -21,18 +21,18 @@ const Tooltip = React.forwardRef(function Tooltip2(props, ref) {
       "path",
       {
         d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
-        className: "fill-blue-900"
+        className: "fill-gray-900"
       }
     ), /* @__PURE__ */ React.createElement(
       "path",
       {
         d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
-        className: "fill-blue-900"
+        className: "fill-gray-900"
       }
     ), /* @__PURE__ */ React.createElement(
       "path",
       {
-        className: "fill-blue-900",
+        className: "fill-gray-900",
         d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
       }
     ))),

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            <TooltipPrimitive.Trigger delay={250} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-blue-900 px-2 py-1 text-xs text-white print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-blue-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-blue-900\"\n                                />\n                                <path\n                                    className=\"fill-blue-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","TooltipPrimitive"],"mappings":";;;AAmBO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAA6B;AACjG,QAAA,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACC,WAAA;AAAA,EAAA;AAIP,SAAA,sBAAA,cAACC,UAAiB,MAAjB,MACG,sBAAA,cAACA,UAAiB,SAAjB,EAAyB,OAAO,KAAK,KAAiB,QAAQ,SAAU,CAAA,GACzE,sBAAA,cAACA,UAAiB,QAAjB,MACG,sBAAA,cAACA,UAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EACtD,GAAA,sBAAA;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,sBAAA,cAAAA,UAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC7B,sBAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAChC,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAET,CAAA,CACJ,CACJ;AAER,CAAC;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'clsx';\nimport { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';\n\nexport type TooltipProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement;\n\n    /** Use this value to hide tooltip conditionally */\n    hide?: boolean;\n    /** Text displayed in the tooltip */\n    title: string | JSX.Element;\n    /**\n     *  Placement of the tooltip relative to the reference element. Placement will be reversed if a collision occurs\n     * @defaultValue bottom\n     */\n    placement?: 'top' | 'right' | 'bottom' | 'left';\n};\n\nexport const Tooltip = React.forwardRef(function Tooltip(props: TooltipProps, ref: React.Ref<HTMLElement>) {\n    const { title, children, placement, hide = false, ...otherProps } = props;\n    const className = cn('break-words', otherProps.className);\n\n    if (hide) {\n        return children;\n    }\n\n    return (\n        <TooltipPrimitive.Root>\n            <TooltipPrimitive.Trigger delay={250} ref={ref as any} render={children} />\n            <TooltipPrimitive.Portal>\n                <TooltipPrimitive.Positioner side={placement} sideOffset={8}>\n                    <TooltipPrimitive.Popup\n                        {...otherProps}\n                        className={cn(\n                            'xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded bg-gray-900 px-2 py-1 text-xs text-white print:hidden',\n                            className\n                        )}\n                        data-taco=\"tooltip\">\n                        <TooltipPrimitive.Arrow className=\"data-[side=bottom]:top-[-5px] data-[side=left]:right-[-10px] data-[side=right]:left-[-10px] data-[side=top]:bottom-[-5px] data-[side=left]:rotate-90 data-[side=right]:-rotate-90 data-[side=top]:rotate-180\">\n                            <svg width=\"20\" height=\"10\" viewBox=\"0 0 20 10\">\n                                <path\n                                    d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    d=\"M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z\"\n                                    className=\"fill-gray-900\"\n                                />\n                                <path\n                                    className=\"fill-gray-900\"\n                                    d=\"M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z\"\n                                />\n                            </svg>\n                        </TooltipPrimitive.Arrow>\n                        {title}\n                    </TooltipPrimitive.Popup>\n                </TooltipPrimitive.Positioner>\n            </TooltipPrimitive.Portal>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","TooltipPrimitive"],"mappings":";;;AAmBO,MAAM,UAAU,MAAM,WAAW,SAASA,SAAQ,OAAqB,KAA6B;AACjG,QAAA,EAAE,OAAO,UAAU,WAAW,OAAO,OAAO,GAAG,eAAe;AACpE,QAAM,YAAY,GAAG,eAAe,WAAW,SAAS;AAExD,MAAI,MAAM;AACC,WAAA;AAAA,EAAA;AAIP,SAAA,sBAAA,cAACC,UAAiB,MAAjB,MACG,sBAAA,cAACA,UAAiB,SAAjB,EAAyB,OAAO,KAAK,KAAiB,QAAQ,SAAU,CAAA,GACzE,sBAAA,cAACA,UAAiB,QAAjB,MACG,sBAAA,cAACA,UAAiB,YAAjB,EAA4B,MAAM,WAAW,YAAY,EACtD,GAAA,sBAAA;AAAA,IAACA,UAAiB;AAAA,IAAjB;AAAA,MACI,GAAG;AAAA,MACJ,WAAW;AAAA,QACP;AAAA,QACA;AAAA,MACJ;AAAA,MACA,aAAU;AAAA,IAAA;AAAA,IACT,sBAAA,cAAAA,UAAiB,OAAjB,EAAuB,WAAU,+MAAA,GAC7B,sBAAA,cAAA,OAAA,EAAI,OAAM,MAAK,QAAO,MAAK,SAAQ,YAChC,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,GAAE;AAAA,QACF,WAAU;AAAA,MAAA;AAAA,IAEd,GAAA,sBAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACG,WAAU;AAAA,QACV,GAAE;AAAA,MAAA;AAAA,IAAA,CAEV,CACJ;AAAA,IACC;AAAA,EAET,CAAA,CACJ,CACJ;AAER,CAAC;"}