@economic/taco 0.0.26-alpha.9 → 0.0.28-alpha.5

package/dist/esm/components/Select/useSelect.js

@@ -37,7 +37,8 @@ var useSelect = function useSelect(_ref, ref) {
   var id = useMemo(function () {
     return nativeId || "select_" + v4();
   }, [nativeId]);
-  var internalInputRef = useRef(null); // support 'escape' resetting to the value that was set when the listbox opened
+  var internalInputRef = useRef(null);
+  var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
 
   var _React$useState2 = useState(value),
       lastValue = _React$useState2[0],
@@ -52,7 +53,12 @@ var useSelect = function useSelect(_ref, ref) {
     }
   }, [defaultValue]);
   useEffect(function () {
-    if (value !== undefined) {
+    // If emptyValue is defined, then set emptyValue
+    if (emptyValue !== undefined && value === emptyValue) {
+      setInputValueByRef(internalInputRef.current, value);
+    } else if (value !== undefined && data.some(function (option) {
+      return option.value === value;
+    })) {
       setInputValueByRef(internalInputRef.current, value);
     } else if (data.length && defaultValue === undefined) {
       setInputValueByRef(internalInputRef.current, data[0].value);
@@ -164,9 +170,9 @@ var useSelect = function useSelect(_ref, ref) {
   var button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
-    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + id : undefined,
+    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
     disabled: disabled,
-    id: id,
+    id: buttonId,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
   };

package/dist/esm/components/Select/useSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    listbox: ListboxProps;\n    input: any;\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onClick,\n        onChange,\n        readOnly,\n        value = emptyValue,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const searchData = useFlattenedData(data);\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n    const internalInputRef = React.useRef(null);\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (defaultValue !== undefined && value === undefined) {\n            setInputValueByRef(internalInputRef.current, defaultValue);\n        }\n    }, [defaultValue]);\n\n    React.useEffect(() => {\n        if (value !== undefined) {\n            setInputValueByRef(internalInputRef.current, value);\n        } else if (data.length && defaultValue === undefined) {\n            setInputValueByRef(internalInputRef.current, data[0].value);\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.keyCode) {\n            case keycode('escape'): {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(inputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(searchData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(searchData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(searchData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(searchData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${id}` : undefined,\n        disabled,\n        id,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        type: 'button',\n    };\n\n    const listbox = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(internalInputRef.current, event.target?.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: inputRef,\n        value,\n        multiselect,\n    };\n\n    const input = {\n        onChange: handleInputChange,\n        ref: internalInputRef,\n        value: value ?? '',\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useSelect","ref","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","nativeId","id","multiselect","onChange","readOnly","value","otherProps","useLocalization","texts","searchData","useFlattenedData","inputRef","useProxiedRef","React","open","setOpen","uuid","internalInputRef","lastValue","setLastValue","undefined","setInputValueByRef","current","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","onClick","input","popover","onOpenChange"],"mappings":"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"}
+{"version":3,"file":"useSelect.js","sources":["../../../../src/components/Select/useSelect.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport cn from 'classnames';\nimport { v4 as uuid } from 'uuid';\nimport { useLocalization } from '../Provider/Provider';\nimport { SelectProps } from './Select';\nimport { ListboxProps } from '../Listbox/Listbox';\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\nimport { setInputValueByRef, findByValue, useFlattenedData, sanitizeItem } from '../Listbox/util';\nimport { ScrollableListItemValue } from '../Listbox/ScrollableList';\n\ntype useSelect = React.HtmlHTMLAttributes<HTMLDivElement> & {\n    button: React.ButtonHTMLAttributes<HTMLButtonElement>;\n    listbox: ListboxProps;\n    input: any;\n    popover: { open: boolean; onOpenChange: (open: boolean) => void };\n    text: string | JSX.Element;\n    more?: number;\n};\n\nexport const useSelect = (\n    {\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data = [],\n        defaultValue,\n        disabled,\n        emptyValue,\n        id: nativeId,\n        multiselect,\n        onClick,\n        onChange,\n        readOnly,\n        value = emptyValue,\n        ...otherProps\n    }: SelectProps,\n    ref: React.Ref<HTMLInputElement>\n): useSelect => {\n    const { texts } = useLocalization();\n    const searchData = useFlattenedData(data);\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\n    const [open, setOpen] = React.useState(false);\n    const id = React.useMemo(() => nativeId || `select_${uuid()}`, [nativeId]);\n    const internalInputRef = React.useRef(null);\n    const buttonId = `${id}-button`;\n    // support 'escape' resetting to the value that was set when the listbox opened\n    const [lastValue, setLastValue] = React.useState<ScrollableListItemValue | undefined>(value);\n\n    React.useEffect(() => {\n        setLastValue(value);\n    }, [open]);\n\n    React.useEffect(() => {\n        if (defaultValue !== undefined && value === undefined) {\n            setInputValueByRef(internalInputRef.current, defaultValue);\n        }\n    }, [defaultValue]);\n\n    React.useEffect(() => {\n        // If emptyValue is defined, then set emptyValue\n        if (emptyValue !== undefined && value === emptyValue) {\n            setInputValueByRef(internalInputRef.current, value);\n        } else if (value !== undefined && data.some(option => option.value === value)) {\n            setInputValueByRef(internalInputRef.current, value);\n        } else if (data.length && defaultValue === undefined) {\n            setInputValueByRef(internalInputRef.current, data[0].value);\n        }\n    }, []);\n\n    // event handlers\n    const handleButtonKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>): void => {\n        if (event.keyCode === keycode('up') || event.keyCode === keycode('down')) {\n            event.preventDefault();\n            setOpen(true);\n        }\n    };\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>): void => {\n        switch (event.keyCode) {\n            case keycode('escape'): {\n                event.preventDefault();\n                if (lastValue !== undefined) {\n                    setInputValueByRef(inputRef.current, lastValue);\n                }\n\n                setOpen(false);\n                break;\n            }\n\n            case keycode('tab'):\n            case keycode('enter'): {\n                if (event.keyCode !== keycode('tab')) {\n                    event.preventDefault();\n                }\n                setOpen(false);\n                break;\n            }\n\n            default:\n        }\n\n        if (otherProps.onKeyDown) {\n            otherProps.onKeyDown(event);\n        }\n    };\n\n    const handleListboxClick = (event: React.MouseEvent<HTMLLIElement>): void => {\n        event.preventDefault();\n        if (!multiselect) {\n            setOpen(false);\n        }\n    };\n\n    let text: string | JSX.Element = '';\n    let more = 0;\n\n    if (value !== undefined) {\n        if (multiselect) {\n            const selectedValues = value?.toString().split(',') || [];\n\n            if (selectedValues.length === searchData.filter(item => !item.disabled).length) {\n                text = texts.select.allOptionsSelected;\n            } else {\n                text = findByValue(searchData, selectedValues[0])?.text ?? '';\n                more = selectedValues.length > 1 ? selectedValues.length - 1 : 0;\n            }\n        } else {\n            const item = findByValue(searchData, value);\n\n            if (item) {\n                text = item.icon ? (\n                    <>\n                        {React.cloneElement(item.icon, {\n                            className: cn(item.icon.props.className, 'mr-1 -mt-px'),\n                        })}\n                        {item.text}\n                    </>\n                ) : (\n                    item.text\n                );\n            }\n        }\n    }\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n        event.persist();\n\n        if (onChange) {\n            const item = findByValue(searchData, event.target.value);\n            (event as any).detail = sanitizeItem(item);\n\n            const indexes = item?.path?.split('.') ?? [];\n\n            if (indexes.length > 1) {\n                // we don't want to map the current item\n                indexes.pop();\n                // we need to rebuild the path as we map\n                let lastPath: string;\n\n                (event as any).detail.parents = indexes.map(i => {\n                    lastPath = lastPath ? [lastPath, i].join('.') : i;\n                    return sanitizeItem(searchData.find(i => i.path === lastPath));\n                });\n            }\n\n            onChange(event);\n        }\n    };\n\n    const button: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n        'aria-haspopup': 'listbox' as const,\n        'aria-label': ariaLabel ? `${ariaLabel} ${text}` : undefined,\n        'aria-labelledby': ariaLabelledBy ? `${ariaLabelledBy} ${buttonId}` : undefined,\n        disabled,\n        id: buttonId,\n        onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,\n        type: 'button',\n    };\n\n    const listbox = {\n        ...otherProps,\n        'aria-label': ariaLabel,\n        'aria-labelledby': ariaLabelledBy,\n        data,\n        disabled,\n        emptyValue,\n        onClick: handleListboxClick,\n        onChange: event => {\n            setInputValueByRef(internalInputRef.current, event.target?.value);\n        },\n        onKeyDown: handleListboxKeyDown,\n        ref: inputRef,\n        value,\n        multiselect,\n    };\n\n    const input = {\n        onChange: handleInputChange,\n        ref: internalInputRef,\n        value: value ?? '',\n    };\n\n    return {\n        button,\n        listbox,\n        input,\n        popover: {\n            open,\n            onOpenChange: setOpen,\n        },\n        text,\n        more,\n    };\n};\n"],"names":["useSelect","ref","ariaLabel","ariaLabelledBy","data","defaultValue","disabled","emptyValue","nativeId","id","multiselect","onChange","readOnly","value","otherProps","useLocalization","texts","searchData","useFlattenedData","inputRef","useProxiedRef","React","open","setOpen","uuid","internalInputRef","buttonId","lastValue","setLastValue","undefined","setInputValueByRef","current","some","option","length","handleButtonKeyDown","event","keyCode","keycode","preventDefault","handleListboxKeyDown","onKeyDown","handleListboxClick","text","more","selectedValues","toString","split","filter","item","select","allOptionsSelected","findByValue","icon","className","cn","props","handleInputChange","persist","target","detail","sanitizeItem","indexes","path","pop","lastPath","parents","map","i","join","find","button","type","listbox","onClick","input","popover","onOpenChange"],"mappings":"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"}

package/dist/esm/components/Switch/Switch.js

@@ -19,14 +19,14 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), createElement(Thumb, {
-    className: "'will-change-transform group-aria-checked:translate-x-5 mt-1 h-4 w-4 translate-x-1 rounded-full bg-white transition-transform"
+    className: "'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full"
   }));
 
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    element = createElement("label", {
+    return createElement("label", {
       className: labelClassName
     }, element, label);
   }

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

@@ -1 +1 @@
-{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /** Label for the switch */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group h-6 w-10 flex rounded-full inline-flex',\n        {\n            'mr-2': !!label,\n            'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\n        },\n        props.className\n    );\n\n    let element = (\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-5 mt-1 h-4 w-4 translate-x-1 rounded-full bg-white transition-transform\" />\n        </PrimitiveSwitch.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        element = (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;;;IA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,MAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;AAAA,MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;AAAA,MAA4BC,UAA5B,iCAA2CJ,KAA3C;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,8CADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,0DAAsD,CAACF,KAAK,CAACO,QAFjE;AAGI,mEAA+DP,KAAK,CAACO;AAHzE,GAFgB,EAOhBP,KAAK,CAACK,SAPU,CAApB;AAUA,MAAIG,OAAO,GACPT,aAAA,CAACU,IAAD,oBAA0BL;AAAYC,IAAAA,SAAS,EAAEA;AAAWK,IAAAA,eAAe,EAAEP;AAAUF,IAAAA,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;AAAuBJ,IAAAA,SAAS,EAAC;GAAjC,CADJ,CADJ;;AAMA,MAAIH,KAAJ,EAAW;AACP,QAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCN,KAAK,CAACO;AADe,KAArC,CAAzB;AAIAC,IAAAA,OAAO,GACHT,aAAA,QAAA;AAAOM,MAAAA,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CAjCqB;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\n\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\n    /** Label for the switch */\n    label?: React.ReactNode;\n    /* Whether user input is required */\n    required?: boolean;\n};\n\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\n    checked?: never;\n    onChange?: never;\n    /* The default checked state (uncontrolled) */\n    defaultChecked?: boolean;\n}\n\ninterface ControlledSwitchProps extends SwitchBaseProps {\n    defaultChecked?: never;\n    /* The current checked state (controlled) */\n    checked: boolean;\n    /* Handler called when the checked state changes */\n    onChange: (checked: boolean) => void;\n}\n\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\n\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\n    const { label, onChange, ...otherProps } = props;\n\n    const className = cn(\n        'group h-6 w-10 flex rounded-full inline-flex',\n        {\n            'mr-2': !!label,\n            'bg-grey-darker aria-checked:bg-blue focus:yt-focus': !props.disabled,\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\n        },\n        props.className\n    );\n\n    const element = (\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full\" />\n        </PrimitiveSwitch.Root>\n    );\n\n    if (label) {\n        const labelClassName = cn('flex items-center cursor-pointer', {\n            'cursor-not-allowed text-grey-dark': props.disabled,\n        });\n\n        return (\n            <label className={labelClassName}>\n                {element}\n                {label}\n            </label>\n        );\n    }\n\n    return element;\n});\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;;;IA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;AACnC,MAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;AAAA,MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;AAAA,MAA4BC,UAA5B,iCAA2CJ,KAA3C;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,8CADgB,EAEhB;AACI,YAAQ,CAAC,CAACJ,KADd;AAEI,0DAAsD,CAACF,KAAK,CAACO,QAFjE;AAGI,mEAA+DP,KAAK,CAACO;AAHzE,GAFgB,EAOhBP,KAAK,CAACK,SAPU,CAApB;AAUA,MAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;AAAYC,IAAAA,SAAS,EAAEA;AAAWK,IAAAA,eAAe,EAAEP;AAAUF,IAAAA,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;AAAuBJ,IAAAA,SAAS,EAAC;GAAjC,CADJ,CADJ;;AAMA,MAAIH,KAAJ,EAAW;AACP,QAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;AAC1D,2CAAqCN,KAAK,CAACO;AADe,KAArC,CAAzB;AAIA,WACIR,aAAA,QAAA;AAAOM,MAAAA,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;AAMH;;AAED,SAAOM,OAAP;AACH,CAjCqB;;;;"}

package/dist/esm/components/Table/util/renderColumn.js

@@ -14,7 +14,7 @@ var Column = function Column(_ref) {
       'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
       'justify-end text-right': cell.align === 'right',
-      'justify-center text-center': !cell.align
+      'justify-center text-center': cell.align === 'center' || !cell.align
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex

package/dist/esm/components/Table/util/renderColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderColumn.js","sources":["../../../../../src/components/Table/util/renderColumn.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../Icon/Icon';\n\nexport const Column = ({ cell }: any): any => {\n    const props = {\n        ...cell.getHeaderProps(),\n        ...(cell.getSortByToggleProps && cell.getSortByToggleProps({ title: undefined })),\n        className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {\n            'yt-table__cell__group': !!cell.columns,\n            'cursor-pointer': !cell.disableSorting,\n            'justify-start text-left': cell.align === 'left',\n            'justify-end text-right': cell.align === 'right',\n            'justify-center text-center': !cell.align,\n        }),\n        style: { ...cell.style, flex: cell.flex },\n    };\n\n    if (cell.isSorted) {\n        props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';\n    }\n\n    return (\n        <div {...props} key={cell.id} data-taco=\"table-column\">\n            <span className=\"truncate\">{cell.render('Header')}</span>\n            {cell.isSorted ? <Icon name={cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'} /> : null}\n        </div>\n    );\n};\n"],"names":["Column","cell","props","getHeaderProps","getSortByToggleProps","title","undefined","className","cn","columns","disableSorting","align","style","flex","isSorted","isSortedDesc","React","key","id","render","Icon","name"],"mappings":";;;;;IAIaA,MAAM,GAAG,SAATA,MAAS;MAAGC,YAAAA;;AACrB,MAAMC,KAAK,gBACJD,IAAI,CAACE,cAAL,EADI,EAEHF,IAAI,CAACG,oBAAL,IAA6BH,IAAI,CAACG,oBAAL,CAA0B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA1B,CAF1B;AAGPC,IAAAA,SAAS,EAAEC,EAAE,CAAC,yFAAD,EAA4FP,IAAI,CAACM,SAAjG,EAA4G;AACrH,+BAAyB,CAAC,CAACN,IAAI,CAACQ,OADqF;AAErH,wBAAkB,CAACR,IAAI,CAACS,cAF6F;AAGrH,iCAA2BT,IAAI,CAACU,KAAL,KAAe,MAH2E;AAIrH,gCAA0BV,IAAI,CAACU,KAAL,KAAe,OAJ4E;AAKrH,oCAA8B,CAACV,IAAI,CAACU;AALiF,KAA5G,CAHN;AAUPC,IAAAA,KAAK,eAAOX,IAAI,CAACW,KAAZ;AAAmBC,MAAAA,IAAI,EAAEZ,IAAI,CAACY;AAA9B;AAVE,IAAX;;AAaA,MAAIZ,IAAI,CAACa,QAAT,EAAmB;AACfZ,IAAAA,KAAK,CAAC,WAAD,CAAL,GAAqBD,IAAI,CAACc,YAAL,GAAoB,YAApB,GAAmC,WAAxD;AACH;;AAED,SACIC,4BAAA,MAAA,oBAASd;AAAOe,IAAAA,GAAG,EAAEhB,IAAI,CAACiB;iBAAc;IAAxC,EACIF,4BAAA,OAAA;AAAMT,IAAAA,SAAS,EAAC;GAAhB,EAA4BN,IAAI,CAACkB,MAAL,CAAY,QAAZ,CAA5B,CADJ,EAEKlB,IAAI,CAACa,QAAL,GAAgBE,4BAAA,CAACI,IAAD;AAAMC,IAAAA,IAAI,EAAEpB,IAAI,CAACc,YAAL,GAAoB,oBAApB,GAA2C;GAAvD,CAAhB,GAAgG,IAFrG,CADJ;AAMH;;;;"}
+{"version":3,"file":"renderColumn.js","sources":["../../../../../src/components/Table/util/renderColumn.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Icon } from '../../Icon/Icon';\n\nexport const Column = ({ cell }: any): any => {\n    const props = {\n        ...cell.getHeaderProps(),\n        ...(cell.getSortByToggleProps && cell.getSortByToggleProps({ title: undefined })),\n        className: cn('yt-table__cell flex flex-1 truncate p-2 align-middle text-grey-darkest hover:text-black', cell.className, {\n            'yt-table__cell__group': !!cell.columns,\n            'cursor-pointer': !cell.disableSorting,\n            'justify-start text-left': cell.align === 'left',\n            'justify-end text-right': cell.align === 'right',\n            'justify-center text-center': cell.align === 'center' || !cell.align,\n        }),\n        style: { ...cell.style, flex: cell.flex },\n    };\n\n    if (cell.isSorted) {\n        props['aria-sort'] = cell.isSortedDesc ? 'descending' : 'ascending';\n    }\n\n    return (\n        <div {...props} key={cell.id} data-taco=\"table-column\">\n            <span className=\"truncate\">{cell.render('Header')}</span>\n            {cell.isSorted ? <Icon name={cell.isSortedDesc ? 'chevron-down-solid' : 'chevron-up-solid'} /> : null}\n        </div>\n    );\n};\n"],"names":["Column","cell","props","getHeaderProps","getSortByToggleProps","title","undefined","className","cn","columns","disableSorting","align","style","flex","isSorted","isSortedDesc","React","key","id","render","Icon","name"],"mappings":";;;;;IAIaA,MAAM,GAAG,SAATA,MAAS;MAAGC,YAAAA;;AACrB,MAAMC,KAAK,gBACJD,IAAI,CAACE,cAAL,EADI,EAEHF,IAAI,CAACG,oBAAL,IAA6BH,IAAI,CAACG,oBAAL,CAA0B;AAAEC,IAAAA,KAAK,EAAEC;AAAT,GAA1B,CAF1B;AAGPC,IAAAA,SAAS,EAAEC,EAAE,CAAC,yFAAD,EAA4FP,IAAI,CAACM,SAAjG,EAA4G;AACrH,+BAAyB,CAAC,CAACN,IAAI,CAACQ,OADqF;AAErH,wBAAkB,CAACR,IAAI,CAACS,cAF6F;AAGrH,iCAA2BT,IAAI,CAACU,KAAL,KAAe,MAH2E;AAIrH,gCAA0BV,IAAI,CAACU,KAAL,KAAe,OAJ4E;AAKrH,oCAA8BV,IAAI,CAACU,KAAL,KAAe,QAAf,IAA2B,CAACV,IAAI,CAACU;AALsD,KAA5G,CAHN;AAUPC,IAAAA,KAAK,eAAOX,IAAI,CAACW,KAAZ;AAAmBC,MAAAA,IAAI,EAAEZ,IAAI,CAACY;AAA9B;AAVE,IAAX;;AAaA,MAAIZ,IAAI,CAACa,QAAT,EAAmB;AACfZ,IAAAA,KAAK,CAAC,WAAD,CAAL,GAAqBD,IAAI,CAACc,YAAL,GAAoB,YAApB,GAAmC,WAAxD;AACH;;AAED,SACIC,4BAAA,MAAA,oBAASd;AAAOe,IAAAA,GAAG,EAAEhB,IAAI,CAACiB;iBAAc;IAAxC,EACIF,4BAAA,OAAA;AAAMT,IAAAA,SAAS,EAAC;GAAhB,EAA4BN,IAAI,CAACkB,MAAL,CAAY,QAAZ,CAA5B,CADJ,EAEKlB,IAAI,CAACa,QAAL,GAAgBE,4BAAA,CAACI,IAAD;AAAMC,IAAAA,IAAI,EAAEpB,IAAI,CAACc,YAAL,GAAoB,oBAApB,GAA2C;GAAvD,CAAhB,GAAgG,IAFrG,CADJ;AAMH;;;;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { getInputClasses } from '../Input/util';\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    invalid?: boolean;\n    /** Value of the textarea */\n    value?: string;\n};\n\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\n\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\n});\n"],"names":["Textarea","React","props","ref","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;;;IAYaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAA+CC,SAA/C,GAA4EF,KAA5E,CAA+CE,SAA/C;AAAA,MAA6DC,UAA7D,iCAA4EH,KAA5E;;AACA,MAAMI,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACN,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACO,SAAzE,CAArB;AAGA;AACA;;AACA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;AAC7CD,MAAAA,KAAK,CAACE,cAAN;AACA,UAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;AACAN,MAAAA,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;AACAH,MAAAA,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;AACH;;AAED,QAAIhB,SAAJ,EAAe;AACXA,MAAAA,SAAS,CAACO,KAAD,CAAT;AACH;AACJ,GAXD;;AAaA,SAAOV,aAAA,WAAA,oBAAcI;AAAYI,IAAAA,SAAS,EAAEH;iBAAsB;AAAWF,IAAAA,SAAS,EAAEM;AAAeP,IAAAA,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { getInputClasses } from '../Input/util';\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Value of the textarea */\n    value?: string;\n};\n\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\n\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\n});\n"],"names":["Textarea","React","props","ref","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;;;IAaaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;AACrC,MAA+CC,SAA/C,GAA4EF,KAA5E,CAA+CE,SAA/C;AAAA,MAA6DC,UAA7D,iCAA4EH,KAA5E;;AACA,MAAMI,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACN,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACO,SAAzE,CAArB;AAGA;AACA;;AACA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;AAC7CD,MAAAA,KAAK,CAACE,cAAN;AACA,UAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;AACAN,MAAAA,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;AACAH,MAAAA,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;AACH;;AAED,QAAIhB,SAAJ,EAAe;AACXA,MAAAA,SAAS,CAACO,KAAD,CAAT;AACH;AACJ,GAXD;;AAaA,SAAOV,aAAA,WAAA,oBAAcI;AAAYI,IAAAA,SAAS,EAAEH;iBAAsB;AAAWF,IAAAA,SAAS,EAAEM;AAAeP,IAAAA,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}

package/dist/esm/index.css

@@ -136,7 +136,8 @@
         -webkit-appearance: none;
     }
 
-    [data-radix-portal][aria-hidden] [data-taco='menu'] {
+    [data-radix-portal][aria-hidden] [data-taco='menu'],
+    [data-radix-portal][aria-hidden] [data-taco='hanger'] {
         display: none;
         opacity: 0;
     }

package/dist/index.css

@@ -136,7 +136,8 @@
         -webkit-appearance: none;
     }
 
-    [data-radix-portal][aria-hidden] [data-taco='menu'] {
+    [data-radix-portal][aria-hidden] [data-taco='menu'],
+    [data-radix-portal][aria-hidden] [data-taco='hanger'] {
         display: none;
         opacity: 0;
     }

package/dist/taco.cjs.development.js

@@ -3387,7 +3387,7 @@ var Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 
 var _excluded$5 = ["dialog", "hanger", "menu", "popover", "tooltip"];
 var getButtonClasses = function getButtonClasses() {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center transition-all delay-100 ease-in border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';
 };
 var getAppearanceClasses = function getAppearanceClasses(value, icon) {
   if (icon === void 0) {
@@ -3436,7 +3436,8 @@ var createButton = function createButton(props, className, ref) {
     });
   } else if (typeof menu === 'function') {
     button = menu({
-      trigger: button
+      trigger: button,
+      appearance: otherProps.appearance
     });
   } else if (typeof popover === 'function') {
     button = popover({
@@ -3459,15 +3460,14 @@ var createButton = function createButton(props, className, ref) {
   return button;
 };
 
-var _excluded$6 = ["appearance", "icon", "rounded"];
+var _excluded$6 = ["icon", "rounded"];
 var IconButton = /*#__PURE__*/React.forwardRef(function IconButton(props, ref) {
-  var appearance = props.appearance,
-      icon = props.icon,
+  var icon = props.icon,
       _props$rounded = props.rounded,
       rounded = _props$rounded === void 0 ? false : _props$rounded,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$6);
 
-  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(appearance, true), {
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -3504,13 +3504,12 @@ var Banner = /*#__PURE__*/React.forwardRef(function Banner(props, ref) {
   }) : null);
 });
 
-var _excluded$7 = ["appearance", "fluid"];
+var _excluded$7 = ["fluid"];
 var Button$1 = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
-  var appearance = props.appearance,
-      fluid = props.fluid,
+  var fluid = props.fluid,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$7);
 
-  var className = cn(getButtonClasses(), getAppearanceClasses(appearance), 'rounded px-3', {
+  var className = cn(getButtonClasses(), getAppearanceClasses(otherProps.appearance), 'rounded px-3', {
     'cursor-not-allowed opacity-50': props.disabled,
     'focus:yt-focus active:focus:yt-focus': !props.disabled,
     'w-full': fluid
@@ -4187,13 +4186,13 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
       onChange = props.onChange,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$c);
 
-  var className = cn('h-5 w-5 border rounded text-sm', {
+  var className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 self-start mt-[0.1rem]', {
     'mr-2': !!label,
     'border-grey-dark text-blue focus:border-blue focus:yt-focus': !props.disabled && !invalid,
     'border-grey text-blue-light cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.2)] disabled:bg-[rgba(255,255,0,0.075)]': highlighted,
     'border-red text-red focus:border-red focus:yt-focus-red': invalid && !props.disabled
-  }, props.className);
+  });
   var handleChange;
 
   if (onChange) {
@@ -4203,9 +4202,9 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   }
 
   var element = React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, {
+    "data-taco": "checkbox",
     checked: indeterminate ? 'indeterminate' : checked,
     className: className,
-    "data-taco": "checkbox",
     onCheckedChange: handleChange,
     ref: ref
   }), React.createElement(CheckboxPrimitive.Indicator, {
@@ -4218,8 +4217,8 @@ var Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
-    });
-    element = React.createElement("label", {
+    }, props.className);
+    return React.createElement("label", {
       className: labelClassName
     }, element, label);
   }
@@ -4242,7 +4241,7 @@ var useProxiedRef = function useProxiedRef(ref) {
 };
 
 var getInputClasses = function getInputClasses(props) {
-  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis transition-all delay-100 ease-in flex items-center', {
+  return cn('peer bg-white text-black text-sm border font-normal not-italic no-underline rounded inline-flex leading-6 px-2 relative w-full text-ellipsis flex items-center', {
     'cursor-not-allowed text-black bg-grey': props.readOnly,
     'border-grey text-opacity-25 cursor-not-allowed': props.disabled,
     'bg-[rgba(255,255,0,0.075)]': props.highlighted && props.disabled,
@@ -4263,8 +4262,7 @@ var _excluded$d = ["button", "icon", "highlighted", "invalid", "onKeyDown", "aut
 var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
   var button = props.button,
       icon = props.icon,
-      _props$invalid = props.invalid,
-      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      invalid = props.invalid,
       onKeyDown = props.onKeyDown,
       autoFocus = props.autoFocus,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$d);
@@ -4327,7 +4325,7 @@ var Input = /*#__PURE__*/React.forwardRef(function Input(props, ref) {
     }
 
     var containerClassName = cn('bg-white inline-flex relative rounded w-full', otherProps.className);
-    input = React.createElement("div", {
+    return React.createElement("div", {
       className: containerClassName,
       "data-taco": "input-container"
     }, input, extra);
@@ -4478,6 +4476,17 @@ var ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(props
   var _useListScrollTo = useListScrollTo(listRef, itemRefs),
       scrollTo = _useListScrollTo.scrollTo;
 
+  React.useEffect(function () {
+    var _itemRefs$currentInde;
+
+    if (currentIndex && (_itemRefs$currentInde = itemRefs[currentIndex]) !== null && _itemRefs$currentInde !== void 0 && _itemRefs$currentInde.current) {
+      var _itemRefs$currentInde2;
+
+      (_itemRefs$currentInde2 = itemRefs[currentIndex].current) === null || _itemRefs$currentInde2 === void 0 ? void 0 : _itemRefs$currentInde2.scrollIntoView({
+        block: 'center'
+      });
+    }
+  }, []);
   React.useEffect(function () {
     scrollTo(currentIndex);
   }, [currentIndex]);
@@ -4827,7 +4836,7 @@ var filterData = function filterData(data, value) {
   });
 };
 
-var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
+var _excluded$g = ["aria-label", "aria-labelledby", "data", "defaultValue", "disabled", "id", "inline", "loading", "onChange", "onClick", "onKeyDown", "onSearch", "readOnly", "value"];
 var debouncer = /*#__PURE__*/debounce(function (f) {
   return f();
 }, 200);
@@ -5205,17 +5214,22 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
       className: "!border-l-0 focus:!border-none focus:!shadow-none active:!border-none",
       icon: popover.open ? 'chevron-up' : 'chevron-down',
       onClick: function onClick() {
-        return popover.onOpenChange(true);
+        var _input$ref$current;
+
+        popover.onOpenChange(true);
+        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
       },
       tabIndex: -1
     }) : dialog ? React.createElement(IconButton, {
       icon: "list-search",
       disabled: props.readOnly || props.disabled,
       dialog: dialog,
-      onFocus: function onFocus() {
-        var _input$ref$current;
+      onFocus: function onFocus(event) {
+        var _input$ref$current2;
 
-        (_input$ref$current = input.ref.current) === null || _input$ref$current === void 0 ? void 0 : _input$ref$current.focus();
+        // Prevents the default focus behaviour of showing the tooltip, on parent tooltip element
+        event.preventDefault();
+        (_input$ref$current2 = input.ref.current) === null || _input$ref$current2 === void 0 ? void 0 : _input$ref$current2.focus();
       },
       ref: button.ref,
       tabIndex: -1,
@@ -5228,7 +5242,7 @@ var Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
     },
     sideOffset: 4
   }, React.createElement(ScrollableList, Object.assign({}, list, {
-    className: cn('border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
+    className: cn('!border-blue max-h-[calc(12rem+2px)] w-auto max-w-[theme(spacing.96)]'),
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
@@ -5940,51 +5954,30 @@ Dialog.Extra = Extra;
 Dialog.Drawer = Drawer;
 Dialog.Close = Close$2;
 
-var _excluded$n = ["children", "disabled", "invalid", "label", "message", "required"];
+var _excluded$n = ["disabled", "children", "invalid", "message"];
 var Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
-  var _children$props$id, _children$props, _children$props$inval, _children$props2, _children$props$requi, _children$props3, _children$props4;
-
-  var children = props.children,
-      disabled = props.disabled,
-      invalid = props.invalid,
-      label = props.label,
+  var disabled = props.disabled,
+      children = props.children,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
       message = props.message,
-      required = props.required,
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$n);
 
-  var idRef = React.useRef((_children$props$id = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.id) !== null && _children$props$id !== void 0 ? _children$props$id : uuid.v4());
-  var isInvalid = (_children$props$inval = children === null || children === void 0 ? void 0 : (_children$props2 = children.props) === null || _children$props2 === void 0 ? void 0 : _children$props2.invalid) !== null && _children$props$inval !== void 0 ? _children$props$inval : invalid;
-  var isRequired = (_children$props$requi = children === null || children === void 0 ? void 0 : (_children$props3 = children.props) === null || _children$props3 === void 0 ? void 0 : _children$props3.required) !== null && _children$props$requi !== void 0 ? _children$props$requi : required;
-  var className = cn('flex flex-col', {
-    'pt-5': !label,
-    'mb-4': !message
-  }, props.className);
-  var labelClassName = cn('font-bold text-xs leading-4 h-4 truncate mb-1', {
+  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
     'text-grey-dark': disabled
-  });
-  var messageClassName = cn('text-xs leading-normal truncate flex-none', {
-    'text-grey-darkest': !isInvalid,
-    'text-red': isInvalid,
+  }, props.className);
+  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-darkest': !invalid,
+    'text-red': invalid,
     'opacity-50': disabled
-  });
-
-  if (!label && !(children !== null && children !== void 0 && children.props['aria-label'])) {
-    console.warn('TACO - You are creating a Field without a `label`, you must pass an `aria-label` to the Field child to provide an accessible experience for our users.');
-  }
-
-  return React.createElement("div", Object.assign({}, otherProps, {
+  }, props.className);
+  return React.createElement("label", Object.assign({}, otherProps, {
     className: className,
-    "data-taco": "field",
+    "data-taco": "label",
     ref: ref
-  }), label && React.createElement("label", {
-    htmlFor: idRef.current,
-    className: labelClassName,
-    "data-taco": "label"
-  }, label, isRequired ? '*' : ''), idRef.current !== (children === null || children === void 0 ? void 0 : (_children$props4 = children.props) === null || _children$props4 === void 0 ? void 0 : _children$props4.id) ? React.cloneElement(children, {
-    id: idRef.current
-  }) : children, message && React.createElement("span", {
+  }), children, message && React.createElement("span", {
     className: messageClassName,
-    role: isInvalid ? 'alert' : undefined
+    role: invalid ? 'alert' : undefined
   }, message));
 });
 
@@ -6082,11 +6075,22 @@ var Hanger = /*#__PURE__*/React.forwardRef(function Hanger(props, ref) {
       props: otherProps,
       ref: ref
     };
-  }, [otherProps]);
+  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+
+  var _React$useState = React.useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
+
+  React.useEffect(function () {
+    if (defaultOpen) {
+      setOpen(defaultOpen);
+    }
+  }, []);
   return React.createElement(HangerContext.Provider, {
     value: context
   }, React.createElement(PopoverPrimitive.Root, {
-    defaultOpen: defaultOpen
+    key: String(open),
+    defaultOpen: open
   }, anchor && React.createElement(Anchor, null, anchor), children));
 });
 Hanger.Anchor = Anchor;
@@ -6119,7 +6123,7 @@ var SearchInput = /*#__PURE__*/React.forwardRef(function SearchInput(_ref, ref)
   }, props, {
     button: React.createElement(IconButton, {
       icon: "search",
-      className: "!border-transparent !bg-transparent",
+      className: "!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent",
       disabled: props.disabled,
       onClick: handleClick
     }),
@@ -6836,14 +6840,14 @@ var RadioGroupItem = /*#__PURE__*/React.forwardRef(function RadioGroupItem(props
       otherProps = _objectWithoutPropertiesLoose(props, _excluded$z);
 
   var disabled = context.disabled || props.disabled;
-  var className = cn('flex items-center justify-center h-4 w-4 mr-2 rounded-full bg-white border-2 ', {
+  var className = cn('flex flex-shrink-0 self-start items-center justify-center h-4 w-4 mr-2 mt-[0.2rem] rounded-full bg-white border-2 ', {
     'border-grey-dark focus:border-blue focus:yt-focus aria-checked:bg-blue aria-checked:border-blue': !disabled && !context.invalid,
     'border-grey cursor-not-allowed aria-checked:bg-grey-dark aria-checked:border-grey-dark': disabled,
     'border-red text-red focus:border-red focus:yt-focus-red aria-checked:bg-red aria-checked:border-red': context.invalid && !disabled
   });
   var labelClassName = cn('flex items-center cursor-pointer', {
     'cursor-not-allowed text-grey-dark': disabled
-  });
+  }, props.className);
   return React.createElement("label", {
     className: labelClassName
   }, React.createElement(RadioGroupPrimitive.Item, Object.assign({}, otherProps, {
@@ -7025,9 +7029,10 @@ var Header = function Header(props) {
   }));
 };
 
-var _excluded$B = ["children", "trigger"];
+var _excluded$B = ["appearance", "children", "trigger"];
 var Menu = function Menu(externalProps) {
-  var children = externalProps.children,
+  var externalAppearance = externalProps.appearance,
+      children = externalProps.children,
       trigger = externalProps.trigger,
       props = _objectWithoutPropertiesLoose(externalProps, _excluded$B);
 
@@ -7035,7 +7040,7 @@ var Menu = function Menu(externalProps) {
       open = _React$useState[0],
       setOpen = _React$useState[1];
 
-  var _React$useState2 = React.useState('default'),
+  var _React$useState2 = React.useState(externalAppearance !== null && externalAppearance !== void 0 ? externalAppearance : 'default'),
       appearance = _React$useState2[0],
       _setAppearance = _React$useState2[1];
 
@@ -7400,7 +7405,8 @@ var useSelect = function useSelect(_ref, ref) {
   var id = React.useMemo(function () {
     return nativeId || "select_" + uuid.v4();
   }, [nativeId]);
-  var internalInputRef = React.useRef(null); // support 'escape' resetting to the value that was set when the listbox opened
+  var internalInputRef = React.useRef(null);
+  var buttonId = id + "-button"; // support 'escape' resetting to the value that was set when the listbox opened
 
   var _React$useState2 = React.useState(value),
       lastValue = _React$useState2[0],
@@ -7415,7 +7421,12 @@ var useSelect = function useSelect(_ref, ref) {
     }
   }, [defaultValue]);
   React.useEffect(function () {
-    if (value !== undefined) {
+    // If emptyValue is defined, then set emptyValue
+    if (emptyValue !== undefined && value === emptyValue) {
+      setInputValueByRef$1(internalInputRef.current, value);
+    } else if (value !== undefined && data.some(function (option) {
+      return option.value === value;
+    })) {
       setInputValueByRef$1(internalInputRef.current, value);
     } else if (data.length && defaultValue === undefined) {
       setInputValueByRef$1(internalInputRef.current, data[0].value);
@@ -7527,9 +7538,9 @@ var useSelect = function useSelect(_ref, ref) {
   var button = {
     'aria-haspopup': 'listbox',
     'aria-label': ariaLabel ? ariaLabel + " " + text : undefined,
-    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + id : undefined,
+    'aria-labelledby': ariaLabelledBy ? ariaLabelledBy + " " + buttonId : undefined,
     disabled: disabled,
-    id: id,
+    id: buttonId,
     onKeyDown: !disabled && !readOnly ? handleButtonKeyDown : undefined,
     type: 'button'
   };
@@ -7592,7 +7603,7 @@ var BaseSelect = /*#__PURE__*/React.forwardRef(function BaseSelect(props, ref) {
   var className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'text-left pr-0', {
+  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
   React.useEffect(function () {
@@ -9104,7 +9115,7 @@ var Column = function Column(_ref) {
       'cursor-pointer': !cell.disableSorting,
       'justify-start text-left': cell.align === 'left',
       'justify-end text-right': cell.align === 'right',
-      'justify-center text-center': !cell.align
+      'justify-center text-center': cell.align === 'center' || !cell.align
     }),
     style: _extends({}, cell.style, {
       flex: cell.flex
@@ -9722,14 +9733,14 @@ var Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
     onCheckedChange: onChange,
     ref: ref
   }), React.createElement(PrimitiveSwitch.Thumb, {
-    className: "'will-change-transform group-aria-checked:translate-x-5 mt-1 h-4 w-4 translate-x-1 rounded-full bg-white transition-transform"
+    className: "'will-change-transform transition-transform translate-x-1 group-aria-checked:translate-x-5 h-4 w-4 mt-1 bg-white rounded-full"
   }));
 
   if (label) {
     var labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
-    element = React.createElement("label", {
+    return React.createElement("label", {
       className: labelClassName
     }, element, label);
   }