@economic/taco 1.1.5-alpha.0 → 1.1.5-alpha.1

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import '../Icon/components/index.js';
 import '../Icon/Icon.js';
@@ -15,6 +14,7 @@ import '../Toast/Toaster.js';
 import { useLocalization } from '../Provider/Provider.js';
 import '../Calendar/Calendar.js';
 import '../Checkbox/Checkbox.js';
+import '../../utils/hooks/useProxiedRef.js';
 import { Input } from '../Input/Input.js';
 import keycode from 'keycode';
 import '../../utils/hooks/useListKeyboardNavigation.js';
@@ -51,24 +51,24 @@ import '../Tour/Tour.js';
 import '../../utils/hooks/useOnClickOutside.js';
 import '../Card/Card.js';
 
-var _excluded = ["onSearch"];
-var SearchInput = /*#__PURE__*/forwardRef(function SearchInput(_ref, ref) {
-  var onSearch = _ref.onSearch,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
+const SearchInput = /*#__PURE__*/forwardRef(function SearchInput({
+  onSearch,
+  ...props
+}, ref) {
+  const {
+    texts
+  } = useLocalization();
 
-  var _useLocalization = useLocalization(),
-      texts = _useLocalization.texts;
-
-  var handleClick = function handleClick() {
+  const handleClick = () => {
     if (!props.disabled) {
       onSearch === null || onSearch === void 0 ? void 0 : onSearch(props.value);
     }
   };
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     var _props$onKeyDown;
 
-    var isEnterKeyPressed = event.keyCode === keycode('enter');
+    const isEnterKeyPressed = event.keyCode === keycode('enter');
 
     if (isEnterKeyPressed) {
       handleClick();

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n    /**\r\n     * aria-label text for input\r\n     */\r\n    inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n    { onSearch, ...props }: SearchInputProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n) {\r\n    const { texts } = useLocalization();\r\n\r\n    const handleClick = (): void => {\r\n        if (!props.disabled) {\r\n            onSearch?.(props.value);\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n        if (isEnterKeyPressed) {\r\n            handleClick();\r\n        }\r\n\r\n        props.onKeyDown?.(event);\r\n    };\r\n\r\n    return (\r\n        <Input\r\n            aria-label={texts.searchInput.inputLabel}\r\n            {...props}\r\n            button={\r\n                <IconButton\r\n                    icon=\"search\"\r\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n                    disabled={props.disabled}\r\n                    onClick={handleClick}\r\n                />\r\n            }\r\n            onKeyDown={handleKeyDown}\r\n            ref={ref}\r\n            type=\"search\"\r\n        />\r\n    );\r\n});\r\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;EAGf,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EAEA,IAAMC,WAAW,GAAG,SAAdA,WAAc;IAChB,IAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;MACjBL,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;;GAFR;;EAMA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;;;IAClB,IAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;IAEA,IAAIF,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAH,KAAK,CAACW,SAAN,2EAAAX,KAAK,EAAaO,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACe,KAAD;kBACgBV,KAAK,CAACW,WAAN,CAAkBC;KAC1Bd;IACJe,MAAM,EACFlB,aAAA,CAACmB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVd,QAAQ,EAAEJ,KAAK,CAACI;MAChBe,OAAO,EAAEhB;KAJb;IAOJQ,SAAS,EAAEL;IACXR,GAAG,EAAEA;IACLsB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport keycode from 'keycode';\r\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\r\n\r\nexport type SearchInputTexts = {\r\n    /**\r\n     * aria-label text for input\r\n     */\r\n    inputLabel: string;\r\n};\r\n\r\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\r\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\r\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\r\n};\r\n\r\nexport const SearchInput = React.forwardRef(function SearchInput(\r\n    { onSearch, ...props }: SearchInputProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n) {\r\n    const { texts } = useLocalization();\r\n\r\n    const handleClick = (): void => {\r\n        if (!props.disabled) {\r\n            onSearch?.(props.value);\r\n        }\r\n    };\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\r\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\r\n\r\n        if (isEnterKeyPressed) {\r\n            handleClick();\r\n        }\r\n\r\n        props.onKeyDown?.(event);\r\n    };\r\n\r\n    return (\r\n        <Input\r\n            aria-label={texts.searchInput.inputLabel}\r\n            {...props}\r\n            button={\r\n                <IconButton\r\n                    icon=\"search\"\r\n                    className=\"!border-transparent !bg-transparent focus:!border-transparent peer-focus:!border-transparent peer-focus:peer-active:!border-transparent\"\r\n                    disabled={props.disabled}\r\n                    onClick={handleClick}\r\n                />\r\n            }\r\n            onKeyDown={handleKeyDown}\r\n            ref={ref}\r\n            type=\"search\"\r\n        />\r\n    );\r\n});\r\n"],"names":["SearchInput","React","onSearch","props","ref","texts","useLocalization","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","onKeyDown","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","type"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,CACxC;EAAEE,QAAF;EAAY,GAAGC;AAAf,CADwC,EAExCC,GAFwC;EAIxC,MAAM;IAAEC;MAAUC,eAAe,EAAjC;;EAEA,MAAMC,WAAW,GAAG;IAChB,IAAI,CAACJ,KAAK,CAACK,QAAX,EAAqB;MACjBN,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACM,KAAT,CAAR;;GAFR;;EAMA,MAAMC,aAAa,GAAIC,KAAD;;;IAClB,MAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;IAEA,IAAIF,iBAAJ,EAAuB;MACnBL,WAAW;;;IAGf,oBAAAJ,KAAK,CAACY,SAAN,2EAAAZ,KAAK,EAAaQ,KAAb,CAAL;GAPJ;;EAUA,OACIV,aAAA,CAACe,KAAD;kBACgBX,KAAK,CAACY,WAAN,CAAkBC;KAC1Bf;IACJgB,MAAM,EACFlB,aAAA,CAACmB,UAAD;MACIC,IAAI,EAAC;MACLC,SAAS,EAAC;MACVd,QAAQ,EAAEL,KAAK,CAACK;MAChBe,OAAO,EAAEhB;KAJb;IAOJQ,SAAS,EAAEL;IACXN,GAAG,EAAEA;IACLoB,IAAI,EAAC;IAbT,CADJ;AAiBH,CAvC0B;;;;"}

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

@@ -1,4 +1,3 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement, useRef, useEffect, Fragment } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
@@ -10,54 +9,52 @@ import { Combobox } from '../Combobox/Combobox.js';
 import { MultiListbox, Listbox } from '../Listbox/Listbox.js';
 import { useSelect } from './useSelect.js';
 
-var _excluded = ["autoFocus", "className", "highlighted", "style"],
-    _excluded2 = ["editable"];
-var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
-  var autoFocus = props.autoFocus,
-      externalClassName = props.className,
-      style = props.style,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _useSelect = useSelect(otherProps, ref),
-      button = _useSelect.button,
-      listbox = _useSelect.listbox,
-      popover = _useSelect.popover,
-      input = _useSelect.input,
-      text = _useSelect.text,
-      _useSelect$more = _useSelect.more,
-      more = _useSelect$more === void 0 ? 0 : _useSelect$more;
-
-  var internalRef = useRef(null);
-  var selectDimensions = useBoundingClientRectListener(internalRef);
-  var className = cn('inline-flex relative w-full', {
+const BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
+  const {
+    autoFocus,
+    className: externalClassName,
+    highlighted,
+    style,
+    ...otherProps
+  } = props;
+  const {
+    button,
+    listbox,
+    popover,
+    input,
+    text,
+    more = 0
+  } = useSelect(otherProps, ref);
+  const internalRef = useRef(null);
+  const selectDimensions = useBoundingClientRectListener(internalRef);
+  const className = cn('inline-flex relative w-full', {
     'yt-select--readonly': props.readOnly
   }, externalClassName);
-  var inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
+  const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {
     'border-blue': popover.open
   });
-  useEffect(function () {
+  useEffect(() => {
     if (autoFocus && internalRef.current) {
       internalRef.current.focus();
     }
   }, []);
 
-  var renderMultiSelection = function renderMultiSelection() {
+  const renderMultiSelection = () => {
     return createElement(Fragment, null, createElement("span", {
       className: "flex-grow truncate text-left"
     }, text), more > 0 && createElement(Badge, {
       className: "ml-2"
-    }, "+" + more));
+    }, `+${more}`));
   };
 
-  var commonListboxProps = _extends({}, listbox, {
+  const commonListboxProps = { ...listbox,
     className: 'w-auto',
     invalid: undefined,
     style: {
       minWidth: selectDimensions === null || selectDimensions === void 0 ? void 0 : selectDimensions.width
     },
     tabIndex: popover.open ? 0 : -1
-  });
-
+  };
   return createElement("span", {
     className: className,
     "data-taco": "select",
@@ -80,9 +77,11 @@ var BaseSelect = /*#__PURE__*/forwardRef(function BaseSelect(props, ref) {
     type: "text"
   }))));
 });
-var Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
-  var editable = props.editable,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
+const Select = /*#__PURE__*/forwardRef(function Select(props, ref) {
+  const {
+    editable,
+    ...otherProps
+  } = props;
 
   if (editable) {
     return createElement(Combobox, Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n    /**\r\n     * The text displayed when all options are selected when multiselect mode in on.\r\n     */\r\n    allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n    Omit<ComboboxProps, 'inline'> & {\r\n        /**\r\n         * Allows to select multiple values.\r\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n         */\r\n        multiselect?: boolean;\r\n    };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n    /**\r\n     * Creates an editable select.\r\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n     * even if there is no value in the input.\r\n     * After user starts typing, matching data will be displayed.\r\n     */\r\n    editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n    const internalRef = React.useRef<HTMLButtonElement>(null);\r\n    const selectDimensions = useBoundingClientRectListener(internalRef);\r\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n        'border-blue': popover.open,\r\n    });\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && internalRef.current) {\r\n            internalRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const renderMultiSelection = (): React.ReactNode => {\r\n        return (\r\n            <>\r\n                <span className=\"flex-grow truncate text-left\">{text}</span>\r\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n            </>\r\n        );\r\n    };\r\n\r\n    const commonListboxProps: ListboxProps = {\r\n        ...listbox,\r\n        className: 'w-auto',\r\n        invalid: undefined,\r\n        style: { minWidth: selectDimensions?.width },\r\n        tabIndex: popover.open ? 0 : -1,\r\n    };\r\n\r\n    return (\r\n        <span className={className} data-taco=\"select\" style={style}>\r\n            <PopoverPrimitive.Root {...popover}>\r\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\r\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n                    </span>\r\n                </PopoverPrimitive.Trigger>\r\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n                </PopoverPrimitive.Content>\r\n                <input {...input} className=\"hidden\" type=\"text\" />\r\n            </PopoverPrimitive.Root>\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { editable, ...otherProps } = props;\r\n\r\n    if (editable) {\r\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n    }\r\n\r\n    return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","externalClassName","className","style","otherProps","useSelect","button","listbox","popover","input","text","more","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/Select/Select.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { Icon } from '../Icon/Icon';\r\nimport { Listbox, MultiListbox, ListboxProps } from '../Listbox/Listbox';\r\nimport { useBoundingClientRectListener } from '../../utils/hooks/useBoundingClientRectListener';\r\nimport { useSelect } from './useSelect';\r\nimport { Combobox, ComboboxProps } from '../Combobox/Combobox';\r\nimport { Badge } from '../Badge/Badge';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type SelectTexts = {\r\n    /**\r\n     * The text displayed when all options are selected when multiselect mode in on.\r\n     */\r\n    allOptionsSelected: string;\r\n};\r\n\r\nexport type BaseSelectProps = Omit<ListboxProps, 'dialog'> &\r\n    Omit<ComboboxProps, 'inline'> & {\r\n        /**\r\n         * Allows to select multiple values.\r\n         * All the selected values will be combined in a comma-seperated string as the value of the input.\r\n         */\r\n        multiselect?: boolean;\r\n    };\r\n\r\nexport type SelectProps = BaseSelectProps & {\r\n    /**\r\n     * Creates an editable select.\r\n     * Setting this will render a inline Combobox which will display the provided data on click/focus,\r\n     * even if there is no value in the input.\r\n     * After user starts typing, matching data will be displayed.\r\n     */\r\n    editable?: boolean;\r\n};\r\n\r\nconst BaseSelect = React.forwardRef(function BaseSelect(props: BaseSelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { autoFocus, className: externalClassName, highlighted, style, ...otherProps } = props;\r\n    const { button, listbox, popover, input, text, more = 0 } = useSelect(otherProps, ref);\r\n    const internalRef = React.useRef<HTMLButtonElement>(null);\r\n    const selectDimensions = useBoundingClientRectListener(internalRef);\r\n    const className = cn('inline-flex relative w-full', { 'yt-select--readonly': props.readOnly }, externalClassName);\r\n    const inputClassname = cn(getInputClasses(props), 'h-8 text-left pr-0', {\r\n        'border-blue': popover.open,\r\n    });\r\n\r\n    React.useEffect(() => {\r\n        if (autoFocus && internalRef.current) {\r\n            internalRef.current.focus();\r\n        }\r\n    }, []);\r\n\r\n    const renderMultiSelection = (): React.ReactNode => {\r\n        return (\r\n            <>\r\n                <span className=\"flex-grow truncate text-left\">{text}</span>\r\n                {more > 0 && <Badge className=\"ml-2\">{`+${more}`}</Badge>}\r\n            </>\r\n        );\r\n    };\r\n\r\n    const commonListboxProps: ListboxProps = {\r\n        ...listbox,\r\n        className: 'w-auto',\r\n        invalid: undefined,\r\n        style: { minWidth: selectDimensions?.width },\r\n        tabIndex: popover.open ? 0 : -1,\r\n    };\r\n\r\n    return (\r\n        <span className={className} data-taco=\"select\" style={style}>\r\n            <PopoverPrimitive.Root {...popover}>\r\n                <PopoverPrimitive.Trigger {...button} className={inputClassname} ref={internalRef}>\r\n                    {props.multiselect ? renderMultiSelection() : <span className=\"flex-grow truncate text-left\">{text}</span>}\r\n                    <span className=\"flex h-8 w-8 items-center justify-center\">\r\n                        <Icon className=\"pointer-events-none\" name={popover.open ? 'chevron-up' : 'chevron-down'} />\r\n                    </span>\r\n                </PopoverPrimitive.Trigger>\r\n                <PopoverPrimitive.Content align=\"start\" sideOffset={4}>\r\n                    {props.multiselect ? <MultiListbox {...commonListboxProps} /> : <Listbox {...commonListboxProps} />}\r\n                </PopoverPrimitive.Content>\r\n                <input {...input} className=\"hidden\" type=\"text\" />\r\n            </PopoverPrimitive.Root>\r\n        </span>\r\n    );\r\n});\r\n\r\nexport const Select = React.forwardRef(function Select(props: SelectProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { editable, ...otherProps } = props;\r\n\r\n    if (editable) {\r\n        return <Combobox {...otherProps} dialog={undefined} inline ref={ref} />;\r\n    }\r\n\r\n    return <BaseSelect {...otherProps} ref={ref} />;\r\n});\r\n"],"names":["BaseSelect","React","props","ref","autoFocus","className","externalClassName","highlighted","style","otherProps","button","listbox","popover","input","text","more","useSelect","internalRef","selectDimensions","useBoundingClientRectListener","cn","readOnly","inputClassname","getInputClasses","open","current","focus","renderMultiSelection","Badge","commonListboxProps","invalid","undefined","minWidth","width","tabIndex","PopoverPrimitive","multiselect","Icon","name","align","sideOffset","MultiListbox","Listbox","type","Select","editable","Combobox","dialog","inline"],"mappings":"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"}

package/dist/esm/components/Spinner/Spinner.js

@@ -1,28 +1,21 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cn from 'classnames';
 
-var _excluded = ["delay", "label"];
-var Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
-  var _props$delay = props.delay,
-      delay = _props$delay === void 0 ? 500 : _props$delay,
-      label = props.label,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var _React$useState = React__default.useState(!delay),
-      visible = _React$useState[0],
-      setVisibility = _React$useState[1];
-
-  React__default.useEffect(function () {
-    var timeout;
+const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
+  const {
+    delay = 500,
+    label,
+    ...otherProps
+  } = props;
+  const [visible, setVisibility] = React__default.useState(!delay);
+  React__default.useEffect(() => {
+    let timeout;
 
     if (delay) {
-      timeout = window.setTimeout(function () {
-        return setVisibility(true);
-      }, delay);
+      timeout = window.setTimeout(() => setVisibility(true), delay);
     }
 
-    return function () {
+    return () => {
       if (timeout) {
         clearTimeout(timeout);
       }
@@ -33,7 +26,7 @@ var Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref
     return null;
   }
 
-  var className = cn('inline-flex flex-col relative items-center', otherProps.className);
+  const className = cn('inline-flex flex-col relative items-center', otherProps.className);
   return React__default.createElement("div", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "spinner",

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

@@ -1 +1 @@
-{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Spinner.css';\r\n\r\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * Define a delay in milliseconds after which the spinner is shown.\r\n     * Default value is `500`ms\r\n     */\r\n    delay?: number;\r\n    /** Define a text that will be displayed below spinner */\r\n    label?: string;\r\n};\r\n\r\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { delay = 500, label, ...otherProps } = props;\r\n    const [visible, setVisibility] = React.useState(!delay);\r\n\r\n    React.useEffect(() => {\r\n        let timeout: number;\r\n\r\n        if (delay) {\r\n            timeout = window.setTimeout(() => setVisibility(true), delay);\r\n        }\r\n\r\n        return () => {\r\n            if (timeout) {\r\n                clearTimeout(timeout);\r\n            }\r\n        };\r\n    }, [delay]);\r\n\r\n    if (!visible) {\r\n        return null;\r\n    }\r\n\r\n    const className = cn('inline-flex flex-col relative items-center', otherProps.className);\r\n\r\n    return (\r\n        <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\r\n            <svg\r\n                className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\r\n                viewBox=\"0 0 100 100\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n                <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n            </svg>\r\n            {label && <span className=\"mt-4\">{label}</span>}\r\n        </div>\r\n    );\r\n});\r\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","useState","visible","setVisibility","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;;;IAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;EACpC,mBAA8CD,KAA9C,CAAQE,KAAR;MAAQA,KAAR,6BAAgB,GAAhB;MAAqBC,KAArB,GAA8CH,KAA9C,CAAqBG,KAArB;MAA+BC,UAA/B,iCAA8CJ,KAA9C;;EACA,sBAAiCF,cAAK,CAACO,QAAN,CAAe,CAACH,KAAhB,CAAjC;MAAOI,OAAP;MAAgBC,aAAhB;;EAEAT,cAAK,CAACU,SAAN,CAAgB;IACZ,IAAIC,OAAJ;;IAEA,IAAIP,KAAJ,EAAW;MACPO,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB;QAAA,OAAMJ,aAAa,CAAC,IAAD,CAAnB;OAAlB,EAA6CL,KAA7C,CAAV;;;IAGJ,OAAO;MACH,IAAIO,OAAJ,EAAa;QACTG,YAAY,CAACH,OAAD,CAAZ;;KAFR;GAPJ,EAYG,CAACP,KAAD,CAZH;;EAcA,IAAI,CAACI,OAAL,EAAc;IACV,OAAO,IAAP;;;EAGJ,IAAMO,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;EAEA,OACIf,4BAAA,MAAA,oBAASM;IAAYS,SAAS,EAAEA;iBAAqB;IAAUZ,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;IACIe,SAAS,EAAC;IACVE,OAAO,EAAC;IACRC,KAAK,EAAC;GAHV,EAKIlB,4BAAA,SAAA;IAAQmB,EAAE,EAAC;IAAKC,EAAE,EAAC;IAAKC,CAAC,EAAC;GAA1B,CALJ,CADJ,EAQKhB,KAAK,IAAIL,4BAAA,OAAA;IAAMe,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CARd,CADJ;AAYH,CApCsB;;;;"}
+{"version":3,"file":"Spinner.js","sources":["../../../../src/components/Spinner/Spinner.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport './Spinner.css';\r\n\r\nexport type SpinnerProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * Define a delay in milliseconds after which the spinner is shown.\r\n     * Default value is `500`ms\r\n     */\r\n    delay?: number;\r\n    /** Define a text that will be displayed below spinner */\r\n    label?: string;\r\n};\r\n\r\nexport const Spinner = React.forwardRef(function Spinner(props: SpinnerProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { delay = 500, label, ...otherProps } = props;\r\n    const [visible, setVisibility] = React.useState(!delay);\r\n\r\n    React.useEffect(() => {\r\n        let timeout: number;\r\n\r\n        if (delay) {\r\n            timeout = window.setTimeout(() => setVisibility(true), delay);\r\n        }\r\n\r\n        return () => {\r\n            if (timeout) {\r\n                clearTimeout(timeout);\r\n            }\r\n        };\r\n    }, [delay]);\r\n\r\n    if (!visible) {\r\n        return null;\r\n    }\r\n\r\n    const className = cn('inline-flex flex-col relative items-center', otherProps.className);\r\n\r\n    return (\r\n        <div {...otherProps} className={className} data-taco=\"spinner\" ref={ref}>\r\n            <svg\r\n                className=\"h-10 w-10 animate-[spinnerRotation_2s_linear_infinite]\"\r\n                viewBox=\"0 0 100 100\"\r\n                xmlns=\"http://www.w3.org/2000/svg\"\r\n            >\r\n                <circle cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n            </svg>\r\n            {label && <span className=\"mt-4\">{label}</span>}\r\n        </div>\r\n    );\r\n});\r\n"],"names":["Spinner","React","forwardRef","props","ref","delay","label","otherProps","visible","setVisibility","useState","useEffect","timeout","window","setTimeout","clearTimeout","className","cn","viewBox","xmlns","cx","cy","r"],"mappings":";;;MAcaA,OAAO,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,OAAT,CAAiBG,KAAjB,EAAsCC,GAAtC;EACpC,MAAM;IAAEC,KAAK,GAAG,GAAV;IAAeC,KAAf;IAAsB,GAAGC;MAAeJ,KAA9C;EACA,MAAM,CAACK,OAAD,EAAUC,aAAV,IAA2BR,cAAK,CAACS,QAAN,CAAe,CAACL,KAAhB,CAAjC;EAEAJ,cAAK,CAACU,SAAN,CAAgB;IACZ,IAAIC,OAAJ;;IAEA,IAAIP,KAAJ,EAAW;MACPO,OAAO,GAAGC,MAAM,CAACC,UAAP,CAAkB,MAAML,aAAa,CAAC,IAAD,CAArC,EAA6CJ,KAA7C,CAAV;;;IAGJ,OAAO;MACH,IAAIO,OAAJ,EAAa;QACTG,YAAY,CAACH,OAAD,CAAZ;;KAFR;GAPJ,EAYG,CAACP,KAAD,CAZH;;EAcA,IAAI,CAACG,OAAL,EAAc;IACV,OAAO,IAAP;;;EAGJ,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4CAAD,EAA+CV,UAAU,CAACS,SAA1D,CAApB;EAEA,OACIf,4BAAA,MAAA,oBAASM;IAAYS,SAAS,EAAEA;iBAAqB;IAAUZ,GAAG,EAAEA;IAApE,EACIH,4BAAA,MAAA;IACIe,SAAS,EAAC;IACVE,OAAO,EAAC;IACRC,KAAK,EAAC;GAHV,EAKIlB,4BAAA,SAAA;IAAQmB,EAAE,EAAC;IAAKC,EAAE,EAAC;IAAKC,CAAC,EAAC;GAA1B,CALJ,CADJ,EAQKhB,KAAK,IAAIL,4BAAA,OAAA;IAAMe,SAAS,EAAC;GAAhB,EAAwBV,KAAxB,CARd,CADJ;AAYH,CApCsB;;;;"}

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

@@ -1,20 +1,19 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Root, Thumb } from '@radix-ui/react-switch';
 
-var _excluded = ["label", "onChange"];
-var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
-  var label = props.label,
-      onChange = props.onChange,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var className = cn('group h-5 w-9 flex rounded-full inline-flex', {
+const Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
+  const {
+    label,
+    onChange,
+    ...otherProps
+  } = props;
+  const className = cn('group h-5 w-9 flex rounded-full inline-flex', {
     'mr-2': !!label,
     'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus': !props.disabled,
     'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled
   }, props.className);
-  var element = createElement(Root, Object.assign({}, otherProps, {
+  const element = createElement(Root, Object.assign({}, otherProps, {
     className: className,
     onCheckedChange: onChange,
     ref: ref
@@ -23,7 +22,7 @@ var Switch = /*#__PURE__*/forwardRef(function Switch(props, ref) {
   }));
 
   if (label) {
-    var labelClassName = cn('flex items-center cursor-pointer', {
+    const labelClassName = cn('flex items-center cursor-pointer', {
       'cursor-not-allowed text-grey-dark': props.disabled
     });
     return createElement("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';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n    /** Label for the switch */\r\n    label?: React.ReactNode;\r\n    /* Whether user input is required */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\r\n    checked?: never;\r\n    onChange?: never;\r\n    /* The default checked state (uncontrolled) */\r\n    defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledSwitchProps extends SwitchBaseProps {\r\n    defaultChecked?: never;\r\n    /* The current checked state (controlled) */\r\n    checked: boolean;\r\n    /* Handler called when the checked state changes */\r\n    onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { label, onChange, ...otherProps } = props;\r\n\r\n    const className = cn(\r\n        'group h-5 w-9 flex rounded-full inline-flex',\r\n        {\r\n            'mr-2': !!label,\r\n            'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\r\n                !props.disabled,\r\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const element = (\r\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50\" />\r\n        </PrimitiveSwitch.Root>\r\n    );\r\n\r\n    if (label) {\r\n        const labelClassName = cn('flex items-center cursor-pointer', {\r\n            'cursor-not-allowed text-grey-dark': props.disabled,\r\n        });\r\n\r\n        return (\r\n            <label className={labelClassName}>\r\n                {element}\r\n                {label}\r\n            </label>\r\n        );\r\n    }\r\n\r\n    return element;\r\n});\r\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;EACnC,IAAQC,KAAR,GAA2CF,KAA3C,CAAQE,KAAR;MAAeC,QAAf,GAA2CH,KAA3C,CAAeG,QAAf;MAA4BC,UAA5B,iCAA2CJ,KAA3C;;EAEA,IAAMK,SAAS,GAAGC,EAAE,CAChB,6CADgB,EAEhB;IACI,QAAQ,CAAC,CAACJ,KADd;IAEI,0GACI,CAACF,KAAK,CAACO,QAHf;IAII,+DAA+DP,KAAK,CAACO;GANzD,EAQhBP,KAAK,CAACK,SARU,CAApB;EAWA,IAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;IAAYC,SAAS,EAAEA;IAAWK,eAAe,EAAEP;IAAUF,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;IAAuBJ,SAAS,EAAC;GAAjC,CADJ,CADJ;;EAMA,IAAIH,KAAJ,EAAW;IACP,IAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;MAC1D,qCAAqCN,KAAK,CAACO;KADtB,CAAzB;IAIA,OACIR,aAAA,QAAA;MAAOM,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;;;EAQJ,OAAOM,OAAP;AACH,CAlCqB;;;;"}
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Switch/Switch.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PrimitiveSwitch from '@radix-ui/react-switch';\r\n\r\ntype SwitchBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'onChange'> & {\r\n    /** Label for the switch */\r\n    label?: React.ReactNode;\r\n    /* Whether user input is required */\r\n    required?: boolean;\r\n};\r\n\r\ninterface UncontrolledSwitchProps extends SwitchBaseProps {\r\n    checked?: never;\r\n    onChange?: never;\r\n    /* The default checked state (uncontrolled) */\r\n    defaultChecked?: boolean;\r\n}\r\n\r\ninterface ControlledSwitchProps extends SwitchBaseProps {\r\n    defaultChecked?: never;\r\n    /* The current checked state (controlled) */\r\n    checked: boolean;\r\n    /* Handler called when the checked state changes */\r\n    onChange: (checked: boolean) => void;\r\n}\r\n\r\nexport type SwitchProps = UncontrolledSwitchProps | ControlledSwitchProps;\r\n\r\nexport const Switch = React.forwardRef(function Switch(props: SwitchProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { label, onChange, ...otherProps } = props;\r\n\r\n    const className = cn(\r\n        'group h-5 w-9 flex rounded-full inline-flex',\r\n        {\r\n            'mr-2': !!label,\r\n            'bg-grey-darker hover:bg-grey-dark aria-checked:bg-blue aria-checked:hover:bg-blue-light focus:yt-focus':\r\n                !props.disabled,\r\n            'bg-grey-light cursor-not-allowed aria-checked:bg-blue-light': props.disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const element = (\r\n        <PrimitiveSwitch.Root {...otherProps} className={className} onCheckedChange={onChange} ref={ref}>\r\n            <PrimitiveSwitch.Thumb className=\"'will-change-transform group-aria-checked:translate-x-[1.1rem] mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform group-disabled:opacity-50\" />\r\n        </PrimitiveSwitch.Root>\r\n    );\r\n\r\n    if (label) {\r\n        const labelClassName = cn('flex items-center cursor-pointer', {\r\n            'cursor-not-allowed text-grey-dark': props.disabled,\r\n        });\r\n\r\n        return (\r\n            <label className={labelClassName}>\r\n                {element}\r\n                {label}\r\n            </label>\r\n        );\r\n    }\r\n\r\n    return element;\r\n});\r\n"],"names":["Switch","React","props","ref","label","onChange","otherProps","className","cn","disabled","element","PrimitiveSwitch","onCheckedChange","labelClassName"],"mappings":";;;;MA4BaA,MAAM,gBAAGC,UAAA,CAAiB,SAASD,MAAT,CAAgBE,KAAhB,EAAoCC,GAApC;EACnC,MAAM;IAAEC,KAAF;IAASC,QAAT;IAAmB,GAAGC;MAAeJ,KAA3C;EAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,6CADgB,EAEhB;IACI,QAAQ,CAAC,CAACJ,KADd;IAEI,0GACI,CAACF,KAAK,CAACO,QAHf;IAII,+DAA+DP,KAAK,CAACO;GANzD,EAQhBP,KAAK,CAACK,SARU,CAApB;EAWA,MAAMG,OAAO,GACTT,aAAA,CAACU,IAAD,oBAA0BL;IAAYC,SAAS,EAAEA;IAAWK,eAAe,EAAEP;IAAUF,GAAG,EAAEA;IAA5F,EACIF,aAAA,CAACU,KAAD;IAAuBJ,SAAS,EAAC;GAAjC,CADJ,CADJ;;EAMA,IAAIH,KAAJ,EAAW;IACP,MAAMS,cAAc,GAAGL,EAAE,CAAC,kCAAD,EAAqC;MAC1D,qCAAqCN,KAAK,CAACO;KADtB,CAAzB;IAIA,OACIR,aAAA,QAAA;MAAOM,SAAS,EAAEM;KAAlB,EACKH,OADL,EAEKN,KAFL,CADJ;;;EAQJ,OAAOM,OAAP;AACH,CAlCqB;;;;"}

package/dist/esm/components/Tabs/Tabs.js

@@ -1,21 +1,17 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
 
-var _excluded = ["id", "defaultId", "children", "onChange", "orientation"],
-    _excluded2 = ["id", "disabled"],
-    _excluded3 = ["id"];
-var Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
-  var id = props.id,
-      defaultId = props.defaultId,
-      children = props.children,
-      onChange = props.onChange,
-      _props$orientation = props.orientation,
-      orientation = _props$orientation === void 0 ? 'horizontal' : _props$orientation,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var className = cn('yt-tabs', "yt-tabs--" + orientation, {
+const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
+  const {
+    id,
+    defaultId,
+    children,
+    onChange,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
     'flex w-full': orientation === 'vertical'
   }, props.className);
   return createElement(Root, Object.assign({}, otherProps, {
@@ -29,19 +25,20 @@ var Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
     value: id
   }), children);
 });
-var TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  var className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
+const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);
   return createElement(List, Object.assign({}, props, {
     className: className,
     ref: ref
   }));
 });
-var TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  var id = props.id,
-      disabled = props.disabled,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded2);
-
-  var className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
+const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    disabled,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-darker' : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue', props.className);
   return createElement(Trigger, Object.assign({}, otherProps, {
     className: className,
     disabled: disabled,
@@ -52,11 +49,12 @@ var TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
     value: id
   }));
 });
-var TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
-  var id = props.id,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded3);
-
-  var className = cn('yt-tab__panel outline-none', props.className);
+const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab__panel outline-none', props.className);
   return createElement(Content, Object.assign({}, otherProps, {
     className: className,
     ref: ref,

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

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\r\n\r\nimport { Orientation } from '../../types';\r\nimport './Tabs.css';\r\n\r\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\r\n     */\r\n    id?: string;\r\n    /**\r\n     * Set which tab is selected on mount.\r\n     * This has to be one of the existing ids provided for tabs\r\n     */\r\n    defaultId?: string;\r\n    /**\r\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\r\n     * followed by one or an array of `Tabs.Content`.\r\n     * *Note* that there can also be tabs that are rendered conditionally.\r\n     */\r\n    children: React.ReactNode;\r\n    /**\r\n     * Define orientation of tabs.\r\n     * @defaultValue horizontal\r\n     */\r\n    orientation?: Orientation;\r\n    /**\r\n     * Callback that is called when tab is changed.\r\n     */\r\n    onChange?: (id: string) => void;\r\n};\r\n\r\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\r\n    /**\r\n     * A unique value that associates the trigger with a content.\r\n     */\r\n    id: string;\r\n    /**\r\n     * When true, prevents the user from interacting with the tab.\r\n     */\r\n    disabled?: boolean;\r\n};\r\n\r\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * A unique value that associates the content with a trigger.\r\n     */\r\n    id: string;\r\n};\r\n\r\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\r\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\r\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\r\n    /** Tab trigger component rendered in a `Tabs.List` component */\r\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    /** Tab content component rendered in a `Tabs` group component */\r\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-tabs',\r\n        `yt-tabs--${orientation}`,\r\n        {\r\n            'flex w-full': orientation === 'vertical',\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <TabsPrimitive.Root\r\n            {...otherProps}\r\n            className={className}\r\n            data-taco=\"tabs\"\r\n            defaultValue={defaultId}\r\n            dir=\"ltr\"\r\n            onValueChange={onChange}\r\n            orientation={orientation}\r\n            ref={ref}\r\n            value={id}\r\n        >\r\n            {children}\r\n        </TabsPrimitive.Root>\r\n    );\r\n}) as ForwardedTabsWithStatics;\r\n\r\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\r\n\r\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\r\n});\r\n\r\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { id, disabled, ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\r\n        disabled\r\n            ? 'cursor-not-allowed !text-grey-darker'\r\n            : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <TabsPrimitive.Trigger\r\n            {...otherProps}\r\n            className={className}\r\n            disabled={disabled}\r\n            ref={ref}\r\n            style={{\r\n                transition: 'border 0.2s ease-in',\r\n            }}\r\n            value={id}\r\n        />\r\n    );\r\n});\r\n\r\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { id, ...otherProps } = props;\r\n    const className = cn('yt-tab__panel outline-none', props.className);\r\n\r\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\r\n});\r\n\r\nTabs.List = TabList;\r\nTabs.Trigger = TabTrigger;\r\nTabs.Content = TabContent;\r\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;;;;;IA+DaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,IAAQC,EAAR,GAAyFF,KAAzF,CAAQE,EAAR;MAAYC,SAAZ,GAAyFH,KAAzF,CAAYG,SAAZ;MAAuBC,QAAvB,GAAyFJ,KAAzF,CAAuBI,QAAvB;MAAiCC,QAAjC,GAAyFL,KAAzF,CAAiCK,QAAjC;2BAAyFL,KAAzF,CAA2CM,WAA3C;MAA2CA,WAA3C,mCAAyD,YAAzD;MAA0EC,UAA1E,iCAAyFP,KAAzF;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChB,SADgB,gBAEJH,WAFI,EAGhB;IACI,eAAeA,WAAW,KAAK;GAJnB,EAMhBN,KAAK,CAACQ,SANU,CAApB;EASA,OACIT,aAAA,CAACW,IAAD,oBACQH;IACJC,SAAS,EAAEA;iBACD;IACVG,YAAY,EAAER;IACdS,GAAG,EAAC;IACJC,aAAa,EAAER;IACfC,WAAW,EAAEA;IACbL,GAAG,EAAEA;IACLa,KAAK,EAAEZ;IATX,EAWKE,QAXL,CADJ;AAeH,CA1BmB;AA4BpB,IAAMW,OAAO,gBAAGhB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAkCC,GAAlC;EAC7B,IAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAD,EAAmET,KAAK,CAACQ,SAAzE,CAApB;EAEA,OAAOT,aAAA,CAACW,IAAD,oBAAwBV;IAAOQ,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAA1D,CAAP;AACH,CAJe,CAAhB;AAMA,IAAMgB,UAAU,gBAAGlB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,IAAQC,EAAR,GAAwCF,KAAxC,CAAQE,EAAR;MAAYgB,QAAZ,GAAwClB,KAAxC,CAAYkB,QAAZ;MAAyBX,UAAzB,iCAAwCP,KAAxC;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAChB,qFADgB,EAEhBS,QAAQ,GACF,sCADE,GAEF,+NAJU,EAKhBlB,KAAK,CAACQ,SALU,CAApB;EAQA,OACIT,aAAA,CAACW,OAAD,oBACQH;IACJC,SAAS,EAAEA;IACXU,QAAQ,EAAEA;IACVjB,GAAG,EAAEA;IACLkB,KAAK,EAAE;MACHC,UAAU,EAAE;;IAEhBN,KAAK,EAAEZ;IARX,CADJ;AAYH,CAtBkB,CAAnB;AAwBA,IAAMmB,UAAU,gBAAGtB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,IAAQC,EAAR,GAA8BF,KAA9B,CAAQE,EAAR;MAAeK,UAAf,iCAA8BP,KAA9B;;EACA,IAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAAD,EAA+BT,KAAK,CAACQ,SAArC,CAApB;EAEA,OAAOT,aAAA,CAACW,OAAD,oBAA2BH;IAAYC,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAAKa,KAAK,EAAEZ;IAA9E,CAAP;AACH,CALkB,CAAnB;AAOAJ,IAAI,CAACwB,IAAL,GAAYP,OAAZ;AACAjB,IAAI,CAACyB,OAAL,GAAeN,UAAf;AACAnB,IAAI,CAAC0B,OAAL,GAAeH,UAAf;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\r\n\r\nimport { Orientation } from '../../types';\r\nimport './Tabs.css';\r\n\r\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\r\n     */\r\n    id?: string;\r\n    /**\r\n     * Set which tab is selected on mount.\r\n     * This has to be one of the existing ids provided for tabs\r\n     */\r\n    defaultId?: string;\r\n    /**\r\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\r\n     * followed by one or an array of `Tabs.Content`.\r\n     * *Note* that there can also be tabs that are rendered conditionally.\r\n     */\r\n    children: React.ReactNode;\r\n    /**\r\n     * Define orientation of tabs.\r\n     * @defaultValue horizontal\r\n     */\r\n    orientation?: Orientation;\r\n    /**\r\n     * Callback that is called when tab is changed.\r\n     */\r\n    onChange?: (id: string) => void;\r\n};\r\n\r\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\r\n    /**\r\n     * A unique value that associates the trigger with a content.\r\n     */\r\n    id: string;\r\n    /**\r\n     * When true, prevents the user from interacting with the tab.\r\n     */\r\n    disabled?: boolean;\r\n};\r\n\r\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /**\r\n     * A unique value that associates the content with a trigger.\r\n     */\r\n    id: string;\r\n};\r\n\r\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\r\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\r\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\r\n    /** Tab trigger component rendered in a `Tabs.List` component */\r\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    /** Tab content component rendered in a `Tabs` group component */\r\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\r\n};\r\n\r\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-tabs',\r\n        `yt-tabs--${orientation}`,\r\n        {\r\n            'flex w-full': orientation === 'vertical',\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <TabsPrimitive.Root\r\n            {...otherProps}\r\n            className={className}\r\n            data-taco=\"tabs\"\r\n            defaultValue={defaultId}\r\n            dir=\"ltr\"\r\n            onValueChange={onChange}\r\n            orientation={orientation}\r\n            ref={ref}\r\n            value={id}\r\n        >\r\n            {children}\r\n        </TabsPrimitive.Root>\r\n    );\r\n}) as ForwardedTabsWithStatics;\r\n\r\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn('yt-tab__list border-b border-grey-light flex flex-row m-0 mb-4', props.className);\r\n\r\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\r\n});\r\n\r\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { id, disabled, ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-darkest m-0 py-2 px-4',\r\n        disabled\r\n            ? 'cursor-not-allowed !text-grey-darker'\r\n            : 'cursor-pointer rounded-t hover:border-grey-dark aria-selected:border-blue aria-selected:text-black aria-selected:hover:border-blue-light hover:text-black active:yt-focus active:border-blue focus:yt-focus focus:border-blue',\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <TabsPrimitive.Trigger\r\n            {...otherProps}\r\n            className={className}\r\n            disabled={disabled}\r\n            ref={ref}\r\n            style={{\r\n                transition: 'border 0.2s ease-in',\r\n            }}\r\n            value={id}\r\n        />\r\n    );\r\n});\r\n\r\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { id, ...otherProps } = props;\r\n    const className = cn('yt-tab__panel outline-none', props.className);\r\n\r\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\r\n});\r\n\r\nTabs.List = TabList;\r\nTabs.Trigger = TabTrigger;\r\nTabs.Content = TabContent;\r\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;EACjC,MAAM;IAAEC,EAAF;IAAMC,SAAN;IAAiBC,QAAjB;IAA2BC,QAA3B;IAAqCC,WAAW,GAAG,YAAnD;IAAiE,GAAGC;MAAeP,KAAzF;EACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SADgB,cAEJH,aAFI,EAGhB;IACI,eAAeA,WAAW,KAAK;GAJnB,EAMhBN,KAAK,CAACQ,SANU,CAApB;EASA,OACIT,aAAA,CAACW,IAAD,oBACQH;IACJC,SAAS,EAAEA;iBACD;IACVG,YAAY,EAAER;IACdS,GAAG,EAAC;IACJC,aAAa,EAAER;IACfC,WAAW,EAAEA;IACbL,GAAG,EAAEA;IACLa,KAAK,EAAEZ;IATX,EAWKE,QAXL,CADJ;AAeH,CA1BmB;AA4BpB,MAAMW,OAAO,gBAAGhB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAkCC,GAAlC;EAC7B,MAAMO,SAAS,GAAGC,EAAE,CAAC,gEAAD,EAAmET,KAAK,CAACQ,SAAzE,CAApB;EAEA,OAAOT,aAAA,CAACW,IAAD,oBAAwBV;IAAOQ,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAA1D,CAAP;AACH,CAJe,CAAhB;AAMA,MAAMgB,UAAU,gBAAGlB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,MAAM;IAAEC,EAAF;IAAMgB,QAAN;IAAgB,GAAGX;MAAeP,KAAxC;EACA,MAAMQ,SAAS,GAAGC,EAAE,CAChB,qFADgB,EAEhBS,QAAQ,GACF,sCADE,GAEF,+NAJU,EAKhBlB,KAAK,CAACQ,SALU,CAApB;EAQA,OACIT,aAAA,CAACW,OAAD,oBACQH;IACJC,SAAS,EAAEA;IACXU,QAAQ,EAAEA;IACVjB,GAAG,EAAEA;IACLkB,KAAK,EAAE;MACHC,UAAU,EAAE;;IAEhBN,KAAK,EAAEZ;IARX,CADJ;AAYH,CAtBkB,CAAnB;AAwBA,MAAMmB,UAAU,gBAAGtB,UAAA,CAAiB,SAASiB,GAAT,CAAahB,KAAb,EAAqCC,GAArC;EAChC,MAAM;IAAEC,EAAF;IAAM,GAAGK;MAAeP,KAA9B;EACA,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAAD,EAA+BT,KAAK,CAACQ,SAArC,CAApB;EAEA,OAAOT,aAAA,CAACW,OAAD,oBAA2BH;IAAYC,SAAS,EAAEA;IAAWP,GAAG,EAAEA;IAAKa,KAAK,EAAEZ;IAA9E,CAAP;AACH,CALkB,CAAnB;AAOAJ,IAAI,CAACwB,IAAL,GAAYP,OAAZ;AACAjB,IAAI,CAACyB,OAAL,GAAeN,UAAf;AACAnB,IAAI,CAAC0B,OAAL,GAAeH,UAAf;;;;"}

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

@@ -1,21 +1,23 @@
-import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { getInputClasses } from '../Input/util.js';
 
-var _excluded = ["defaultValue", "highlighted", "invalid", "onKeyDown"];
-var Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
-  var onKeyDown = props.onKeyDown,
-      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
-
-  var classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+const Textarea = /*#__PURE__*/forwardRef(function Textarea(props, ref) {
+  const {
+    defaultValue: _,
+    highlighted,
+    invalid,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className); // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
   // if it has scroll height then the browser reverts to native scrolling behaviour only
   // so we manually override it to ensure _our_ desired behaviour remains intact
 
-  var handleKeyDown = function handleKeyDown(event) {
+  const handleKeyDown = event => {
     if (event.key === 'Home' || event.key === 'End') {
       event.preventDefault();
-      var position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
       event.currentTarget.setSelectionRange(position, position);
       event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
     }

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';\r\nimport cn from 'classnames';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n    /** Value of the textarea */\r\n    value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\r\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\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;MACUC,SAA/C,GAA4EF,KAA5E,CAA+CE,SAA/C;MAA6DC,UAA7D,iCAA4EH,KAA5E;;EACA,IAAMI,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACN,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACO,SAAzE,CAArB;;;;EAKA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;IAClB,IAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;MAC7CD,KAAK,CAACE,cAAN;MACA,IAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAN,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;MACAH,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACO,KAAD,CAAT;;GATR;;EAaA,OAAOV,aAAA,WAAA,oBAAcI;IAAYI,SAAS,EAAEH;iBAAsB;IAAWF,SAAS,EAAEM;IAAeP,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}
+{"version":3,"file":"Textarea.js","sources":["../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { getInputClasses } from '../Input/util';\r\n\r\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\r\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\r\n    highlighted?: boolean;\r\n    /* Whether the input is in an invalid state */\r\n    invalid?: boolean;\r\n    /** Value of the textarea */\r\n    value?: string;\r\n};\r\n\r\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\r\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\r\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\r\n\r\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\r\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\r\n    // so we manually override it to ensure _our_ desired behaviour remains intact\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\r\n        if (event.key === 'Home' || event.key === 'End') {\r\n            event.preventDefault();\r\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\r\n            event.currentTarget.setSelectionRange(position, position);\r\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\r\n        }\r\n\r\n        if (onKeyDown) {\r\n            onKeyDown(event);\r\n        }\r\n    };\r\n\r\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\r\n});\r\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAaaA,QAAQ,gBAAGC,UAAA,CAAiB,SAASD,QAAT,CAAkBE,KAAlB,EAAwCC,GAAxC;EACrC,MAAM;IAAEC,YAAY,EAAEC,CAAhB;IAAmBC,WAAnB;IAAgCC,OAAhC;IAAyCC,SAAzC;IAAoD,GAAGC;MAAeP,KAA5E;EACA,MAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAD,CAAhB,EAAyB,wCAAzB,EAAmEA,KAAK,CAACW,SAAzE,CAArB;;;;EAKA,MAAMC,aAAa,GAAIC,KAAD;IAClB,IAAIA,KAAK,CAACC,GAAN,KAAc,MAAd,IAAwBD,KAAK,CAACC,GAAN,KAAc,KAA1C,EAAiD;MAC7CD,KAAK,CAACE,cAAN;MACA,MAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBC,KAApB,CAA0BC,MAAhD,GAAyD,CAA1E;MACAN,KAAK,CAACI,aAAN,CAAoBG,iBAApB,CAAsCJ,QAAtC,EAAgDA,QAAhD;MACAH,KAAK,CAACI,aAAN,CAAoBI,SAApB,GAAgCR,KAAK,CAACC,GAAN,KAAc,KAAd,GAAsBD,KAAK,CAACI,aAAN,CAAoBK,YAA1C,GAAyD,CAAzF;;;IAGJ,IAAIhB,SAAJ,EAAe;MACXA,SAAS,CAACO,KAAD,CAAT;;GATR;;EAaA,OAAOd,aAAA,WAAA,oBAAcQ;IAAYI,SAAS,EAAEH;iBAAsB;IAAWF,SAAS,EAAEM;IAAeX,GAAG,EAAEA;IAArG,CAAP;AACH,CArBuB;;;;"}