@economic/taco 1.17.0-alpha.0 → 1.17.1

package/dist/esm/packages/taco/src/components/Table/util/sortTypes.js

@@ -0,0 +1,87 @@
+const getTime = value => {
+  const parsedValue = typeof value === 'string' ? new Date(value) : value;
+  return parsedValue !== null && parsedValue !== void 0 && parsedValue.getTime ? parsedValue.getTime() : undefined;
+};
+const getNumber = (amount = '', decimalSeparator = ',') => {
+  if (typeof amount === 'number') {
+    return amount;
+  }
+  if (amount === null || !amount.length) {
+    return undefined;
+  }
+  let value;
+  if (decimalSeparator === ',') {
+    // replace digit seperator then replace decimal separator
+    value = Number(amount.replace(/\./g, '').replace(',', '.'));
+  } else {
+    // replace digit seperator
+    value = Number(amount.replace(/,/g, ''));
+  }
+  return Number.isNaN(value) ? undefined : value;
+};
+const getString = value => {
+  if (value) {
+    return String(value).toLowerCase();
+  }
+  return undefined;
+};
+const guess = value => {
+  if (typeof value === 'boolean') {
+    return value;
+  }
+  return isNaN(value) ? getString(value) : Number(value);
+};
+const compareBasic = (a, b) => {
+  // places undefined values first in ascending order instead of descending
+  if (a !== undefined && b === undefined) {
+    return 1;
+  }
+  return a === b ? 0 : a > b ? 1 : -1;
+};
+const stringsLocaleCompare = (a, b, locale) => {
+  // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1
+  const compareResult = a.localeCompare(b, locale);
+  return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;
+};
+const compareBasicStrings = (a, b, locale) => {
+  if (a && b) {
+    return stringsLocaleCompare(a, b, locale);
+  }
+  return compareBasic(a, b);
+};
+const sortTypes = locale => {
+  return {
+    datetime: (rowA, rowB, columnId) => {
+      const a = getTime(rowA.values[columnId]);
+      const b = getTime(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    string: (rowA, rowB, columnId) => {
+      const a = getString(rowA.values[columnId]);
+      const b = getString(rowB.values[columnId]);
+      return compareBasicStrings(a, b, locale);
+    },
+    number: (rowA, rowB, columnId) => {
+      const a = getNumber(rowA.values[columnId]);
+      const b = getNumber(rowB.values[columnId]);
+      return compareBasic(a, b);
+    },
+    boolean: (rowA, rowB, columnId) => {
+      const a = !!rowA.values[columnId];
+      const b = !!rowB.values[columnId];
+      return compareBasic(a, b);
+    },
+    auto: (rowA, rowB, columnId) => {
+      const a = guess(rowA.values[columnId]);
+      const b = guess(rowB.values[columnId]);
+      if (typeof a === 'string' && typeof b === 'string') {
+        return compareBasicStrings(a, b, locale);
+      } else {
+        return compareBasic(a, b);
+      }
+    }
+  };
+};
+
+export { sortTypes };
+//# sourceMappingURL=sortTypes.js.map

package/dist/esm/packages/taco/src/components/Table/util/sortTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sortTypes.js","sources":["../../../../../../../../src/components/Table/util/sortTypes.ts"],"sourcesContent":["import { SortTypes, TableRow } from '../types';\n\nconst getTime = (value: any): number | undefined => {\n    const parsedValue: Date = typeof value === 'string' ? new Date(value) : value;\n    return parsedValue?.getTime ? parsedValue.getTime() : undefined;\n};\n\nconst getNumber = (amount = '', decimalSeparator = ','): number | undefined => {\n    if (typeof amount === 'number') {\n        return amount;\n    }\n\n    if (amount === null || !amount.length) {\n        return undefined;\n    }\n\n    let value;\n\n    if (decimalSeparator === ',') {\n        // replace digit seperator then replace decimal separator\n        value = Number(amount.replace(/\\./g, '').replace(',', '.'));\n    } else {\n        // replace digit seperator\n        value = Number(amount.replace(/,/g, ''));\n    }\n\n    return Number.isNaN(value) ? undefined : value;\n};\n\nconst getString = (value: any): string | undefined => {\n    if (value) {\n        return String(value).toLowerCase();\n    }\n\n    return undefined;\n};\n\nconst guess = (value: any): any => {\n    if (typeof value === 'boolean') {\n        return value;\n    }\n\n    return isNaN(value) ? getString(value) : Number(value);\n};\n\nconst compareBasic = (a: any, b: any) => {\n    // places undefined values first in ascending order instead of descending\n    if (a !== undefined && b === undefined) {\n        return 1;\n    }\n\n    return a === b ? 0 : a > b ? 1 : -1;\n};\n\nconst stringsLocaleCompare = (a: string, b: string, locale: string): 0 | 1 | -1 => {\n    // In some browsers 'localCompare' may return -2 or 2 instead of -1 or 1\n    const compareResult = a.localeCompare(b, locale);\n    return compareResult === 0 ? 0 : compareResult > 0 ? 1 : -1;\n};\n\nconst compareBasicStrings = (a: string | undefined, b: string | undefined, locale: string): 0 | 1 | -1 => {\n    if (a && b) {\n        return stringsLocaleCompare(a, b, locale);\n    }\n\n    return compareBasic(a, b);\n};\n\ntype SortHandler<T> = (rowA: TableRow<T>, rowB: TableRow<T>, columnId: string) => 0 | 1 | -1;\n\nexport const sortTypes = (locale: string): Record<SortTypes, SortHandler<any>> => {\n    return {\n        datetime: (rowA, rowB, columnId) => {\n            const a = getTime(rowA.values[columnId]);\n            const b = getTime(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        string: (rowA, rowB, columnId) => {\n            const a = getString(rowA.values[columnId]);\n            const b = getString(rowB.values[columnId]);\n            return compareBasicStrings(a, b, locale);\n        },\n        number: (rowA, rowB, columnId) => {\n            const a = getNumber(rowA.values[columnId]);\n            const b = getNumber(rowB.values[columnId]);\n            return compareBasic(a, b);\n        },\n        boolean: (rowA, rowB, columnId) => {\n            const a = !!rowA.values[columnId];\n            const b = !!rowB.values[columnId];\n            return compareBasic(a, b);\n        },\n        auto: (rowA, rowB, columnId) => {\n            const a = guess(rowA.values[columnId]);\n            const b = guess(rowB.values[columnId]);\n            if (typeof a === 'string' && typeof b === 'string') {\n                return compareBasicStrings(a, b, locale);\n            } else {\n                return compareBasic(a, b);\n            }\n        },\n    };\n};\n"],"names":["getTime","value","parsedValue","Date","undefined","getNumber","amount","decimalSeparator","length","Number","replace","isNaN","getString","String","toLowerCase","guess","compareBasic","a","b","stringsLocaleCompare","locale","compareResult","localeCompare","compareBasicStrings","sortTypes","datetime","rowA","rowB","columnId","values","string","number","boolean","auto"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table/util.js

@@ -0,0 +1,87 @@
+import React__default from 'react';
+
+const sanitizeRowProps = (row, rowExpansionRenderer) => {
+  var _row$subRows;
+  const props = {
+    index: row.index,
+    indexPath: row.id,
+    values: row.original
+  };
+  if (((_row$subRows = row.subRows) === null || _row$subRows === void 0 ? void 0 : _row$subRows.length) > 0) {
+    props.isExpanded = !!row.isExpanded;
+    props.depth = row.depth;
+    props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);
+  } else if (rowExpansionRenderer) {
+    props.isExpanded = !!row.isExpanded;
+    props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);
+  }
+  if (row.toggleRowEditing) {
+    props.isEditing = !!row.isEditing;
+    props.toggleRowEditing = row.toggleRowEditing;
+  }
+  return props;
+};
+const getColumnsFromChildren = (children, rowExpansionRenderer) => {
+  const sortRules = [];
+  const columns = React__default.Children.toArray(children).filter(child => !!child && !child.props.hidden) // skip falsey or hidden columns
+  .map(({
+    props: {
+      children: groupChildren,
+      ...props
+    }
+  }) => {
+    const column = {
+      ...props
+    };
+    column.sortType = column.sortType || 'auto';
+    column.disableSortBy = column.disableSorting;
+    // this is a Table.Group - TODO: Find a better way to determine the child type
+    if (props.title && groupChildren) {
+      column.Header = props.title;
+      const {
+        columns: groupColumns,
+        sortRules: groupSortRules
+      } = getColumnsFromChildren(groupChildren, rowExpansionRenderer);
+      column.columns = groupColumns;
+      groupSortRules.forEach(sort => sortRules.push(sort));
+    } else {
+      column.accessor = props.accessor;
+      column.Header = props.headRenderer || '';
+      column.Cell = columnProps => {
+        var _props$cellRenderer, _cell$value;
+        const cell = {
+          accessor: columnProps.cell.column.id,
+          row: sanitizeRowProps(columnProps.cell.row, rowExpansionRenderer),
+          value: columnProps.cell.value
+        };
+        if (cell.row.isEditing && typeof props.editRenderer === 'function') {
+          return props.editRenderer(cell);
+        }
+        return typeof props.cellRenderer === 'function' ? (_props$cellRenderer = props.cellRenderer(cell)) !== null && _props$cellRenderer !== void 0 ? _props$cellRenderer : null : (_cell$value = cell.value) !== null && _cell$value !== void 0 ? _cell$value : null;
+      };
+      // custom props
+      column.align = props.align;
+      column.flex = props.flex;
+      if (props.sort && !props.disableSorting) {
+        sortRules.push({
+          id: props.accessor,
+          desc: props.sort === 'desc'
+        });
+      }
+    }
+    return column;
+  });
+  return {
+    columns,
+    sortRules
+  };
+};
+const getInternalSortRules = sortRules => {
+  return sortRules === null || sortRules === void 0 ? void 0 : sortRules.map(rule => ({
+    id: rule.accessor,
+    desc: rule.desc
+  }));
+};
+
+export { getColumnsFromChildren, getInternalSortRules, sanitizeRowProps };
+//# sourceMappingURL=util.js.map

package/dist/esm/packages/taco/src/components/Table/util.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.js","sources":["../../../../../../../src/components/Table/util.ts"],"sourcesContent":["import React from 'react';\nimport { TableRow, TableCell, TableChildren, InternalTableRow, InternalTableColumn, SortRule } from './types';\nimport { SortingRule } from 'react-table';\n\nexport const sanitizeRowProps = (row: InternalTableRow, rowExpansionRenderer: any): TableRow<any> => {\n    const props: TableRow<any> = {\n        index: row.index,\n        indexPath: row.id,\n        values: row.original,\n    };\n\n    if (row.subRows?.length > 0) {\n        props.isExpanded = !!row.isExpanded;\n        props.depth = row.depth;\n        props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);\n    } else if (rowExpansionRenderer) {\n        props.isExpanded = !!row.isExpanded;\n        props.toggleRowExpanded = () => row.toggleRowExpanded(!props.isExpanded);\n    }\n\n    if (row.toggleRowEditing) {\n        props.isEditing = !!row.isEditing;\n        props.toggleRowEditing = row.toggleRowEditing;\n    }\n\n    return props;\n};\n\nexport const getColumnsFromChildren = (children: TableChildren<any>, rowExpansionRenderer: any) => {\n    const sortRules: SortingRule<any>[] = [];\n\n    const columns = React.Children.toArray(children)\n        .filter((child: any) => !!child && !child.props.hidden) // skip falsey or hidden columns\n        .map(({ props: { children: groupChildren, ...props } }: any) => {\n            const column: InternalTableColumn & { disableSortBy: boolean | undefined } = { ...props };\n\n            column.sortType = column.sortType || 'auto';\n            column.disableSortBy = column.disableSorting;\n\n            // this is a Table.Group - TODO: Find a better way to determine the child type\n            if (props.title && groupChildren) {\n                column.Header = props.title;\n\n                const { columns: groupColumns, sortRules: groupSortRules } = getColumnsFromChildren(\n                    groupChildren,\n                    rowExpansionRenderer\n                );\n                column.columns = groupColumns;\n                groupSortRules.forEach(sort => sortRules.push(sort));\n            } else {\n                column.accessor = props.accessor;\n                column.Header = props.headRenderer || '';\n                column.Cell = (columnProps: any) => {\n                    const cell: TableCell<any> = {\n                        accessor: columnProps.cell.column.id,\n                        row: sanitizeRowProps(columnProps.cell.row, rowExpansionRenderer),\n                        value: columnProps.cell.value,\n                    };\n\n                    if (cell.row.isEditing && typeof props.editRenderer === 'function') {\n                        return props.editRenderer(cell);\n                    }\n\n                    return typeof props.cellRenderer === 'function' ? props.cellRenderer(cell) ?? null : cell.value ?? null;\n                };\n\n                // custom props\n                column.align = props.align;\n                column.flex = props.flex;\n\n                if (props.sort && !props.disableSorting) {\n                    sortRules.push({\n                        id: props.accessor,\n                        desc: props.sort === 'desc',\n                    });\n                }\n            }\n\n            return column;\n        });\n\n    return { columns, sortRules };\n};\n\nexport const getInternalSortRules = <T>(sortRules: SortRule<T>[] | undefined): SortingRule<T>[] | undefined => {\n    return sortRules?.map<SortingRule<T>>(rule => ({ id: rule.accessor, desc: rule.desc }));\n};\n"],"names":["sanitizeRowProps","row","rowExpansionRenderer","props","index","indexPath","id","values","original","subRows","length","isExpanded","depth","toggleRowExpanded","toggleRowEditing","isEditing","getColumnsFromChildren","children","sortRules","columns","React","Children","toArray","filter","child","hidden","map","groupChildren","column","sortType","disableSortBy","disableSorting","title","Header","groupColumns","groupSortRules","forEach","sort","push","accessor","headRenderer","Cell","columnProps","cell","value","editRenderer","cellRenderer","align","flex","desc","getInternalSortRules","rule"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js

@@ -0,0 +1,69 @@
+import { forwardRef, createElement } from 'react';
+import cn from 'classnames';
+import { Root, List, Trigger, Content } from '@radix-ui/react-tabs';
+
+const Tabs = /*#__PURE__*/forwardRef(function Tabs(props, ref) {
+  const {
+    id,
+    defaultId,
+    children,
+    onChange,
+    orientation = 'horizontal',
+    ...otherProps
+  } = props;
+  const className = cn('yt-tabs', `yt-tabs--${orientation}`, {
+    'flex w-full': orientation === 'vertical'
+  }, props.className);
+  return /*#__PURE__*/createElement(Root, Object.assign({}, otherProps, {
+    className: className,
+    "data-taco": "tabs",
+    defaultValue: defaultId,
+    dir: "ltr",
+    onValueChange: onChange,
+    orientation: orientation,
+    ref: ref,
+    value: id
+  }), children);
+});
+const TabList = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);
+  return /*#__PURE__*/createElement(List, Object.assign({}, props, {
+    className: className,
+    ref: ref
+  }));
+});
+const TabTrigger = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    disabled,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4', disabled ? 'cursor-not-allowed !text-grey-500' : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500', props.className);
+  return /*#__PURE__*/createElement(Trigger, Object.assign({}, otherProps, {
+    className: className,
+    disabled: disabled,
+    ref: ref,
+    style: {
+      transition: 'border 0.2s ease-in'
+    },
+    value: id
+  }));
+});
+const TabContent = /*#__PURE__*/forwardRef(function Tab(props, ref) {
+  const {
+    id,
+    ...otherProps
+  } = props;
+  const className = cn('yt-tab__panel outline-none', props.className);
+  return /*#__PURE__*/createElement(Content, Object.assign({}, otherProps, {
+    className: className,
+    ref: ref,
+    value: id
+  }));
+});
+Tabs.List = TabList;
+Tabs.Trigger = TabTrigger;
+Tabs.Content = TabContent;
+
+export { Tabs };
+//# sourceMappingURL=Tabs.js.map

package/dist/esm/packages/taco/src/components/Tabs/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../../../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\n\nimport { Orientation } from '../../types';\nimport './Tabs.css';\n\nexport type TabsProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * The controlled value of the tab to activate. Should be used in conjunction with `onChange`.\n     */\n    id?: string;\n    /**\n     * Set which tab is selected on mount.\n     * This has to be one of the existing ids provided for tabs\n     */\n    defaultId?: string;\n    /**\n     * Content should be one or an array of `Tabs.Trigger` components inside `Tabs.List` and then\n     * followed by one or an array of `Tabs.Content`.\n     * *Note* that there can also be tabs that are rendered conditionally.\n     */\n    children: React.ReactNode;\n    /**\n     * Define orientation of tabs.\n     * @defaultValue horizontal\n     */\n    orientation?: Orientation;\n    /**\n     * Callback that is called when tab is changed.\n     */\n    onChange?: (id: string) => void;\n};\n\nexport type TabListProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport type TabTriggerProps = React.HTMLAttributes<HTMLButtonElement> & {\n    /**\n     * A unique value that associates the trigger with a content.\n     */\n    id: string;\n    /**\n     * When true, prevents the user from interacting with the tab.\n     */\n    disabled?: boolean;\n};\n\nexport type TabContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * A unique value that associates the content with a trigger.\n     */\n    id: string;\n};\n\nexport type ForwardedTabsWithStatics = React.ForwardRefExoticComponent<TabsProps & React.RefAttributes<HTMLDivElement>> & {\n    /** Tab list component containing all tab triggers, rendered in a `Tabs` group component */\n    List: React.ForwardRefExoticComponent<TabListProps & React.RefAttributes<HTMLDivElement>>;\n    /** Tab trigger component rendered in a `Tabs.List` component */\n    Trigger: React.ForwardRefExoticComponent<TabTriggerProps & React.RefAttributes<HTMLButtonElement>>;\n    /** Tab content component rendered in a `Tabs` group component */\n    Content: React.ForwardRefExoticComponent<TabContentProps & React.RefAttributes<HTMLDivElement>>;\n};\n\nexport const Tabs = React.forwardRef(function Tabs(props: TabsProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, defaultId, children, onChange, orientation = 'horizontal', ...otherProps } = props;\n    const className = cn(\n        'yt-tabs',\n        `yt-tabs--${orientation}`,\n        {\n            'flex w-full': orientation === 'vertical',\n        },\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Root\n            {...otherProps}\n            className={className}\n            data-taco=\"tabs\"\n            defaultValue={defaultId}\n            dir=\"ltr\"\n            onValueChange={onChange}\n            orientation={orientation}\n            ref={ref}\n            value={id}>\n            {children}\n        </TabsPrimitive.Root>\n    );\n}) as ForwardedTabsWithStatics;\n\nconst TabList = React.forwardRef(function Tab(props: TabListProps, ref: React.Ref<HTMLDivElement>) {\n    const className = cn('yt-tab__list border-b border-grey-100 flex flex-row m-0 mb-4', props.className);\n\n    return <TabsPrimitive.List {...props} className={className} ref={ref} />;\n});\n\nconst TabTrigger = React.forwardRef(function Tab(props: TabTriggerProps, ref: React.Ref<HTMLButtonElement>) {\n    const { id, disabled, ...otherProps } = props;\n    const className = cn(\n        'yt-tab bg-transparent border-b-2 border-transparent text-grey-700 m-0 py-2 px-4',\n        disabled\n            ? 'cursor-not-allowed !text-grey-500'\n            : 'cursor-pointer rounded-t hover:border-grey-300 aria-selected:border-blue-500 aria-selected:text-black aria-selected:hover:border-blue-300 hover:text-black active:yt-focus active:border-blue-500 focus:yt-focus focus:border-blue-500',\n        props.className\n    );\n\n    return (\n        <TabsPrimitive.Trigger\n            {...otherProps}\n            className={className}\n            disabled={disabled}\n            ref={ref}\n            style={{\n                transition: 'border 0.2s ease-in',\n            }}\n            value={id}\n        />\n    );\n});\n\nconst TabContent = React.forwardRef(function Tab(props: TabContentProps, ref: React.Ref<HTMLDivElement>) {\n    const { id, ...otherProps } = props;\n    const className = cn('yt-tab__panel outline-none', props.className);\n\n    return <TabsPrimitive.Content {...otherProps} className={className} ref={ref} value={id} />;\n});\n\nTabs.List = TabList;\nTabs.Trigger = TabTrigger;\nTabs.Content = TabContent;\n"],"names":["Tabs","React","props","ref","id","defaultId","children","onChange","orientation","otherProps","className","cn","TabsPrimitive","defaultValue","dir","onValueChange","value","TabList","Tab","TabTrigger","disabled","style","transition","TabContent","List","Trigger","Content"],"mappings":";;;;MA+DaA,IAAI,gBAAGC,UAAgB,CAAC,SAASD,IAAI,CAACE,KAAgB,EAAEC,GAA8B;EAC/F,MAAM;IAAEC,EAAE;IAAEC,SAAS;IAAEC,QAAQ;IAAEC,QAAQ;IAAEC,WAAW,GAAG,YAAY;IAAE,GAAGC;GAAY,GAAGP,KAAK;EAC9F,MAAMQ,SAAS,GAAGC,EAAE,CAChB,SAAS,cACGH,aAAa,EACzB;IACI,aAAa,EAAEA,WAAW,KAAK;GAClC,EACDN,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,IAAkB,oBACXH,UAAU;IACdC,SAAS,EAAEA,SAAS;iBACV,MAAM;IAChBG,YAAY,EAAER,SAAS;IACvBS,GAAG,EAAC,KAAK;IACTC,aAAa,EAAER,QAAQ;IACvBC,WAAW,EAAEA,WAAW;IACxBL,GAAG,EAAEA,GAAG;IACRa,KAAK,EAAEZ;MACNE,QAAQ,CACQ;AAE7B,CAAC;AAED,MAAMW,OAAO,gBAAGhB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAmB,EAAEC,GAA8B;EAC7F,MAAMO,SAAS,GAAGC,EAAE,CAAC,8DAA8D,EAAET,KAAK,CAACQ,SAAS,CAAC;EAErG,oBAAOT,cAACW,IAAkB,oBAAKV,KAAK;IAAEQ,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA;KAAO;AAC5E,CAAC,CAAC;AAEF,MAAMgB,UAAU,gBAAGlB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAAiC;EACtG,MAAM;IAAEC,EAAE;IAAEgB,QAAQ;IAAE,GAAGX;GAAY,GAAGP,KAAK;EAC7C,MAAMQ,SAAS,GAAGC,EAAE,CAChB,iFAAiF,EACjFS,QAAQ,GACF,mCAAmC,GACnC,wOAAwO,EAC9OlB,KAAK,CAACQ,SAAS,CAClB;EAED,oBACIT,cAACW,OAAqB,oBACdH,UAAU;IACdC,SAAS,EAAEA,SAAS;IACpBU,QAAQ,EAAEA,QAAQ;IAClBjB,GAAG,EAAEA,GAAG;IACRkB,KAAK,EAAE;MACHC,UAAU,EAAE;KACf;IACDN,KAAK,EAAEZ;KACT;AAEV,CAAC,CAAC;AAEF,MAAMmB,UAAU,gBAAGtB,UAAgB,CAAC,SAASiB,GAAG,CAAChB,KAAsB,EAAEC,GAA8B;EACnG,MAAM;IAAEC,EAAE;IAAE,GAAGK;GAAY,GAAGP,KAAK;EACnC,MAAMQ,SAAS,GAAGC,EAAE,CAAC,4BAA4B,EAAET,KAAK,CAACQ,SAAS,CAAC;EAEnE,oBAAOT,cAACW,OAAqB,oBAAKH,UAAU;IAAEC,SAAS,EAAEA,SAAS;IAAEP,GAAG,EAAEA,GAAG;IAAEa,KAAK,EAAEZ;KAAM;AAC/F,CAAC,CAAC;AAEFJ,IAAI,CAACwB,IAAI,GAAGP,OAAO;AACnBjB,IAAI,CAACyB,OAAO,GAAGN,UAAU;AACzBnB,IAAI,CAAC0B,OAAO,GAAGH,UAAU;;;;"}

package/dist/esm/packages/taco/src/components/Tag/Tag.js

@@ -0,0 +1,42 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Icon } from '../Icon/Icon.js';
+import { colors } from '../../utils/colors.js';
+
+const Tag = /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  const {
+    children,
+    color,
+    disabled,
+    icon,
+    readOnly,
+    onDelete,
+    ...otherProps
+  } = props;
+  const textRef = React__default.useRef(null);
+  const className = cn('inline-flex items-center rounded h-6 cursor-default', {
+    'opacity-50': disabled,
+    'hover:bg-opacity-75': !disabled,
+    'cursor-pointer': !!otherProps.onClick,
+    'pointer-events-none': disabled || readOnly
+  }, color ? colors[color] : colors.grey, props.className);
+  return /*#__PURE__*/React__default.createElement("span", Object.assign({}, otherProps, {
+    className: className,
+    ref: ref
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate px-2",
+    ref: textRef
+  }, icon ? typeof icon === 'string' ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: icon,
+    className: "mr-1 -ml-1 -mt-0.5 !h-5 !w-5"
+  }) : /*#__PURE__*/React__default.cloneElement(icon, {
+    className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5'
+  }) : null, children), onDelete ? /*#__PURE__*/React__default.createElement(Icon, {
+    name: "close",
+    onClick: onDelete,
+    className: "-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5"
+  }) : null);
+});
+
+export { Tag };
+//# sourceMappingURL=Tag.js.map

package/dist/esm/packages/taco/src/components/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../../../../../../src/components/Tag/Tag.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Color, colors } from '../../utils/colors';\nimport { Icon, IconName, IconProps } from '../Icon/Icon';\n\nexport type TagProps = Omit<React.HTMLAttributes<HTMLSpanElement>, 'children'> & {\n    children: string;\n    color?: Color;\n    disabled?: boolean;\n    icon?: React.ReactElement<IconProps> | IconName;\n    readOnly?: boolean;\n    onDelete?: (event: React.MouseEvent<SVGSVGElement>) => void;\n};\n\nexport const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {\n    const { children, color, disabled, icon, readOnly, onDelete, ...otherProps } = props;\n    const textRef = React.useRef<HTMLDivElement>(null);\n\n    const className = cn(\n        'inline-flex items-center rounded h-6 cursor-default',\n        {\n            'opacity-50': disabled,\n            'hover:bg-opacity-75': !disabled,\n            'cursor-pointer': !!otherProps.onClick,\n            'pointer-events-none': disabled || readOnly,\n        },\n        color ? colors[color] : colors.grey,\n        props.className\n    );\n\n    return (\n        <span {...otherProps} className={className} ref={ref}>\n            <span className=\"truncate px-2\" ref={textRef}>\n                {icon ? (\n                    typeof icon === 'string' ? (\n                        <Icon name={icon} className=\"mr-1 -ml-1 -mt-0.5 !h-5 !w-5\" />\n                    ) : (\n                        React.cloneElement(icon, { className: 'mr-1 -ml-1 -mt-0.5 !h-5 !w-5' })\n                    )\n                ) : null}\n                {children}\n            </span>\n            {onDelete ? (\n                <Icon\n                    name=\"close\"\n                    onClick={onDelete}\n                    className=\"-ml-1.5 !h-6 !w-5 flex-shrink-0 cursor-pointer rounded-r p-0.5 hover:bg-black/5\"\n                />\n            ) : null}\n        </span>\n    );\n});\n"],"names":["Tag","React","forwardRef","props","ref","children","color","disabled","icon","readOnly","onDelete","otherProps","textRef","useRef","className","cn","onClick","colors","grey","Icon","name","cloneElement"],"mappings":";;;;;MAcaA,GAAG,gBAAGC,cAAK,CAACC,UAAU,CAA4B,CAACC,KAAK,EAAEC,GAAG;EACtE,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,QAAQ;IAAE,GAAGC;GAAY,GAAGR,KAAK;EACpF,MAAMS,OAAO,GAAGX,cAAK,CAACY,MAAM,CAAiB,IAAI,CAAC;EAElD,MAAMC,SAAS,GAAGC,EAAE,CAChB,qDAAqD,EACrD;IACI,YAAY,EAAER,QAAQ;IACtB,qBAAqB,EAAE,CAACA,QAAQ;IAChC,gBAAgB,EAAE,CAAC,CAACI,UAAU,CAACK,OAAO;IACtC,qBAAqB,EAAET,QAAQ,IAAIE;GACtC,EACDH,KAAK,GAAGW,MAAM,CAACX,KAAK,CAAC,GAAGW,MAAM,CAACC,IAAI,EACnCf,KAAK,CAACW,SAAS,CAClB;EAED,oBACIb,uDAAUU,UAAU;IAAEG,SAAS,EAAEA,SAAS;IAAEV,GAAG,EAAEA;mBAC7CH;IAAMa,SAAS,EAAC,eAAe;IAACV,GAAG,EAAEQ;KAChCJ,IAAI,GACD,OAAOA,IAAI,KAAK,QAAQ,gBACpBP,6BAACkB,IAAI;IAACC,IAAI,EAAEZ,IAAI;IAAEM,SAAS,EAAC;IAAiC,gBAE7Db,cAAK,CAACoB,YAAY,CAACb,IAAI,EAAE;IAAEM,SAAS,EAAE;GAAgC,CACzE,GACD,IAAI,EACPT,QAAQ,CACN,EACNK,QAAQ,gBACLT,6BAACkB,IAAI;IACDC,IAAI,EAAC,OAAO;IACZJ,OAAO,EAAEN,QAAQ;IACjBI,SAAS,EAAC;IACZ,GACF,IAAI,CACL;AAEf,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Textarea/Textarea.js

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

package/dist/esm/packages/taco/src/components/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../../../../../../src/components/Textarea/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { getInputClasses } from '../Input/util';\n\nexport type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & {\n    /** Draws attention to the textarea by changing its style and making it visually prominent */\n    highlighted?: boolean;\n    /* Whether the input is in an invalid state */\n    invalid?: boolean;\n    /** Value of the textarea */\n    value?: string;\n};\n\nexport const Textarea = React.forwardRef(function Textarea(props: TextareaProps, ref: React.Ref<HTMLTextAreaElement>) {\n    const { defaultValue: _, highlighted, invalid, onKeyDown, ...otherProps } = props;\n    const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);\n\n    // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll\n    // if it has scroll height then the browser reverts to native scrolling behaviour only\n    // so we manually override it to ensure _our_ desired behaviour remains intact\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (event.key === 'Home' || event.key === 'End') {\n            event.preventDefault();\n            const position = event.key === 'End' ? event.currentTarget.value.length : 0;\n            event.currentTarget.setSelectionRange(position, position);\n            event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;\n        }\n\n        if (onKeyDown) {\n            onKeyDown(event);\n        }\n    };\n\n    return <textarea {...otherProps} className={classNames} data-taco=\"textarea\" onKeyDown={handleKeyDown} ref={ref} />;\n});\n"],"names":["Textarea","React","props","ref","defaultValue","_","highlighted","invalid","onKeyDown","otherProps","classNames","cn","getInputClasses","className","handleKeyDown","event","key","preventDefault","position","currentTarget","value","length","setSelectionRange","scrollTop","scrollHeight"],"mappings":";;;;MAaaA,QAAQ,gBAAGC,UAAgB,CAAC,SAASD,QAAQ,CAACE,KAAoB,EAAEC,GAAmC;EAChH,MAAM;IAAEC,YAAY,EAAEC,CAAC;IAAEC,WAAW;IAAEC,OAAO;IAAEC,SAAS;IAAE,GAAGC;GAAY,GAAGP,KAAK;EACjF,MAAMQ,UAAU,GAAGC,EAAE,CAACC,eAAe,CAACV,KAAK,CAAC,EAAE,wCAAwC,EAAEA,KAAK,CAACW,SAAS,CAAC;;;;EAKxG,MAAMC,aAAa,GAAIC,KAA+C;IAClE,IAAIA,KAAK,CAACC,GAAG,KAAK,MAAM,IAAID,KAAK,CAACC,GAAG,KAAK,KAAK,EAAE;MAC7CD,KAAK,CAACE,cAAc,EAAE;MACtB,MAAMC,QAAQ,GAAGH,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACI,aAAa,CAACC,KAAK,CAACC,MAAM,GAAG,CAAC;MAC3EN,KAAK,CAACI,aAAa,CAACG,iBAAiB,CAACJ,QAAQ,EAAEA,QAAQ,CAAC;MACzDH,KAAK,CAACI,aAAa,CAACI,SAAS,GAAGR,KAAK,CAACC,GAAG,KAAK,KAAK,GAAGD,KAAK,CAACI,aAAa,CAACK,YAAY,GAAG,CAAC;;IAG9F,IAAIhB,SAAS,EAAE;MACXA,SAAS,CAACO,KAAK,CAAC;;GAEvB;EAED,oBAAOd,4CAAcQ,UAAU;IAAEI,SAAS,EAAEH,UAAU;iBAAY,UAAU;IAACF,SAAS,EAAEM,aAAa;IAAEX,GAAG,EAAEA;KAAO;AACvH,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Toast/Toast.js

@@ -0,0 +1,79 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { IconButton } from '../IconButton/IconButton.js';
+import { useLocalization } from '../Provider/Localization.js';
+import { useAnimation, motion } from 'framer-motion';
+import useTimer from '../../utils/hooks/useTimer.js';
+import { getBadgeIcon } from './util.js';
+
+const Toast = ({
+  content,
+  lastUpdated,
+  onClose: handleClose,
+  options,
+  ...props
+}) => {
+  const {
+    texts
+  } = useLocalization();
+  const {
+    autoClose,
+    type = 'default'
+  } = options;
+  const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {
+    'border border-grey-200': type === 'default' || type === 'loading' || !type,
+    'border border-grey-500': type === 'success',
+    'border border-blue-500': type === 'information',
+    'border border-yellow-700': type === 'warning',
+    'border border-red': type === 'error'
+  });
+  const timer = useTimer(autoClose, handleClose);
+  const controls = useAnimation();
+  if (!content) {
+    console.warn(`Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${content === '' ? 'empty string' : content}.`);
+  }
+  React__default.useEffect(() => {
+    if (autoClose) {
+      timer.start();
+    }
+  }, [autoClose]);
+  const triggerUpdateAnimation = function () {
+    try {
+      return Promise.resolve(controls.start({
+        scale: 1.05
+      })).then(function () {
+        return Promise.resolve(controls.start({
+          scale: 1
+        })).then(function () {});
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  React__default.useEffect(() => {
+    if (lastUpdated) {
+      triggerUpdateAnimation();
+      if (timer.running) {
+        timer.start();
+      }
+    }
+  }, [lastUpdated]);
+  return /*#__PURE__*/React__default.createElement(motion.div, Object.assign({}, props, {
+    animate: controls,
+    className: className,
+    "data-taco": "toast",
+    onMouseEnter: timer.pause,
+    onMouseLeave: timer.resume
+  }), getBadgeIcon(type), /*#__PURE__*/React__default.createElement("div", {
+    className: "flex-grow"
+  }, content), /*#__PURE__*/React__default.createElement(IconButton, {
+    appearance: "discrete",
+    className: "text-grey-700 -mr-2 cursor-pointer self-start !px-0",
+    icon: "close",
+    "aria-label": texts.toasts.dismiss,
+    onClick: handleClose
+  }));
+};
+
+export { Toast };
+//# sourceMappingURL=Toast.js.map

package/dist/esm/packages/taco/src/components/Toast/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../../../../../src/components/Toast/Toast.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { motion, useAnimation } from 'framer-motion';\nimport useTimer from '../../utils/hooks/useTimer';\nimport { getBadgeIcon } from './util';\nimport { State } from '../../types';\nimport { useLocalization } from '../Provider/Localization';\nimport { IconButton } from '../IconButton/IconButton';\n\nexport type ToastsTexts = {\n    /** Aria-label for the close icon button of toast */\n    dismiss: string;\n};\n\nexport type ToastType = Omit<State, 'default'> | 'loading';\nexport type ToastOptions = {\n    /** Provide time in milliseconds after which the toast should autoclose */\n    autoClose?: number;\n    /**\n     * State will change the icon displayed in toast and other characteristics,\n     * for e.g. `loading` state will display a progress animation.\n     * Default value is `default`\n     */\n    type?: ToastType;\n};\nexport type ToastContent = Omit<React.ReactNode, 'null' | 'undefined'>;\nexport type ToastProps = {\n    /** Provide a unique id for toast */\n    id: string;\n    /**\n     * Content can be any valid react node, for e.g. a `div`, or a simple text.\n     */\n    content: ToastContent;\n    /** Additional options to define your toast */\n    options: ToastOptions;\n    /**\n     * Handler called when toast closes.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    onClose: () => void;\n    lastUpdated?: number;\n    lastDuplicateId?: string;\n};\n\nexport const Toast = ({ content, lastUpdated, onClose: handleClose, options, ...props }: ToastProps): JSX.Element => {\n    const { texts } = useLocalization();\n    const { autoClose, type = 'default' } = options;\n    const className = cn('bg-white relative flex items-center py-1 px-2 mt-3 w-full rounded yt-shadow', {\n        'border border-grey-200': type === 'default' || type === 'loading' || !type,\n        'border border-grey-500': type === 'success',\n        'border border-blue-500': type === 'information',\n        'border border-yellow-700': type === 'warning',\n        'border border-red': type === 'error',\n    });\n    const timer = useTimer(autoClose, handleClose);\n    const controls = useAnimation();\n\n    if (!content) {\n        console.warn(\n            `Toast requires 'content' property, which can't be empty string, null or undefined. Current content value is set to ${\n                content === '' ? 'empty string' : content\n            }.`\n        );\n    }\n\n    React.useEffect(() => {\n        if (autoClose) {\n            timer.start();\n        }\n    }, [autoClose]);\n\n    const triggerUpdateAnimation = async () => {\n        await controls.start({ scale: 1.05 });\n        await controls.start({ scale: 1 });\n    };\n\n    React.useEffect(() => {\n        if (lastUpdated) {\n            triggerUpdateAnimation();\n\n            if (timer.running) {\n                timer.start();\n            }\n        }\n    }, [lastUpdated]);\n\n    return (\n        <motion.div\n            {...props}\n            animate={controls}\n            className={className}\n            data-taco=\"toast\"\n            onMouseEnter={timer.pause}\n            onMouseLeave={timer.resume}>\n            {getBadgeIcon(type)}\n            <div className=\"flex-grow\">{content}</div>\n            <IconButton\n                appearance=\"discrete\"\n                className=\"text-grey-700 -mr-2 cursor-pointer self-start !px-0\"\n                icon=\"close\"\n                aria-label={texts.toasts.dismiss}\n                onClick={handleClose}\n            />\n        </motion.div>\n    );\n};\n"],"names":["Toast","content","lastUpdated","onClose","handleClose","options","props","texts","useLocalization","autoClose","type","className","cn","timer","useTimer","controls","useAnimation","console","warn","React","useEffect","start","triggerUpdateAnimation","scale","running","motion","div","animate","onMouseEnter","pause","onMouseLeave","resume","getBadgeIcon","IconButton","appearance","icon","toasts","dismiss","onClick"],"mappings":";;;;;;;;MA4CaA,KAAK,GAAG,CAAC;EAAEC,OAAO;EAAEC,WAAW;EAAEC,OAAO,EAAEC,WAAW;EAAEC,OAAO;EAAE,GAAGC;CAAmB;EAC/F,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAM;IAAEC,SAAS;IAAEC,IAAI,GAAG;GAAW,GAAGL,OAAO;EAC/C,MAAMM,SAAS,GAAGC,EAAE,CAAC,6EAA6E,EAAE;IAChG,wBAAwB,EAAEF,IAAI,KAAK,SAAS,IAAIA,IAAI,KAAK,SAAS,IAAI,CAACA,IAAI;IAC3E,wBAAwB,EAAEA,IAAI,KAAK,SAAS;IAC5C,wBAAwB,EAAEA,IAAI,KAAK,aAAa;IAChD,0BAA0B,EAAEA,IAAI,KAAK,SAAS;IAC9C,mBAAmB,EAAEA,IAAI,KAAK;GACjC,CAAC;EACF,MAAMG,KAAK,GAAGC,QAAQ,CAACL,SAAS,EAAEL,WAAW,CAAC;EAC9C,MAAMW,QAAQ,GAAGC,YAAY,EAAE;EAE/B,IAAI,CAACf,OAAO,EAAE;IACVgB,OAAO,CAACC,IAAI,uHAEJjB,OAAO,KAAK,EAAE,GAAG,cAAc,GAAGA,UACnC,CACN;;EAGLkB,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIX,SAAS,EAAE;MACXI,KAAK,CAACQ,KAAK,EAAE;;GAEpB,EAAE,CAACZ,SAAS,CAAC,CAAC;EAEf,MAAMa,sBAAsB;IAAA;6BAClBP,QAAQ,CAACM,KAAK,CAAC;QAAEE,KAAK,EAAE;OAAM,CAAC;QAAA,uBAC/BR,QAAQ,CAACM,KAAK,CAAC;UAAEE,KAAK,EAAE;SAAG,CAAC;;KACrC;MAAA;;;EAEDJ,cAAK,CAACC,SAAS,CAAC;IACZ,IAAIlB,WAAW,EAAE;MACboB,sBAAsB,EAAE;MAExB,IAAIT,KAAK,CAACW,OAAO,EAAE;QACfX,KAAK,CAACQ,KAAK,EAAE;;;GAGxB,EAAE,CAACnB,WAAW,CAAC,CAAC;EAEjB,oBACIiB,6BAACM,MAAM,CAACC,GAAG,oBACHpB,KAAK;IACTqB,OAAO,EAAEZ,QAAQ;IACjBJ,SAAS,EAAEA,SAAS;iBACV,OAAO;IACjBiB,YAAY,EAAEf,KAAK,CAACgB,KAAK;IACzBC,YAAY,EAAEjB,KAAK,CAACkB;MACnBC,YAAY,CAACtB,IAAI,CAAC,eACnBS;IAAKR,SAAS,EAAC;KAAaV,OAAO,CAAO,eAC1CkB,6BAACc,UAAU;IACPC,UAAU,EAAC,UAAU;IACrBvB,SAAS,EAAC,qDAAqD;IAC/DwB,IAAI,EAAC,OAAO;kBACA5B,KAAK,CAAC6B,MAAM,CAACC,OAAO;IAChCC,OAAO,EAAElC;IACX,CACO;AAErB;;;;"}

package/dist/esm/packages/taco/src/components/Toast/Toaster.js

@@ -0,0 +1,151 @@
+import { useState, useCallback, useEffect, createElement, useContext, createContext } from 'react';
+import { v4 } from 'uuid';
+import { AnimatePresence, motion } from 'framer-motion';
+import { Toast } from './Toast.js';
+
+const DEFAULT_AUTO_CLOSE_TIMEOUT = 7500;
+const ToastContext = /*#__PURE__*/createContext({});
+const insertToastWithoutDuplicates = (currentToasts, id, content, options, close) => {
+  const nextToasts = [...currentToasts];
+  const existingToastIndex = currentToasts.findIndex(toast => JSON.stringify(toast.content) === JSON.stringify(content));
+  if (existingToastIndex > -1) {
+    nextToasts[existingToastIndex].lastDuplicateId = id;
+    nextToasts[existingToastIndex].lastUpdated = Date.now();
+  } else {
+    nextToasts.push({
+      id,
+      content: typeof content === 'function' ? content(close) : content,
+      options
+    });
+  }
+  return nextToasts;
+};
+const ToastProvider = ({
+  children,
+  ...props
+}) => {
+  const [toasts, setToasts] = useState([]);
+  const handleClose = id => {
+    setToasts(currentToasts => currentToasts.filter(toast => toast.id !== id));
+  };
+  // memoize (useCallback) this function,
+  // it is the value of the context provider and we don't want it to trigger state tree re-renders on provider children
+  const toaster = useCallback((content, options) => {
+    const id = v4();
+    const close = () => handleClose(id);
+    setToasts(currentToasts => insertToastWithoutDuplicates(currentToasts, id, content, options, close));
+    const update = (content, options) => {
+      setToasts(currentToasts => {
+        const nextToasts = currentToasts.filter(toast => {
+          if (toast.lastDuplicateId) {
+            return toast.lastDuplicateId !== id;
+          }
+          return toast.id !== id;
+        });
+        return insertToastWithoutDuplicates(nextToasts, v4(), content, options, close);
+      });
+    };
+    const success = (content, options) => {
+      update(content, {
+        autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+        ...options,
+        type: 'success'
+      });
+    };
+    const error = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'error'
+      });
+    };
+    const warning = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'warning'
+      });
+    };
+    const information = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'information'
+      });
+    };
+    const loading = (content, options) => {
+      update(content, {
+        ...options,
+        type: 'loading'
+      });
+    };
+    return {
+      success,
+      error,
+      warning,
+      information,
+      loading,
+      close
+    };
+  }, []);
+  // no need to rebind these every render, do them once in an effect
+  useEffect(() => {
+    toaster.success = (content, options) => toaster(content, {
+      autoClose: DEFAULT_AUTO_CLOSE_TIMEOUT,
+      ...options,
+      type: 'success'
+    });
+    toaster.error = (content, options) => toaster(content, {
+      ...options,
+      type: 'error'
+    });
+    toaster.warning = (content, options) => toaster(content, {
+      ...options,
+      type: 'warning'
+    });
+    toaster.information = (content, options) => toaster(content, {
+      ...options,
+      type: 'information'
+    });
+    toaster.loading = (content, options) => toaster(content, {
+      ...options,
+      type: 'loading'
+    });
+  }, []);
+  return /*#__PURE__*/createElement(ToastContext.Provider, Object.assign({}, props, {
+    value: toaster
+  }), children, /*#__PURE__*/createElement("div", {
+    id: "yt-toast__container",
+    className: "pointer-events-all absolute bottom-0 right-0 !left-auto z-[1000] mb-4 mr-4 flex max-w-md flex-col items-end justify-end",
+    role: "log"
+  }, /*#__PURE__*/createElement(AnimatePresence, {
+    initial: false
+  }, toasts.map(toast => /*#__PURE__*/createElement(motion.div, {
+    key: toast.id,
+    transition: {
+      type: 'spring',
+      damping: 20,
+      stiffness: 300
+    },
+    initial: {
+      opacity: 0,
+      y: 10,
+      scale: 0.5
+    },
+    animate: {
+      opacity: 1,
+      y: 0,
+      scale: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0.5,
+      transition: {
+        duration: 0.2
+      }
+    }
+  }, /*#__PURE__*/createElement(Toast, Object.assign({}, toast, {
+    onClose: () => handleClose(toast.id)
+  })))))));
+};
+const useToast = () => useContext(ToastContext);
+
+export { ToastProvider, useToast };
+//# sourceMappingURL=Toaster.js.map