@economic/taco 0.0.30-alpha.0 → 0.0.31-alpha.2

package/dist/esm/components/Button/util.js

@@ -3,7 +3,7 @@ import { Button } from '../../primitives/Button.js';
 import { Tooltip } from '../Tooltip/Tooltip.js';
 
 const getButtonClasses = () => {
-  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';
+  return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {

package/dist/esm/components/Button/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\n\r\nexport const getButtonClasses = () => {\r\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max leading-6 inline-flex items-center justify-center border';\r\n};\r\n\r\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\r\n    switch (value) {\r\n        case 'primary':\r\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\r\n\r\n        case 'danger':\r\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\r\n\r\n        case 'ghost':\r\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\r\n\r\n        case 'discrete': {\r\n            if (icon) {\r\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\r\n            }\r\n\r\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\r\n        }\r\n\r\n        default:\r\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\r\n    }\r\n};\r\n\r\nexport const createButton = (\r\n    props: any,\r\n    className: string,\r\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n): JSX.Element => {\r\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\r\n\r\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\r\n\r\n    if (typeof dialog === 'function') {\r\n        button = dialog({ trigger: button });\r\n    } else if (typeof menu === 'function') {\r\n        button = menu({ trigger: button, appearance: otherProps.appearance });\r\n    } else if (typeof popover === 'function') {\r\n        button = popover({ trigger: button });\r\n    }\r\n\r\n    if (typeof hanger === 'function') {\r\n        button = hanger({ anchor: button });\r\n    }\r\n\r\n    if (tooltip) {\r\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\r\n    }\r\n\r\n    return button;\r\n};\r\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;AAC5B,SAAO,kHAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;AAChC,UAAQD,KAAR;AACI,SAAK,SAAL;AACI,sSAAA;;AAEJ,SAAK,QAAL;AACI,6OAAA;;AAEJ,SAAK,OAAL;AACI,iVAAA;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN,qMAAA;AACH;;AAED,uLAAA;AACH;;AAED;AACI,4OAAA;AAnBR;AAqBH;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,MAAV;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA,OAAxB;AAAiCC,IAAAA,OAAjC;AAA0C,OAAGC;AAA7C,MAA4DR,KAAlE;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}
+{"version":3,"file":"util.js","sources":["../../../../src/components/Button/util.tsx"],"sourcesContent":["import React from 'react';\r\nimport { Appearance } from '../../types';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Tooltip } from '../Tooltip/Tooltip';\r\n\r\nexport const getButtonClasses = () => {\r\n    return 'min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] h-max inline-flex items-center justify-center border';\r\n};\r\n\r\nexport const getAppearanceClasses = (value: Appearance | undefined, icon = false): string => {\r\n    switch (value) {\r\n        case 'primary':\r\n            return `yt-blue-solid border-blue focus:bg-blue focus:text-white focus:yt-focus active:bg-blue-dark active:text-white  hover:bg-blue-light hover:border-blue-light hover:text-white hover:focus:bg-blue-light hover:focus:border-blue-light hover:focus:text-white disabled:hover:yt-blue-solid`;\r\n\r\n        case 'danger':\r\n            return `yt-red-solid border-red focus:bg-red focus:text-white focus:yt-focus-red active:bg-red-dark active:text-white  hover:bg-red-light hover:text-white hover:focus:bg-red-light hover:focus:text-white disabled:hover:yt-red-solid`;\r\n\r\n        case 'ghost':\r\n            return `yt-blue-inverted focus:bg-transparent focus:text-blue focus:yt-focus active:bg-blue-lightest active:border-blue active:text-blue-dark  hover:bg-blue-lightest hover:border-blue-light hover:text-blue-light hover:focus:bg-blue-lightest hover:focus:border-blue-light hover:focus:text-blue-light disabled:hover:yt-blue-inverted`;\r\n\r\n        case 'discrete': {\r\n            if (icon) {\r\n                return `bg-transparent text-black border-transparent focus:text-black focus:yt-focus active:text-black hover:text-grey-darkest hover:focus:text-grey-darkest disabled:hover:yt-transparent`;\r\n            }\r\n\r\n            return `yt-transparent border-transparent focus:text-blue focus:yt-focus active:text-blue-dark hover:text-blue-light hover:focus:text-blue-light disabled:hover:yt-transparent`;\r\n        }\r\n\r\n        default:\r\n            return `yt-grey-solid border-grey focus:bg-grey focus:yt-focus active:bg-grey-dark active:text-black hover:bg-grey-light hover:text-grey-darkest hover:focus:bg-grey-light hover:focus:text-grey-darkest disabled:hover:yt-grey-solid`;\r\n    }\r\n};\r\n\r\nexport const createButton = (\r\n    props: any,\r\n    className: string,\r\n    ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\r\n): JSX.Element => {\r\n    const { dialog, hanger, menu, popover, tooltip, ...otherProps } = props;\r\n\r\n    let button = <ButtonPrimitive.Button {...otherProps} className={className} ref={ref} />;\r\n\r\n    if (typeof dialog === 'function') {\r\n        button = dialog({ trigger: button });\r\n    } else if (typeof menu === 'function') {\r\n        button = menu({ trigger: button, appearance: otherProps.appearance });\r\n    } else if (typeof popover === 'function') {\r\n        button = popover({ trigger: button });\r\n    }\r\n\r\n    if (typeof hanger === 'function') {\r\n        button = hanger({ anchor: button });\r\n    }\r\n\r\n    if (tooltip) {\r\n        button = <Tooltip title={tooltip}>{button}</Tooltip>;\r\n    }\r\n\r\n    return button;\r\n};\r\n"],"names":["getButtonClasses","getAppearanceClasses","value","icon","createButton","props","className","ref","dialog","hanger","menu","popover","tooltip","otherProps","button","React","ButtonPrimitive","trigger","appearance","anchor","Tooltip","title"],"mappings":";;;;MAKaA,gBAAgB,GAAG;AAC5B,SAAO,wGAAP;AACH;MAEYC,oBAAoB,GAAG,CAACC,KAAD,EAAgCC,IAAI,GAAG,KAAvC;AAChC,UAAQD,KAAR;AACI,SAAK,SAAL;AACI,sSAAA;;AAEJ,SAAK,QAAL;AACI,6OAAA;;AAEJ,SAAK,OAAL;AACI,iVAAA;;AAEJ,SAAK,UAAL;AAAiB;AACb,YAAIC,IAAJ,EAAU;AACN,qMAAA;AACH;;AAED,uLAAA;AACH;;AAED;AACI,4OAAA;AAnBR;AAqBH;MAEYC,YAAY,GAAG,CACxBC,KADwB,EAExBC,SAFwB,EAGxBC,GAHwB;AAKxB,QAAM;AAAEC,IAAAA,MAAF;AAAUC,IAAAA,MAAV;AAAkBC,IAAAA,IAAlB;AAAwBC,IAAAA,OAAxB;AAAiCC,IAAAA,OAAjC;AAA0C,OAAGC;AAA7C,MAA4DR,KAAlE;AAEA,MAAIS,MAAM,GAAGC,4BAAA,CAACC,MAAD,oBAA4BH;AAAYP,IAAAA,SAAS,EAAEA;AAAWC,IAAAA,GAAG,EAAEA;IAAnE,CAAb;;AAEA,MAAI,OAAOC,MAAP,KAAkB,UAAtB,EAAkC;AAC9BM,IAAAA,MAAM,GAAGN,MAAM,CAAC;AAAES,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAf;AACH,GAFD,MAEO,IAAI,OAAOJ,IAAP,KAAgB,UAApB,EAAgC;AACnCI,IAAAA,MAAM,GAAGJ,IAAI,CAAC;AAAEO,MAAAA,OAAO,EAAEH,MAAX;AAAmBI,MAAAA,UAAU,EAAEL,UAAU,CAACK;AAA1C,KAAD,CAAb;AACH,GAFM,MAEA,IAAI,OAAOP,OAAP,KAAmB,UAAvB,EAAmC;AACtCG,IAAAA,MAAM,GAAGH,OAAO,CAAC;AAAEM,MAAAA,OAAO,EAAEH;AAAX,KAAD,CAAhB;AACH;;AAED,MAAI,OAAOL,MAAP,KAAkB,UAAtB,EAAkC;AAC9BK,IAAAA,MAAM,GAAGL,MAAM,CAAC;AAAEU,MAAAA,MAAM,EAAEL;AAAV,KAAD,CAAf;AACH;;AAED,MAAIF,OAAJ,EAAa;AACTE,IAAAA,MAAM,GAAGC,4BAAA,CAACK,OAAD;AAASC,MAAAA,KAAK,EAAET;KAAhB,EAA0BE,MAA1B,CAAT;AACH;;AAED,SAAOA,MAAP;AACH;;;;"}

package/dist/esm/components/Datepicker/Datepicker.js

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -7,25 +8,25 @@ import { Input } from '../Input/Input.js';
 import { useDatepicker } from './useDatepicker.js';
 import { Popover } from '../Popover/Popover.js';
 
-const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
+var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
   var _input$disabled;
 
-  const {
-    className: externalClassName,
-    onReset: handleReset,
-    style,
-    shortcuts,
-    shortcutsText,
-    ...otherProps
-  } = props;
-  const {
-    calendar,
-    input
-  } = useDatepicker(otherProps, ref);
-  const {
-    texts
-  } = useLocalization();
-  const className = cn('inline-flex w-full text-black font-normal', externalClassName);
+  var externalClassName = props.className,
+      handleReset = props.onReset,
+      style = props.style,
+      shortcuts = props.shortcuts,
+      shortcutsText = props.shortcutsText,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useDatepicker = useDatepicker(otherProps, ref),
+      calendar = _useDatepicker.calendar,
+      input = _useDatepicker.input;
+
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var className = cn('inline-flex w-full text-black font-normal', externalClassName);
   return createElement("span", {
     className: className,
     "data-taco": "datepicker",
@@ -35,37 +36,40 @@ const Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
       "aria-label": texts.datepicker.expand,
       disabled: (_input$disabled = input.disabled) !== null && _input$disabled !== void 0 ? _input$disabled : input.readOnly,
       icon: "calendar"
-    })), createElement(Popover.Content, null, ({
-      close
-    }) => createElement("div", {
-      className: "flex -m-3"
-    }, createElement(Calendar, Object.assign({}, calendar, {
-      onChange: (date, event) => {
-        calendar.onChange(date, event);
-        close();
-      },
-      tabIndex: -1
-    })), shortcuts && createElement("div", {
-      className: "border-l border-grey-dark flex flex-col"
-    }, createElement("span", {
-      className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
-    }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map((shortcut, i) => createElement("li", {
-      key: i
-    }, createElement("button", {
-      className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
-      onClick: event => {
-        event.persist();
-        shortcut.onClick(event);
-        close();
-      }
-    }, shortcut.text)))), handleReset && createElement("button", {
-      className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
-      onClick: event => {
-        event.persist();
-        handleReset(event);
-        close();
-      }
-    }, texts.datepicker.clear)))))
+    })), createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return createElement("div", {
+        className: "flex -m-3"
+      }, createElement(Calendar, Object.assign({}, calendar, {
+        onChange: function onChange(date, event) {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && createElement("div", {
+        className: "border-l border-grey-dark flex flex-col"
+      }, createElement("span", {
+        className: "font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3"
+      }, shortcutsText !== null && shortcutsText !== void 0 ? shortcutsText : texts.datepicker.shortcuts), createElement("ul", null, shortcuts.map(function (shortcut, i) {
+        return createElement("li", {
+          key: i
+        }, createElement("button", {
+          className: "w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs",
+          onClick: function onClick(event) {
+            event.persist();
+            shortcut.onClick(event);
+            close();
+          }
+        }, shortcut.text));
+      })), handleReset && createElement("button", {
+        className: "text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto",
+        onClick: function onClick(event) {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)));
+    }))
   })));
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"Datepicker.js","sources":["../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { useDatepicker } from './useDatepicker';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Popover } from '../Popover/Popover';\r\n\r\nexport type DatepickerTexts = {\r\n    /** Aria-label for calendar */\r\n    calendar: string;\r\n    /** Clear button text */\r\n    clear: string;\r\n    /**\r\n     * Aria-label for calendar icon button in the input.\r\n     * Calendar will open when user clicks this icon button.\r\n     */\r\n    expand: string;\r\n    /** Shortcut heading text */\r\n    shortcuts: string;\r\n};\r\n\r\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\r\n    /** [Calendar](component:calendar) component associated with the DatePicker */\r\n    calendar?: CalendarProps;\r\n    /** List of shortcuts */\r\n    shortcuts?: any;\r\n    /** Title for the shortcuts panel */\r\n    shortcutsText?: string;\r\n    /** Handler to be called when the clear button is clicked */\r\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\r\n    /**\r\n     * Date value of the calendar.\r\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\r\n     */\r\n    value?: Date;\r\n};\r\n\r\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\r\n    const { calendar, input } = useDatepicker(otherProps, ref);\r\n    const { texts } = useLocalization();\r\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\r\n\r\n    return (\r\n        <span className={className} data-taco=\"datepicker\" style={style}>\r\n            <Input\r\n                {...input}\r\n                button={\r\n                    <Popover>\r\n                        <Popover.Trigger>\r\n                            <IconButton\r\n                                aria-label={texts.datepicker.expand}\r\n                                disabled={input.disabled ?? input.readOnly}\r\n                                icon=\"calendar\"\r\n                            />\r\n                        </Popover.Trigger>\r\n                        <Popover.Content>\r\n                            {({ close }) => (\r\n                                <div className=\"flex -m-3\">\r\n                                    <Calendar\r\n                                        {...calendar}\r\n                                        onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\r\n                                            calendar.onChange(date, event);\r\n                                            close();\r\n                                        }}\r\n                                        tabIndex={-1}\r\n                                    />\r\n                                    {shortcuts && (\r\n                                        <div className=\"border-l border-grey-dark flex flex-col\">\r\n                                            <span className=\"font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3\">\r\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\r\n                                            </span>\r\n                                            <ul>\r\n                                                {shortcuts.map((shortcut, i) => (\r\n                                                    <li key={i}>\r\n                                                        <button\r\n                                                            className=\"w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs\"\r\n                                                            onClick={event => {\r\n                                                                event.persist();\r\n                                                                shortcut.onClick(event);\r\n                                                                close();\r\n                                                            }}\r\n                                                        >\r\n                                                            {shortcut.text}\r\n                                                        </button>\r\n                                                    </li>\r\n                                                ))}\r\n                                            </ul>\r\n                                            {handleReset && (\r\n                                                <button\r\n                                                    className=\"text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto\"\r\n                                                    onClick={event => {\r\n                                                        event.persist();\r\n                                                        handleReset(event);\r\n                                                        close();\r\n                                                    }}\r\n                                                >\r\n                                                    {texts.datepicker.clear}\r\n                                                </button>\r\n                                            )}\r\n                                        </div>\r\n                                    )}\r\n                                </div>\r\n                            )}\r\n                        </Popover.Content>\r\n                    </Popover>\r\n                }\r\n            />\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Datepicker","React","props","ref","className","externalClassName","onReset","handleReset","style","shortcuts","shortcutsText","otherProps","calendar","input","useDatepicker","texts","useLocalization","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":";;;;;;;;;MAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;;;AACvC,QAAM;AAAEC,IAAAA,SAAS,EAAEC,iBAAb;AAAgCC,IAAAA,OAAO,EAAEC,WAAzC;AAAsDC,IAAAA,KAAtD;AAA6DC,IAAAA,SAA7D;AAAwEC,IAAAA,aAAxE;AAAuF,OAAGC;AAA1F,MAAyGT,KAA/G;AACA,QAAM;AAAEU,IAAAA,QAAF;AAAYC,IAAAA;AAAZ,MAAsBC,aAAa,CAACH,UAAD,EAAaR,GAAb,CAAzC;AACA,QAAM;AAAEY,IAAAA;AAAF,MAAYC,eAAe,EAAjC;AACA,QAAMZ,SAAS,GAAGa,EAAE,CAAC,2CAAD,EAA8CZ,iBAA9C,CAApB;AAEA,SACIJ,aAAA,OAAA;AAAMG,IAAAA,SAAS,EAAEA;iBAAqB;AAAaI,IAAAA,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQL;AACJM,IAAAA,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBP,KAAK,CAACQ,UAAN,CAAiBC;AAC7BC,MAAAA,QAAQ,qBAAEZ,KAAK,CAACY,QAAR,6DAAoBZ,KAAK,CAACa;AAClCC,MAAAA,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK,CAAC;AAAEC,MAAAA;AAAF,KAAD,KACG5B,aAAA,MAAA;AAAKG,MAAAA,SAAS,EAAC;KAAf,EACIH,aAAA,CAAC6B,QAAD,oBACQlB;AACJmB,MAAAA,QAAQ,EAAE,CAACC,IAAD,EAAaC,KAAb;AACNrB,QAAAA,QAAQ,CAACmB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;AACAJ,QAAAA,KAAK;AACR;AACDK,MAAAA,QAAQ,EAAE,CAAC;MANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;AAAKG,MAAAA,SAAS,EAAC;KAAf,EACIH,aAAA,OAAA;AAAMG,MAAAA,SAAS,EAAC;KAAhB,EACKM,aADL,aACKA,aADL,cACKA,aADL,GACsBK,KAAK,CAACQ,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,CAACC,QAAD,EAAWC,CAAX,KACXpC,aAAA,KAAA;AAAIqC,MAAAA,GAAG,EAAED;KAAT,EACIpC,aAAA,SAAA;AACIG,MAAAA,SAAS,EAAC;AACVmC,MAAAA,OAAO,EAAEN,KAAK;AACVA,QAAAA,KAAK,CAACO,OAAN;AACAJ,QAAAA,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;AACAJ,QAAAA,KAAK;AACR;KANL,EAQKO,QAAQ,CAACK,IARd,CADJ,CADH,CADL,CAJJ,EAoBKlC,WAAW,IACRN,aAAA,SAAA;AACIG,MAAAA,SAAS,EAAC;AACVmC,MAAAA,OAAO,EAAEN,KAAK;AACVA,QAAAA,KAAK,CAACO,OAAN;AACAjC,QAAAA,WAAW,CAAC0B,KAAD,CAAX;AACAJ,QAAAA,KAAK;AACR;KANL,EAQKd,KAAK,CAACQ,UAAN,CAAiBmB,KARtB,CArBR,CAVR,CAFR,CARJ;IAHR,CADJ,CADJ;AAmEH,CAzEyB;;;;"}
+{"version":3,"file":"Datepicker.js","sources":["../../../../src/components/Datepicker/Datepicker.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport { Calendar, CalendarProps } from '../Calendar/Calendar';\r\nimport { Input, InputProps } from '../Input/Input';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { useDatepicker } from './useDatepicker';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Popover } from '../Popover/Popover';\r\n\r\nexport type DatepickerTexts = {\r\n    /** Aria-label for calendar */\r\n    calendar: string;\r\n    /** Clear button text */\r\n    clear: string;\r\n    /**\r\n     * Aria-label for calendar icon button in the input.\r\n     * Calendar will open when user clicks this icon button.\r\n     */\r\n    expand: string;\r\n    /** Shortcut heading text */\r\n    shortcuts: string;\r\n};\r\n\r\nexport type DatepickerProps = Omit<InputProps, 'value'> & {\r\n    /** [Calendar](component:calendar) component associated with the DatePicker */\r\n    calendar?: CalendarProps;\r\n    /** List of shortcuts */\r\n    shortcuts?: any;\r\n    /** Title for the shortcuts panel */\r\n    shortcutsText?: string;\r\n    /** Handler to be called when the clear button is clicked */\r\n    onReset?: (event: React.MouseEvent<HTMLButtonElement>) => void;\r\n    /**\r\n     * Date value of the calendar.\r\n     * This will be displayed in DatePicker's input in the format given to the [Provider](component:provider) component\r\n     */\r\n    value?: Date;\r\n};\r\n\r\nexport const Datepicker = React.forwardRef(function Datepicker(props: DatepickerProps, ref: React.Ref<HTMLInputElement>) {\r\n    const { className: externalClassName, onReset: handleReset, style, shortcuts, shortcutsText, ...otherProps } = props;\r\n    const { calendar, input } = useDatepicker(otherProps, ref);\r\n    const { texts } = useLocalization();\r\n    const className = cn('inline-flex w-full text-black font-normal', externalClassName);\r\n\r\n    return (\r\n        <span className={className} data-taco=\"datepicker\" style={style}>\r\n            <Input\r\n                {...input}\r\n                button={\r\n                    <Popover>\r\n                        <Popover.Trigger>\r\n                            <IconButton\r\n                                aria-label={texts.datepicker.expand}\r\n                                disabled={input.disabled ?? input.readOnly}\r\n                                icon=\"calendar\"\r\n                            />\r\n                        </Popover.Trigger>\r\n                        <Popover.Content>\r\n                            {({ close }) => (\r\n                                <div className=\"flex -m-3\">\r\n                                    <Calendar\r\n                                        {...calendar}\r\n                                        onChange={(date: Date, event?: React.MouseEvent<HTMLDivElement>) => {\r\n                                            calendar.onChange(date, event);\r\n                                            close();\r\n                                        }}\r\n                                        tabIndex={-1}\r\n                                    />\r\n                                    {shortcuts && (\r\n                                        <div className=\"border-l border-grey-dark flex flex-col\">\r\n                                            <span className=\"font-semibold text-xs m-4 flex items-center h-8 w-32 mb-3\">\r\n                                                {shortcutsText ?? texts.datepicker.shortcuts}\r\n                                            </span>\r\n                                            <ul>\r\n                                                {shortcuts.map((shortcut, i) => (\r\n                                                    <li key={i}>\r\n                                                        <button\r\n                                                            className=\"w-full px-4 py-1 flex items-start hover:bg-grey-light text-xs\"\r\n                                                            onClick={event => {\r\n                                                                event.persist();\r\n                                                                shortcut.onClick(event);\r\n                                                                close();\r\n                                                            }}\r\n                                                        >\r\n                                                            {shortcut.text}\r\n                                                        </button>\r\n                                                    </li>\r\n                                                ))}\r\n                                            </ul>\r\n                                            {handleReset && (\r\n                                                <button\r\n                                                    className=\"text-blue hover:text-blue-light inline-flex border-none bg-transparent text-xs cursor-pointer mt-auto my-4 mx-auto\"\r\n                                                    onClick={event => {\r\n                                                        event.persist();\r\n                                                        handleReset(event);\r\n                                                        close();\r\n                                                    }}\r\n                                                >\r\n                                                    {texts.datepicker.clear}\r\n                                                </button>\r\n                                            )}\r\n                                        </div>\r\n                                    )}\r\n                                </div>\r\n                            )}\r\n                        </Popover.Content>\r\n                    </Popover>\r\n                }\r\n            />\r\n        </span>\r\n    );\r\n});\r\n"],"names":["Datepicker","React","props","ref","externalClassName","className","handleReset","onReset","style","shortcuts","shortcutsText","otherProps","useDatepicker","calendar","input","useLocalization","texts","cn","Input","button","Popover","Trigger","IconButton","datepicker","expand","disabled","readOnly","icon","Content","close","Calendar","onChange","date","event","tabIndex","map","shortcut","i","key","onClick","persist","text","clear"],"mappings":"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"}

package/dist/esm/components/Form/Form.js

@@ -1,12 +1,14 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-const Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
-  const {
-    horizontal = false,
-    ...otherProps
-  } = props;
-  const className = cn('yt-form', {
+var _excluded = ["horizontal"];
+var Form = /*#__PURE__*/forwardRef(function Form(props, ref) {
+  var _props$horizontal = props.horizontal,
+      horizontal = _props$horizontal === void 0 ? false : _props$horizontal,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('yt-form', {
     'yt-form--horizontal flex flex-wrap': horizontal
   }, props.className);
   return createElement("form", Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n    /** Content should be composed of other Taco form elements */\r\n    children: React.ReactNode;\r\n    /** Display the form fields in a horizontal layout */\r\n    horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n    const { horizontal = false, ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-form',\r\n        {\r\n            'yt-form--horizontal flex flex-wrap': horizontal,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;MAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,QAAM;AAAEC,IAAAA,UAAU,GAAG,KAAf;AAAsB,OAAGC;AAAzB,MAAwCH,KAA9C;AACA,QAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;AACI,0CAAsCH;AAD1C,GAFgB,EAKhBF,KAAK,CAACI,SALU,CAApB;AAQA,SAAOL,aAAA,OAAA,oBAAUI;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAOH,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}
+{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Form.css';\r\n\r\nexport type FormProps = React.FormHTMLAttributes<HTMLFormElement> & {\r\n    /** Content should be composed of other Taco form elements */\r\n    children: React.ReactNode;\r\n    /** Display the form fields in a horizontal layout */\r\n    horizontal?: boolean;\r\n};\r\n\r\nexport const Form = React.forwardRef(function Form(props: FormProps, ref: React.Ref<HTMLFormElement>) {\r\n    const { horizontal = false, ...otherProps } = props;\r\n    const className = cn(\r\n        'yt-form',\r\n        {\r\n            'yt-form--horizontal flex flex-wrap': horizontal,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    return <form {...otherProps} className={className} data-taco=\"form\" ref={ref} />;\r\n});\r\n"],"names":["Form","React","props","ref","horizontal","otherProps","className","cn"],"mappings":";;;;;IAWaA,IAAI,gBAAGC,UAAA,CAAiB,SAASD,IAAT,CAAcE,KAAd,EAAgCC,GAAhC;AACjC,0BAA8CD,KAA9C,CAAQE,UAAR;AAAA,MAAQA,UAAR,kCAAqB,KAArB;AAAA,MAA+BC,UAA/B,iCAA8CH,KAA9C;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAChB,SADgB,EAEhB;AACI,0CAAsCH;AAD1C,GAFgB,EAKhBF,KAAK,CAACI,SALU,CAApB;AAQA,SAAOL,aAAA,OAAA,oBAAUI;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAOH,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAXmB;;;;"}

package/dist/esm/components/Group/Group.js

@@ -1,12 +1,14 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 
-const Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
-  const {
-    as: Tag = 'span',
-    ...otherProps
-  } = props;
-  const className = cn('flex ', props.className);
+var _excluded = ["as"];
+var Group = /*#__PURE__*/forwardRef(function Group(props, ref) {
+  var _props$as = props.as,
+      Tag = _props$as === void 0 ? 'span' : _props$as,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('flex ', props.className);
   return createElement(Tag, Object.assign({}, otherProps, {
     className: className,
     "data-taco": "group",

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

@@ -1 +1 @@
-{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n    /**\r\n     * Change what html tag element will render.\r\n     * Default value is `span`\r\n     */\r\n    as?: 'div' | 'span' | 'nav';\r\n    /** Content should be composed of other Taco elements */\r\n    children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { as: Tag = 'span', ...otherProps } = props;\r\n    const className = cn('flex ', props.className);\r\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":";;;MAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,QAAM;AAAEC,IAAAA,EAAE,EAAEC,GAAG,GAAG,MAAZ;AAAoB,OAAGC;AAAvB,MAAsCJ,KAA5C;AACA,QAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;AACA,SAAON,aAAA,CAACI,GAAD,oBAASC;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQJ,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAJoB;;;;"}
+{"version":3,"file":"Group.js","sources":["../../../../src/components/Group/Group.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport './Group.css';\r\n\r\nexport type GroupProps = React.HTMLAttributes<HTMLElement> & {\r\n    /**\r\n     * Change what html tag element will render.\r\n     * Default value is `span`\r\n     */\r\n    as?: 'div' | 'span' | 'nav';\r\n    /** Content should be composed of other Taco elements */\r\n    children: React.ReactNode;\r\n};\r\n\r\nexport const Group = React.forwardRef(function Group(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\r\n    const { as: Tag = 'span', ...otherProps } = props;\r\n    const className = cn('flex ', props.className);\r\n    return <Tag {...otherProps} className={className} data-taco=\"group\" ref={ref} />;\r\n});\r\n"],"names":["Group","React","props","ref","as","Tag","otherProps","className","cn"],"mappings":";;;;;IAcaA,KAAK,gBAAGC,UAAA,CAAiB,SAASD,KAAT,CAAeE,KAAf,EAAkCC,GAAlC;AAClC,kBAA4CD,KAA5C,CAAQE,EAAR;AAAA,MAAYC,GAAZ,0BAAkB,MAAlB;AAAA,MAA6BC,UAA7B,iCAA4CJ,KAA5C;;AACA,MAAMK,SAAS,GAAGC,EAAE,CAAC,OAAD,EAAUN,KAAK,CAACK,SAAhB,CAApB;AACA,SAAON,aAAA,CAACI,GAAD,oBAASC;AAAYC,IAAAA,SAAS,EAAEA;iBAAqB;AAAQJ,IAAAA,GAAG,EAAEA;IAAlE,CAAP;AACH,CAJoB;;;;"}

package/dist/esm/components/Hanger/Hanger.js

@@ -1,3 +1,4 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, useMemo, useState, useEffect, createElement, createContext, useContext, isValidElement } from 'react';
 import cn from 'classnames';
 import { IconButton } from '../IconButton/IconButton.js';
@@ -6,18 +7,19 @@ import { Root, Anchor as Anchor$1, Close } from '@radix-ui/react-popover';
 import { UnstyledContent, UnstyledArrow } from '../Popover/Primitives.js';
 import mergeRefs from '../../utils/mergeRefs.js';
 
-const HangerContext = /*#__PURE__*/createContext({
+var _excluded = ["anchor", "children", "defaultOpen"];
+var HangerContext = /*#__PURE__*/createContext({
   props: {},
   ref: null
 });
-const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
+var Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
   var _props$children;
 
-  const context = useContext(HangerContext);
-  let children = props.children;
+  var context = useContext(HangerContext);
+  var children = props.children;
 
   if (isValidElement(props.children) && typeof ((_props$children = props.children) === null || _props$children === void 0 ? void 0 : _props$children.type) === 'function') {
-    console.warn(`Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`);
+    console.warn("Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '" + props.children.type.name + "' in React.forwardRef()? Taco has wrapped '" + props.children.type.name + "' in a 'span' to maintain functionality, but this may cause unintended behaviour");
     children = createElement("span", null, props.children);
   }
 
@@ -27,14 +29,15 @@ const Anchor = /*#__PURE__*/forwardRef(function HangerAnchor(props, ref) {
     asChild: true
   }));
 });
-const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
-  const context = useContext(HangerContext);
-  const {
-    texts
-  } = useLocalization();
-  const className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
+var Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
+  var context = useContext(HangerContext);
 
-  const handleInteractOutside = event => {
+  var _useLocalization = useLocalization(),
+      texts = _useLocalization.texts;
+
+  var className = cn('wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent', props.className);
+
+  var handleInteractOutside = function handleInteractOutside(event) {
     event.preventDefault();
   };
 
@@ -56,20 +59,25 @@ const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
     onClick: context.props.onClose
   })));
 });
-const Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
-  const {
-    anchor,
-    children,
-    defaultOpen = true,
-    ...otherProps
-  } = props;
-  const context = useMemo(() => ({
-    props: otherProps,
-    ref
-  }), [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+var Hanger = /*#__PURE__*/forwardRef(function Hanger(props, ref) {
+  var anchor = props.anchor,
+      children = props.children,
+      _props$defaultOpen = props.defaultOpen,
+      defaultOpen = _props$defaultOpen === void 0 ? true : _props$defaultOpen,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var context = useMemo(function () {
+    return {
+      props: otherProps,
+      ref: ref
+    };
+  }, [otherProps]); // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal
+
+  var _React$useState = useState(false),
+      open = _React$useState[0],
+      setOpen = _React$useState[1];
 
-  const [open, setOpen] = useState(false);
-  useEffect(() => {
+  useEffect(function () {
     if (defaultOpen) {
       setOpen(defaultOpen);
     }

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

@@ -1 +1 @@
-{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n    props: any;\r\n    ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n    props: {},\r\n    ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n    /** Aria-label for the close icon button of hanger */\r\n    close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n    const context = React.useContext(HangerContext);\r\n    let children = props.children;\r\n\r\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n        console.warn(\r\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n        );\r\n        children = <span>{props.children}</span>;\r\n    }\r\n\r\n    return (\r\n        <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n    );\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n    placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n    const context = React.useContext(HangerContext);\r\n    const { texts } = useLocalization();\r\n    const className = cn(\r\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\r\n        props.className\r\n    );\r\n    const handleInteractOutside = (event: CustomEvent): void => {\r\n        event.preventDefault();\r\n    };\r\n\r\n    return (\r\n        <UnstyledContent\r\n            className={className}\r\n            data-taco=\"hanger\"\r\n            onInteractOutside={handleInteractOutside}\r\n            placement={props.placement}\r\n            ref={ref}\r\n        >\r\n            {props.children}\r\n            <UnstyledArrow className=\"text-blue\" />\r\n            <PopoverPrimitive.Close asChild>\r\n                <IconButton\r\n                    appearance=\"primary\"\r\n                    aria-label={texts.hanger.close}\r\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n                    icon=\"close\"\r\n                    onClick={context.props.onClose}\r\n                />\r\n            </PopoverPrimitive.Close>\r\n        </UnstyledContent>\r\n    );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n    anchor?: JSX.Element;\r\n    /**\r\n     * Shows or hides hanger depending on the value\r\n     * @defaultValue true\r\n     */\r\n    defaultOpen?: boolean;\r\n    /** Handler called when user closes the hanger */\r\n    onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n    const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n    const [open, setOpen] = React.useState(false);\r\n    React.useEffect(() => {\r\n        if (defaultOpen) {\r\n            setOpen(defaultOpen);\r\n        }\r\n    }, []);\r\n\r\n    return (\r\n        <HangerContext.Provider value={context}>\r\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n                {anchor && <Anchor>{anchor}</Anchor>}\r\n                {children}\r\n            </PopoverPrimitive.Root>\r\n        </HangerContext.Provider>\r\n    );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","texts","useLocalization","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}
+{"version":3,"file":"Hanger.js","sources":["../../../../src/components/Hanger/Hanger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\r\nimport { IconButton } from '../IconButton/IconButton';\r\nimport { Placement } from '../..';\r\nimport { UnstyledArrow, UnstyledContent } from '../Popover/Primitives';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport './Hanger.css';\r\nimport mergeRefs from '../../utils/mergeRefs';\r\n\r\ntype HangerContextValue = {\r\n    props: any;\r\n    ref: React.Ref<HTMLElement>;\r\n};\r\nconst HangerContext = React.createContext<HangerContextValue>({\r\n    props: {},\r\n    ref: null,\r\n});\r\n\r\nexport type HangerTexts = {\r\n    /** Aria-label for the close icon button of hanger */\r\n    close: string;\r\n};\r\n\r\nexport type HangerAnchorProps = React.HTMLAttributes<HTMLDivElement>;\r\nconst Anchor = React.forwardRef(function HangerAnchor(props: HangerAnchorProps, ref: React.Ref<HTMLDivElement>) {\r\n    const context = React.useContext(HangerContext);\r\n    let children = props.children;\r\n\r\n    if (React.isValidElement(props.children) && typeof props.children?.type === 'function') {\r\n        console.warn(\r\n            `Hanger.Anchor requires its child to forwardRef so that it can attach to the dom element. Did you mean to wrap '${props.children.type.name}' in React.forwardRef()? Taco has wrapped '${props.children.type.name}' in a 'span' to maintain functionality, but this may cause unintended behaviour`\r\n        );\r\n        children = <span>{props.children}</span>;\r\n    }\r\n\r\n    return (\r\n        <PopoverPrimitive.Anchor {...context.props} {...props} children={children} ref={mergeRefs([context.ref, ref])} asChild />\r\n    );\r\n});\r\n\r\nexport type HangerContentProps = React.HTMLAttributes<HTMLDivElement> & {\r\n    /** Set the position of the Hanger relative to its achor. Default value is `bottom` */\r\n    placement?: Placement;\r\n};\r\n\r\nconst Content = React.forwardRef(function HangerContent(props: HangerContentProps, ref: React.Ref<HTMLDivElement>) {\r\n    const context = React.useContext(HangerContext);\r\n    const { texts } = useLocalization();\r\n    const className = cn(\r\n        'wcag-blue border border-transparent rounded p-3 pr-12 yt-shadow z-[996] focus:border-transparent',\r\n        props.className\r\n    );\r\n    const handleInteractOutside = (event: CustomEvent): void => {\r\n        event.preventDefault();\r\n    };\r\n\r\n    return (\r\n        <UnstyledContent\r\n            className={className}\r\n            data-taco=\"hanger\"\r\n            onInteractOutside={handleInteractOutside}\r\n            placement={props.placement}\r\n            ref={ref}\r\n        >\r\n            {props.children}\r\n            <UnstyledArrow className=\"text-blue\" />\r\n            <PopoverPrimitive.Close asChild>\r\n                <IconButton\r\n                    appearance=\"primary\"\r\n                    aria-label={texts.hanger.close}\r\n                    className=\"absolute top-0 right-0 ml-2 mr-2 mt-2 text-white\"\r\n                    icon=\"close\"\r\n                    onClick={context.props.onClose}\r\n                />\r\n            </PopoverPrimitive.Close>\r\n        </UnstyledContent>\r\n    );\r\n});\r\n\r\nexport type HangerProps = React.PropsWithChildren<{\r\n    /** An anchor to be used for the hanger, should not be set if `children` already contains an anchor */\r\n    anchor?: JSX.Element;\r\n    /**\r\n     * Shows or hides hanger depending on the value\r\n     * @defaultValue true\r\n     */\r\n    defaultOpen?: boolean;\r\n    /** Handler called when user closes the hanger */\r\n    onClose?: () => void;\r\n}>;\r\n\r\nexport type ForwardedHangerWithStatics = React.ForwardRefExoticComponent<HangerProps & React.RefAttributes<HTMLElement>> & {\r\n    Anchor: React.ForwardRefExoticComponent<HangerAnchorProps>;\r\n    Content: React.ForwardRefExoticComponent<HangerContentProps>;\r\n};\r\n\r\nexport const Hanger = React.forwardRef(function Hanger(props: HangerProps, ref: React.Ref<HTMLElement>) {\r\n    const { anchor, children, defaultOpen = true, ...otherProps } = props;\r\n    const context = React.useMemo(() => ({ props: otherProps, ref }), [otherProps]);\r\n\r\n    // we do this to ensure hangers are mounted after their containers, e.g. if the container is another portal\r\n    const [open, setOpen] = React.useState(false);\r\n    React.useEffect(() => {\r\n        if (defaultOpen) {\r\n            setOpen(defaultOpen);\r\n        }\r\n    }, []);\r\n\r\n    return (\r\n        <HangerContext.Provider value={context}>\r\n            <PopoverPrimitive.Root key={String(open)} defaultOpen={open}>\r\n                {anchor && <Anchor>{anchor}</Anchor>}\r\n                {children}\r\n            </PopoverPrimitive.Root>\r\n        </HangerContext.Provider>\r\n    );\r\n}) as ForwardedHangerWithStatics;\r\nHanger.Anchor = Anchor;\r\nHanger.Content = Content;\r\n"],"names":["HangerContext","React","props","ref","Anchor","HangerAnchor","context","children","type","console","warn","name","PopoverPrimitive","mergeRefs","asChild","Content","HangerContent","useLocalization","texts","className","cn","handleInteractOutside","event","preventDefault","UnstyledContent","onInteractOutside","placement","UnstyledArrow","IconButton","appearance","hanger","close","icon","onClick","onClose","Hanger","anchor","defaultOpen","otherProps","open","setOpen","Provider","value","key","String"],"mappings":"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"}

package/dist/esm/components/Icon/Icon.js

@@ -1,19 +1,20 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import React__default from 'react';
 import cn from 'classnames';
 import { icons } from './components/index.js';
 export { icons } from './components/index.js';
 
-const Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
+var _excluded = ["name"];
+var Icon = /*#__PURE__*/React__default.forwardRef(function Icon(props, ref) {
   var _props$className;
 
-  const {
-    name,
-    ...otherProps
-  } = props;
-  const Component = icons[name];
+  var name = props.name,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var Component = icons[name];
   /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */
 
-  const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
+  var className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {
     'p-[3px]': (_props$className = props.className) === null || _props$className === void 0 ? void 0 : _props$className.includes('rounded-full')
   });
   return Component ? React__default.createElement(Component, Object.assign({}, otherProps, {

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

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n    /** Set what svg icon should be rendered */\r\n    name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n    const { name, ...otherProps } = props;\r\n    const Component = icons[name];\r\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n    const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n        'p-[3px]': props.className?.includes('rounded-full'),\r\n    });\r\n\r\n    return Component ? (\r\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n    ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;MAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;AACjC,QAAM;AAAEC,IAAAA,IAAF;AAAQ,OAAGC;AAAX,MAA0BH,KAAhC;AACA,QAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,QAAMI,SAAS,GAAGC,EAAE,CAAC,qCAAD,EAAwCP,KAAK,CAACM,SAA9C,EAAyD;AACzE,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD8D,GAAzD,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../../../src/components/Icon/Icon.tsx"],"sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\nimport { IconName, icons } from './components/index';\r\n\r\nexport { icons } from './components/index';\r\nexport type { IconName } from './components/index';\r\n\r\nexport type IconProps = React.SVGAttributes<SVGSVGElement> & {\r\n    /** Set what svg icon should be rendered */\r\n    name: IconName; // this dynamic type causes the type extraction for props to fail\r\n};\r\n\r\nexport const Icon = React.forwardRef(function Icon(props: IconProps, ref: React.Ref<SVGSVGElement>) {\r\n    const { name, ...otherProps } = props;\r\n    const Component = icons[name];\r\n    /* 24x24 _at the base body font_ - must be em so that they scale with font size - tailwind spacing uses rem */\r\n    const className = cn('inline-flex h-[1.715em] w-[1.715em]', props.className, {\r\n        'p-[3px]': props.className?.includes('rounded-full'),\r\n    });\r\n\r\n    return Component ? (\r\n        <Component {...otherProps} className={className} data-taco=\"icon\" focusable=\"false\" ref={ref} role=\"img\" />\r\n    ) : null;\r\n});\r\n"],"names":["Icon","React","forwardRef","props","ref","name","otherProps","Component","icons","className","cn","includes","focusable","role"],"mappings":";;;;;;;IAYaA,IAAI,gBAAGC,cAAK,CAACC,UAAN,CAAiB,SAASF,IAAT,CAAcG,KAAd,EAAgCC,GAAhC;;;AACjC,MAAQC,IAAR,GAAgCF,KAAhC,CAAQE,IAAR;AAAA,MAAiBC,UAAjB,iCAAgCH,KAAhC;;AACA,MAAMI,SAAS,GAAGC,KAAK,CAACH,IAAD,CAAvB;AACA;;AACA,MAAMI,SAAS,GAAGC,EAAE,CAAC,qCAAD,EAAwCP,KAAK,CAACM,SAA9C,EAAyD;AACzE,mCAAWN,KAAK,CAACM,SAAjB,qDAAW,iBAAiBE,QAAjB,CAA0B,cAA1B;AAD8D,GAAzD,CAApB;AAIA,SAAOJ,SAAS,GACZN,4BAAA,CAACM,SAAD,oBAAeD;AAAYG,IAAAA,SAAS,EAAEA;iBAAqB;AAAOG,IAAAA,SAAS,EAAC;AAAQR,IAAAA,GAAG,EAAEA;AAAKS,IAAAA,IAAI,EAAC;IAAnG,CADY,GAEZ,IAFJ;AAGH,CAXmB;;;;"}

package/dist/esm/components/IconButton/IconButton.js

@@ -1,15 +1,17 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
 import { Icon } from '../Icon/Icon.js';
 import { getButtonClasses, getAppearanceClasses, createButton } from '../Button/util.js';
 
-const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
-  const {
-    icon,
-    rounded = false,
-    ...otherProps
-  } = props;
-  const className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
+var _excluded = ["icon", "rounded"];
+var IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
+  var icon = props.icon,
+      _props$rounded = props.rounded,
+      rounded = _props$rounded === void 0 ? false : _props$rounded,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('w-8', getButtonClasses(), getAppearanceClasses(otherProps.appearance, true), {
     'rounded-full': rounded,
     rounded: !rounded,
     'cursor-not-allowed opacity-50': props.disabled,
@@ -20,13 +22,13 @@ const IconButton = /*#__PURE__*/forwardRef(function IconButton(props, ref) {
     return null;
   }
 
-  return createButton({ ...otherProps,
+  return createButton(_extends({}, otherProps, {
     children: createElement(Icon, {
       name: icon,
       className: "m-0 p-0"
     }),
     'data-taco': 'icon-button'
-  }, className, ref);
+  }), className, ref);
 });
 
 export { IconButton };

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

@@ -1 +1 @@
-{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as ButtonPrimitive from '../../primitives/Button';\nimport { Icon, IconName } from '../Icon/Icon';\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\nimport { Appearance } from '../../types';\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\n\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\n    /** Appearance will change the style of the button */\n    appearance?: Appearance;\n    /**\n     * Dialog component associated with the button, clicking the button will open the dialog.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated dialog when clicked.\n     */\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\n    /** Hanger component associated with the button. */\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\n    /** Set which icon should be rendered within button */\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\n    /** Menu component associated with the button. */\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\n    /**\n     * Popover component associated with the button, clicking the button will open the popover.\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\n     * the button should be only to open the associated popover when clicked.\n     */\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\n    /**\n     * Set whether the button is rounded.\n     * Default value is `false`\n     */\n    rounded?: boolean;\n    /** A tooltip to show when hovering over the button */\n    tooltip?: string;\n};\n\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\n    const { icon, rounded = false, ...otherProps } = props;\n\n    const className = cn(\n        'w-8',\n        getButtonClasses(),\n        getAppearanceClasses(otherProps.appearance, true),\n        {\n            'rounded-full': rounded,\n            rounded: !rounded,\n            'cursor-not-allowed opacity-50': props.disabled,\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\n        },\n        props.className\n    );\n\n    if (!icon) {\n        return null;\n    }\n\n    return createButton(\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\n        className,\n        ref\n    );\n});\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":";;;;;MAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA,OAAO,GAAG,KAAlB;AAAyB,OAAGC;AAA5B,MAA2CJ,KAAjD;AAEA,QAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;AACI,oBAAgBN,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCH,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACK,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOS,YAAY,CACf,EAAE,GAAGP,UAAL;AAAiBQ,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEZ;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CAA3B;AAAqE,iBAAa;AAAlF,GADe,EAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}
+{"version":3,"file":"IconButton.js","sources":["../../../../src/components/IconButton/IconButton.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as ButtonPrimitive from '../../primitives/Button';\r\nimport { Icon, IconName } from '../Icon/Icon';\r\nimport { getAppearanceClasses, getButtonClasses, createButton } from '../Button/util';\r\nimport { Appearance } from '../../types';\r\nimport { DialogProps, HangerProps, MenuProps, PopoverProps } from '../..';\r\n\r\nexport type IconButtonProps = Omit<ButtonPrimitive.ButtonProps, 'children'> & {\r\n    /** Appearance will change the style of the button */\r\n    appearance?: Appearance;\r\n    /**\r\n     * Dialog component associated with the button, clicking the button will open the dialog.\r\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n     * the button should be only to open the associated dialog when clicked.\r\n     */\r\n    dialog?: (props: Partial<DialogProps>) => JSX.Element;\r\n    /** Hanger component associated with the button. */\r\n    hanger?: (props: Partial<HangerProps>) => JSX.Element;\r\n    /** Set which icon should be rendered within button */\r\n    icon: IconName; // this dynamic type causes the type extraction for props to fail\r\n    /** Menu component associated with the button. */\r\n    menu?: (props: Partial<MenuProps>) => JSX.Element;\r\n    /**\r\n     * Popover component associated with the button, clicking the button will open the popover.\r\n     * *Note* that `onClick` event on button won't be handled, as in this case, the purpose of\r\n     * the button should be only to open the associated popover when clicked.\r\n     */\r\n    popover?: (props: Partial<PopoverProps>) => JSX.Element;\r\n    /**\r\n     * Set whether the button is rounded.\r\n     * Default value is `false`\r\n     */\r\n    rounded?: boolean;\r\n    /** A tooltip to show when hovering over the button */\r\n    tooltip?: string;\r\n};\r\n\r\nexport const IconButton = React.forwardRef(function IconButton(props: IconButtonProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const { icon, rounded = false, ...otherProps } = props;\r\n\r\n    const className = cn(\r\n        'w-8',\r\n        getButtonClasses(),\r\n        getAppearanceClasses(otherProps.appearance, true),\r\n        {\r\n            'rounded-full': rounded,\r\n            rounded: !rounded,\r\n            'cursor-not-allowed opacity-50': props.disabled,\r\n            'focus:yt-focus active:focus:yt-focus': !props.disabled,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    if (!icon) {\r\n        return null;\r\n    }\r\n\r\n    return createButton(\r\n        { ...otherProps, children: <Icon name={icon} className=\"m-0 p-0\" />, 'data-taco': 'icon-button' },\r\n        className,\r\n        ref\r\n    );\r\n});\r\n"],"names":["IconButton","React","props","ref","icon","rounded","otherProps","className","cn","getButtonClasses","getAppearanceClasses","appearance","disabled","createButton","children","Icon","name"],"mappings":";;;;;;;IAsCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MAAQC,IAAR,GAAiDF,KAAjD,CAAQE,IAAR;AAAA,uBAAiDF,KAAjD,CAAcG,OAAd;AAAA,MAAcA,OAAd,+BAAwB,KAAxB;AAAA,MAAkCC,UAAlC,iCAAiDJ,KAAjD;;AAEA,MAAMK,SAAS,GAAGC,EAAE,CAChB,KADgB,EAEhBC,gBAAgB,EAFA,EAGhBC,oBAAoB,CAACJ,UAAU,CAACK,UAAZ,EAAwB,IAAxB,CAHJ,EAIhB;AACI,oBAAgBN,OADpB;AAEIA,IAAAA,OAAO,EAAE,CAACA,OAFd;AAGI,qCAAiCH,KAAK,CAACU,QAH3C;AAII,4CAAwC,CAACV,KAAK,CAACU;AAJnD,GAJgB,EAUhBV,KAAK,CAACK,SAVU,CAApB;;AAaA,MAAI,CAACH,IAAL,EAAW;AACP,WAAO,IAAP;AACH;;AAED,SAAOS,YAAY,cACVP,UADU;AACEQ,IAAAA,QAAQ,EAAEb,aAAA,CAACc,IAAD;AAAMC,MAAAA,IAAI,EAAEZ;AAAMG,MAAAA,SAAS,EAAC;KAA5B,CADZ;AACsD,iBAAa;AADnE,MAEfA,SAFe,EAGfJ,GAHe,CAAnB;AAKH,CAzByB;;;;"}