@economic/taco 2.7.3 → 2.7.5

package/types.json

@@ -506126,7 +506126,7 @@
 						"type": "reference",
 						"name": "Select2PropsWithStatics"
 					},
-					"defaultValue": "React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={flattenedChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === flattenedChildren.length}\n                                    />\n                                ) : null*/}\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics"
+					"defaultValue": "React.forwardRef<HTMLButtonElement, Select2Props>(function Select2(props, ref) {\n    const {\n        children: initChildren,\n        defaultValue: defaultProp,\n        disabled = false,\n        emptyValue = undefined,\n        highlighted = false,\n        invalid = false,\n        multiple = false,\n        name,\n        onChange,\n        onCreate,\n        onDelete,\n        onEdit,\n        readOnly = false,\n        tags = false,\n        value: prop,\n        ...otherProps\n    } = props;\n\n    const emptyOption: React.ReactElement<Select2OptionProps> | undefined = React.useMemo(() => {\n        if (emptyValue !== undefined && !multiple) {\n            // Empty option has 0px height, because it's empty, so need to apply height manually\n            return <Option key=\"__empty\" children=\"\" value={emptyValue} className=\"h-8\" />;\n        }\n        return;\n    }, [emptyValue, multiple]);\n\n    const initialChildren = React.useMemo(() => {\n        if (emptyOption) {\n            return [emptyOption, ...initChildren] as Select2Children;\n        }\n        return initChildren;\n    }, [emptyOption, initChildren]);\n\n    // refs\n    const internalRef = useMergedRef<HTMLButtonElement>(ref);\n    const listboxRef = React.useRef<CollectionRef>(null);\n    const searchRef = React.useRef<HTMLInputElement>(null);\n    const { texts } = useLocalization();\n    // align the listbox min width with the width of the input - it should never be smaller\n    const dimensions = useBoundingClientRectListener(internalRef);\n\n    // state\n    const [open, setOpen] = React.useState(false);\n    const [value, _setValue] = useControllableState<Select2Value>({\n        // uncontrolled\n        defaultProp,\n        // controlled\n        onChange,\n        prop,\n    });\n    const setValue = ListboxPrimitive.createListboxValueSetter(multiple, _setValue);\n    const [validationError, setValidationError] = React.useState<Error | undefined>();\n    const [shouldPauseHoverState, setShouldPauseHoverState] = useIsHoverStatePaused();\n\n    const { flattenedChildren, filteredChildren, searchQuery, setSearchQuery } = useChildren({\n        children: initialChildren,\n        emptyValue,\n        multiple,\n        open,\n        setValue,\n        value,\n    });\n\n    // context\n    const context = {\n        disabled,\n        highlighted,\n        invalid,\n        listboxRef,\n        multiple,\n        onCreate,\n        onDelete,\n        onEdit,\n        open,\n        readOnly,\n        ref: internalRef,\n        searchQuery,\n        searchRef,\n        setOpen,\n        setSearchQuery,\n        setValidationError,\n        setValue,\n        shouldPauseHoverState,\n        setShouldPauseHoverState,\n        tags,\n        validationError,\n        value,\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (open) {\n            event.preventDefault();\n        } else if (!event.ctrlKey && !event.metaKey && (event.key === 'ArrowDown' || /^[a-z0-9]$/i.test(event.key))) {\n            setOpen(true);\n        }\n\n        // the focus should always remain on the input, so we forward events on to the listbox\n        listboxRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n    };\n\n    let handleBlur;\n\n    if (otherProps.onBlur) {\n        // we might be focusing on an input or something inside the dropdown that was triggered by the select\n        // so see if the element gaining focus is inside a portal and look up its controller\n        // if we don't do this, things like validate on blur occur while simply opening the select\n        handleBlur = (event: React.FocusEvent<HTMLButtonElement>) => {\n            const elementGainingFocus = event.relatedTarget;\n\n            if (elementGainingFocus === undefined) {\n                return;\n            }\n\n            const portalId = elementGainingFocus?.closest('[data-radix-popper-content-wrapper] > :first-child')?.id;\n\n            if (!portalId || event.currentTarget.getAttribute(`aria-controls`) !== portalId) {\n                otherProps.onBlur?.(event);\n            }\n        };\n    }\n\n    const handleListboxKeyDown = (event: React.KeyboardEvent<HTMLElement>) => {\n        if (isAriaDirectionKey(event)) {\n            setShouldPauseHoverState(true);\n        }\n    };\n\n    const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());\n\n    return (\n        <Select2Context.Provider value={context}>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <ControlledHiddenField\n                    emptyValue={emptyValue}\n                    multiple={multiple || tags}\n                    name={name}\n                    options={flattenedChildren.map(child => child.props.value)}\n                    parentRef={internalRef}\n                    setValue={setValue}\n                    value={value}\n                />\n                <PopoverPrimitive.Trigger asChild data-taco=\"Select2\">\n                    <Trigger\n                        {...otherProps}\n                        aria-haspopup=\"listbox\"\n                        emptyValue={emptyValue}\n                        onBlur={handleBlur}\n                        onKeyDown={handleKeyDown}\n                        ref={internalRef}>\n                        {flattenedChildren}\n                    </Trigger>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Portal>\n                    <PopoverPrimitive.Content\n                        asChild\n                        align=\"start\"\n                        onOpenAutoFocus={() => {\n                            internalRef.current?.focus();\n                        }}\n                        onCloseAutoFocus={event => {\n                            event.preventDefault();\n                            event.stopPropagation();\n                            internalRef.current?.focus();\n                        }}\n                        sideOffset={4}\n                        tabIndex={-1}>\n                        <div className={className} style={{ minWidth: dimensions?.width ? `${dimensions.width}px` : undefined }}>\n                            {flattenedChildren.length > 0 || onCreate ? (\n                                <Search\n                                    placeholder={onCreate ? texts.select2.searchOrCreate : texts.select2.search}\n                                    ref={searchRef}\n                                />\n                            ) : null}\n                            {flattenedChildren.length <= 0 ? (\n                                <div className=\"text-grey-700 -mt-0.5 flex h-8 items-center px-2\" role=\"presentation\">\n                                    No results found...\n                                </div>\n                            ) : (\n                                <ListboxPrimitive.Root\n                                    className=\"flex flex-col gap-0.5\"\n                                    customSelector=\":scope > button\"\n                                    disabled={disabled}\n                                    multiple={multiple}\n                                    onKeyDown={handleListboxKeyDown}\n                                    readOnly={readOnly}\n                                    ref={listboxRef}\n                                    setValue={setValue}\n                                    tabIndex={-1}\n                                    value={value}>\n                                    {/*multiple && !searchQuery && Array.isArray(value) ? (\n                                    <All\n                                        children={flattenedChildren}\n                                        onToggle={_setValue}\n                                        selected={value.length === flattenedChildren.length}\n                                    />\n                                ) : null*/}\n                                    {searchQuery === '' ? (\n                                        <Collection>{initialChildren}</Collection>\n                                    ) : (\n                                        <Collection>{filteredChildren}</Collection>\n                                    )}\n                                    {onCreate ? <Create onCreate={onCreate} options={flattenedChildren} /> : null}\n                                </ListboxPrimitive.Root>\n                            )}\n                        </div>\n                    </PopoverPrimitive.Content>\n                </PopoverPrimitive.Portal>\n            </PopoverPrimitive.Root>\n        </Select2Context.Provider>\n    );\n}) as Select2PropsWithStatics"
 				}
 			],
 			"groups": [
@@ -538668,7 +538668,7 @@
 					]
 				},
 				{
-					"id": 7093,
+					"id": 7095,
 					"name": "Filter",
 					"kind": 64,
 					"kindString": "Function",
@@ -538678,7 +538678,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7094,
+							"id": 7096,
 							"name": "Filter",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538693,7 +538693,7 @@
 					]
 				},
 				{
-					"id": 7099,
+					"id": 7101,
 					"name": "FilterCustom",
 					"kind": 64,
 					"kindString": "Function",
@@ -538703,7 +538703,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7100,
+							"id": 7102,
 							"name": "FilterCustom",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538718,7 +538718,7 @@
 					]
 				},
 				{
-					"id": 7095,
+					"id": 7097,
 					"name": "FilterHandler",
 					"kind": 64,
 					"kindString": "Function",
@@ -538728,7 +538728,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7096,
+							"id": 7098,
 							"name": "FilterHandler",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538743,7 +538743,7 @@
 					]
 				},
 				{
-					"id": 7097,
+					"id": 7099,
 					"name": "FilterReset",
 					"kind": 64,
 					"kindString": "Function",
@@ -538753,7 +538753,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7098,
+							"id": 7100,
 							"name": "FilterReset",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538768,7 +538768,7 @@
 					]
 				},
 				{
-					"id": 7119,
+					"id": 7123,
 					"name": "InlineEditing",
 					"kind": 64,
 					"kindString": "Function",
@@ -538778,7 +538778,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7120,
+							"id": 7124,
 							"name": "InlineEditing",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538787,7 +538787,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7121,
+									"id": 7125,
 									"name": "__namedParameters",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -538798,7 +538798,7 @@
 									"type": {
 										"type": "reflection",
 										"declaration": {
-											"id": 7122,
+											"id": 7126,
 											"name": "__type",
 											"kind": 65536,
 											"kindString": "Type literal",
@@ -538807,7 +538807,7 @@
 											},
 											"children": [
 												{
-													"id": 7123,
+													"id": 7127,
 													"name": "preset",
 													"kind": 32,
 													"kindString": "Variable",
@@ -538826,7 +538826,7 @@
 													"title": "Variables",
 													"kind": 32,
 													"children": [
-														7123
+														7127
 													]
 												}
 											]
@@ -538842,7 +538842,7 @@
 					]
 				},
 				{
-					"id": 7124,
+					"id": 7128,
 					"name": "KitchenSink",
 					"kind": 64,
 					"kindString": "Function",
@@ -538852,7 +538852,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7125,
+							"id": 7129,
 							"name": "KitchenSink",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538867,7 +538867,7 @@
 					]
 				},
 				{
-					"id": 7126,
+					"id": 7130,
 					"name": "KitchenSinkPerformance",
 					"kind": 64,
 					"kindString": "Function",
@@ -538877,7 +538877,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7127,
+							"id": 7131,
 							"name": "KitchenSinkPerformance",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538892,7 +538892,7 @@
 					]
 				},
 				{
-					"id": 7128,
+					"id": 7132,
 					"name": "PresetDisplay",
 					"kind": 64,
 					"kindString": "Function",
@@ -538902,7 +538902,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7129,
+							"id": 7133,
 							"name": "PresetDisplay",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -538943,7 +538943,7 @@
 				},
 				{
 					"id": 7089,
-					"name": "PrintHandler",
+					"name": "PrintDialog",
 					"kind": 64,
 					"kindString": "Function",
 					"flags": {
@@ -538953,7 +538953,7 @@
 					"signatures": [
 						{
 							"id": 7090,
-							"name": "PrintHandler",
+							"name": "PrintDialog",
 							"kind": 4096,
 							"kindString": "Call signature",
 							"flags": {
@@ -538968,7 +538968,7 @@
 				},
 				{
 					"id": 7091,
-					"name": "PrintHandlerPerformance",
+					"name": "PrintHandler",
 					"kind": 64,
 					"kindString": "Function",
 					"flags": {
@@ -538978,6 +538978,31 @@
 					"signatures": [
 						{
 							"id": 7092,
+							"name": "PrintHandler",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {
+								"isExported": true
+							},
+							"type": {
+								"type": "reference",
+								"name": "Element"
+							}
+						}
+					]
+				},
+				{
+					"id": 7093,
+					"name": "PrintHandlerPerformance",
+					"kind": 64,
+					"kindString": "Function",
+					"flags": {
+						"isExported": true,
+						"isConst": true
+					},
+					"signatures": [
+						{
+							"id": 7094,
 							"name": "PrintHandlerPerformance",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539417,7 +539442,7 @@
 					]
 				},
 				{
-					"id": 7101,
+					"id": 7103,
 					"name": "Search",
 					"kind": 64,
 					"kindString": "Function",
@@ -539427,7 +539452,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7102,
+							"id": 7104,
 							"name": "Search",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539442,7 +539467,32 @@
 					]
 				},
 				{
-					"id": 7103,
+					"id": 7105,
+					"name": "SearchDisabledColumn",
+					"kind": 64,
+					"kindString": "Function",
+					"flags": {
+						"isExported": true,
+						"isConst": true
+					},
+					"signatures": [
+						{
+							"id": 7106,
+							"name": "SearchDisabledColumn",
+							"kind": 4096,
+							"kindString": "Call signature",
+							"flags": {
+								"isExported": true
+							},
+							"type": {
+								"type": "reference",
+								"name": "Element"
+							}
+						}
+					]
+				},
+				{
+					"id": 7107,
 					"name": "SearchHandler",
 					"kind": 64,
 					"kindString": "Function",
@@ -539452,7 +539502,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7104,
+							"id": 7108,
 							"name": "SearchHandler",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539467,7 +539517,7 @@
 					]
 				},
 				{
-					"id": 7107,
+					"id": 7111,
 					"name": "SearchHandlerPerformance",
 					"kind": 64,
 					"kindString": "Function",
@@ -539477,7 +539527,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7108,
+							"id": 7112,
 							"name": "SearchHandlerPerformance",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539492,7 +539542,7 @@
 					]
 				},
 				{
-					"id": 7105,
+					"id": 7109,
 					"name": "SearchHandlerSlowRequest",
 					"kind": 64,
 					"kindString": "Function",
@@ -539502,7 +539552,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7106,
+							"id": 7110,
 							"name": "SearchHandlerSlowRequest",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539542,7 +539592,7 @@
 					]
 				},
 				{
-					"id": 7109,
+					"id": 7113,
 					"name": "Settings",
 					"kind": 64,
 					"kindString": "Function",
@@ -539552,7 +539602,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7110,
+							"id": 7114,
 							"name": "Settings",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539567,7 +539617,7 @@
 					]
 				},
 				{
-					"id": 7111,
+					"id": 7115,
 					"name": "SettingsDefault",
 					"kind": 64,
 					"kindString": "Function",
@@ -539577,7 +539627,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7112,
+							"id": 7116,
 							"name": "SettingsDefault",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539592,7 +539642,7 @@
 					]
 				},
 				{
-					"id": 7113,
+					"id": 7117,
 					"name": "SettingsHandler",
 					"kind": 64,
 					"kindString": "Function",
@@ -539602,7 +539652,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7114,
+							"id": 7118,
 							"name": "SettingsHandler",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539617,7 +539667,7 @@
 					]
 				},
 				{
-					"id": 7115,
+					"id": 7119,
 					"name": "Shortcuts",
 					"kind": 64,
 					"kindString": "Function",
@@ -539627,7 +539677,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7116,
+							"id": 7120,
 							"name": "Shortcuts",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539767,7 +539817,7 @@
 					]
 				},
 				{
-					"id": 7117,
+					"id": 7121,
 					"name": "Toolbar",
 					"kind": 64,
 					"kindString": "Function",
@@ -539777,7 +539827,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7118,
+							"id": 7122,
 							"name": "Toolbar",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -539814,17 +539864,18 @@
 						7035,
 						7039,
 						7007,
-						7093,
-						7099,
 						7095,
+						7101,
 						7097,
-						7119,
-						7124,
-						7126,
+						7099,
+						7123,
 						7128,
+						7130,
+						7132,
 						7087,
 						7089,
 						7091,
+						7093,
 						7041,
 						7045,
 						7043,
@@ -539842,21 +539893,22 @@
 						7069,
 						7073,
 						7071,
-						7101,
 						7103,
-						7107,
 						7105,
-						7085,
-						7109,
+						7107,
 						7111,
+						7109,
+						7085,
 						7113,
 						7115,
+						7117,
+						7119,
 						7075,
 						7079,
 						7077,
 						7081,
 						7083,
-						7117
+						7121
 					]
 				}
 			]
@@ -541279,7 +541331,7 @@
 						],
 						"name": "ForwardRefExoticComponent"
 					},
-					"defaultValue": "React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n            return;\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n})"
+					"defaultValue": "React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n            return;\n        }\n    };\n\n    const handleDatepickerChange = event => {\n        // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n        // so adding additional check here to prevent adding change to the edititng state.\n        const originalDate = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n})"
 				}
 			],
 			"groups": [
@@ -541762,7 +541814,7 @@
 						],
 						"name": "ForwardRefExoticComponent"
 					},
-					"defaultValue": "React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        ...attributes\n    } = props;\n\n    const textareaMaxHeight = 120;\n    const textareaMinHeight = 32;\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n        if (ref?.current && !columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n            resizeTextArea(textareaElement);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${textareaMinHeight}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < textareaMaxHeight) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\n            <Textarea\n                {...attributes}\n                onChange={event => {\n                    handleChange(event.target.value);\n                    handleTextareaChange(event);\n                }}\n                rows={1}\n                onKeyDown={e => {\n                    handleTextareaKeyDown(e);\n                }}\n                onBlur={event => {\n                    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n                    if (columnMeta?.enableTruncate) {\n                        const textareaElement = event.currentTarget;\n                        textareaElement.style.height = `${textareaMinHeight}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n})"
+					"defaultValue": "React.forwardRef<HTMLElement, any>(function TextareaControl<TType = unknown>(\n    props: TextareaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        fontSize,\n        ...attributes\n    } = props;\n\n    const minMaxHeight = heights[fontSize];\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        if (ref?.current) {\n            // Need to reset textarea to min height when font size got changed and if column in enable truncate mode.\n            if (columnMeta?.enableTruncate) {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n\n                // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized or fonsSize got changed.\n            } else {\n                const textareaElement = ref?.current as HTMLTextAreaElement;\n                resizeTextArea(textareaElement);\n            }\n        }\n    }, [fontSize]);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${minMaxHeight.min}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < minMaxHeight.max) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, minMaxHeight.max)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\n            <Textarea\n                {...attributes}\n                onChange={event => {\n                    handleChange(event.target.value);\n                    handleTextareaChange(event);\n                }}\n                rows={1}\n                onKeyDown={e => {\n                    handleTextareaKeyDown(e);\n                }}\n                onBlur={event => {\n                    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n                    if (columnMeta?.enableTruncate) {\n                        const textareaElement = event.currentTarget;\n                        textareaElement.style.height = `${minMaxHeight.min}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${minMaxHeight.min}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n})"
 				}
 			],
 			"groups": [
@@ -563084,7 +563136,7 @@
 			]
 		},
 		{
-			"id": 7130,
+			"id": 7134,
 			"name": "\"components/Tabs/Tabs.spec\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -563094,7 +563146,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tabs/Tabs.spec.tsx"
 		},
 		{
-			"id": 7131,
+			"id": 7135,
 			"name": "\"components/Tabs/Tabs.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -563104,7 +563156,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tabs/Tabs.stories.tsx",
 			"children": [
 				{
-					"id": 7132,
+					"id": 7136,
 					"name": "Default",
 					"kind": 64,
 					"kindString": "Function",
@@ -563114,7 +563166,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7133,
+							"id": 7137,
 							"name": "Default",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563123,7 +563175,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7134,
+									"id": 7138,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -563145,7 +563197,7 @@
 					]
 				},
 				{
-					"id": 7135,
+					"id": 7139,
 					"name": "WithTooltips",
 					"kind": 64,
 					"kindString": "Function",
@@ -563155,7 +563207,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7136,
+							"id": 7140,
 							"name": "WithTooltips",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563164,7 +563216,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7137,
+									"id": 7141,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -563191,8 +563243,8 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
-						7132,
-						7135
+						7136,
+						7139
 					]
 				}
 			]
@@ -563728,7 +563780,7 @@
 			]
 		},
 		{
-			"id": 7138,
+			"id": 7142,
 			"name": "\"components/Tag/Tag.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -563738,7 +563790,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tag/Tag.stories.tsx",
 			"children": [
 				{
-					"id": 7143,
+					"id": 7147,
 					"name": "Action",
 					"kind": 64,
 					"kindString": "Function",
@@ -563748,7 +563800,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7144,
+							"id": 7148,
 							"name": "Action",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563763,7 +563815,7 @@
 					]
 				},
 				{
-					"id": 7141,
+					"id": 7145,
 					"name": "Coloured",
 					"kind": 64,
 					"kindString": "Function",
@@ -563773,7 +563825,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7142,
+							"id": 7146,
 							"name": "Coloured",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563788,7 +563840,7 @@
 					]
 				},
 				{
-					"id": 7139,
+					"id": 7143,
 					"name": "Default",
 					"kind": 64,
 					"kindString": "Function",
@@ -563798,7 +563850,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7140,
+							"id": 7144,
 							"name": "Default",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563813,7 +563865,7 @@
 					]
 				},
 				{
-					"id": 7145,
+					"id": 7149,
 					"name": "KitchenSink",
 					"kind": 64,
 					"kindString": "Function",
@@ -563823,7 +563875,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7146,
+							"id": 7150,
 							"name": "KitchenSink",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -563843,10 +563895,10 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
+						7147,
+						7145,
 						7143,
-						7141,
-						7139,
-						7145
+						7149
 					]
 				}
 			]
@@ -564162,7 +564214,7 @@
 			]
 		},
 		{
-			"id": 7147,
+			"id": 7151,
 			"name": "\"components/Textarea/Textarea.spec\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -564172,7 +564224,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Textarea/Textarea.spec.tsx"
 		},
 		{
-			"id": 7148,
+			"id": 7152,
 			"name": "\"components/Textarea/Textarea.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -564182,7 +564234,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Textarea/Textarea.stories.tsx",
 			"children": [
 				{
-					"id": 7149,
+					"id": 7153,
 					"name": "Default",
 					"kind": 64,
 					"kindString": "Function",
@@ -564192,7 +564244,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7150,
+							"id": 7154,
 							"name": "Default",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -564201,7 +564253,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7151,
+									"id": 7155,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -564222,7 +564274,7 @@
 					]
 				},
 				{
-					"id": 7152,
+					"id": 7156,
 					"name": "KitchenSink",
 					"kind": 64,
 					"kindString": "Function",
@@ -564232,7 +564284,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7153,
+							"id": 7157,
 							"name": "KitchenSink",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -564252,8 +564304,8 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
-						7149,
-						7152
+						7153,
+						7156
 					]
 				}
 			]
@@ -564817,7 +564869,7 @@
 			]
 		},
 		{
-			"id": 7154,
+			"id": 7158,
 			"name": "\"components/Toast/Toast.spec\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -564827,7 +564879,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Toast/Toast.spec.tsx"
 		},
 		{
-			"id": 7155,
+			"id": 7159,
 			"name": "\"components/Toast/Toast.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -564837,7 +564889,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Toast/Toast.stories.tsx",
 			"children": [
 				{
-					"id": 7162,
+					"id": 7166,
 					"name": "ProgrammaticallyCloseToast",
 					"kind": 64,
 					"kindString": "Function",
@@ -564847,7 +564899,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7163,
+							"id": 7167,
 							"name": "ProgrammaticallyCloseToast",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -564856,7 +564908,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7164,
+									"id": 7168,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -564877,7 +564929,7 @@
 					]
 				},
 				{
-					"id": 7156,
+					"id": 7160,
 					"name": "ToastStates",
 					"kind": 64,
 					"kindString": "Function",
@@ -564887,7 +564939,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7157,
+							"id": 7161,
 							"name": "ToastStates",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -564896,7 +564948,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7158,
+									"id": 7162,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -564917,7 +564969,7 @@
 					]
 				},
 				{
-					"id": 7159,
+					"id": 7163,
 					"name": "UpdatingToast",
 					"kind": 64,
 					"kindString": "Function",
@@ -564927,7 +564979,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7160,
+							"id": 7164,
 							"name": "UpdatingToast",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -564936,7 +564988,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7161,
+									"id": 7165,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -564962,9 +565014,9 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
-						7162,
-						7156,
-						7159
+						7166,
+						7160,
+						7163
 					]
 				}
 			]
@@ -566165,7 +566217,7 @@
 			]
 		},
 		{
-			"id": 7165,
+			"id": 7169,
 			"name": "\"components/Tooltip/Tooltip.spec\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -566175,7 +566227,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tooltip/Tooltip.spec.tsx"
 		},
 		{
-			"id": 7166,
+			"id": 7170,
 			"name": "\"components/Tooltip/Tooltip.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -566185,7 +566237,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tooltip/Tooltip.stories.tsx",
 			"children": [
 				{
-					"id": 7167,
+					"id": 7171,
 					"name": "Default",
 					"kind": 64,
 					"kindString": "Function",
@@ -566195,7 +566247,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7168,
+							"id": 7172,
 							"name": "Default",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -566204,7 +566256,7 @@
 							},
 							"parameters": [
 								{
-									"id": 7169,
+									"id": 7173,
 									"name": "args",
 									"kind": 32768,
 									"kindString": "Parameter",
@@ -566226,7 +566278,7 @@
 					]
 				},
 				{
-					"id": 7170,
+					"id": 7174,
 					"name": "TooltipOnElement",
 					"kind": 64,
 					"kindString": "Function",
@@ -566236,7 +566288,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7171,
+							"id": 7175,
 							"name": "TooltipOnElement",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -566251,7 +566303,7 @@
 					]
 				},
 				{
-					"id": 7172,
+					"id": 7176,
 					"name": "TooltipWithLongText",
 					"kind": 64,
 					"kindString": "Function",
@@ -566261,7 +566313,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7173,
+							"id": 7177,
 							"name": "TooltipWithLongText",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -566281,9 +566333,9 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
-						7167,
-						7170,
-						7172
+						7171,
+						7174,
+						7176
 					]
 				}
 			]
@@ -567097,7 +567149,7 @@
 			]
 		},
 		{
-			"id": 7174,
+			"id": 7178,
 			"name": "\"components/Tour/Tour.stories\"",
 			"kind": 1,
 			"kindString": "Module",
@@ -567107,7 +567159,7 @@
 			"originalName": "/home/runner/work/taco/taco/packages/taco/src/components/Tour/Tour.stories.tsx",
 			"children": [
 				{
-					"id": 7175,
+					"id": 7179,
 					"name": "Default",
 					"kind": 64,
 					"kindString": "Function",
@@ -567117,7 +567169,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7176,
+							"id": 7180,
 							"name": "Default",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -567132,7 +567184,7 @@
 					]
 				},
 				{
-					"id": 7177,
+					"id": 7181,
 					"name": "IntermittentFlow",
 					"kind": 64,
 					"kindString": "Function",
@@ -567142,7 +567194,7 @@
 					},
 					"signatures": [
 						{
-							"id": 7178,
+							"id": 7182,
 							"name": "IntermittentFlow",
 							"kind": 4096,
 							"kindString": "Call signature",
@@ -567162,8 +567214,8 @@
 					"title": "Functions",
 					"kind": 64,
 					"children": [
-						7175,
-						7177
+						7179,
+						7181
 					]
 				}
 			]
@@ -568851,23 +568903,23 @@
 				5416,
 				5257,
 				5995,
-				7130,
-				7131,
+				7134,
+				7135,
 				3292,
-				7138,
+				7142,
 				5430,
-				7147,
-				7148,
+				7151,
+				7152,
 				1796,
-				7154,
-				7155,
+				7158,
+				7159,
 				4941,
 				1789,
 				637,
-				7165,
-				7166,
+				7169,
+				7170,
 				2056,
-				7174,
+				7178,
 				4885,
 				3224,
 				623,