@economic/taco 1.1.7 → 1.1.8

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

@@ -0,0 +1,75 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Provider.js';
+import { Calendar } from '../Calendar/Calendar.js';
+import { Input } from '../Input/Input.js';
+import { useDatepicker } from './useDatepicker.js';
+import { Popover } from '../Popover/Popover.js';
+
+var _excluded = ["className", "onReset", "style", "shortcuts", "shortcutsText"];
+var Datepicker = /*#__PURE__*/forwardRef(function Datepicker(props, ref) {
+  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",
+    style: style
+  }, createElement(Input, Object.assign({}, input, {
+    button: createElement(Popover, null, createElement(Popover.Trigger, null, createElement(IconButton, {
+      "aria-label": texts.datepicker.expand,
+      disabled: input.disabled || input.readOnly,
+      icon: "calendar"
+    })), createElement(Popover.Content, null, function (_ref) {
+      var close = _ref.close;
+      return createElement("div", {
+        className: "-m-3 flex"
+      }, createElement(Calendar, Object.assign({}, calendar, {
+        onChange: function onChange(date, event) {
+          calendar.onChange(date, event);
+          close();
+        },
+        tabIndex: -1
+      })), shortcuts && createElement("div", {
+        className: "border-grey-dark flex flex-col border-l"
+      }, createElement("span", {
+        className: "m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold"
+      }, 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: "hover:bg-grey-light flex w-full items-start px-4 py-1 text-xs",
+          onClick: function onClick(event) {
+            event.persist();
+            shortcut.onClick(event);
+            close();
+          }
+        }, shortcut.text));
+      })), handleReset && createElement("button", {
+        className: "text-blue hover:text-blue-light my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs",
+        onClick: function onClick(event) {
+          event.persist();
+          handleReset(event);
+          close();
+        }
+      }, texts.datepicker.clear)));
+    }))
+  })));
+});
+
+export { Datepicker };
+//# sourceMappingURL=Datepicker.js.map

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

@@ -0,0 +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=\"-m-3 flex\">\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-grey-dark flex flex-col border-l\">\r\n                                            <span className=\"m-4 mb-3 flex h-8 w-32 items-center text-xs font-semibold\">\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=\"hover:bg-grey-light flex w-full items-start px-4 py-1 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 my-4 mx-auto mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs\"\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":";;;;;;;;;;;IAuCaA,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;EACvC,IAAmBC,iBAAnB,GAA+GF,KAA/G,CAAQG,SAAR;MAA+CC,WAA/C,GAA+GJ,KAA/G,CAAsCK,OAAtC;MAA4DC,KAA5D,GAA+GN,KAA/G,CAA4DM,KAA5D;MAAmEC,SAAnE,GAA+GP,KAA/G,CAAmEO,SAAnE;MAA8EC,aAA9E,GAA+GR,KAA/G,CAA8EQ,aAA9E;MAAgGC,UAAhG,iCAA+GT,KAA/G;;EACA,qBAA4BU,aAAa,CAACD,UAAD,EAAaR,GAAb,CAAzC;MAAQU,QAAR,kBAAQA,QAAR;MAAkBC,KAAlB,kBAAkBA,KAAlB;;EACA,uBAAkBC,eAAe,EAAjC;MAAQC,KAAR,oBAAQA,KAAR;;EACA,IAAMX,SAAS,GAAGY,EAAE,CAAC,2CAAD,EAA8Cb,iBAA9C,CAApB;EAEA,OACIH,aAAA,OAAA;IAAMI,SAAS,EAAEA;iBAAqB;IAAaG,KAAK,EAAEA;GAA1D,EACIP,aAAA,CAACiB,KAAD,oBACQJ;IACJK,MAAM,EACFlB,aAAA,CAACmB,OAAD,MAAA,EACInB,aAAA,CAACmB,OAAO,CAACC,OAAT,MAAA,EACIpB,aAAA,CAACqB,UAAD;oBACgBN,KAAK,CAACO,UAAN,CAAiBC;MAC7BC,QAAQ,EAAEX,KAAK,CAACW,QAAN,IAAkBX,KAAK,CAACY;MAClCC,IAAI,EAAC;KAHT,CADJ,CADJ,EAQI1B,aAAA,CAACmB,OAAO,CAACQ,OAAT,MAAA,EACK;MAAA,IAAGC,KAAH,QAAGA,KAAH;MAAA,OACG5B,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,CAAC6B,QAAD,oBACQjB;QACJkB,QAAQ,EAAE,kBAACC,IAAD,EAAaC,KAAb;UACNpB,QAAQ,CAACkB,QAAT,CAAkBC,IAAlB,EAAwBC,KAAxB;UACAJ,KAAK;;QAETK,QAAQ,EAAE,CAAC;QANf,CADJ,EASKzB,SAAS,IACNR,aAAA,MAAA;QAAKI,SAAS,EAAC;OAAf,EACIJ,aAAA,OAAA;QAAMI,SAAS,EAAC;OAAhB,EACKK,aADL,aACKA,aADL,cACKA,aADL,GACsBM,KAAK,CAACO,UAAN,CAAiBd,SADvC,CADJ,EAIIR,aAAA,KAAA,MAAA,EACKQ,SAAS,CAAC0B,GAAV,CAAc,UAACC,QAAD,EAAWC,CAAX;QAAA,OACXpC,aAAA,KAAA;UAAIqC,GAAG,EAAED;SAAT,EACIpC,aAAA,SAAA;UACII,SAAS,EAAC;UACVkC,OAAO,EAAE,iBAAAN,KAAK;YACVA,KAAK,CAACO,OAAN;YACAJ,QAAQ,CAACG,OAAT,CAAiBN,KAAjB;YACAJ,KAAK;;SALb,EAQKO,QAAQ,CAACK,IARd,CADJ,CADW;OAAd,CADL,CAJJ,EAoBKnC,WAAW,IACRL,aAAA,SAAA;QACII,SAAS,EAAC;QACVkC,OAAO,EAAE,iBAAAN,KAAK;UACVA,KAAK,CAACO,OAAN;UACAlC,WAAW,CAAC2B,KAAD,CAAX;UACAJ,KAAK;;OALb,EAQKb,KAAK,CAACO,UAAN,CAAiBmB,KARtB,CArBR,CAVR,CADH;KADL,CARJ;IAHR,CADJ,CADJ;AAmEH,CAzEyB;;;;"}

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

@@ -0,0 +1,88 @@
+import { useState, useEffect } from 'react';
+import { useLocalization } from '../Provider/Provider.js';
+import { useProxiedRef } from '../../utils/hooks/useProxiedRef.js';
+import { setInputValueByRef } from '../../utils/input.js';
+import { format, parseFromCustomString } from '../../utils/date.js';
+
+const useDatepicker = ({
+  defaultValue: _,
+  calendar,
+  onBlur,
+  onChange,
+  value,
+  ...props
+}, ref) => {
+  const inputRef = useProxiedRef(ref);
+  const {
+    formatting
+  } = useLocalization();
+  const [internalValue, setInternalValue] = useState(value ? format(value, formatting.date) : ''); // update internal value if it changed 'externally'
+
+  useEffect(() => {
+    if (value) {
+      const formattedValue = format(value, formatting.date);
+
+      if (formattedValue !== internalValue) {
+        setInternalValue(formattedValue);
+      }
+    } else {
+      setInternalValue('');
+    }
+  }, [value]); // event handlers
+
+  const handleInputBlur = event => {
+    event.persist();
+    const valueAsDate = parseFromCustomString(event.target.value);
+    const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
+    event.target.value = formattedValue;
+
+    if (onChange) {
+      event.detail = valueAsDate;
+      onChange(event);
+    } else {
+      // update the internal value to use the formatted date
+      setInternalValue(formattedValue);
+    }
+
+    if (onBlur) {
+      onBlur(event);
+    }
+  };
+
+  const handleInputChange = event => {
+    setInternalValue(event.target.value);
+  };
+
+  const handleChange = date => {
+    setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
+  };
+
+  const handleKeyDown = event => {
+    if (event.key === 'Enter') {
+      event.target.dispatchEvent(new Event('focusout', {
+        bubbles: true
+      }));
+    }
+  };
+
+  const inputProps = { ...props,
+    autoComplete: 'off',
+    onBlur: handleInputBlur,
+    onChange: handleInputChange,
+    onKeyDown: handleKeyDown,
+    ref: inputRef,
+    type: 'text',
+    value: internalValue
+  };
+  const calendarProps = { ...calendar,
+    onChange: handleChange,
+    value
+  };
+  return {
+    input: inputProps,
+    calendar: calendarProps
+  };
+};
+
+export { useDatepicker };
+//# sourceMappingURL=useDatepicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDatepicker.js","sources":["../../../../src/components/Datepicker/useDatepicker.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { parseFromCustomString, format } from '../../utils/date';\r\nimport { useLocalization } from '../Provider/Provider';\r\nimport { setInputValueByRef } from '../../utils/input';\r\nimport { useProxiedRef } from '../../utils/hooks/useProxiedRef';\r\nimport { DatepickerProps } from './Datepicker';\r\nimport { CalendarProps } from '../Calendar/Calendar';\r\n\r\ntype InputProps = React.InputHTMLAttributes<HTMLInputElement> & { ref: React.RefObject<HTMLInputElement> };\r\n\r\ntype useDatepicker = React.HTMLAttributes<HTMLDivElement> & {\r\n    calendar: CalendarProps;\r\n    input: InputProps;\r\n};\r\n\r\nexport const useDatepicker = (\r\n    { defaultValue: _, calendar, onBlur, onChange, value, ...props }: DatepickerProps,\r\n    ref: React.Ref<HTMLInputElement>\r\n): useDatepicker => {\r\n    const inputRef = useProxiedRef<HTMLInputElement>(ref);\r\n    const { formatting } = useLocalization();\r\n    const [internalValue, setInternalValue] = React.useState(value ? format(value, formatting.date) : '');\r\n\r\n    // update internal value if it changed 'externally'\r\n    React.useEffect(() => {\r\n        if (value) {\r\n            const formattedValue = format(value, formatting.date);\r\n\r\n            if (formattedValue !== internalValue) {\r\n                setInternalValue(formattedValue);\r\n            }\r\n        } else {\r\n            setInternalValue('');\r\n        }\r\n    }, [value]);\r\n\r\n    // event handlers\r\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>): void => {\r\n        event.persist();\r\n\r\n        const valueAsDate = parseFromCustomString(event.target.value);\r\n        const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';\r\n\r\n        event.target.value = formattedValue;\r\n\r\n        if (onChange) {\r\n            (event as any).detail = valueAsDate;\r\n            onChange(event);\r\n        } else {\r\n            // update the internal value to use the formatted date\r\n            setInternalValue(formattedValue);\r\n        }\r\n\r\n        if (onBlur) {\r\n            onBlur(event);\r\n        }\r\n    };\r\n\r\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\r\n        setInternalValue(event.target.value);\r\n    };\r\n\r\n    const handleChange = date => {\r\n        setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');\r\n    };\r\n\r\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\r\n        if (event.key === 'Enter') {\r\n            event.target.dispatchEvent(new Event('focusout', { bubbles: true }));\r\n        }\r\n    };\r\n\r\n    const inputProps: InputProps = {\r\n        ...props,\r\n        autoComplete: 'off',\r\n        onBlur: handleInputBlur,\r\n        onChange: handleInputChange,\r\n        onKeyDown: handleKeyDown,\r\n        ref: inputRef,\r\n        type: 'text',\r\n        value: internalValue,\r\n    };\r\n\r\n    const calendarProps: CalendarProps = {\r\n        ...calendar,\r\n        onChange: handleChange,\r\n        value,\r\n    };\r\n\r\n    return {\r\n        input: inputProps,\r\n        calendar: calendarProps,\r\n    };\r\n};\r\n"],"names":["useDatepicker","defaultValue","_","calendar","onBlur","onChange","value","props","ref","inputRef","useProxiedRef","formatting","useLocalization","internalValue","setInternalValue","React","format","date","formattedValue","handleInputBlur","event","persist","valueAsDate","parseFromCustomString","target","detail","handleInputChange","handleChange","setInputValueByRef","current","handleKeyDown","key","dispatchEvent","Event","bubbles","inputProps","autoComplete","onKeyDown","type","calendarProps","input"],"mappings":";;;;;;MAeaA,aAAa,GAAG,CACzB;EAAEC,YAAY,EAAEC,CAAhB;EAAmBC,QAAnB;EAA6BC,MAA7B;EAAqCC,QAArC;EAA+CC,KAA/C;EAAsD,GAAGC;AAAzD,CADyB,EAEzBC,GAFyB;EAIzB,MAAMC,QAAQ,GAAGC,aAAa,CAAmBF,GAAnB,CAA9B;EACA,MAAM;IAAEG;MAAeC,eAAe,EAAtC;EACA,MAAM,CAACC,aAAD,EAAgBC,gBAAhB,IAAoCC,QAAA,CAAeT,KAAK,GAAGU,MAAM,CAACV,KAAD,EAAQK,UAAU,CAACM,IAAnB,CAAT,GAAoC,EAAxD,CAA1C;;EAGAF,SAAA,CAAgB;IACZ,IAAIT,KAAJ,EAAW;MACP,MAAMY,cAAc,GAAGF,MAAM,CAACV,KAAD,EAAQK,UAAU,CAACM,IAAnB,CAA7B;;MAEA,IAAIC,cAAc,KAAKL,aAAvB,EAAsC;QAClCC,gBAAgB,CAACI,cAAD,CAAhB;;KAJR,MAMO;MACHJ,gBAAgB,CAAC,EAAD,CAAhB;;GARR,EAUG,CAACR,KAAD,CAVH;;EAaA,MAAMa,eAAe,GAAIC,KAAD;IACpBA,KAAK,CAACC,OAAN;IAEA,MAAMC,WAAW,GAAGC,qBAAqB,CAACH,KAAK,CAACI,MAAN,CAAalB,KAAd,CAAzC;IACA,MAAMY,cAAc,GAAGI,WAAW,GAAGN,MAAM,CAACM,WAAD,CAAN,IAAuB,EAA1B,GAA+B,EAAjE;IAEAF,KAAK,CAACI,MAAN,CAAalB,KAAb,GAAqBY,cAArB;;IAEA,IAAIb,QAAJ,EAAc;MACTe,KAAa,CAACK,MAAd,GAAuBH,WAAvB;MACDjB,QAAQ,CAACe,KAAD,CAAR;KAFJ,MAGO;;MAEHN,gBAAgB,CAACI,cAAD,CAAhB;;;IAGJ,IAAId,MAAJ,EAAY;MACRA,MAAM,CAACgB,KAAD,CAAN;;GAjBR;;EAqBA,MAAMM,iBAAiB,GAAIN,KAAD;IACtBN,gBAAgB,CAACM,KAAK,CAACI,MAAN,CAAalB,KAAd,CAAhB;GADJ;;EAIA,MAAMqB,YAAY,GAAGV,IAAI;IACrBW,kBAAkB,CAACnB,QAAQ,CAACoB,OAAV,EAAmBb,MAAM,CAACC,IAAD,EAAON,UAAU,CAACM,IAAlB,CAAzB,EAAkD,UAAlD,CAAlB;GADJ;;EAIA,MAAMa,aAAa,GAAIV,KAAD;IAClB,IAAIA,KAAK,CAACW,GAAN,KAAc,OAAlB,EAA2B;MACvBX,KAAK,CAACI,MAAN,CAAaQ,aAAb,CAA2B,IAAIC,KAAJ,CAAU,UAAV,EAAsB;QAAEC,OAAO,EAAE;OAAjC,CAA3B;;GAFR;;EAMA,MAAMC,UAAU,GAAe,EAC3B,GAAG5B,KADwB;IAE3B6B,YAAY,EAAE,KAFa;IAG3BhC,MAAM,EAAEe,eAHmB;IAI3Bd,QAAQ,EAAEqB,iBAJiB;IAK3BW,SAAS,EAAEP,aALgB;IAM3BtB,GAAG,EAAEC,QANsB;IAO3B6B,IAAI,EAAE,MAPqB;IAQ3BhC,KAAK,EAAEO;GARX;EAWA,MAAM0B,aAAa,GAAkB,EACjC,GAAGpC,QAD8B;IAEjCE,QAAQ,EAAEsB,YAFuB;IAGjCrB;GAHJ;EAMA,OAAO;IACHkC,KAAK,EAAEL,UADJ;IAEHhC,QAAQ,EAAEoC;GAFd;AAIH;;;;"}

package/dist/esm/components/Dialog/Context.js

@@ -0,0 +1,26 @@
+import { createContext, useContext } from 'react';
+
+/* eslint-disable @typescript-eslint/no-empty-function */
+const DialogContext = /*#__PURE__*/createContext({
+  closeOnEscape: true,
+  draggable: false,
+  drawer: {
+    open: false,
+    toggle: () => {}
+  },
+  elements: {
+    drawer: undefined,
+    extra: undefined
+  },
+  onClose: () => {},
+  props: {},
+  ref: null,
+  showCloseButton: true,
+  size: 'sm'
+});
+const useCurrentDialog = () => {
+  return useContext(DialogContext);
+};
+
+export { DialogContext, useCurrentDialog };
+//# sourceMappingURL=Context.js.map

package/dist/esm/components/Dialog/Context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Context.js","sources":["../../../../src/components/Dialog/Context.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\r\nimport * as React from 'react';\r\nimport { DialogSize } from './types';\r\n\r\nexport type DialogContext = {\r\n    closeOnEscape: boolean;\r\n    draggable: boolean;\r\n    drawer: {\r\n        open: boolean;\r\n        toggle: () => void;\r\n    };\r\n    elements: {\r\n        drawer?: React.ReactNode;\r\n        extra?: React.ReactNode;\r\n    };\r\n    onClose?: () => void;\r\n    props: {};\r\n    ref: React.Ref<HTMLElement>;\r\n    showCloseButton: boolean;\r\n    size: DialogSize;\r\n};\r\n\r\nexport const DialogContext = React.createContext<DialogContext>({\r\n    closeOnEscape: true,\r\n    draggable: false,\r\n    drawer: {\r\n        open: false,\r\n        toggle: () => {},\r\n    },\r\n    elements: {\r\n        drawer: undefined,\r\n        extra: undefined,\r\n    },\r\n    onClose: () => {},\r\n    props: {},\r\n    ref: null,\r\n    showCloseButton: true,\r\n    size: 'sm',\r\n});\r\n\r\nexport const useCurrentDialog = () => {\r\n    return React.useContext(DialogContext);\r\n};\r\n"],"names":["DialogContext","React","closeOnEscape","draggable","drawer","open","toggle","elements","undefined","extra","onClose","props","ref","showCloseButton","size","useCurrentDialog"],"mappings":";;AAAA;MAsBaA,aAAa,gBAAGC,aAAA,CAAmC;EAC5DC,aAAa,EAAE,IAD6C;EAE5DC,SAAS,EAAE,KAFiD;EAG5DC,MAAM,EAAE;IACJC,IAAI,EAAE,KADF;IAEJC,MAAM,EAAE;GALgD;EAO5DC,QAAQ,EAAE;IACNH,MAAM,EAAEI,SADF;IAENC,KAAK,EAAED;GATiD;EAW5DE,OAAO,EAAE,QAXmD;EAY5DC,KAAK,EAAE,EAZqD;EAa5DC,GAAG,EAAE,IAbuD;EAc5DC,eAAe,EAAE,IAd2C;EAe5DC,IAAI,EAAE;AAfsD,CAAnC;MAkBhBC,gBAAgB,GAAG;EAC5B,OAAOd,UAAA,CAAiBD,aAAjB,CAAP;AACH;;;;"}

package/dist/esm/components/Dialog/Dialog.js

@@ -0,0 +1,98 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, useMemo, Children, useState, createElement } from 'react';
+import { Root } from '@radix-ui/react-dialog';
+import { DialogContext } from './Context.js';
+import { Trigger } from './components/Trigger.js';
+import { Content, Title, Footer, Close } from './components/Content.js';
+import { Drawer } from './components/Drawer.js';
+import { Extra } from './components/Extra.js';
+
+var _excluded = ["children", "closeOnEscape", "defaultOpen", "draggable", "onChange", "onClose", "open", "showCloseButton", "size", "trigger"];
+
+var useSeparatedChildren = function useSeparatedChildren(initialChildren) {
+  return useMemo(function () {
+    var children = [];
+    var drawer;
+    var extra;
+    Children.toArray(initialChildren).forEach(function (child) {
+      var _child$type, _child$type2;
+
+      if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === Drawer.displayName) {
+        drawer = child;
+      } else if (((_child$type2 = child.type) === null || _child$type2 === void 0 ? void 0 : _child$type2.displayName) === Extra.displayName) {
+        extra = child;
+      } else {
+        children.push(child);
+      }
+    });
+    return [children, drawer, extra];
+  }, [initialChildren]);
+};
+
+var Dialog = /*#__PURE__*/forwardRef(function Dialog(props, ref) {
+  var initialChildren = props.children,
+      _props$closeOnEscape = props.closeOnEscape,
+      closeOnEscape = _props$closeOnEscape === void 0 ? true : _props$closeOnEscape,
+      defaultOpen = props.defaultOpen,
+      _props$draggable = props.draggable,
+      draggable = _props$draggable === void 0 ? false : _props$draggable,
+      onChange = props.onChange,
+      onClose = props.onClose,
+      open = props.open,
+      _props$showCloseButto = props.showCloseButton,
+      showCloseButton = _props$showCloseButto === void 0 ? true : _props$showCloseButto,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'sm' : _props$size,
+      trigger = props.trigger,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var _useSeparatedChildren = useSeparatedChildren(initialChildren),
+      children = _useSeparatedChildren[0],
+      drawer = _useSeparatedChildren[1],
+      extra = _useSeparatedChildren[2];
+
+  var _React$useState = useState(false),
+      drawerOpen = _React$useState[0],
+      setDrawerOpen = _React$useState[1];
+
+  var context = useMemo(function () {
+    return {
+      closeOnEscape: closeOnEscape,
+      draggable: draggable,
+      drawer: {
+        open: drawerOpen,
+        toggle: function toggle() {
+          return setDrawerOpen(function (isDrawerOpen) {
+            return !isDrawerOpen;
+          });
+        }
+      },
+      elements: {
+        drawer: drawer,
+        extra: extra
+      },
+      onClose: onClose,
+      props: otherProps,
+      showCloseButton: showCloseButton,
+      size: size,
+      ref: ref
+    };
+  }, [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]);
+  return createElement(DialogContext.Provider, {
+    value: context
+  }, createElement(Root, {
+    defaultOpen: defaultOpen,
+    open: open,
+    onOpenChange: onChange
+  }, trigger && createElement(Trigger, null, trigger), children));
+});
+Dialog.Trigger = Trigger;
+Dialog.Content = Content;
+Dialog.Title = Title;
+Dialog.Footer = Footer;
+Dialog.Extra = Extra;
+Dialog.Drawer = Drawer;
+Dialog.Close = Close;
+
+export { Dialog };
+//# sourceMappingURL=Dialog.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../../src/components/Dialog/Dialog.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport './Dialog.css';\r\nimport { DialogTriggerProps, Trigger } from './components/Trigger';\r\nimport {\r\n    Content,\r\n    Title,\r\n    Footer,\r\n    Close,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogTitleProps,\r\n    DialogFooterProps,\r\n    DialogCloseProps,\r\n} from './components/Content';\r\nimport { DialogDrawerProps, DialogDrawerRenderProps, Drawer } from './components/Drawer';\r\nimport { DialogExtraProps, Extra } from './components/Extra';\r\nimport { DialogContext } from './Context';\r\nimport { DialogSize } from './types';\r\n\r\nexport {\r\n    DialogCloseProps,\r\n    DialogContentDrawerRenderProps,\r\n    DialogContentProps,\r\n    DialogContentRenderProps,\r\n    DialogDrawerProps,\r\n    DialogDrawerRenderProps,\r\n    DialogFooterProps,\r\n    DialogSize,\r\n    DialogTitleProps,\r\n};\r\n\r\nexport type DialogTexts = {\r\n    /**\r\n     * Aria-label for close icon button in dialog.\r\n     * To read more about how to provide the text, see [Provider](component:provider) component\r\n     */\r\n    close: string;\r\n    drag: string;\r\n};\r\n\r\nexport type DialogProps = {\r\n    children: React.ReactNode | React.ReactNode[];\r\n    /** When `true`, pressing escape will close the dialog */\r\n    closeOnEscape?: boolean;\r\n    /** Set whether the dialog is open by default or not, use when not providing a trigger  */\r\n    defaultOpen?: boolean;\r\n    /** Allows dragging the dialog around the screen (window constrained) */\r\n    draggable?: boolean;\r\n    /** Handler called when dialog closes by user interaction */\r\n    onClose?: () => void;\r\n    /** Called when the dialog opens or closes, must be used in conjunction with open  */\r\n    onChange?: (open: boolean) => void;\r\n    /** Control the open state of the dialog from outside the component  */\r\n    open?: boolean;\r\n    /** Shows the close icon button of the dialog */\r\n    showCloseButton?: boolean;\r\n    /** Size of the dialog. This is the recommended way to set a size for dialog component. */\r\n    size?: DialogSize;\r\n    /** A trigger to be used for the dialog, should not be set if `children` already contains a trigger */\r\n    trigger?: JSX.Element;\r\n};\r\n\r\nconst useSeparatedChildren = initialChildren => {\r\n    return React.useMemo(() => {\r\n        const children: any[] = [];\r\n        let drawer;\r\n        let extra;\r\n\r\n        React.Children.toArray(initialChildren).forEach((child: any) => {\r\n            if (child.type?.displayName === Drawer.displayName) {\r\n                drawer = child;\r\n            } else if (child.type?.displayName === Extra.displayName) {\r\n                extra = child;\r\n            } else {\r\n                children.push(child);\r\n            }\r\n        });\r\n\r\n        return [children, drawer, extra];\r\n    }, [initialChildren]);\r\n};\r\n\r\nexport type ForwardedDialogWithStatics = React.ForwardRefExoticComponent<DialogProps & React.RefAttributes<HTMLElement>> & {\r\n    Trigger: React.ForwardRefExoticComponent<DialogTriggerProps & React.RefAttributes<HTMLButtonElement>>;\r\n    Content: React.ForwardRefExoticComponent<DialogContentProps & React.RefAttributes<HTMLDivElement>>;\r\n    Title: React.ForwardRefExoticComponent<DialogTitleProps & React.RefAttributes<HTMLHeadingElement>>;\r\n    Footer: React.ForwardRefExoticComponent<DialogFooterProps & React.RefAttributes<HTMLDivElement>>;\r\n    Extra: React.ForwardRefExoticComponent<DialogExtraProps & React.RefAttributes<HTMLDivElement>>;\r\n    Drawer: React.ForwardRefExoticComponent<DialogDrawerProps & React.RefAttributes<HTMLDivElement>>;\r\n    Close: React.ForwardRefExoticComponent<DialogCloseProps & React.RefAttributes<HTMLButtonElement>>;\r\n};\r\n\r\nexport const Dialog = React.forwardRef(function Dialog(props: DialogProps, ref: React.Ref<HTMLElement>) {\r\n    const {\r\n        children: initialChildren,\r\n        closeOnEscape = true,\r\n        defaultOpen,\r\n        draggable = false,\r\n        onChange,\r\n        onClose,\r\n        open,\r\n        showCloseButton = true,\r\n        size = 'sm',\r\n        trigger,\r\n        ...otherProps\r\n    } = props;\r\n    const [children, drawer, extra] = useSeparatedChildren(initialChildren);\r\n    const [drawerOpen, setDrawerOpen] = React.useState(false);\r\n\r\n    const context = React.useMemo(\r\n        () => ({\r\n            closeOnEscape,\r\n            draggable,\r\n            drawer: {\r\n                open: drawerOpen,\r\n                toggle: () => setDrawerOpen(isDrawerOpen => !isDrawerOpen),\r\n            },\r\n            elements: {\r\n                drawer,\r\n                extra,\r\n            },\r\n            onClose,\r\n            props: otherProps,\r\n            showCloseButton,\r\n            size,\r\n            ref,\r\n        }),\r\n        [closeOnEscape, drawerOpen, draggable, drawer, extra, open, otherProps, showCloseButton]\r\n    );\r\n\r\n    return (\r\n        <DialogContext.Provider value={context}>\r\n            <DialogPrimitive.Root defaultOpen={defaultOpen} open={open} onOpenChange={onChange}>\r\n                {trigger && <Trigger>{trigger}</Trigger>}\r\n                {children}\r\n            </DialogPrimitive.Root>\r\n        </DialogContext.Provider>\r\n    );\r\n}) as ForwardedDialogWithStatics;\r\n\r\nDialog.Trigger = Trigger;\r\nDialog.Content = Content;\r\nDialog.Title = Title;\r\nDialog.Footer = Footer;\r\nDialog.Extra = Extra;\r\nDialog.Drawer = Drawer;\r\nDialog.Close = Close;\r\n"],"names":["useSeparatedChildren","initialChildren","React","children","drawer","extra","toArray","forEach","child","type","displayName","Drawer","Extra","push","Dialog","props","ref","closeOnEscape","defaultOpen","draggable","onChange","onClose","open","showCloseButton","size","trigger","otherProps","drawerOpen","setDrawerOpen","context","toggle","isDrawerOpen","elements","DialogContext","Provider","value","DialogPrimitive","onOpenChange","Trigger","Content","Title","Footer","Close"],"mappings":"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"}

package/dist/esm/components/Dialog/components/Content.js

@@ -0,0 +1,135 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Provider.js';
+import { useProxiedRef } from '../../../utils/hooks/useProxiedRef.js';
+import { Title as Title$1, Close as Close$1, Portal, Overlay, Content as Content$1 } from '@radix-ui/react-dialog';
+import { useCurrentDialog } from '../Context.js';
+import { useDraggable } from '../../../utils/hooks/useDraggable.js';
+import { useCurrentMenu } from '../../Menu/Context.js';
+
+const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
+  const className = cn('text-center', props.className);
+  return createElement(Title$1, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const Footer = /*#__PURE__*/forwardRef(function DialogFooter(props, ref) {
+  const className = cn('mt-8 flex justify-end', props.className);
+  return createElement("div", Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }), props.children);
+});
+const Close = /*#__PURE__*/forwardRef(function DialogClose(props, ref) {
+  const dialog = useCurrentDialog();
+  return createElement(Close$1, Object.assign({
+    onClick: dialog.onClose
+  }, props, {
+    ref: ref,
+    asChild: true
+  }));
+});
+const RenderPropWrapper = /*#__PURE__*/forwardRef(function RenderPropWrapper({
+  children,
+  onClick,
+  renderProps
+}, ref) {
+  const close = () => {
+    onClick(new CustomEvent('close'));
+  };
+
+  return children({
+    close,
+    ref,
+    ...renderProps
+  });
+});
+const Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
+  const dialog = useCurrentDialog();
+  const internalRef = useProxiedRef(ref);
+  const {
+    position,
+    handleProps: dragHandleProps
+  } = useDraggable(internalRef);
+  const {
+    texts
+  } = useLocalization(); // if the dialog was opened by a menu, we need to close the menu when the dialog closes
+  // the menu is still open (and mounted) because it is the trigger for the dialog
+
+  const menu = useCurrentMenu();
+  let handleCloseAutoFocus;
+
+  if (menu) {
+    handleCloseAutoFocus = () => menu.close();
+  }
+
+  const className = cn('bg-white rounded relative mt-16 mx-auto animate-[fade-in_150ms] z-[997]', {
+    'w-128 text-center justify-center': dialog.size === 'dialog',
+    'w-xs': dialog.size === 'xs',
+    'w-sm': dialog.size === 'sm',
+    'w-md': dialog.size === 'md',
+    'w-lg': dialog.size === 'lg'
+  });
+  const containerClassName = cn('bg-white p-6 rounded relative z-[999]', 'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]', {
+    'rounded-b-none': !!dialog.elements.extra
+  }, props.className);
+
+  const handleEscapeKeyDown = event => {
+    if (!dialog.closeOnEscape) {
+      event.preventDefault();
+    } else if (dialog.onClose) {
+      dialog.onClose();
+    }
+  }; // the chosen behaviour in taco is that outside clicks do not close the dialog
+
+
+  const handleInteractOutside = event => event.preventDefault();
+
+  let output;
+
+  if (typeof props.children === 'function') {
+    output = createElement(Close$1, {
+      asChild: true
+    }, createElement(RenderPropWrapper, {
+      renderProps: {
+        drawer: dialog.drawer
+      }
+    }, props.children));
+  } else {
+    output = props.children;
+  }
+
+  return createElement(Portal, null, createElement(Overlay, {
+    asChild: true
+  }, createElement(Backdrop, null, createElement(Content$1, Object.assign({}, props, {
+    className: className,
+    onEscapeKeyDown: handleEscapeKeyDown,
+    onInteractOutside: handleInteractOutside,
+    onCloseAutoFocus: handleCloseAutoFocus,
+    ref: ref,
+    style: { ...props.style,
+      left: dialog.draggable ? `${position.x}px` : undefined,
+      top: dialog.draggable ? `${position.y}px` : undefined
+    }
+  }), createElement("div", {
+    className: containerClassName,
+    "data-taco": "dialog"
+  }, output, dialog.draggable && createElement("div", Object.assign({}, dragHandleProps, {
+    "aria-label": texts.dialog.drag,
+    className: "yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center"
+  })), dialog.showCloseButton ? createElement(Close$1, {
+    onClick: dialog.onClose,
+    asChild: true
+  }, createElement(IconButton, {
+    appearance: "discrete",
+    "aria-label": texts.dialog.close,
+    className: "absolute top-0 right-0 mt-2 mr-2",
+    icon: "close"
+  })) : null), dialog.elements.drawer, dialog.elements.extra))));
+});
+
+export { Close, Content, Footer, Title };
+//# sourceMappingURL=Content.js.map

package/dist/esm/components/Dialog/components/Content.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Content.js","sources":["../../../../../src/components/Dialog/components/Content.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport type { DialogContentProps as DialogPrimitiveContentProps } from '@radix-ui/react-dialog';\r\nimport { useProxiedRef } from '../../../utils/hooks/useProxiedRef';\r\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\r\nimport { useCurrentMenu } from '../../Menu/Context';\r\nimport { DialogContext, useCurrentDialog } from '../Context';\r\nimport { useLocalization } from '../../Provider/Provider';\r\nimport { IconButton } from '../../IconButton/IconButton';\r\nimport { Backdrop } from '../../Backdrop/Backdrop';\r\n\r\nexport type DialogContentDrawerRenderProps = DialogContext['drawer'];\r\n\r\nexport type DialogContentRenderProps = {\r\n    close: () => void;\r\n    drawer?: DialogContentDrawerRenderProps;\r\n};\r\n\r\nexport type DialogTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\r\nexport const Title = React.forwardRef(function DialogTitle(props: DialogTitleProps, ref: React.Ref<HTMLHeadingElement>) {\r\n    const className = cn('text-center', props.className);\r\n    return <DialogPrimitive.Title {...props} className={className} ref={ref} />;\r\n});\r\n\r\nexport type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>;\r\nexport const Footer = React.forwardRef(function DialogFooter(props: DialogFooterProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn('mt-8 flex justify-end', props.className);\r\n    return (\r\n        <div {...props} className={className} ref={ref}>\r\n            {props.children}\r\n        </div>\r\n    );\r\n});\r\n\r\nexport type DialogCloseProps = React.HTMLAttributes<HTMLButtonElement>;\r\n\r\nexport const Close = React.forwardRef(function DialogClose(props: DialogCloseProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const dialog = useCurrentDialog();\r\n\r\n    return <DialogPrimitive.Close onClick={dialog.onClose} {...props} ref={ref} asChild />;\r\n});\r\n\r\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\r\n    const close = () => {\r\n        onClick(new CustomEvent('close'));\r\n    };\r\n\r\n    return children({ close, ref, ...renderProps });\r\n});\r\n\r\nexport type DialogContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\r\n    /** An accessible label to be announced when the dialog is opened */\r\n    'aria-label': string;\r\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);\r\n};\r\nexport const Content = React.forwardRef(function DialogContent(props: DialogContentProps, ref: React.Ref<HTMLDivElement>) {\r\n    const dialog = useCurrentDialog();\r\n    const internalRef = useProxiedRef<HTMLDivElement>(ref);\r\n    const { position, handleProps: dragHandleProps } = useDraggable(internalRef);\r\n    const { texts } = useLocalization();\r\n\r\n    // if the dialog was opened by a menu, we need to close the menu when the dialog closes\r\n    // the menu is still open (and mounted) because it is the trigger for the dialog\r\n    const menu = useCurrentMenu();\r\n    let handleCloseAutoFocus: DialogPrimitiveContentProps['onCloseAutoFocus'];\r\n\r\n    if (menu) {\r\n        handleCloseAutoFocus = () => menu.close();\r\n    }\r\n\r\n    const className = cn('bg-white rounded relative mt-16 mx-auto animate-[fade-in_150ms] z-[997]', {\r\n        'w-128 text-center justify-center': dialog.size === 'dialog',\r\n        'w-xs': dialog.size === 'xs',\r\n        'w-sm': dialog.size === 'sm',\r\n        'w-md': dialog.size === 'md',\r\n        'w-lg': dialog.size === 'lg',\r\n    });\r\n\r\n    const containerClassName = cn(\r\n        'bg-white p-6 rounded relative z-[999]',\r\n        'shadow-[0_6px_9px_0_rgba(89,85,98,0.3),0_0_1px_0_rgba(89,85,98,0.2)]',\r\n        {\r\n            'rounded-b-none': !!dialog.elements.extra,\r\n        },\r\n        props.className\r\n    );\r\n\r\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\r\n        if (!dialog.closeOnEscape) {\r\n            event.preventDefault();\r\n        } else if (dialog.onClose) {\r\n            dialog.onClose();\r\n        }\r\n    };\r\n\r\n    // the chosen behaviour in taco is that outside clicks do not close the dialog\r\n    const handleInteractOutside = event => event.preventDefault();\r\n\r\n    let output;\r\n\r\n    if (typeof props.children === 'function') {\r\n        output = (\r\n            <DialogPrimitive.Close asChild>\r\n                <RenderPropWrapper renderProps={{ drawer: dialog.drawer }}>{props.children}</RenderPropWrapper>\r\n            </DialogPrimitive.Close>\r\n        );\r\n    } else {\r\n        output = props.children;\r\n    }\r\n\r\n    return (\r\n        <DialogPrimitive.Portal>\r\n            <DialogPrimitive.Overlay asChild>\r\n                <Backdrop>\r\n                    <DialogPrimitive.Content\r\n                        {...props}\r\n                        className={className}\r\n                        onEscapeKeyDown={handleEscapeKeyDown}\r\n                        onInteractOutside={handleInteractOutside}\r\n                        onCloseAutoFocus={handleCloseAutoFocus}\r\n                        ref={ref}\r\n                        style={{\r\n                            ...props.style,\r\n                            left: dialog.draggable ? `${position.x}px` : undefined,\r\n                            top: dialog.draggable ? `${position.y}px` : undefined,\r\n                        }}\r\n                    >\r\n                        <div className={containerClassName} data-taco=\"dialog\">\r\n                            {output}\r\n                            {dialog.draggable && (\r\n                                <div\r\n                                    {...dragHandleProps}\r\n                                    aria-label={texts.dialog.drag}\r\n                                    className=\"yt-dialog__drag absolute-center-x bg-grey-light top-1.5 h-3 w-24 cursor-move rounded text-center\"\r\n                                />\r\n                            )}\r\n                            {dialog.showCloseButton ? (\r\n                                <DialogPrimitive.Close onClick={dialog.onClose} asChild>\r\n                                    <IconButton\r\n                                        appearance=\"discrete\"\r\n                                        aria-label={texts.dialog.close}\r\n                                        className=\"absolute top-0 right-0 mt-2 mr-2\"\r\n                                        icon=\"close\"\r\n                                    />\r\n                                </DialogPrimitive.Close>\r\n                            ) : null}\r\n                        </div>\r\n                        {dialog.elements.drawer}\r\n                        {dialog.elements.extra}\r\n                    </DialogPrimitive.Content>\r\n                </Backdrop>\r\n            </DialogPrimitive.Overlay>\r\n        </DialogPrimitive.Portal>\r\n    );\r\n});\r\n"],"names":["Title","React","DialogTitle","props","ref","className","cn","DialogPrimitive","Footer","DialogFooter","children","Close","DialogClose","dialog","useCurrentDialog","onClick","onClose","asChild","RenderPropWrapper","renderProps","close","CustomEvent","Content","DialogContent","internalRef","useProxiedRef","position","handleProps","dragHandleProps","useDraggable","texts","useLocalization","menu","useCurrentMenu","handleCloseAutoFocus","size","containerClassName","elements","extra","handleEscapeKeyDown","event","closeOnEscape","preventDefault","handleInteractOutside","output","drawer","Backdrop","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus","style","left","draggable","x","undefined","top","y","drag","showCloseButton","IconButton","appearance","icon"],"mappings":"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"}

package/dist/esm/components/Dialog/components/Drawer.js

@@ -0,0 +1,42 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { motion } from 'framer-motion';
+import { useCurrentDialog } from '../Context.js';
+
+const Drawer = /*#__PURE__*/forwardRef(function DialogDrawer(props, ref) {
+  var _dialog$drawer, _dialog$drawer2;
+
+  const dialog = useCurrentDialog();
+  const className = cn('absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left', props.className);
+  return createElement(motion.div, Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-drawer",
+    "aria-hidden": !((_dialog$drawer = dialog.drawer) !== null && _dialog$drawer !== void 0 && _dialog$drawer.open),
+    variants: {
+      visible: {
+        left: '100%',
+        display: 'block',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        }
+      },
+      hidden: {
+        left: '0%',
+        transition: {
+          ease: 'easeOut',
+          duration: 0.2
+        },
+        transitionEnd: {
+          display: 'none'
+        }
+      }
+    },
+    animate: (_dialog$drawer2 = dialog.drawer) !== null && _dialog$drawer2 !== void 0 && _dialog$drawer2.open ? 'visible' : 'hidden',
+    ref: ref
+  }), typeof props.children === 'function' ? props.children(dialog.drawer) : props.children);
+});
+Drawer.displayName = 'DialogDrawer';
+
+export { Drawer };
+//# sourceMappingURL=Drawer.js.map

package/dist/esm/components/Dialog/components/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../../../src/components/Dialog/components/Drawer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport { motion } from 'framer-motion';\r\nimport cn from 'classnames';\r\nimport { DialogContext, useCurrentDialog } from '../Context';\r\n\r\nexport type DialogDrawerRenderProps = DialogContext['drawer'];\r\n\r\nexport type DialogDrawerProps = Omit<\r\n    React.HTMLAttributes<HTMLDivElement>,\r\n    'onAnimationStart' | 'onDragStart' | 'onDragEnd' | 'onDrag'\r\n> & {\r\n    children: Omit<React.ReactNode, 'Function'> | ((props: DialogDrawerRenderProps) => React.ReactNode);\r\n};\r\n\r\nconst Drawer = React.forwardRef(function DialogDrawer(props: DialogDrawerProps, ref: React.Ref<HTMLDivElement>) {\r\n    const dialog = useCurrentDialog();\r\n    const className = cn(\r\n        'absolute top-0 z-[998] -ml-[4px] hidden h-full w-full overflow-y-auto rounded-r bg-white p-6 text-left',\r\n        props.className\r\n    );\r\n\r\n    return (\r\n        <motion.div\r\n            {...props}\r\n            className={className}\r\n            data-taco=\"dialog-drawer\"\r\n            aria-hidden={!dialog.drawer?.open}\r\n            variants={{\r\n                visible: {\r\n                    left: '100%',\r\n                    display: 'block',\r\n                    transition: { ease: 'easeOut', duration: 0.2 },\r\n                },\r\n                hidden: {\r\n                    left: '0%',\r\n                    transition: { ease: 'easeOut', duration: 0.2 },\r\n                    transitionEnd: {\r\n                        display: 'none',\r\n                    },\r\n                },\r\n            }}\r\n            animate={dialog.drawer?.open ? 'visible' : 'hidden'}\r\n            ref={ref}\r\n        >\r\n            {typeof props.children === 'function' ? props.children(dialog.drawer) : props.children}\r\n        </motion.div>\r\n    );\r\n});\r\nDrawer.displayName = 'DialogDrawer';\r\n\r\nexport { Drawer };\r\n"],"names":["Drawer","React","DialogDrawer","props","ref","dialog","useCurrentDialog","className","cn","motion","div","drawer","open","variants","visible","left","display","transition","ease","duration","hidden","transitionEnd","animate","children","displayName"],"mappings":";;;;;MAcMA,MAAM,gBAAGC,UAAA,CAAiB,SAASC,YAAT,CAAsBC,KAAtB,EAAgDC,GAAhD;;;EAC5B,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;EACA,MAAMC,SAAS,GAAGC,EAAE,CAChB,wGADgB,EAEhBL,KAAK,CAACI,SAFU,CAApB;EAKA,OACIN,aAAA,CAACQ,MAAM,CAACC,GAAR,oBACQP;IACJI,SAAS,EAAEA;iBACD;mBACG,oBAACF,MAAM,CAACM,MAAR,2CAAC,eAAeC,IAAhB;IACbC,QAAQ,EAAE;MACNC,OAAO,EAAE;QACLC,IAAI,EAAE,MADD;QAELC,OAAO,EAAE,OAFJ;QAGLC,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;;OAJvC;MAMNC,MAAM,EAAE;QACJL,IAAI,EAAE,IADF;QAEJE,UAAU,EAAE;UAAEC,IAAI,EAAE,SAAR;UAAmBC,QAAQ,EAAE;SAFrC;QAGJE,aAAa,EAAE;UACXL,OAAO,EAAE;;;;IAIrBM,OAAO,EAAE,mBAAAjB,MAAM,CAACM,MAAP,4DAAeC,IAAf,GAAsB,SAAtB,GAAkC;IAC3CR,GAAG,EAAEA;IApBT,EAsBK,OAAOD,KAAK,CAACoB,QAAb,KAA0B,UAA1B,GAAuCpB,KAAK,CAACoB,QAAN,CAAelB,MAAM,CAACM,MAAtB,CAAvC,GAAuER,KAAK,CAACoB,QAtBlF,CADJ;AA0BH,CAjCc;AAkCfvB,MAAM,CAACwB,WAAP,GAAqB,cAArB;;;;"}

package/dist/esm/components/Dialog/components/Extra.js

@@ -0,0 +1,15 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+const Extra = /*#__PURE__*/forwardRef(function DialogExtra(props, ref) {
+  const className = cn('bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left', props.className);
+  return createElement("div", Object.assign({}, props, {
+    className: className,
+    "data-taco": "dialog-extra",
+    ref: ref
+  }));
+});
+Extra.displayName = 'DialogExtra';
+
+export { Extra };
+//# sourceMappingURL=Extra.js.map

package/dist/esm/components/Dialog/components/Extra.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Extra.js","sources":["../../../../../src/components/Dialog/components/Extra.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport cn from 'classnames';\r\n\r\nexport type DialogExtraProps = React.HTMLAttributes<HTMLDivElement>;\r\n\r\nconst Extra = React.forwardRef(function DialogExtra(props: DialogExtraProps, ref: React.Ref<HTMLDivElement>) {\r\n    const className = cn(\r\n        'bg-grey-light yt-shadow-inset absolute top-full left-0 -mt-px w-full rounded-t-none rounded-b p-6 text-left',\r\n        props.className\r\n    );\r\n\r\n    return <div {...props} className={className} data-taco=\"dialog-extra\" ref={ref} />;\r\n});\r\nExtra.displayName = 'DialogExtra';\r\n\r\nexport { Extra };\r\n"],"names":["Extra","React","DialogExtra","props","ref","className","cn","displayName"],"mappings":";;;MAKMA,KAAK,gBAAGC,UAAA,CAAiB,SAASC,WAAT,CAAqBC,KAArB,EAA8CC,GAA9C;EAC3B,MAAMC,SAAS,GAAGC,EAAE,CAChB,6GADgB,EAEhBH,KAAK,CAACE,SAFU,CAApB;EAKA,OAAOJ,aAAA,MAAA,oBAASE;IAAOE,SAAS,EAAEA;iBAAqB;IAAeD,GAAG,EAAEA;IAApE,CAAP;AACH,CAPa;AAQdJ,KAAK,CAACO,WAAN,GAAoB,aAApB;;;;"}

package/dist/esm/components/Dialog/components/Trigger.js

@@ -0,0 +1,15 @@
+import { forwardRef, createElement } from 'react';
+import mergeRefs from '../../../utils/mergeRefs.js';
+import { Trigger as Trigger$1 } from '@radix-ui/react-dialog';
+import { useCurrentDialog } from '../Context.js';
+
+const Trigger = /*#__PURE__*/forwardRef(function DialogTrigger(props, ref) {
+  const dialog = useCurrentDialog();
+  return createElement(Trigger$1, Object.assign({}, dialog.props, props, {
+    ref: mergeRefs([dialog.ref, ref]),
+    asChild: true
+  }));
+});
+
+export { Trigger };
+//# sourceMappingURL=Trigger.js.map

package/dist/esm/components/Dialog/components/Trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Trigger.js","sources":["../../../../../src/components/Dialog/components/Trigger.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\r\nimport { useCurrentDialog } from '../Context';\r\nimport mergeRefs from '../../../utils/mergeRefs';\r\n\r\nexport type DialogTriggerProps = React.HTMLAttributes<HTMLButtonElement>;\r\n\r\nexport const Trigger = React.forwardRef(function DialogTrigger(props: DialogTriggerProps, ref: React.Ref<HTMLButtonElement>) {\r\n    const dialog = useCurrentDialog();\r\n    return <DialogPrimitive.Trigger {...dialog.props} {...props} ref={mergeRefs([dialog.ref, ref])} asChild />;\r\n});\r\n"],"names":["Trigger","React","DialogTrigger","props","ref","dialog","useCurrentDialog","DialogPrimitive","mergeRefs","asChild"],"mappings":";;;;;MAOaA,OAAO,gBAAGC,UAAA,CAAiB,SAASC,aAAT,CAAuBC,KAAvB,EAAkDC,GAAlD;EACpC,MAAMC,MAAM,GAAGC,gBAAgB,EAA/B;EACA,OAAOL,aAAA,CAACM,SAAD,oBAA6BF,MAAM,CAACF,OAAWA;IAAOC,GAAG,EAAEI,SAAS,CAAC,CAACH,MAAM,CAACD,GAAR,EAAaA,GAAb,CAAD;IAAqBK,OAAO;IAAhG,CAAP;AACH,CAHsB;;;;"}

package/dist/esm/components/Field/Field.js

@@ -0,0 +1,33 @@
+import { objectWithoutPropertiesLoose as _objectWithoutPropertiesLoose } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+
+var _excluded = ["disabled", "children", "invalid", "message"];
+var Field = /*#__PURE__*/forwardRef(function Field(props, ref) {
+  var disabled = props.disabled,
+      children = props.children,
+      _props$invalid = props.invalid,
+      invalid = _props$invalid === void 0 ? false : _props$invalid,
+      message = props.message,
+      otherProps = _objectWithoutPropertiesLoose(props, _excluded);
+
+  var className = cn('flex flex-col font-bold text-xs leading-loose pb-4 min-h-[theme(spacing.18)]', {
+    'text-grey-dark': disabled
+  }, props.className);
+  var messageClassName = cn('h-4 text-xs text-left leading-normal font-normal truncate -mb-4', {
+    'text-grey-darkest': !invalid,
+    'text-red': invalid,
+    'opacity-50': disabled
+  }, props.className);
+  return createElement("label", Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "label",
+    ref: ref
+  }), children, message && createElement("span", {
+    className: messageClassName,
+    role: invalid ? 'alert' : undefined
+  }, message));
+});
+
+export { Field };
+//# sourceMappingURL=Field.js.map