@economic/taco 1.17.3 → 1.18.0

package/dist/esm/packages/taco/src/components/Select2/components/Trigger.js.map

@@ -1 +1 @@
-{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, value, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate flex items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (currentValue) {\n        if (tags) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <span className={contentClassName}>{output}</span>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, values = [], ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values.map(value =>\n        children.find(c => c.props.value === value)\n    ) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('absolute z-20', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <span className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.map(child => (\n                        <Tag\n                            key={child.props.value}\n                            className=\"truncate\"\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={event => {\n                                event?.stopPropagation();\n                                event?.preventDefault();\n\n                                if (!disabled && !readOnly) {\n                                    setValue(child.props.value);\n                                }\n                            }}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    ))}\n                </span>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} />;\n    }\n\n    return (\n        <span\n            className={cn('relative inline-flex flex-grow', { 'h-8': open })}\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </span>\n    );\n});\n\nconst MultipleValue = ({ valuesAsChildren }) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLSpanElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <span className=\"relative flex items-center gap-1 overflow-hidden\">\n            <span className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.map((child, index) => {\n                    const tag = (\n                        <Tag\n                            key={child.props.value}\n                            className={cn('cursor-pointer', {\n                                truncate: index === boundaryIndex,\n                                hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                            })}\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={open ? createClickHandler(child.props.value) : undefined}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    );\n\n                    if (index === boundaryIndex) {\n                        return (\n                            <Tooltip key={child.props.value} title={String(child.props.children)}>\n                                {tag}\n                            </Tooltip>\n                        );\n                    }\n\n                    return tag;\n                })}\n            </span>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </span>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","content","ScrollArea","child","key","onDelete","stopPropagation","MultipleValue","String","style","width","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","length","slice","join","Badge"],"mappings":";;;;;;;;;;;;MAkBaA,OAAO,gBAAGC,cAAK,CAACC,UAAU,CAAyC,SAASC,cAAc,CAACC,KAAK,EAAEC,GAAG;EAC9G,MAAM;IAAEC,QAAQ;IAAEC;GAAO,GAAGC,iBAAiB,EAAE;EAE/C,IAAIC,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,IAAID,QAAQ,EAAE;IAClC,MAAMK,MAAM,GAAGF,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,GAAGA,KAAK,GAAGA,KAAK,KAAKK,SAAS,GAAG,CAACL,KAAK,CAAC,GAAGK,SAAS;IACvF,oBAAOX,6BAACY,QAAQ,oBAAKT,KAAK;MAAEC,GAAG,EAAEA,GAAG;MAAEM,MAAM,EAAEA;OAAU;;EAG5D,oBAAOV,6BAACa,MAAM,oBAAKV,KAAK;IAAEC,GAAG,EAAEA,GAAG;IAAEE,KAAK,EAAEA;KAAS;AACxD,CAAC;AAKD,MAAMQ,MAAM,gBAAGd,cAAK,CAACC,UAAU,CAAiC,SAASc,oBAAoB,CAACZ,KAAK,EAAEC,GAAG;;EACpG,MAAM;IAAEY,QAAQ;IAAEC,OAAO;IAAEC,QAAQ,GAAG,CAAC;IAAE,GAAGC;GAAY,GAAGhB,KAAK;EAChE,MAAM;IAAEiB,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEC,IAAI;IAAEC;GAAU,GAAGjB,iBAAiB,EAAE;EAE9E,MAAMkB,SAAS,GAAGC,EAAE,CAChB,wBAAwB,EACxBC,eAAe,CAAC;IAAE,GAAGxB,KAAK;IAAEiB,QAAQ;IAAEC,WAAW;IAAEC,OAAO;IAAEE;GAAU,CAAC,CAACI,OAAO,CAAC,QAAQ,EAAE,EAAE,CAAC,EAC7F;IAAE,QAAQ,EAAE,sBAACzB,KAAK,CAACsB,SAAS,6CAAf,iBAAiBI,QAAQ,CAAC,IAAI,CAAC;GAAE,EAC9C1B,KAAK,CAACsB,SAAS,CAClB;EAED,MAAMK,WAAW,GAAIC,KAA0C;IAC3D,IAAIX,QAAQ,IAAII,QAAQ,EAAE;MACtBO,KAAK,CAACC,cAAc,EAAE;MACtB;;IAGJ,IAAI,OAAOf,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACc,KAAK,CAAC;;GAErB;EAED,oBACI/B,yDACQmB,UAAU;oBACAG,OAAO,GAAG,IAAI,GAAGX,SAAS;qBACzBa,QAAQ,GAAG,IAAI,GAAGb,SAAS;IAC1Cc,SAAS,EAAEA,SAAS;IACpBL,QAAQ,EAAEA,QAAQ;IAClBH,OAAO,EAAEa,WAAW;IACpB1B,GAAG,EAAEA,GAAG;IACR6B,IAAI,EAAC,UAAU;IACff,QAAQ,EAAEE,QAAQ,IAAII,QAAQ,GAAG,CAAC,CAAC,GAAGN,QAAQ;IAC9CgB,IAAI,EAAC;MACJlB,QAAQ,eACThB,6BAACmC,IAAI;IAACC,IAAI,EAAEb,IAAI,GAAG,YAAY,GAAG,cAAc;IAAEE,SAAS,EAAC;IAAsC,CAC7F;AAEjB,CAAC,CAAC;AAIF,MAAMZ,MAAM,gBAAGb,cAAK,CAACC,UAAU,CAAiC,SAASoC,oBAAoB,CAAClC,KAAK,EAAEC,GAAG;EACpG,MAAM;IAAEY,QAAQ;IAAEV,KAAK;IAAE,GAAGgC;GAAa,GAAGnC,KAAK;EACjD,MAAM;IAAEiB,QAAQ;IAAEI,QAAQ;IAAEe;GAAM,GAAGhC,iBAAiB,EAAE;EACxD,MAAMiC,gBAAgB,GAAGd,EAAE,CAAC,kCAAkC,CAAC;EAE/D,MAAMe,YAAY,GAAGzB,QAAQ,CAAC0B,IAAI,CAACC,YAAY,CAACrC,KAAK,CAAC,CAAC;EAEvD,IAAIsC,MAAM;EAEV,IAAIH,YAAY,EAAE;IACd,IAAIF,IAAI,EAAE;MACNK,MAAM,gBACF5C,6BAAC6C,GAAG;QACApB,SAAS,EAAC,UAAU;QACpBqB,KAAK,EAAEL,YAAY,CAACtC,KAAK,CAAC2C,KAAK;QAC/B1B,QAAQ,EAAEA,QAAQ;QAClB2B,IAAI,EAAEN,YAAY,CAACtC,KAAK,CAAC4C,IAAI;QAC7BvB,QAAQ,EAAEA;SACTiB,YAAY,CAACtC,KAAK,CAACa,QAAQ,CAEnC;KACJ,MAAM;MACH4B,MAAM,gBACF5C,4DACKyC,YAAY,CAACtC,KAAK,CAAC4C,IAAI,GACpB,OAAON,YAAY,CAACtC,KAAK,CAAC4C,IAAI,KAAK,QAAQ,gBACvC/C,6BAACmC,IAAI;QAACC,IAAI,EAAEK,YAAY,CAACtC,KAAK,CAAC4C;QAAQ,GAEvCN,YAAY,CAACtC,KAAK,CAAC4C,IACtB,GACD,IAAI,EACPN,YAAY,CAACtC,KAAK,CAACa,QAAQ,CAEnC;;;EAIT,oBACIhB,6BAACc,MAAM,oBAAKwB,WAAW;IAAElC,GAAG,EAAEA;mBAC1BJ;IAAMyB,SAAS,EAAEe;KAAmBI,MAAM,CAAQ,CAC7C;AAEjB,CAAC,CAAC;AAMF,MAAMhC,QAAQ,gBAAGZ,cAAK,CAACC,UAAU,CAAmC,SAAS+C,sBAAsB,CAAC7C,KAAK,EAAEC,GAAG;;EAC1G,MAAM;IAAEY,QAAQ;IAAEN,MAAM,GAAG,EAAE;IAAE,GAAG4B;GAAa,GAAGnC,KAAK;EACvD,MAAM;IAAEiB,QAAQ;IAAEG,IAAI;IAAEC,QAAQ;IAAEyB,QAAQ;IAAEV;GAAM,GAAGhC,iBAAiB,EAAE;EACxE,MAAM2C,SAAS,GAAGC,YAAY,CAAoB/C,GAAG,CAAC;EAEtD,MAAMgD,gBAAgB,GAAG1C,MAAM,CAAC2C,GAAG,CAAC/C,KAAK,IACrCU,QAAQ,CAAC0B,IAAI,CAACY,CAAC,IAAIA,CAAC,CAACnD,KAAK,CAACG,KAAK,KAAKA,KAAK,CAAC,CACF;EAE7C,IAAIiD,OAAO;EACX,IAAI;IAAE9B;GAAW,GAAGa,WAAW;EAE/B,IAAIf,IAAI,EAAE;IACNE,SAAS,GAAGC,EAAE,CAAC,eAAe,EAAEY,WAAW,CAACb,SAAS,CAAC;IACtD8B,OAAO,gBACHvD,6BAACwD,UAAU;MAAC/B,SAAS,EAAC;oBAClBzB;MAAMyB,SAAS,EAAC;OACX2B,gBAAgB,CAACC,GAAG,CAACI,KAAK,iBACvBzD,6BAAC6C,GAAG;MACAa,GAAG,EAAED,KAAK,CAACtD,KAAK,CAACG,KAAK;MACtBmB,SAAS,EAAC,UAAU;MACpBqB,KAAK,EAAEP,IAAI,GAAGkB,KAAK,CAACtD,KAAK,CAAC2C,KAAK,GAAGnC,SAAS;MAC3CS,QAAQ,EAAEA,QAAQ;MAClB2B,IAAI,EAAEU,KAAK,CAACtD,KAAK,CAAC4C,IAAI;MACtBY,QAAQ,EAAE5B,KAAK;QACXA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE6B,eAAe,EAAE;QACxB7B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,cAAc,EAAE;QAEvB,IAAI,CAACZ,QAAQ,IAAI,CAACI,QAAQ,EAAE;UACxByB,QAAQ,CAACQ,KAAK,CAACtD,KAAK,CAACG,KAAK,CAAC;;OAElC;MACDkB,QAAQ,EAAEA;OACTiC,KAAK,CAACtD,KAAK,CAACa,QAAQ,CAE5B,CAAC,CACC,CAEd;GACJ,MAAM;IACHuC,OAAO,gBAAGvD,6BAAC6D,aAAa;MAACH,GAAG,EAAEI,MAAM,CAACvC,IAAI,CAAC;MAAE6B,gBAAgB,EAAEA;MAAoB;;EAGtF,oBACIpD;IACIyB,SAAS,EAAEC,EAAE,CAAC,gCAAgC,EAAE;MAAE,KAAK,EAAEH;KAAM,CAAC;IAChEwC,KAAK,EAAE;MAAEC,KAAK,EAAEzC,IAAI,yBAAG2B,SAAS,CAACe,OAAO,uDAAjB,mBAAmBC,WAAW,GAAGvD;;kBACxDX,6BAACc,MAAM,oBAAKwB,WAAW;IAAEb,SAAS,EAAEA,SAAS;IAAErB,GAAG,EAAE8C;MAC/CK,OAAO,CACH,CACN;AAEf,CAAC,CAAC;AAEF,MAAMM,aAAa,GAAG,CAAC;EAAET;CAAkB;EACvC,MAAM;IAAEhC,QAAQ;IAAEG,IAAI;IAAEC,QAAQ;IAAEyB,QAAQ;IAAEV;GAAM,GAAGhC,iBAAiB,EAAE;EACxE,MAAM,CAAC4D,UAAU,EAAEC,aAAa,CAAC,GAAGpE,cAAK,CAACqE,QAAQ,CAAyB,IAAI,CAAC;EAChF,MAAMC,aAAa,GAAGH,UAAU,GAAGI,qCAAqC,CAACJ,UAAU,EAAE,EAAE,CAAC,GAAGxD,SAAS;EAEpG,MAAM6D,kBAAkB,GAAGC,QAAQ,IAAI1C,KAAK;IACxCA,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAE6B,eAAe,EAAE;IACxB7B,KAAK,aAALA,KAAK,uBAALA,KAAK,CAAEC,cAAc,EAAE;IAEvB,IAAI,CAACZ,QAAQ,IAAI,CAACI,QAAQ,EAAE;MACxByB,QAAQ,CAACwB,QAAQ,CAAC;;GAEzB;EAED,oBACIzE;IAAMyB,SAAS,EAAC;kBACZzB;IAAMyB,SAAS,EAAC,qBAAqB;IAACrB,GAAG,EAAEsE,EAAE,IAAIN,aAAa,CAACM,EAAE;KAC5DtB,gBAAgB,CAACC,GAAG,CAAC,CAACI,KAAK,EAAEkB,KAAK;IAC/B,MAAMC,GAAG,gBACL5E,6BAAC6C,GAAG;MACAa,GAAG,EAAED,KAAK,CAACtD,KAAK,CAACG,KAAK;MACtBmB,SAAS,EAAEC,EAAE,CAAC,gBAAgB,EAAE;QAC5BmD,QAAQ,EAAEF,KAAK,KAAKL,aAAa;QACjCQ,MAAM,EAAER,aAAa,KAAK3D,SAAS,IAAI2D,aAAa,KAAK,IAAI,GAAGK,KAAK,GAAGL,aAAa,GAAG;OAC3F,CAAC;MACFxB,KAAK,EAAEP,IAAI,GAAGkB,KAAK,CAACtD,KAAK,CAAC2C,KAAK,GAAGnC,SAAS;MAC3CS,QAAQ,EAAEA,QAAQ;MAClB2B,IAAI,EAAEU,KAAK,CAACtD,KAAK,CAAC4C,IAAI;MACtBY,QAAQ,EAAEpC,IAAI,GAAGiD,kBAAkB,CAACf,KAAK,CAACtD,KAAK,CAACG,KAAK,CAAC,GAAGK,SAAS;MAClEa,QAAQ,EAAEA;OACTiC,KAAK,CAACtD,KAAK,CAACa,QAAQ,CAE5B;IAED,IAAI2D,KAAK,KAAKL,aAAa,EAAE;MACzB,oBACItE,6BAAC+E,OAAO;QAACrB,GAAG,EAAED,KAAK,CAACtD,KAAK,CAACG,KAAK;QAAE0E,KAAK,EAAElB,MAAM,CAACL,KAAK,CAACtD,KAAK,CAACa,QAAQ;SAC9D4D,GAAG,CACE;;IAIlB,OAAOA,GAAG;GACb,CAAC,CACC,EACNN,aAAa,KAAK3D,SAAS,IAAI2D,aAAa,KAAK,IAAI,IAAIA,aAAa,GAAGlB,gBAAgB,CAAC6B,MAAM,GAAG,CAAC,gBACjGjF,6BAAC+E,OAAO;IACJC,KAAK,EAAE5B,gBAAgB,CAClB8B,KAAK,CAACZ,aAAa,GAAG,CAAC,CAAC,CACxBjB,GAAG,CAACI,KAAK,IAAKA,KAAK,GAAGK,MAAM,CAACL,KAAK,CAACtD,KAAK,CAACa,QAAQ,CAAC,GAAG,EAAG,CAAC,CACzDmE,IAAI,CAAC,IAAI;kBACdnF,6BAACoF,KAAK;IAAC3D,SAAS,EAAC;UAAkB2B,gBAAgB,CAAC6B,MAAM,IAAIX,aAAa,GAAG,CAAC,CAAC,CAAS,CACnF,GACV,IAAI,CACL;AAEf,CAAC;AAED,MAAM3B,YAAY,GAAIrC,KAA8B,IAAMmD,KAA8B;EACpF,IAAIjD,KAAK,CAACC,OAAO,CAACH,KAAK,CAAC,EAAE;IACtB,OAAOA,KAAK,CAACuB,QAAQ,CAAC4B,KAAK,CAACtD,KAAK,CAACG,KAAK,CAAC;;EAG5C,OAAOmD,KAAK,CAACtD,KAAK,CAACG,KAAK,KAAKA,KAAK;AACtC,CAAC;;;;"}
+{"version":3,"file":"Trigger.js","sources":["../../../../../../../../src/components/Select2/components/Trigger.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Tag } from '../../Tag/Tag';\nimport { Tooltip } from '../../Tooltip/Tooltip';\nimport { Icon } from '../../Icon/Icon';\nimport { Badge } from '../../Badge/Badge';\nimport { getInputClasses } from '../../Input/util';\nimport { Select2OptionValue } from '../types';\nimport { useSelect2Context } from './Context';\nimport { Select2OptionProps } from './Option';\nimport { getIndexOfFirstChildOverflowingParent } from '../../../utils/dom';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\n\ntype Select2TriggerProps = Omit<React.HTMLAttributes<HTMLButtonElement>, 'children' | 'defaultValue' | 'onChange' | 'value'> & {\n    children: React.ReactElement<Select2OptionProps>[];\n};\n\nexport const Trigger = React.forwardRef<HTMLButtonElement, Select2TriggerProps>(function Select2Trigger(props, ref) {\n    const { multiple, value } = useSelect2Context();\n\n    if (Array.isArray(value) || multiple) {\n        const values = Array.isArray(value) ? value : value !== undefined ? [value] : undefined;\n        return <Multiple {...props} ref={ref} values={values} />;\n    }\n\n    return <Single {...props} ref={ref} value={value} />;\n});\n\ntype ButtonProps = React.HTMLAttributes<HTMLButtonElement> &\n    Omit<Select2TriggerProps, 'children' | 'open' | 'setValue' | 'value'>;\n\nconst Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function Select2TriggerButton(props, ref) {\n    const { children, onClick, tabIndex = 0, ...otherProps } = props;\n    const { disabled, highlighted, invalid, open, readOnly } = useSelect2Context();\n\n    const className = cn(\n        'cursor-pointer !px-1.5',\n        getInputClasses({ ...props, disabled, highlighted, invalid, readOnly }).replace('w-full', ''),\n        { 'w-full': !props.className?.includes('w-') },\n        props.className\n    );\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        if (disabled || readOnly) {\n            event.preventDefault();\n            return;\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    return (\n        <button\n            {...otherProps}\n            aria-invalid={invalid ? true : undefined}\n            aria-readonly={readOnly ? true : undefined}\n            className={className}\n            disabled={disabled}\n            onClick={handleClick}\n            ref={ref}\n            role=\"combobox\"\n            tabIndex={disabled || readOnly ? -1 : tabIndex}\n            type=\"button\">\n            {children}\n            <Icon name={open ? 'chevron-up' : 'chevron-down'} className=\"pointer-events-none -mr-1 ml-auto\" />\n        </button>\n    );\n});\n\ntype SingleProps = Omit<Select2TriggerProps, 'value'> & { value?: Select2OptionValue };\n\nconst Single = React.forwardRef<HTMLButtonElement, SingleProps>(function Select2TriggerSingle(props, ref) {\n    const { children, value, ...buttonProps } = props;\n    const { disabled, readOnly, tags } = useSelect2Context();\n    const contentClassName = cn('truncate items-center gap-1');\n\n    const currentValue = children.find(matchesValue(value));\n\n    let output;\n\n    if (currentValue) {\n        if (tags) {\n            output = (\n                <Tag\n                    className=\"truncate\"\n                    color={currentValue.props.color}\n                    disabled={disabled}\n                    icon={currentValue.props.icon}\n                    readOnly={readOnly}>\n                    {currentValue.props.children}\n                </Tag>\n            );\n        } else {\n            output = (\n                <>\n                    {currentValue.props.icon ? (\n                        typeof currentValue.props.icon === 'string' ? (\n                            <Icon name={currentValue.props.icon} />\n                        ) : (\n                            currentValue.props.icon\n                        )\n                    ) : null}\n                    {currentValue.props.children}\n                </>\n            );\n        }\n    }\n\n    return (\n        <Button {...buttonProps} ref={ref}>\n            <div className={contentClassName}>{output}</div>\n        </Button>\n    );\n});\n\ntype MultipleProps = Omit<Select2TriggerProps, 'value'> & {\n    values?: Select2OptionValue[];\n};\n\nconst Multiple = React.forwardRef<HTMLButtonElement, MultipleProps>(function Select2TriggerMultiple(props, ref) {\n    const { children, values = [], ...buttonProps } = props;\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const buttonRef = useMergedRef<HTMLButtonElement>(ref);\n\n    const valuesAsChildren = values.map(value =>\n        children.find(c => c.props.value === value)\n    ) as React.ReactElement<Select2OptionProps>[];\n\n    let content;\n    let { className } = buttonProps;\n\n    if (open) {\n        className = cn('!absolute z-20', buttonProps.className);\n        content = (\n            <ScrollArea className=\"my-1 flex max-h-[5.5rem] flex-col\">\n                <div className=\"flex flex-wrap gap-1\">\n                    {valuesAsChildren.map(child => (\n                        <Tag\n                            key={child.props.value}\n                            className=\"truncate\"\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={event => {\n                                event?.stopPropagation();\n                                event?.preventDefault();\n\n                                if (!disabled && !readOnly) {\n                                    setValue(child.props.value);\n                                }\n                            }}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    ))}\n                </div>\n            </ScrollArea>\n        );\n    } else {\n        content = <MultipleValue key={String(open)} valuesAsChildren={valuesAsChildren} />;\n    }\n\n    return (\n        <div\n            className={cn('relative inline-flex flex-grow', { 'h-8': open })}\n            style={{ width: open ? buttonRef.current?.offsetWidth : undefined }}>\n            <Button {...buttonProps} className={className} ref={buttonRef}>\n                {content}\n            </Button>\n        </div>\n    );\n});\n\nconst MultipleValue = ({ valuesAsChildren }) => {\n    const { disabled, open, readOnly, setValue, tags } = useSelect2Context();\n    const [contentRef, setContentRef] = React.useState<HTMLDivElement | null>(null);\n    const boundaryIndex = contentRef ? getIndexOfFirstChildOverflowingParent(contentRef, 30) : undefined;\n\n    const createClickHandler = tagValue => event => {\n        event?.stopPropagation();\n        event?.preventDefault();\n\n        if (!disabled && !readOnly) {\n            setValue(tagValue);\n        }\n    };\n\n    return (\n        <div className=\"relative flex items-center gap-1 overflow-hidden\">\n            <div className=\"flex gap-1 truncate\" ref={el => setContentRef(el)}>\n                {valuesAsChildren.map((child, index) => {\n                    const tag = (\n                        <Tag\n                            key={child.props.value}\n                            className={cn('cursor-pointer', {\n                                truncate: index === boundaryIndex,\n                                hidden: boundaryIndex !== undefined && boundaryIndex !== null ? index > boundaryIndex : false,\n                            })}\n                            color={tags ? child.props.color : undefined}\n                            disabled={disabled}\n                            icon={child.props.icon}\n                            onDelete={open ? createClickHandler(child.props.value) : undefined}\n                            readOnly={readOnly}>\n                            {child.props.children}\n                        </Tag>\n                    );\n\n                    if (index === boundaryIndex) {\n                        return (\n                            <Tooltip key={child.props.value} title={String(child.props.children)}>\n                                {tag}\n                            </Tooltip>\n                        );\n                    }\n\n                    return tag;\n                })}\n            </div>\n            {boundaryIndex !== undefined && boundaryIndex !== null && boundaryIndex < valuesAsChildren.length - 1 ? (\n                <Tooltip\n                    title={valuesAsChildren\n                        .slice(boundaryIndex + 1)\n                        .map(child => (child ? String(child.props.children) : ''))\n                        .join(', ')}>\n                    <Badge className=\"flex-shrink-0\">+{valuesAsChildren.length - (boundaryIndex + 1)}</Badge>\n                </Tooltip>\n            ) : null}\n        </div>\n    );\n};\n\nconst matchesValue = (value: undefined | any | any[]) => (child: React.ReactElement<any>) => {\n    if (Array.isArray(value)) {\n        return value.includes(child.props.value);\n    }\n\n    return child.props.value === value;\n};\n"],"names":["Trigger","React","forwardRef","Select2Trigger","props","ref","multiple","value","useSelect2Context","Array","isArray","values","undefined","Multiple","Single","Button","Select2TriggerButton","children","onClick","tabIndex","otherProps","disabled","highlighted","invalid","open","readOnly","className","cn","getInputClasses","replace","includes","handleClick","event","preventDefault","role","type","Icon","name","Select2TriggerSingle","buttonProps","tags","contentClassName","currentValue","find","matchesValue","output","Tag","color","icon","Select2TriggerMultiple","setValue","buttonRef","useMergedRef","valuesAsChildren","map","c","content","ScrollArea","child","key","onDelete","stopPropagation","MultipleValue","String","style","width","current","offsetWidth","contentRef","setContentRef","useState","boundaryIndex","getIndexOfFirstChildOverflowingParent","createClickHandler","tagValue","el","index","tag","truncate","hidden","Tooltip","title","length","slice","join","Badge"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Select2/utilities.js

@@ -1,4 +1,4 @@
-const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-100 aria-current:bg-grey-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
+const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:wcag-grey-200 aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
 const createCollectionClassName = () => 'flex flex-col gap-px';
 
 export { createCollectionClassName, createOptionClassName };

package/dist/esm/packages/taco/src/components/Select2/utilities.js.map

@@ -1 +1 @@
-{"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["export const createOptionClassName = () =>\n    'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-100 aria-current:bg-grey-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none';\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n"],"names":["createOptionClassName","createCollectionClassName"],"mappings":"MAAaA,qBAAqB,GAAG,MACjC;MAESC,yBAAyB,GAAG,MAAM;;;;"}
+{"version":3,"file":"utilities.js","sources":["../../../../../../../src/components/Select2/utilities.ts"],"sourcesContent":["export const createOptionClassName = () =>\n    'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:wcag-grey-200 aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none';\n\nexport const createCollectionClassName = () => 'flex flex-col gap-px';\n"],"names":["createOptionClassName","createCollectionClassName"],"mappings":"MAAaA,qBAAqB,GAAG,MACjC;MAESC,yBAAyB,GAAG,MAAM;;;;"}

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

@@ -1,8 +1,18 @@
 import React__default from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
-import { colors } from '../../utils/colors.js';
 
+const TAG_COLORS = {
+  green: 'wcag-green-100',
+  yellow: 'wcag-yellow-100',
+  red: 'wcag-red-100',
+  blue: 'wcag-blue-100',
+  purple: 'wcag-purple-100',
+  orange: 'wcag-orange-100',
+  brown: 'wcag-brown-100',
+  pink: 'wcag-pink-100',
+  grey: 'wcag-grey-200'
+};
 const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     children,
@@ -19,7 +29,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     'hover:bg-opacity-75': !disabled,
     'cursor-pointer': !!otherProps.onClick,
     'pointer-events-none': disabled || readOnly
-  }, color ? colors[color] : colors.grey, props.className);
+  }, color ? TAG_COLORS[color] : TAG_COLORS.grey, props.className);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
     className: className,
     ref: ref
@@ -38,5 +48,5 @@ const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }) : null);
 });
 
-export { Tag };
+export { TAG_COLORS, Tag };
 //# sourceMappingURL=Tag.js.map

package/dist/esm/packages/taco/src/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 'classnames';\nimport { Color, colors } from '../../utils/colors';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\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        color ? colors[color] : colors.grey,\n        props.className\n    );\n\n    return (\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"],"names":["Tag","React","forwardRef","props","ref","children","color","disabled","icon","readOnly","onDelete","otherProps","textRef","useRef","className","cn","onClick","colors","grey","Icon","name","cloneElement"],"mappings":";;;;;MAcaA,GAAG,gBAAGC,cAAK,CAACC,UAAU,CAA4B,CAACC,KAAK,EAAEC,GAAG;EACtE,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EACpF,MAAMS,OAAO,GAAGX,cAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMC,SAAS,GAAGC,EAAE,CAChB,qDAAqD,EACrD;IACI,YAAY,EAAER,QAAQ;IACtB,qBAAqB,EAAE,CAACA,QAAQ;IAChC,gBAAgB,EAAE,CAAC,CAACI,UAAU,CAACK,OAAO;IACtC,qBAAqB,EAAET,QAAQ,IAAIE;GACtC,EACDH,KAAK,GAAGW,MAAM,CAACX,KAAK,CAAC,GAAGW,MAAM,CAACC,IAAI,EACnCf,KAAK,CAACW,SAAS,CAClB;EAED,oBACIb,uDAAUU,UAAU;IAAEG,SAAS,EAAEA,SAAS;IAAEV,GAAG,EAAEA;mBAC7CH;IAAMa,SAAS,EAAC,eAAe;IAACV,GAAG,EAAEQ;KAChCJ,IAAI,GACD,OAAOA,IAAI,KAAK,QAAQ,gBACpBP,6BAACkB,IAAI;IAACC,IAAI,EAAEZ,IAAI;IAAEM,SAAS,EAAC;IAAiC,gBAE7Db,cAAK,CAACoB,YAAY,CAACb,IAAI,EAAE;IAAEM,SAAS,EAAE;GAAgC,CACzE,GACD,IAAI,EACPT,QAAQ,CACN,EACNK,QAAQ,gBACLT,6BAACkB,IAAI;IACDC,IAAI,EAAC,OAAO;IACZJ,OAAO,EAAEN,QAAQ;IACjBI,SAAS,EAAC;IACZ,GACF,IAAI,CACL;AAEf,CAAC;;;;"}
+{"version":3,"file":"Tag.js","sources":["../../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\n\nexport const TAG_COLORS = {\n    green: 'wcag-green-100',\n    yellow: 'wcag-yellow-100',\n    red: 'wcag-red-100',\n    blue: 'wcag-blue-100',\n    purple: 'wcag-purple-100',\n    orange: 'wcag-orange-100',\n    brown: 'wcag-brown-100',\n    pink: 'wcag-pink-100',\n    grey: 'wcag-grey-200',\n};\n\nexport type TagColor = keyof typeof TAG_COLORS;\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: TagColor;\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        color ? TAG_COLORS[color] : TAG_COLORS.grey,\n        props.className\n    );\n\n    return (\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"],"names":["TAG_COLORS","green","yellow","red","blue","purple","orange","brown","pink","grey","Tag","React","forwardRef","props","ref","children","color","disabled","icon","readOnly","onDelete","otherProps","textRef","useRef","className","cn","onClick","Icon","name","cloneElement"],"mappings":";;;;MAIaA,UAAU,GAAG;EACtBC,KAAK,EAAE,gBAAgB;EACvBC,MAAM,EAAE,iBAAiB;EACzBC,GAAG,EAAE,cAAc;EACnBC,IAAI,EAAE,eAAe;EACrBC,MAAM,EAAE,iBAAiB;EACzBC,MAAM,EAAE,iBAAiB;EACzBC,KAAK,EAAE,gBAAgB;EACvBC,IAAI,EAAE,eAAe;EACrBC,IAAI,EAAE;;MAcGC,GAAG,gBAAGC,cAAK,CAACC,UAAU,CAA4B,CAACC,KAAK,EAAEC,GAAG;EACtE,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EACpF,MAAMS,OAAO,GAAGX,cAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMC,SAAS,GAAGC,EAAE,CAChB,qDAAqD,EACrD;IACI,YAAY,EAAER,QAAQ;IACtB,qBAAqB,EAAE,CAACA,QAAQ;IAChC,gBAAgB,EAAE,CAAC,CAACI,UAAU,CAACK,OAAO;IACtC,qBAAqB,EAAET,QAAQ,IAAIE;GACtC,EACDH,KAAK,GAAGhB,UAAU,CAACgB,KAAK,CAAC,GAAGhB,UAAU,CAACS,IAAI,EAC3CI,KAAK,CAACW,SAAS,CAClB;EAED,oBACIb,uDAAUU,UAAU;IAAEG,SAAS,EAAEA,SAAS;IAAEV,GAAG,EAAEA;mBAC7CH;IAAMa,SAAS,EAAC,eAAe;IAACV,GAAG,EAAEQ;KAChCJ,IAAI,GACD,OAAOA,IAAI,KAAK,QAAQ,gBACpBP,6BAACgB,IAAI;IAACC,IAAI,EAAEV,IAAI;IAAEM,SAAS,EAAC;IAAiC,gBAE7Db,cAAK,CAACkB,YAAY,CAACX,IAAI,EAAE;IAAEM,SAAS,EAAE;GAAgC,CACzE,GACD,IAAI,EACPT,QAAQ,CACN,EACNK,QAAQ,gBACLT,6BAACgB,IAAI;IACDC,IAAI,EAAC,OAAO;IACZF,OAAO,EAAEN,QAAQ;IACjBI,SAAS,EAAC;IACZ,GACF,IAAI,CACL;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/index.js

@@ -43,7 +43,7 @@ export { Pagination } from './components/Pagination/Pagination.js';
 export { Progress } from './components/Progress/Progress.js';
 export { ToastProvider, useToast } from './components/Toast/Toaster.js';
 export { Provider } from './components/Provider/Provider.js';
-export { Tag } from './components/Tag/Tag.js';
+export { TAG_COLORS, Tag } from './components/Tag/Tag.js';
 export { Select2 } from './components/Select2/Select2.js';
 export { Table } from './components/Table/components/Table.js';
 export { PaginatedTable } from './components/Table/components/PaginatedTable.js';

package/dist/index.css

@@ -272,7 +272,7 @@
     .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover,
 [data-taco='calendar'] .DayPicker-Day--highlighted,
 [data-taco='calendar'] .DayPicker-Day--selected {
-    @apply bg-grey-100 text-black;
+    @apply wcag-grey-200;
 }
 
 [data-taco='calendar'] .calendar-caption {
@@ -288,11 +288,11 @@
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:hover {
-    @apply wcag-blue-300;
+    @apply wcag-grey-200;
 }
 
 [data-taco='scrollable-list']:not([readonly]) li:hover [data-taco='icon'] {
-    @apply wcag-blue-300;
+    @apply wcag-grey-200;
 }
 
 [data-taco='scrollable-list'] li:focus,

package/dist/taco.cjs.development.js

@@ -2577,22 +2577,6 @@ function IconSortBy(props, svgRef) {
 }
 var SortBy = /*#__PURE__*/React.forwardRef(IconSortBy);
 
-function IconSpinner(props, svgRef) {
-  return /*#__PURE__*/React.createElement("svg", Object.assign({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: "0 0 24 24",
-    ref: svgRef
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "currentColor",
-    fillRule: "evenodd"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M12 2C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2zm0 1.5a8.5 8.5 0 110 17 8.5 8.5 0 010-17z"
-  }), /*#__PURE__*/React.createElement("path", {
-    d: "M12 2a.75.75 0 110 1.5 8.5 8.5 0 108.5 8.5.75.75 0 111.5 0c0 5.523-4.477 10-10 10S2 17.523 2 12 6.477 2 12 2z"
-  })));
-}
-var Spinner = /*#__PURE__*/React.forwardRef(IconSpinner);
-
 function IconStarSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3116,7 +3100,6 @@ const icons = {
   sliders: Sliders,
   smartpay: Smartpay,
   'sort-by': SortBy,
-  spinner: Spinner,
   'star-solid': StarSolid,
   star: Star,
   subscriptions: Subscriptions,
@@ -3385,9 +3368,9 @@ const getButtonClasses = () => {
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case 'primary':
-      return `yt-blue-solid focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:yt-blue-solid disabled:hover:hover:border-blue-500`;
+      return `wcag-blue-500 focus:bg-blue-500 focus:text-white focus:yt-focus active:bg-blue-700 active:text-white hover:bg-blue-300 hover:text-white hover:focus:bg-blue-300 hover:focus:border-blue-300 hover:focus:text-white disabled:hover:wcag-blue-500 disabled:hover:hover:border-blue-500`;
     case 'danger':
-      return `yt-red-solid focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:yt-red-solid`;
+      return `wcag-red-500 focus:bg-red-500 focus:text-white focus:yt-focus-red active:bg-red-700 active:text-white hover:bg-red-300 hover:text-white hover:focus:bg-red-300 hover:focus:text-white disabled:hover:wcag-red-500`;
     case 'ghost':
       return `bg-white shadow-[inset_0_0_0_1px_theme(colors.blue.500)] text-blue-500 focus:bg-transparent focus:text-blue-500 active:bg-blue-100 focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.500),0_0_0_2px_rgba(0,99,255,0.25)] active:text-blue-700 hover:bg-blue-100 hover:shadow-[inset_0_0_0_1px_theme(colors.blue.300)] hover:text-blue-300 hover:focus:bg-blue-100 hover:focus:!shadow-[inset_0_0_0_1px_theme(colors.blue.300),0_0_0_2px_rgba(0,99,255,0.25)] hover:focus:text-blue-300`;
     case 'discrete':
@@ -3398,7 +3381,7 @@ const getAppearanceClasses = (value, icon = false) => {
         return `yt-transparent focus:text-blue-500 focus:yt-focus active:text-blue-700 hover:text-blue-300 hover:focus:text-blue-300 disabled:hover:yt-transparent`;
       }
     default:
-      return `yt-grey-solid focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:yt-grey-solid`;
+      return `wcag-grey-200 focus:bg-grey-200 focus:yt-focus active:bg-grey-300 active:text-black hover:bg-grey-100 hover:text-grey-700 hover:focus:bg-grey-100 hover:focus:text-grey-700 disabled:hover:wcag-grey-200`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -3886,7 +3869,7 @@ const getInputClasses = props => {
   const disabled = props.disabled || !!props['aria-disabled'];
   const readOnly = props.readOnly || !!props['aria-readonly'];
   const invalid = props.invalid || !!props['aria-invalid'];
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded flex items-center leading-6 px-2 relative w-full text-ellipsis transition-colors transition-opacity ease-in min-h-[theme(spacing.8)]', {
     // default
     'border-grey-300 focus:border-blue-300 focus:yt-focus': !invalid,
     'hover:shadow-[0_0_0.1rem_theme(colors.grey.500)] active:border-blue-700': !invalid && !disabled,
@@ -4143,7 +4126,7 @@ const useListScrollTo = (internalRef, itemRefs) => {
   };
 };
 
-const Spinner$1 = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 500,
     label,
@@ -4313,7 +4296,7 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
     "data-taco": "scrollable-list"
   }), loading ? /*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
-  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spinner$1, {
+  }, /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(Spinner, {
     delay: 0
   })), /*#__PURE__*/React.createElement("span", null, texts.listbox.loading)) : options.length ? options.map(({
     children,
@@ -5109,7 +5092,7 @@ const Datepicker = /*#__PURE__*/React.forwardRef(function Datepicker(props, ref)
         key: shortcut.text
       }, /*#__PURE__*/React.createElement("button", {
         type: "button",
-        className: "hover:bg-grey-100 flex w-full items-start px-4 py-1 text-xs",
+        className: "hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs",
         onClick: event => {
           event.persist();
           shortcut.onClick(event);
@@ -6122,7 +6105,7 @@ const useItemStyling = ({
   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 hover:bg-grey-100 text-black hover:text-black': !disabled,
+    'cursor-pointer hover:wcag-grey-200 text-black': !disabled,
     'cursor-not-allowed hover:bg-white text-grey-300': disabled
   }, className);
 };
@@ -7153,7 +7136,7 @@ const getBadgeIcon = type => {
         className: cn(css, 'yt-blue-solid')
       });
     case 'loading':
-      return /*#__PURE__*/React__default.createElement(Spinner$1, {
+      return /*#__PURE__*/React__default.createElement(Spinner, {
         delay: 0,
         className: cn(css, 'h-6 w-6')
       });
@@ -7678,18 +7661,17 @@ const Title$3 = /*#__PURE__*/React__default.forwardRef(function Listbox2Group(pr
   }));
 });
 
-const colors = {
-  green: 'bg-green-100 text-green-900',
-  yellow: 'bg-yellow-100 text-yellow-900',
-  red: 'bg-red-100 text-red-900',
-  blue: 'bg-blue-100 text-blue-900',
-  purple: 'bg-purple-100 text-purple-900',
-  orange: 'bg-orange-100 text-orange-900',
-  brown: 'bg-brown-100 text-brown-900',
-  pink: 'bg-pink-100 text-pink-900',
-  grey: 'bg-grey-200 text-grey-900'
+const TAG_COLORS = {
+  green: 'wcag-green-100',
+  yellow: 'wcag-yellow-100',
+  red: 'wcag-red-100',
+  blue: 'wcag-blue-100',
+  purple: 'wcag-purple-100',
+  orange: 'wcag-orange-100',
+  brown: 'wcag-brown-100',
+  pink: 'wcag-pink-100',
+  grey: 'wcag-grey-200'
 };
-
 const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   const {
     children,
@@ -7706,7 +7688,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     'hover:bg-opacity-75': !disabled,
     'cursor-pointer': !!otherProps.onClick,
     'pointer-events-none': disabled || readOnly
-  }, color ? colors[color] : colors.grey, props.className);
+  }, color ? TAG_COLORS[color] : TAG_COLORS.grey, props.className);
   return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
     className: className,
     ref: ref
@@ -7725,7 +7707,7 @@ const Tag$1 = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   }) : null);
 });
 
-const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:bg-grey-100 aria-current:bg-grey-100 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
+const createOptionClassName = () => 'group mb-px flex h-8 w-full text-sm flex-shrink-0 font-normal cursor-pointer items-center rounded bg-white px-2 leading-8 text-black aria-hidden:hidden gap-1.5 bg-white hover:wcag-grey-200 aria-current:wcag-grey-200 aria-disabled:text-black/25 aria-disabled:pointer-events-none';
 const createCollectionClassName = () => 'flex flex-col gap-px';
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
@@ -7748,7 +7730,7 @@ function _catch(body, recover) {
   return result;
 }
 
-const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(colors);
+const AVAILABLE_COLORS = /*#__PURE__*/Object.keys(TAG_COLORS);
 const EditPopover = props => {
   const {
     color: initialColor,
@@ -7909,7 +7891,7 @@ const Colours = props => {
     value: color
   }, AVAILABLE_COLORS.map(availableColor => /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Item, {
     "aria-label": color,
-    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', colors[availableColor]),
+    className: cn('flex h-6 w-6 cursor-pointer items-center justify-center rounded', TAG_COLORS[availableColor]),
     key: availableColor,
     onFocus: () => onChangeColor(availableColor),
     value: availableColor
@@ -8139,7 +8121,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
     readOnly,
     tags
   } = useSelect2Context();
-  const contentClassName = cn('truncate flex items-center gap-1');
+  const contentClassName = cn('truncate items-center gap-1');
   const currentValue = children.find(matchesValue(value));
   let output;
   if (currentValue) {
@@ -8159,7 +8141,7 @@ const Single = /*#__PURE__*/React__default.forwardRef(function Select2TriggerSin
   }
   return /*#__PURE__*/React__default.createElement(Button$2, Object.assign({}, buttonProps, {
     ref: ref
-  }), /*#__PURE__*/React__default.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: contentClassName
   }, output));
 });
@@ -8184,10 +8166,10 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     className
   } = buttonProps;
   if (open) {
-    className = cn('absolute z-20', buttonProps.className);
+    className = cn('!absolute z-20', buttonProps.className);
     content = /*#__PURE__*/React__default.createElement(ScrollArea, {
       className: "my-1 flex max-h-[5.5rem] flex-col"
-    }, /*#__PURE__*/React__default.createElement("span", {
+    }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
       key: child.props.value,
@@ -8210,7 +8192,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
       valuesAsChildren: valuesAsChildren
     });
   }
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: cn('relative inline-flex flex-grow', {
       'h-8': open
     }),
@@ -8241,9 +8223,9 @@ const MultipleValue = ({
       setValue(tagValue);
     }
   };
-  return /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "relative flex items-center gap-1 overflow-hidden"
-  }, /*#__PURE__*/React__default.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "flex gap-1 truncate",
     ref: el => setContentRef(el)
   }, valuesAsChildren.map((child, index) => {
@@ -8628,6 +8610,24 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     // the focus should always remain on the input, so we forward events on to the listbox
     (_listboxRef$current = listboxRef.current) === null || _listboxRef$current === void 0 ? void 0 : _listboxRef$current.dispatchEvent(createCustomKeyboardEvent(event));
   };
+  let handleBlur;
+  if (otherProps.onBlur) {
+    // we might be focusing on an input or something inside the dropdown that was triggered by the select
+    // so see if the element gaining focus is inside a portal and look up its controller
+    // if we don't do this, things like validate on blur occur while simply opening the select
+    handleBlur = event => {
+      var _elementGainingFocus$;
+      const elementGainingFocus = event.relatedTarget;
+      if (elementGainingFocus === undefined) {
+        return;
+      }
+      const portalId = elementGainingFocus === null || elementGainingFocus === void 0 ? void 0 : (_elementGainingFocus$ = elementGainingFocus.closest('[data-radix-popper-content-wrapper] > :first-child')) === null || _elementGainingFocus$ === void 0 ? void 0 : _elementGainingFocus$.id;
+      if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {
+        var _otherProps$onBlur;
+        (_otherProps$onBlur = otherProps.onBlur) === null || _otherProps$onBlur === void 0 ? void 0 : _otherProps$onBlur.call(otherProps, event);
+      }
+    };
+  }
   const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
@@ -8647,6 +8647,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     "data-taco": "Select2"
   }, /*#__PURE__*/React__default.createElement(Trigger$6, Object.assign({}, otherProps, {
     "aria-haspopup": "listbox",
+    onBlur: handleBlur,
     onKeyDown: handleKeyDown,
     ref: internalRef
   }), allChildren)), /*#__PURE__*/React__default.createElement(PopoverPrimitive.Portal, null, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Content, {
@@ -10518,8 +10519,9 @@ exports.RadioGroup = RadioGroup;
 exports.SearchInput = SearchInput;
 exports.Select = Select;
 exports.Select2 = Select2;
-exports.Spinner = Spinner$1;
+exports.Spinner = Spinner;
 exports.Switch = Switch;
+exports.TAG_COLORS = TAG_COLORS;
 exports.Table = Table;
 exports.Tabs = Tabs;
 exports.Tag = Tag$1;