@economic/taco 1.9.1 → 1.10.0

package/dist/esm/components/Menu/components/Checkbox.js

@@ -1,9 +1,9 @@
-import { createElement } from 'react';
+import { forwardRef, createElement } from 'react';
 import { Icon } from '../../Icon/Icon.js';
 import { CheckboxItem, ItemIndicator } from '@radix-ui/react-dropdown-menu';
 import { useItemStyling } from './Item.js';
 
-const Checkbox = props => {
+const Checkbox = /*#__PURE__*/forwardRef(function MenuCheckboxItem(props) {
   const {
     checked,
     children,
@@ -25,7 +25,7 @@ const Checkbox = props => {
     name: "tick",
     className: "-ml-px !h-4 !w-4"
   })), children);
-};
+});
 
 export { Checkbox };
 //# sourceMappingURL=Checkbox.js.map

package/dist/esm/components/Menu/components/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Menu/components/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Icon } from '../../Icon/Icon';\nimport { useItemStyling } from './Item';\n\nexport type MenuCheckboxItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    /* Whether the checkbox item is disabled */\n    disabled?: boolean;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean | 'indeterminate') => void;\n};\n\nexport const Checkbox = (props: MenuCheckboxItemProps) => {\n    const { checked, children, onChange, ...otherProps } = props;\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.CheckboxItem {...otherProps} className={className} checked={checked} onCheckedChange={onChange}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <Icon name=\"tick\" className=\"-ml-px !h-4 !w-4\" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.CheckboxItem>\n    );\n};\n"],"names":["Checkbox","props","checked","children","onChange","otherProps","className","useItemStyling","disabled","indented","React","DropdownMenuPrimitive","onCheckedChange","Icon","name"],"mappings":";;;;;MAcaA,QAAQ,GAAIC,KAAD;EACpB,MAAM;IAAEC,OAAF;IAAWC,QAAX;IAAqBC,QAArB;IAA+B,GAAGC;MAAeJ,KAAvD;EACA,MAAMK,SAAS,GAAGC,cAAc,CAAC;IAC7BC,QAAQ,EAAEP,KAAK,CAACO,QADa;IAE7BC,QAAQ,EAAE,IAFmB;IAG7BH,SAAS,EAAEL,KAAK,CAACK;GAHW,CAAhC;EAMA,OACII,aAAA,CAACC,YAAD,oBAAwCN;IAAYC,SAAS,EAAEA;IAAWJ,OAAO,EAAEA;IAASU,eAAe,EAAER;IAA7G,EACIM,aAAA,CAACC,aAAD;IAAqCL,SAAS,EAAC;GAA/C,EACII,aAAA,CAACG,IAAD;IAAMC,IAAI,EAAC;IAAOR,SAAS,EAAC;GAA5B,CADJ,CADJ,EAIKH,QAJL,CADJ;AAQH;;;;"}
+{"version":3,"file":"Checkbox.js","sources":["../../../../../src/components/Menu/components/Checkbox.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport { Icon } from '../../Icon/Icon';\nimport { useItemStyling } from './Item';\n\nexport type MenuCheckboxItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    /* Whether the checkbox item is disabled */\n    disabled?: boolean;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean | 'indeterminate') => void;\n};\n\nexport const Checkbox = React.forwardRef<HTMLDivElement, MenuCheckboxItemProps>(function MenuCheckboxItem(props) {\n    const { checked, children, onChange, ...otherProps } = props;\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.CheckboxItem {...otherProps} className={className} checked={checked} onCheckedChange={onChange}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <Icon name=\"tick\" className=\"-ml-px !h-4 !w-4\" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.CheckboxItem>\n    );\n});\n"],"names":["Checkbox","React","MenuCheckboxItem","props","checked","children","onChange","otherProps","className","useItemStyling","disabled","indented","DropdownMenuPrimitive","onCheckedChange","Icon","name"],"mappings":";;;;;MAcaA,QAAQ,gBAAGC,UAAA,CAAwD,SAASC,gBAAT,CAA0BC,KAA1B;EAC5E,MAAM;IAAEC,OAAF;IAAWC,QAAX;IAAqBC,QAArB;IAA+B,GAAGC;MAAeJ,KAAvD;EACA,MAAMK,SAAS,GAAGC,cAAc,CAAC;IAC7BC,QAAQ,EAAEP,KAAK,CAACO,QADa;IAE7BC,QAAQ,EAAE,IAFmB;IAG7BH,SAAS,EAAEL,KAAK,CAACK;GAHW,CAAhC;EAMA,OACIP,aAAA,CAACW,YAAD,oBAAwCL;IAAYC,SAAS,EAAEA;IAAWJ,OAAO,EAAEA;IAASS,eAAe,EAAEP;IAA7G,EACIL,aAAA,CAACW,aAAD;IAAqCJ,SAAS,EAAC;GAA/C,EACIP,aAAA,CAACa,IAAD;IAAMC,IAAI,EAAC;IAAOP,SAAS,EAAC;GAA5B,CADJ,CADJ,EAIKH,QAJL,CADJ;AAQH,CAhBuB;;;;"}

package/dist/esm/components/Menu/components/Header.js

@@ -1,9 +1,9 @@
-import { createElement } from 'react';
+import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { useCurrentMenu } from '../Context.js';
 import { Label } from '@radix-ui/react-dropdown-menu';
 
-const Header = props => {
+const Header = /*#__PURE__*/forwardRef(function MenuHeader(props) {
   const menu = useCurrentMenu();
   const className = cn('flex items-center justify-start h-7 pr-1.5 text-xs text-grey-darkest', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
@@ -12,7 +12,7 @@ const Header = props => {
   return createElement(Label, Object.assign({}, props, {
     className: className
   }));
-};
+});
 
 export { Header };
 //# sourceMappingURL=Header.js.map

package/dist/esm/components/Menu/components/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = (props: MenuHeaderProps) => {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-darkest',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} />;\n};\n"],"names":["Header","props","menu","useCurrentMenu","className","cn","indented","React","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,GAAIC,KAAD;EAClB,MAAMC,IAAI,GAAGC,cAAc,EAA3B;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,sEADgB,EAEhB;IACI,QAAQH,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAEI,QADlB;IAEI,UAAU,EAACJ,IAAD,aAACA,IAAD,eAACA,IAAI,CAAEI,QAAP;GAJE,EAMhBL,KAAK,CAACG,SANU,CAApB;EASA,OAAOG,aAAA,CAACC,KAAD,oBAAiCP;IAAOG,SAAS,EAAEA;IAAnD,CAAP;AACH;;;;"}
+{"version":3,"file":"Header.js","sources":["../../../../../src/components/Menu/components/Header.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { useCurrentMenu } from '../Context';\n\nexport type MenuHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Header = React.forwardRef<HTMLDivElement, MenuHeaderProps>(function MenuHeader(props) {\n    const menu = useCurrentMenu();\n    const className = cn(\n        'flex items-center justify-start h-7 pr-1.5 text-xs text-grey-darkest',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n        },\n        props.className\n    );\n\n    return <DropdownMenuPrimitive.Label {...props} className={className} />;\n});\n"],"names":["Header","React","MenuHeader","props","menu","useCurrentMenu","className","cn","indented","DropdownMenuPrimitive"],"mappings":";;;;;MAOaA,MAAM,gBAAGC,UAAA,CAAkD,SAASC,UAAT,CAAoBC,KAApB;EACpE,MAAMC,IAAI,GAAGC,cAAc,EAA3B;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,sEADgB,EAEhB;IACI,QAAQH,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAEI,QADlB;IAEI,UAAU,EAACJ,IAAD,aAACA,IAAD,eAACA,IAAI,CAAEI,QAAP;GAJE,EAMhBL,KAAK,CAACG,SANU,CAApB;EASA,OAAOL,aAAA,CAACQ,KAAD,oBAAiCN;IAAOG,SAAS,EAAEA;IAAnD,CAAP;AACH,CAZqB;;;;"}

package/dist/esm/components/Menu/components/Item.js

@@ -23,11 +23,11 @@ const useItemStyling = ({
       menu === null || menu === void 0 ? void 0 : menu.registerIndentation();
     }
   }, [indented]);
-  return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', 'text-black aria-disabled:text-grey hover:bg-grey-light hover:text-black', {
+  return cn('flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group', {
     'pl-7': menu === null || menu === void 0 ? void 0 : menu.indented,
     'pl-1.5': !(menu !== null && menu !== void 0 && menu.indented),
-    'cursor-pointer': !disabled,
-    'cursor-not-allowed': disabled
+    'cursor-pointer hover:bg-grey-light text-black hover:text-black': !disabled,
+    'cursor-not-allowed hover:bg-white text-grey-dark': disabled
   }, className);
 };
 const Shortcut = props => {

package/dist/esm/components/Menu/components/Item.js.map

@@ -1 +1 @@
-{"version":3,"file":"Item.js","sources":["../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        'text-black aria-disabled:text-grey hover:bg-grey-light hover:text-black',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer': !disabled,\n            'cursor-not-allowed': disabled,\n        },\n        className\n    );\n};\n\nexport const Shortcut = props => {\n    return <span {...props} className=\"text-grey-darkest ml-auto pl-3\" />;\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon && <Icon name={icon} />}\n            {props.children}\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger"],"mappings":";;;;;;MAQaA,IAAI,GAAG,CAAC;EAAEC;AAAF,CAAD,KAChBC,aAAA,OAAA;EAAMC,SAAS,EAAC;CAAhB,EACID,aAAA,CAACE,MAAD;EAAeD,SAAS,EAAC;EAA0BF,IAAI,EAAEA;CAAzD,CADJ;MAKSI,cAAc,GAAG,CAAC;EAAEC,QAAF;EAAYC,QAAZ;EAAsBJ;AAAtB,CAAD;EAC1B,MAAMK,IAAI,GAAGC,cAAc,EAA3B;EAEAP,SAAA,CAAgB;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAD,aAACA,IAAD,eAACA,IAAI,CAAED,QAAP,CAAhB,EAAiC;MAC7BC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,mBAAN;;GAFR,EAIG,CAACH,QAAD,CAJH;EAMA,OAAOI,EAAE,CACL,6FADK,EAEL,yEAFK,EAGL;IACI,QAAQH,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAED,QADlB;IAEI,UAAU,EAACC,IAAD,aAACA,IAAD,eAACA,IAAI,CAAED,QAAP,CAFd;IAGI,kBAAkB,CAACD,QAHvB;IAII,sBAAsBA;GAPrB,EASLH,SATK,CAAT;AAWH;MAEYS,QAAQ,GAAGC,KAAK;EACzB,OAAOX,aAAA,OAAA,oBAAUW;IAAOV,SAAS,EAAC;IAA3B,CAAP;AACH;MAUYW,IAAI,gBAAGZ,UAAA,CAAiB,SAASa,QAAT,CAAkBF,KAAlB,EAAwCG,GAAxC;;;EACjC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,OAAhB;IAAyBC,QAAzB;IAAmC,GAAGC;MAAeR,KAA3D;EACA,MAAMV,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEO,KAAK,CAACP,QADa;IAE7BC,QAAQ,EAAE,CAAC,CAACW,IAFiB;IAG7Bf,SAAS,EAAEU,KAAK,CAACV;GAHW,CAAhC;EAMA,MAAMG,QAAQ,sBAAGO,KAAK,CAACP,QAAT,6DAAqBO,KAAK,CAAC,eAAD,CAAxC;EAEA,IAAIS,WAAJ;;EAGA,IAAIhB,QAAJ,EAAc;IACVgB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAN;MACAD,KAAK,CAACE,eAAN;KAFJ;;;EAMJ,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACI,KAAD,CAAP;;;IAGJ,IAAIV,KAAK,CAAC,eAAD,CAAL,IAA0B,OAAOI,MAAP,KAAkB,UAAhD,EAA4D;MACxDM,KAAK,CAACC,cAAN;;GANR;;EAUA,IAAIG,MAAM,GACNzB,aAAA,CAAC0B,MAAD,oBAAgCP;IAAYlB,SAAS,EAAEA;IAAWgB,OAAO,EAAEG;IAAaO,QAAQ,EAAEH;IAAcV,GAAG,EAAEA;IAArH,EACKE,IAAI,IAAIhB,aAAA,CAACF,IAAD;IAAMC,IAAI,EAAEiB;GAAZ,CADb,EAEKL,KAAK,CAACiB,QAFX,EAGKV,QAAQ,IAAIlB,aAAA,CAACU,QAAD,MAAA,EAAWQ,QAAX,CAHjB,CADJ;;EAQA,IAAI,OAAOH,MAAP,KAAkB,UAAtB,EAAkC;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEc,OAAO,EAAEJ;KAAZ,CAAf;;;EAGJ,OAAOA,MAAP;AACH,CA3CmB;;;;"}
+{"version":3,"file":"Item.js","sources":["../../../../../src/components/Menu/components/Item.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { IconName } from '../../Icon/Icon';\nimport { Icon as IconPrimitive } from '../../Icon/Icon';\nimport { useCurrentMenu } from '../Context';\nimport { DialogProps } from '../../Dialog/Dialog';\n\nexport const Icon = ({ name }) => (\n    <span className=\"absolute left-0 ml-1\">\n        <IconPrimitive className=\"-ml-px -mt-px !h-5 !w-5\" name={name} />\n    </span>\n);\n\nexport const useItemStyling = ({ disabled, indented, className }) => {\n    const menu = useCurrentMenu();\n\n    React.useEffect(() => {\n        if (indented && !menu?.indented) {\n            menu?.registerIndentation();\n        }\n    }, [indented]);\n\n    return cn(\n        'flex items-center justify-start h-8 pr-1.5 relative rounded w-full focus:outline-none group',\n        {\n            'pl-7': menu?.indented,\n            'pl-1.5': !menu?.indented,\n            'cursor-pointer hover:bg-grey-light text-black hover:text-black': !disabled,\n            'cursor-not-allowed hover:bg-white text-grey-dark': disabled,\n        },\n        className\n    );\n};\n\nexport const Shortcut = props => {\n    return <span {...props} className=\"text-grey-darkest ml-auto pl-3\" />;\n};\n\nexport type MenuItemProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> & {\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    disabled?: boolean;\n    icon?: IconName;\n    onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;\n    shortcut?: string;\n};\n\nexport const Item = React.forwardRef(function MenuItem(props: MenuItemProps, ref: React.Ref<HTMLDivElement>) {\n    const { dialog, icon, onClick, shortcut, ...otherProps } = props;\n    const className = useItemStyling({\n        disabled: props.disabled,\n        indented: !!icon,\n        className: props.className,\n    });\n\n    const disabled = props.disabled ?? props['aria-disabled'];\n\n    let handleClick;\n\n    // radix has a bug that does not disable clicks when disabled is set on items\n    if (disabled) {\n        handleClick = event => {\n            event.preventDefault();\n            event.stopPropagation();\n        };\n    }\n\n    const handleSelect = event => {\n        if (onClick) {\n            onClick(event);\n        }\n\n        if (props['aria-haspopup'] || typeof dialog === 'function') {\n            event.preventDefault();\n        }\n    };\n\n    let button = (\n        <DropdownMenuPrimitive.Item {...otherProps} className={className} onClick={handleClick} onSelect={handleSelect} ref={ref}>\n            {icon && <Icon name={icon} />}\n            {props.children}\n            {shortcut && <Shortcut>{shortcut}</Shortcut>}\n        </DropdownMenuPrimitive.Item>\n    );\n\n    if (typeof dialog === 'function') {\n        button = dialog({ trigger: button });\n    }\n\n    return button;\n});\n"],"names":["Icon","name","React","className","IconPrimitive","useItemStyling","disabled","indented","menu","useCurrentMenu","registerIndentation","cn","Shortcut","props","Item","MenuItem","ref","dialog","icon","onClick","shortcut","otherProps","handleClick","event","preventDefault","stopPropagation","handleSelect","button","DropdownMenuPrimitive","onSelect","children","trigger"],"mappings":";;;;;;MAQaA,IAAI,GAAG,CAAC;EAAEC;AAAF,CAAD,KAChBC,aAAA,OAAA;EAAMC,SAAS,EAAC;CAAhB,EACID,aAAA,CAACE,MAAD;EAAeD,SAAS,EAAC;EAA0BF,IAAI,EAAEA;CAAzD,CADJ;MAKSI,cAAc,GAAG,CAAC;EAAEC,QAAF;EAAYC,QAAZ;EAAsBJ;AAAtB,CAAD;EAC1B,MAAMK,IAAI,GAAGC,cAAc,EAA3B;EAEAP,SAAA,CAAgB;IACZ,IAAIK,QAAQ,IAAI,EAACC,IAAD,aAACA,IAAD,eAACA,IAAI,CAAED,QAAP,CAAhB,EAAiC;MAC7BC,IAAI,SAAJ,IAAAA,IAAI,WAAJ,YAAAA,IAAI,CAAEE,mBAAN;;GAFR,EAIG,CAACH,QAAD,CAJH;EAMA,OAAOI,EAAE,CACL,6FADK,EAEL;IACI,QAAQH,IAAR,aAAQA,IAAR,uBAAQA,IAAI,CAAED,QADlB;IAEI,UAAU,EAACC,IAAD,aAACA,IAAD,eAACA,IAAI,CAAED,QAAP,CAFd;IAGI,kEAAkE,CAACD,QAHvE;IAII,oDAAoDA;GANnD,EAQLH,SARK,CAAT;AAUH;MAEYS,QAAQ,GAAGC,KAAK;EACzB,OAAOX,aAAA,OAAA,oBAAUW;IAAOV,SAAS,EAAC;IAA3B,CAAP;AACH;MAUYW,IAAI,gBAAGZ,UAAA,CAAiB,SAASa,QAAT,CAAkBF,KAAlB,EAAwCG,GAAxC;;;EACjC,MAAM;IAAEC,MAAF;IAAUC,IAAV;IAAgBC,OAAhB;IAAyBC,QAAzB;IAAmC,GAAGC;MAAeR,KAA3D;EACA,MAAMV,SAAS,GAAGE,cAAc,CAAC;IAC7BC,QAAQ,EAAEO,KAAK,CAACP,QADa;IAE7BC,QAAQ,EAAE,CAAC,CAACW,IAFiB;IAG7Bf,SAAS,EAAEU,KAAK,CAACV;GAHW,CAAhC;EAMA,MAAMG,QAAQ,sBAAGO,KAAK,CAACP,QAAT,6DAAqBO,KAAK,CAAC,eAAD,CAAxC;EAEA,IAAIS,WAAJ;;EAGA,IAAIhB,QAAJ,EAAc;IACVgB,WAAW,GAAGC,KAAK;MACfA,KAAK,CAACC,cAAN;MACAD,KAAK,CAACE,eAAN;KAFJ;;;EAMJ,MAAMC,YAAY,GAAGH,KAAK;IACtB,IAAIJ,OAAJ,EAAa;MACTA,OAAO,CAACI,KAAD,CAAP;;;IAGJ,IAAIV,KAAK,CAAC,eAAD,CAAL,IAA0B,OAAOI,MAAP,KAAkB,UAAhD,EAA4D;MACxDM,KAAK,CAACC,cAAN;;GANR;;EAUA,IAAIG,MAAM,GACNzB,aAAA,CAAC0B,MAAD,oBAAgCP;IAAYlB,SAAS,EAAEA;IAAWgB,OAAO,EAAEG;IAAaO,QAAQ,EAAEH;IAAcV,GAAG,EAAEA;IAArH,EACKE,IAAI,IAAIhB,aAAA,CAACF,IAAD;IAAMC,IAAI,EAAEiB;GAAZ,CADb,EAEKL,KAAK,CAACiB,QAFX,EAGKV,QAAQ,IAAIlB,aAAA,CAACU,QAAD,MAAA,EAAWQ,QAAX,CAHjB,CADJ;;EAQA,IAAI,OAAOH,MAAP,KAAkB,UAAtB,EAAkC;IAC9BU,MAAM,GAAGV,MAAM,CAAC;MAAEc,OAAO,EAAEJ;KAAZ,CAAf;;;EAGJ,OAAOA,MAAP;AACH,CA3CmB;;;;"}

package/dist/esm/components/Menu/components/RadioGroup.js

@@ -1,8 +1,8 @@
-import { createElement, useContext, createContext } from 'react';
+import { useContext, createElement, createContext, forwardRef } from 'react';
 import cn from 'classnames';
-import { RadioGroup as RadioGroup$1, RadioItem as RadioItem$1, ItemIndicator } from '@radix-ui/react-dropdown-menu';
+import { RadioItem as RadioItem$1, ItemIndicator, RadioGroup as RadioGroup$1 } from '@radix-ui/react-dropdown-menu';
 import { useItemStyling } from './Item.js';
-import { useRadioGroup, getRadioGroupItemValueAsString } from '../../RadioGroup/RadioGroup.js';
+import { getRadioGroupItemValueAsString, useRadioGroup } from '../../RadioGroup/RadioGroup.js';
 
 const RadioItem = props => {
   const context = useContext(MenuRadioGroupContext);
@@ -30,7 +30,7 @@ const RadioItem = props => {
 const MenuRadioGroupContext = /*#__PURE__*/createContext({
   disabled: false
 });
-const RadioGroup = props => {
+const RadioGroup = /*#__PURE__*/forwardRef(function MenuRadioItem(props) {
   const {
     context,
     props: otherProps
@@ -41,7 +41,7 @@ const RadioGroup = props => {
   }, createElement(RadioGroup$1, Object.assign({}, otherProps, {
     className: className
   })));
-};
+});
 RadioGroup.Item = RadioItem;
 
 export { RadioGroup, RadioItem };

package/dist/esm/components/Menu/components/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport const RadioGroup = (props: MenuRadioGroupProps) => {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} />\n        </MenuRadioGroupContext.Provider>\n    );\n};\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAAD;EACrB,MAAMC,OAAO,GAAGC,UAAA,CAAiBC,qBAAjB,CAAhB;EACA,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmB,GAAGC;MAAeN,KAA3C;EACA,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAR,IAAoBP,KAAK,CAACO,QAA3C;EACA,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QADmB;IAE7BG,QAAQ,EAAE,IAFmB;IAG7BF,SAAS,EAAER,KAAK,CAACQ;GAHW,CAAhC;EAMA,OACIN,aAAA,CAACS,WAAD,oBACQL;IACJE,SAAS,EAAEA;IACXD,QAAQ,EAAEA;IACVF,KAAK,EAAEO,8BAA8B,CAACP,KAAD;IAJzC,EAKIH,aAAA,CAACS,aAAD;IAAqCH,SAAS,EAAC;GAA/C,EACIN,aAAA,OAAA;IAAMM,SAAS,EAAC;GAAhB,CADJ,CALJ,EAQKJ,QARL,CADJ;AAYH;AAED,MAAMD,qBAAqB,gBAAGD,aAAA,CAAoB;EAAEK,QAAQ,EAAE;AAAZ,CAApB,CAA9B;MAIaM,UAAU,GAAIb,KAAD;EACtB,MAAM;IAAEC,OAAF;IAAWD,KAAK,EAAEM;MAAeQ,aAAa,CAACd,KAAD,CAApD;EACA,MAAMQ,SAAS,GAAGO,EAAE,CAAC,eAAD,EAAkBf,KAAK,CAACQ,SAAxB,CAApB;EAEA,OACIN,aAAA,CAACC,qBAAqB,CAACa,QAAvB;IAAgCX,KAAK,EAAEJ;GAAvC,EACIC,aAAA,CAACS,YAAD,oBAAsCL;IAAYE,SAAS,EAAEA;IAA7D,CADJ,CADJ;AAKH;AACDK,UAAU,CAACI,IAAX,GAAkBlB,SAAlB;;;;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../src/components/Menu/components/RadioGroup.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';\nimport cn from 'classnames';\nimport { getRadioGroupItemValueAsString, RadioGroupItemProps, RadioGroupProps, useRadioGroup } from '../../RadioGroup/RadioGroup';\nimport { useItemStyling } from './Item';\n\nexport type MenuRadioGroupItemProps = RadioGroupItemProps<HTMLDivElement>;\n\nexport const RadioItem = (props: MenuRadioGroupItemProps) => {\n    const context = React.useContext(MenuRadioGroupContext);\n    const { children, value, ...otherProps } = props;\n    const disabled = context.disabled || props.disabled;\n    const className = useItemStyling({\n        disabled: disabled,\n        indented: true,\n        className: props.className,\n    });\n\n    return (\n        <DropdownMenuPrimitive.RadioItem\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            value={getRadioGroupItemValueAsString(value)}>\n            <DropdownMenuPrimitive.ItemIndicator className=\"absolute left-0 ml-1.5\">\n                <span className=\"ml-1 flex h-1.5 w-1.5 rounded-full bg-current \" />\n            </DropdownMenuPrimitive.ItemIndicator>\n            {children}\n        </DropdownMenuPrimitive.RadioItem>\n    );\n};\n\nconst MenuRadioGroupContext = React.createContext({ disabled: false });\n\nexport type MenuRadioGroupProps = RadioGroupProps;\n\nexport type ForwardedMenuRadioGroupWithStatics = React.ForwardRefExoticComponent<\n    MenuRadioGroupProps & React.RefAttributes<HTMLElement>\n> & {\n    Item: React.FunctionComponent<MenuRadioGroupItemProps>;\n};\n\nexport const RadioGroup = React.forwardRef<HTMLDivElement, MenuRadioGroupProps>(function MenuRadioItem(props) {\n    const { context, props: otherProps } = useRadioGroup(props);\n    const className = cn('flex flex-col', props.className);\n\n    return (\n        <MenuRadioGroupContext.Provider value={context}>\n            <DropdownMenuPrimitive.RadioGroup {...otherProps} className={className} />\n        </MenuRadioGroupContext.Provider>\n    );\n}) as ForwardedMenuRadioGroupWithStatics;\nRadioGroup.Item = RadioItem;\n"],"names":["RadioItem","props","context","React","MenuRadioGroupContext","children","value","otherProps","disabled","className","useItemStyling","indented","DropdownMenuPrimitive","getRadioGroupItemValueAsString","RadioGroup","MenuRadioItem","useRadioGroup","cn","Provider","Item"],"mappings":";;;;;;MAQaA,SAAS,GAAIC,KAAD;EACrB,MAAMC,OAAO,GAAGC,UAAA,CAAiBC,qBAAjB,CAAhB;EACA,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmB,GAAGC;MAAeN,KAA3C;EACA,MAAMO,QAAQ,GAAGN,OAAO,CAACM,QAAR,IAAoBP,KAAK,CAACO,QAA3C;EACA,MAAMC,SAAS,GAAGC,cAAc,CAAC;IAC7BF,QAAQ,EAAEA,QADmB;IAE7BG,QAAQ,EAAE,IAFmB;IAG7BF,SAAS,EAAER,KAAK,CAACQ;GAHW,CAAhC;EAMA,OACIN,aAAA,CAACS,WAAD,oBACQL;IACJE,SAAS,EAAEA;IACXD,QAAQ,EAAEA;IACVF,KAAK,EAAEO,8BAA8B,CAACP,KAAD;IAJzC,EAKIH,aAAA,CAACS,aAAD;IAAqCH,SAAS,EAAC;GAA/C,EACIN,aAAA,OAAA;IAAMM,SAAS,EAAC;GAAhB,CADJ,CALJ,EAQKJ,QARL,CADJ;AAYH;AAED,MAAMD,qBAAqB,gBAAGD,aAAA,CAAoB;EAAEK,QAAQ,EAAE;AAAZ,CAApB,CAA9B;MAUaM,UAAU,gBAAGX,UAAA,CAAsD,SAASY,aAAT,CAAuBd,KAAvB;EAC5E,MAAM;IAAEC,OAAF;IAAWD,KAAK,EAAEM;MAAeS,aAAa,CAACf,KAAD,CAApD;EACA,MAAMQ,SAAS,GAAGQ,EAAE,CAAC,eAAD,EAAkBhB,KAAK,CAACQ,SAAxB,CAApB;EAEA,OACIN,aAAA,CAACC,qBAAqB,CAACc,QAAvB;IAAgCZ,KAAK,EAAEJ;GAAvC,EACIC,aAAA,CAACS,YAAD,oBAAsCL;IAAYE,SAAS,EAAEA;IAA7D,CADJ,CADJ;AAKH,CATyB;AAU1BK,UAAU,CAACK,IAAX,GAAkBnB,SAAlB;;;;"}

package/dist/esm/components/Navigation/Navigation.js

@@ -58,7 +58,7 @@ const Panel = /*#__PURE__*/React__default.forwardRef(function Panel(props, ref)
 const MenuGroup = /*#__PURE__*/React__default.forwardRef(function MenuGroup(props, ref) {
   const className = cn('flex-shrink-0 space-y-1 outline-none', {
     'bg-white pb-2': props.fixed
-  }, props.className);
+  }, typeof props.className === 'function' ? props.className(false) : props.className);
 
   const title = expanded => {
     const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {

package/dist/esm/components/Navigation/Navigation.js.map

@@ -1 +1 @@
-{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}
+{"version":3,"file":"Navigation.js","sources":["../../../../src/components/Navigation/Navigation.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { TreeviewProps, Treeview, TreeviewGroupProps, TreeviewItemProps } from '../Treeview/Treeview';\nimport { Icon } from '../Icon/Icon';\nimport { useDropTarget } from '../../utils/hooks/useDropTarget';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport './Navigation.css';\n\n// Item\nexport type NavigationItemProps = Omit<TreeviewItemProps, 'prefix'> & {\n    /** Change the style to indicate the link is selected */\n    active?: boolean;\n    /** Handler to be used when dropping a dragged element over the navigation link */\n    onDrop?: React.DragEventHandler;\n    /**\n     * Small amount of information placed next to the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a relevant information of the link,\n     * for e.g. the number of unread notifications\n     */\n    postfix?: React.ReactNode;\n    /**\n     * Small amount of information placed before the text of the link.\n     * This can be any valid react element, for e.g. a `span`.\n     * Should be used to indicate a feedback for user,\n     * for e.g. display some sort of visual informational state or a relevant icon.\n     */\n    prefix?: React.ReactNode;\n    /** Target of the link */\n    target?: string;\n};\n\nconst Item = React.forwardRef(function Item(props: NavigationItemProps, ref: React.Ref<HTMLAnchorElement>) {\n    const { active, children, onDrop, postfix, prefix, role, ...otherProps } = props;\n    const proxyRef = useProxiedRef<HTMLAnchorElement>(ref);\n    const [isDraggedOver, dropTargetProps] = useDropTarget(onDrop);\n    const isTreeitem = role === 'treeitem';\n    const className = cn(\n        'yt-navigation__item cursor-pointer',\n        {\n            'w-full mb-px py-1 px-3 flex items-center hover:bg-grey-dark': isTreeitem,\n            'bg-white w-full h-10 px-3 flex-shrink-0 flex items-center justify-between cursor-pointer': !isTreeitem,\n            'yt-navigation__item--active': active && !isDraggedOver,\n            'bg-grey-dark': isTreeitem && active && !isDraggedOver,\n            'yt-navigation__item--dropping bg-blue': isDraggedOver,\n        },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLSpanElement>): void => {\n        if (event.target instanceof HTMLAnchorElement || event.target instanceof HTMLButtonElement) {\n            return;\n        }\n\n        if (proxyRef.current) {\n            proxyRef.current.click();\n        }\n    };\n\n    return (\n        <span {...dropTargetProps} className={className} onClick={handleClick} role={role}>\n            {prefix && <span className=\"yt-navigation__item__prefix flex items-center\">{prefix}</span>}\n            <a {...otherProps} className=\"block flex-grow truncate\" ref={proxyRef}>\n                {children}\n            </a>\n            {postfix && <span className=\"yt-navigation__item__postfix ml-1\">{postfix}</span>}\n        </span>\n    );\n});\n\n// Panel\nexport type NavigationPanelProps = React.HTMLAttributes<HTMLDivElement>;\n\nconst Panel = React.forwardRef(function Panel(props: NavigationPanelProps, ref: React.Ref<HTMLDivElement>) {\n    return <div {...props} className={cn('w-full bg-white p-3', props.className)} ref={ref} />;\n});\n\n// Group\nexport type NavigationMenuGroupProps = TreeviewGroupProps;\n\nconst MenuGroup = React.forwardRef(function MenuGroup(props: NavigationMenuGroupProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn(\n        'flex-shrink-0 space-y-1 outline-none',\n        {\n            'bg-white pb-2': props.fixed,\n        },\n        typeof props.className === 'function' ? props.className(false) : props.className\n    );\n    const title = (expanded: boolean): JSX.Element => {\n        const className = cn('bg-white h-10 pl-3 pr-1 flex items-center justify-between w-full', {\n            'mb-1': expanded,\n            'cursor-pointer hover:text-blue': !props.fixed,\n        });\n\n        return (\n            <span className={className}>\n                {typeof props.title === 'function' ? props.title(expanded) : props.title}\n                {!props.fixed && <Icon name={expanded ? 'chevron-up' : 'chevron-down'} />}\n            </span>\n        );\n    };\n\n    return <Treeview.Group {...props} className={className} title={title} ref={ref} />;\n});\n\n// Menu\nexport type NavigationMenuProps = React.PropsWithChildren<TreeviewProps>;\n\nexport type ForwardedNavigationMenuWithStatics = React.ForwardRefExoticComponent<\n    NavigationMenuProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Expandable region reprezenting a group of related links */\n    Group: React.ForwardRefExoticComponent<NavigationMenuGroupProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nconst Menu = React.forwardRef(function Menu(props: NavigationMenuProps, ref: React.Ref<HTMLDivElement>) {\n    const scrollableAreas = React.useMemo(() => {\n        const scrollableAreas: any[] = [];\n\n        const children = React.Children.toArray(props.children).filter(\n            child => !!child\n        ) as React.ReactElement<NavigationMenuGroupProps>[];\n\n        children.forEach(child => {\n            if (child.props.fixed) {\n                scrollableAreas.push(child);\n            } else {\n                const x = scrollableAreas[scrollableAreas.length - 1];\n                if (Array.isArray(x)) {\n                    x.push(child);\n                } else {\n                    scrollableAreas.push([child]);\n                }\n            }\n        });\n\n        return scrollableAreas;\n    }, [props.children]);\n\n    return (\n        <Treeview\n            {...props}\n            className={cn('divide-grey-light flex flex-grow flex-col divide-y-2 overflow-y-auto', props.className)}\n            ref={ref}>\n            {scrollableAreas.map((area, i) =>\n                Array.isArray(area) ? (\n                    <div\n                        className=\"divide-grey-light flex h-0 flex-auto flex-shrink-0 flex-grow flex-col divide-y-2 overflow-y-auto\"\n                        key={i}>\n                        {area}\n                    </div>\n                ) : (\n                    area\n                )\n            )}\n        </Treeview>\n    );\n}) as ForwardedNavigationMenuWithStatics;\n\nMenu.Group = MenuGroup;\n\n// Navigation\nexport type NavigationProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type ForwardedNavigationWithStatics = React.ForwardRefExoticComponent<\n    NavigationProps & React.RefAttributes<HTMLDivElement>\n> & {\n    /** Navigation link */\n    Item: React.ForwardRefExoticComponent<NavigationItemProps & React.RefAttributes<HTMLAnchorElement>>;\n    /**\n     * Container for the expandable groups that hold navigation links.\n     * Should be used as a direct child of Navigation component, e.g. `Navigation.Menu`.\n     * Should have the menu groups as a direct child, e.g. `Navigation.Menu.Group`\n     */\n    Menu: ForwardedNavigationMenuWithStatics;\n    /**\n     * Isolated container within the Navigation.\n     * This can be used to create a region in the Navigation that is usually not scrollable, nor expandable,\n     * containing useful information for user and quick actions\n     */\n    Panel: React.ForwardRefExoticComponent<NavigationPanelProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Navigation = React.forwardRef(function Navigation(props: NavigationProps, ref: React.Ref<HTMLDivElement>) {\n    const { children, ...otherProps } = props;\n    const className = cn('h-full flex flex-col bg-grey-light divide-y-2 divide-grey-light', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"navigation\" ref={ref}>\n            {children}\n        </div>\n    );\n}) as ForwardedNavigationWithStatics;\n\nNavigation.Menu = Menu;\nNavigation.Item = Item;\nNavigation.Panel = Panel;\n"],"names":["Item","React","forwardRef","props","ref","active","children","onDrop","postfix","prefix","role","otherProps","proxyRef","useProxiedRef","isDraggedOver","dropTargetProps","useDropTarget","isTreeitem","className","cn","handleClick","event","target","HTMLAnchorElement","HTMLButtonElement","current","click","onClick","Panel","MenuGroup","fixed","title","expanded","Icon","name","Treeview","Group","Menu","scrollableAreas","useMemo","Children","toArray","filter","child","forEach","push","x","length","Array","isArray","map","area","i","key","Navigation"],"mappings":"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"}

package/dist/esm/components/SearchInput/SearchInput.js

@@ -49,6 +49,7 @@ import '../Table/hooks/useRowCreation.js';
 import '../Tabs/Tabs.js';
 import '../Textarea/Textarea.js';
 import '../Switch/Switch.js';
+import '../Tag/Tag.js';
 import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 

package/dist/esm/components/SearchInput/SearchInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.key === 'Enter';\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n\n        props.onKeyDown?.(event);\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","key","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,GAAN,KAAc,OAAxC;;IAEA,IAAID,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACc,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFjB,aAAA,CAACkB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVb,QAAQ,EAAEL,KAAK,CAACK;MAChBc,OAAO,EAAEf;KAJb;IAOJO,SAAS,EAAEJ;IACXN,GAAG,EAAEA;IACLmB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.key === 'Enter';\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n\n        props.onKeyDown?.(event);\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n            type=\"search\"\n        />\n    );\n});\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","key","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAeaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,GAAN,KAAc,OAAxC;;IAEA,IAAID,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACc,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFjB,aAAA,CAACkB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVb,QAAQ,EAAEL,KAAK,CAACK;MAChBc,OAAO,EAAEf;KAJb;IAOJO,SAAS,EAAEJ;IACXN,GAAG,EAAEA;IACLmB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}

package/dist/esm/components/Tag/Tag.js

@@ -0,0 +1,53 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { Tooltip } from '../Tooltip/Tooltip.js';
+import { colors } from '../../utils/colors.js';
+import { useIsRefOverflowing } from '../../hooks/useIsRefOverflowing.js';
+
+const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    disabled,
+    icon,
+    readOnly,
+    onDelete,
+    ...otherProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const isOverflowed = useIsRefOverflowing(textRef);
+  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+    'bg-opacity-50': disabled,
+    'hover:bg-opacity-75': !disabled,
+    'cursor-pointer': !!otherProps.onClick,
+    'pointer-events-none': disabled || readOnly
+  }, color ? colors[color] : 'bg-grey-dark', props.className);
+  const content = React__default.createElement("span", Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }), React__default.createElement("span", {
+    className: "truncate px-2",
+    ref: textRef
+  }, icon ? typeof icon === 'string' ? React__default.createElement(Icon, {
+    name: icon,
+    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+  }) : React__default.cloneElement(icon, {
+    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
+  }) : null, children), onDelete ? React__default.createElement(Icon, {
+    name: "close",
+    onClick: onDelete,
+    className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+  }) : null);
+
+  if (isOverflowed) {
+    return React__default.createElement(Tooltip, {
+      title: children
+    }, content);
+  }
+
+  return content;
+});
+
+export { Tag };
+//# sourceMappingURL=Tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Color, colors } from '../../utils/colors';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\nimport { Tooltip } from '../Tooltip/Tooltip';\nimport { useIsRefOverflowing } from '../../hooks/useIsRefOverflowing';\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    const isOverflowed = useIsRefOverflowing(textRef);\n\n    const className = cn(\n        'inline-flex items-center rounded h-6 cursor-default',\n        {\n            'bg-opacity-50': disabled,\n            'hover:bg-opacity-75': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        color ? colors[color] : 'bg-grey-dark',\n        props.className\n    );\n\n    const content = (\n        <span {...otherProps} className={className} ref={ref}>\n            <span className=\"truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"mr-1 -ml-1 -mt-0.5 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, { className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5' })\n                    )\n                ) : null}\n                {children}\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    if (isOverflowed) {\n        return <Tooltip title={children}>{content}</Tooltip>;\n    }\n\n    return content;\n});\n"],"names":["Tag","React","forwardRef","props","ref","children","color","disabled","icon","readOnly","onDelete","otherProps","textRef","useRef","isOverflowed","useIsRefOverflowing","className","cn","onClick","colors","content","Icon","name","cloneElement","Tooltip","title"],"mappings":";;;;;;;MAgBaA,GAAG,gBAAGC,cAAK,CAACC,UAAN,CAA4C,CAACC,KAAD,EAAQC,GAAR;EAC3D,MAAM;IAAEC,QAAF;IAAYC,KAAZ;IAAmBC,QAAnB;IAA6BC,IAA7B;IAAmCC,QAAnC;IAA6CC,QAA7C;IAAuD,GAAGC;MAAeR,KAA/E;EACA,MAAMS,OAAO,GAAGX,cAAK,CAACY,MAAN,CAA6B,IAA7B,CAAhB;EACA,MAAMC,YAAY,GAAGC,mBAAmB,CAACH,OAAD,CAAxC;EAEA,MAAMI,SAAS,GAAGC,EAAE,CAChB,qDADgB,EAEhB;IACI,iBAAiBV,QADrB;IAEI,uBAAuB,CAACA,QAF5B;IAGI,kBAAkB,CAAC,CAACI,UAAU,CAACO,OAHnC;IAII,uBAAuBX,QAAQ,IAAIE;GANvB,EAQhBH,KAAK,GAAGa,MAAM,CAACb,KAAD,CAAT,GAAmB,cARR,EAShBH,KAAK,CAACa,SATU,CAApB;EAYA,MAAMI,OAAO,GACTnB,4BAAA,OAAA,oBAAUU;IAAYK,SAAS,EAAEA;IAAWZ,GAAG,EAAEA;IAAjD,EACIH,4BAAA,OAAA;IAAMe,SAAS,EAAC;IAAgBZ,GAAG,EAAEQ;GAArC,EACKJ,IAAI,GACD,OAAOA,IAAP,KAAgB,QAAhB,GACIP,4BAAA,CAACoB,IAAD;IAAMC,IAAI,EAAEd;IAAMQ,SAAS,EAAC;GAA5B,CADJ,GAGIf,cAAK,CAACsB,YAAN,CAAmBf,IAAnB,EAAyB;IAAEQ,SAAS,EAAE;GAAtC,CAJH,GAMD,IAPR,EAQKX,QARL,CADJ,EAWKK,QAAQ,GACLT,4BAAA,CAACoB,IAAD;IACIC,IAAI,EAAC;IACLJ,OAAO,EAAER;IACTM,SAAS,EAAC;GAHd,CADK,GAML,IAjBR,CADJ;;EAsBA,IAAIF,YAAJ,EAAkB;IACd,OAAOb,4BAAA,CAACuB,OAAD;MAASC,KAAK,EAAEpB;KAAhB,EAA2Be,OAA3B,CAAP;;;EAGJ,OAAOA,OAAP;AACH,CA5CkB;;;;"}

package/dist/esm/components/Tooltip/Tooltip.js

@@ -24,7 +24,7 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(props, ref) {
       transformOrigin: 'var(--radix-tooltip-content-transform-origin)'
     }
   }, createElement(Arrow, {
-    className: "fill-purple stroke-purple"
+    className: "fill-purple stroke-purple -mt-px"
   }), title)));
 });
 

package/dist/esm/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 * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string;\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, ...otherProps } = props;\n\n    return (\n        <TooltipPrimitive.Root delayDuration={50}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\n                <div\n                    className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n                    data-taco=\"tooltip\"\n                    style={{\n                        transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                    }}>\n                    <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple\" />\n                    {title}\n                </div>\n            </TooltipPrimitive.Content>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","TooltipPrimitive","delayDuration","asChild","side","sideOffset","className","style","transformOrigin"],"mappings":";;;MAeaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EAEA,OACID,aAAA,CAACO,IAAD;IAAuBC,aAAa,EAAE;GAAtC,EACIR,aAAA,CAACO,OAAD;IAA0BE,OAAO;IAACP,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,EAIIJ,aAAA,CAACO,OAAD,oBAA8BD;IAAYG,OAAO;IAACC,IAAI,EAAEL;IAAWM,UAAU,EAAE;IAA/E,EACIX,aAAA,MAAA;IACIY,SAAS,EAAC;iBACA;IACVC,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,EAMId,aAAA,CAACO,KAAD;IAAwBK,SAAS,EAAC;GAAlC,CANJ,EAOKT,KAPL,CADJ,CAJJ,CADJ;AAkBH,CArBsB;;;;"}
+{"version":3,"file":"Tooltip.js","sources":["../../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["import * as React from 'react';\nimport * as TooltipPrimitive from '@radix-ui/react-tooltip';\n\nexport type TooltipProps = React.HTMLAttributes<HTMLDivElement> & {\n    /** The element which activates the tooltip when hovered. Should be a single React/HTML element */\n    children: React.ReactElement | any;\n    /** Text displayed in the tooltip */\n    title: string;\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, ...otherProps } = props;\n\n    return (\n        <TooltipPrimitive.Root delayDuration={50}>\n            <TooltipPrimitive.Trigger asChild ref={ref as any}>\n                {children}\n            </TooltipPrimitive.Trigger>\n            <TooltipPrimitive.Content {...otherProps} asChild side={placement} sideOffset={3}>\n                <div\n                    className=\"wcag-purple xs:max-w-[theme(spacing.56)] max-w-[theme(spacing.32)] animate-[fade-in_150ms] rounded-sm px-2 py-1 text-xs font-bold opacity-90\"\n                    data-taco=\"tooltip\"\n                    style={{\n                        transformOrigin: 'var(--radix-tooltip-content-transform-origin)',\n                    }}>\n                    <TooltipPrimitive.Arrow className=\"fill-purple stroke-purple -mt-px\" />\n                    {title}\n                </div>\n            </TooltipPrimitive.Content>\n        </TooltipPrimitive.Root>\n    );\n});\n"],"names":["Tooltip","React","props","ref","title","children","placement","otherProps","TooltipPrimitive","delayDuration","asChild","side","sideOffset","className","style","transformOrigin"],"mappings":";;;MAeaA,OAAO,gBAAGC,UAAA,CAAiB,SAASD,OAAT,CAAiBE,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmBC,SAAnB;IAA8B,GAAGC;MAAeL,KAAtD;EAEA,OACID,aAAA,CAACO,IAAD;IAAuBC,aAAa,EAAE;GAAtC,EACIR,aAAA,CAACO,OAAD;IAA0BE,OAAO;IAACP,GAAG,EAAEA;GAAvC,EACKE,QADL,CADJ,EAIIJ,aAAA,CAACO,OAAD,oBAA8BD;IAAYG,OAAO;IAACC,IAAI,EAAEL;IAAWM,UAAU,EAAE;IAA/E,EACIX,aAAA,MAAA;IACIY,SAAS,EAAC;iBACA;IACVC,KAAK,EAAE;MACHC,eAAe,EAAE;;GAJzB,EAMId,aAAA,CAACO,KAAD;IAAwBK,SAAS,EAAC;GAAlC,CANJ,EAOKT,KAPL,CADJ,CAJJ,CADJ;AAkBH,CArBsB;;;;"}

package/dist/esm/hooks/useIsRefOverflowing.js

@@ -0,0 +1,15 @@
+import React__default from 'react';
+import { isOverflowing } from '../utils/dom.js';
+
+const useIsRefOverflowing = ref => {
+  const [overflowing, setOverflowing] = React__default.useState(false);
+  React__default.useEffect(() => {
+    if (ref.current && isOverflowing(ref.current)) {
+      setOverflowing(true);
+    }
+  }, [ref.current]);
+  return overflowing;
+};
+
+export { useIsRefOverflowing };
+//# sourceMappingURL=useIsRefOverflowing.js.map

package/dist/esm/hooks/useIsRefOverflowing.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useIsRefOverflowing.js","sources":["../../../src/hooks/useIsRefOverflowing.ts"],"sourcesContent":["import React from 'react';\nimport { isOverflowing } from '../utils/dom';\n\nexport const useIsRefOverflowing = (ref: React.RefObject<HTMLElement>) => {\n    const [overflowing, setOverflowing] = React.useState(false);\n\n    React.useEffect(() => {\n        if (ref.current && isOverflowing(ref.current)) {\n            setOverflowing(true);\n        }\n    }, [ref.current]);\n\n    return overflowing;\n};\n"],"names":["useIsRefOverflowing","ref","overflowing","setOverflowing","React","useState","useEffect","current","isOverflowing"],"mappings":";;;MAGaA,mBAAmB,GAAIC,GAAD;EAC/B,MAAM,CAACC,WAAD,EAAcC,cAAd,IAAgCC,cAAK,CAACC,QAAN,CAAe,KAAf,CAAtC;EAEAD,cAAK,CAACE,SAAN,CAAgB;IACZ,IAAIL,GAAG,CAACM,OAAJ,IAAeC,aAAa,CAACP,GAAG,CAACM,OAAL,CAAhC,EAA+C;MAC3CJ,cAAc,CAAC,IAAD,CAAd;;GAFR,EAIG,CAACF,GAAG,CAACM,OAAL,CAJH;EAMA,OAAOL,WAAP;AACH;;;;"}

package/dist/esm/index.js

@@ -49,6 +49,7 @@ export { insertChildTableRow, removeChildTableRow, useTableRowCreation } from '.
 export { Tabs } from './components/Tabs/Tabs.js';
 export { Textarea } from './components/Textarea/Textarea.js';
 export { Switch } from './components/Switch/Switch.js';
+export { Tag } from './components/Tag/Tag.js';
 export { Tour, TourStep } from './components/Tour/Tour.js';
 export { useOnClickOutside } from './utils/hooks/useOnClickOutside.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/esm/utils/colors.js

@@ -0,0 +1,15 @@
+const colors = {
+  green: 'bg-[#E5FAF2] text-[#124537]',
+  yellow: 'bg-[#FCF0D0] text-[#733700]',
+  red: 'bg-[#FFDAD2] text-[#6E001D]',
+  blue: 'bg-[#DEEBFF] text-[#29283E]',
+  purple: 'bg-[#EEE5FF] text-[#412970]',
+  orange: 'bg-[#FFE3BB] text-[#4A2811]',
+  brown: 'bg-[#EEE0DA] text-[#45291F]',
+  pink: 'bg-[#FFE3F7] text-[#55003E]',
+  grey: 'bg-grey-light text-grey-darkest',
+  black: 'bg-grey-darkest text-white'
+};
+
+export { colors };
+//# sourceMappingURL=colors.js.map

package/dist/esm/utils/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/utils/colors.ts"],"sourcesContent":["export const colors = {\n    green: 'bg-[#E5FAF2] text-[#124537]',\n    yellow: 'bg-[#FCF0D0] text-[#733700]',\n    red: 'bg-[#FFDAD2] text-[#6E001D]',\n    blue: 'bg-[#DEEBFF] text-[#29283E]',\n    purple: 'bg-[#EEE5FF] text-[#412970]',\n    orange: 'bg-[#FFE3BB] text-[#4A2811]',\n    brown: 'bg-[#EEE0DA] text-[#45291F]',\n    pink: 'bg-[#FFE3F7] text-[#55003E]',\n    grey: 'bg-grey-light text-grey-darkest',\n    black: 'bg-grey-darkest text-white',\n};\n\nexport type Color = keyof typeof colors;\n"],"names":["colors","green","yellow","red","blue","purple","orange","brown","pink","grey","black"],"mappings":"MAAaA,MAAM,GAAG;EAClBC,KAAK,EAAE,6BADW;EAElBC,MAAM,EAAE,6BAFU;EAGlBC,GAAG,EAAE,6BAHa;EAIlBC,IAAI,EAAE,6BAJY;EAKlBC,MAAM,EAAE,6BALU;EAMlBC,MAAM,EAAE,6BANU;EAOlBC,KAAK,EAAE,6BAPW;EAQlBC,IAAI,EAAE,6BARY;EASlBC,IAAI,EAAE,iCATY;EAUlBC,KAAK,EAAE;AAVW;;;;"}

package/dist/esm/utils/dom.js

@@ -0,0 +1,4 @@
+const isOverflowing = element => element !== null ? element.scrollWidth > element.offsetWidth : false;
+
+export { isOverflowing };
+//# sourceMappingURL=dom.js.map

package/dist/esm/utils/dom.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom.js","sources":["../../../src/utils/dom.ts"],"sourcesContent":["export const isOverflowing = (element: HTMLElement | null) =>\n    element !== null ? element.scrollWidth > element.offsetWidth : false;\n"],"names":["isOverflowing","element","scrollWidth","offsetWidth"],"mappings":"MAAaA,aAAa,GAAIC,OAAD,IACzBA,OAAO,KAAK,IAAZ,GAAmBA,OAAO,CAACC,WAAR,GAAsBD,OAAO,CAACE,WAAjD,GAA+D;;;;"}

package/dist/hooks/useIsRefOverflowing.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useIsRefOverflowing: (ref: React.RefObject<HTMLElement>) => boolean;

package/dist/index.d.ts

@@ -34,6 +34,7 @@ export * from './components/Tabs/Tabs';
 export * from './components/Textarea/Textarea';
 export * from './components/Toast/Toaster';
 export * from './components/Switch/Switch';
+export * from './components/Tag/Tag';
 export * from './components/Tooltip/Tooltip';
 export * from './components/Tour/Tour';
 export * from './components/Treeview/Treeview';