@economic/taco 0.0.1-alpha.2 → 0.0.1-alpha.6

package/dist/components/Backdrop/Backdrop.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare type BackdropProps = React.HTMLAttributes<HTMLDivElement>;
+export declare const Backdrop: (props: BackdropProps) => JSX.Element;

package/dist/esm/_virtual/_commonjsHelpers.js

@@ -0,0 +1,6 @@
+function getCjsExportFromNamespace (n) {
+	return n && n['default'] || n;
+}
+
+export { getCjsExportFromNamespace };
+//# sourceMappingURL=_commonjsHelpers.js.map

package/dist/esm/_virtual/_commonjsHelpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_commonjsHelpers.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/esm/_virtual/tailwindcss-aria-attributes.js_commonjs-proxy

@@ -1,6 +1,7 @@
 import * as tailwindcssAriaAttributes from '../plugins/tailwindcss-aria-attributes.js';
+import { getCjsExportFromNamespace } from './_commonjsHelpers.js';
 
+var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
 
-
-export default tailwindcssAriaAttributes;
+export default require$$0;
 //# sourceMappingURL=tailwindcss-aria-attributes.js_commonjs-proxy.map

package/dist/esm/_virtual/tailwindcss-aria-attributes.js_commonjs-proxy.map

@@ -1 +1 @@
-{"version":3,"file":"tailwindcss-aria-attributes.js_commonjs-proxy","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}
+{"version":3,"file":"tailwindcss-aria-attributes.js_commonjs-proxy","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;"}

package/dist/esm/index.css

@@ -236,7 +236,7 @@
 
 .yt-dialog__drag::before,
 .yt-dialog__drag::after {
-    @apply absolute bg-grey-dark rounded;
+    @apply bg-grey-dark absolute rounded;
     content: '';
     left: theme('spacing.1');
     height: 2px;
@@ -251,7 +251,7 @@
     bottom: 3px;
 }
 
-.yt-dialog *:last-child {
+[data-taco='dialog'] *:last-child {
     @apply mb-0;
 }
 

package/dist/esm/src/components/Backdrop/Backdrop.js

@@ -0,0 +1,12 @@
+import { createElement } from 'react';
+import cn from 'classnames';
+
+var Backdrop = function Backdrop(props) {
+  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
+  return createElement("div", Object.assign({}, props, {
+    className: className
+  }));
+};
+
+export { Backdrop };
+//# sourceMappingURL=Backdrop.js.map

package/dist/esm/src/components/Backdrop/Backdrop.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Backdrop.js","sources":["../../../../../src/components/Backdrop/Backdrop.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\n\nexport type BackdropProps = React.HTMLAttributes<HTMLDivElement>;\n\nexport const Backdrop = (props: BackdropProps) => {\n    const className = cn(\n        'fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden',\n        props.className\n    );\n\n    return <div {...props} className={className} />;\n};\n"],"names":["Backdrop","props","className","cn","React"],"mappings":";;;IAKaA,QAAQ,GAAG,SAAXA,QAAW,CAACC,KAAD;AACpB,MAAMC,SAAS,GAAGC,EAAE,CAChB,iHADgB,EAEhBF,KAAK,CAACC,SAFU,CAApB;AAKA,SAAOE,aAAA,MAAA,oBAASH;AAAOC,IAAAA,SAAS,EAAEA;IAA3B,CAAP;AACH;;;;"}

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

@@ -1,6 +1,7 @@
 import { extends as _extends } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { forwardRef, createElement } from 'react';
 import cn from 'classnames';
+import { Backdrop } from '../../Backdrop/Backdrop.js';
 import { useLocalization } from '../../Provider/Provider.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';
@@ -60,10 +61,9 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     'w-md': dialog.size === 'md',
     'w-lg': dialog.size === 'lg'
   });
-  var containerClassName = cn('yt-dialog 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)]', {
+  var 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);
-  var overlayClassName = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -81,10 +81,9 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
   }
 
   return createElement(Portal, null, createElement(Overlay, {
-    className: overlayClassName
-  }, createElement(Content$1, Object.assign({}, props, {
+    asChild: true
+  }, createElement(Backdrop, null, createElement(Content$1, Object.assign({}, props, {
     className: className,
-    "data-taco": "dialog",
     onEscapeKeyDown: dialog.onClose,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
@@ -94,7 +93,8 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
       top: dialog.draggable ? "calc(50% + " + position.y + "px)" : undefined
     })
   }), createElement("div", {
-    className: containerClassName
+    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"
@@ -106,7 +106,7 @@ var Content = /*#__PURE__*/forwardRef(function DialogContent(props, ref) {
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra)));
+  }))), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 export { Close, Content, Footer, Title };

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

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

package/dist/esm/src/components/Pagination/Pagination.js

@@ -52,6 +52,7 @@ var Pagination = /*#__PURE__*/forwardRef(function Pagination(props, ref) {
   var className = cn('inline-flex relative justify-between items-center', props.className);
   return createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "pagination",
     ref: ref
   }), showPageSize && createElement("span", {
     className: "mr-4"

package/dist/esm/src/components/Pagination/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        data={pageSizes.map(pageSize => ({\n                            text: String(pageSize),\n                            value: pageSize,\n                        }))}\n                        onChange={event => {\n                            setPageIndex(0);\n                            setPageSize(Number(event.target.value));\n                        }}\n                        value={pageSize}\n                    />\n                </span>\n            )}\n            {showPageControls && (\n                <Group as=\"nav\" aria-label={texts.pagination.label}>\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-start\"\n                        onClick={() => setPageIndex(0)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                    />\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-left\"\n                        onClick={() => setPageIndex(pageIndex - 1)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                    />\n                    {showPageNumbers && pageCount > 0 && (\n                        <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                    )}\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-right\"\n                        onClick={() => setPageIndex(pageIndex + 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                    />\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-end\"\n                        onClick={() => setPageIndex(pageCount - 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                    />\n                </Group>\n            )}\n        </div>\n    );\n});\n"],"names":["getShowingLabel","length","pageIndex","pageSize","texts","minItemIndex","maxItemIndex","pagination","showingXofYofTotal","replace","String","Pagination","React","props","ref","pageSizes","setPageIndex","setPageSize","showPageControls","showPageNumbers","showPageSize","dangerouslyHijackGlobalKeyboardNavigation","otherProps","useLocalization","maxPageIndex","Math","ceil","showShortcutTexts","usePaginationShortcuts","pageCount","canPreviousPage","canNextPage","className","cn","Select","data","map","text","value","onChange","event","Number","target","Group","as","label","IconButton","appearance","disabled","icon","onClick","actions","firstPageWithShortcut","firstPage","tooltip","previousPageWithShortcut","previousPage","PageNumbers","currentPageIndex","nextPageWithShortcut","nextPage","lastPageWithShortcut","lastPage"],"mappings":";;;;;;;;;;;;;AAmGA,IAAMA,eAAe,GAAG,SAAlBA,eAAkB,CAACC,MAAD,EAAiBC,SAAjB,EAAoCC,QAApC,EAAsDC,KAAtD;AACpB,MAAMC,YAAY,GAAGH,SAAS,GAAGC,QAAZ,GAAuB,CAA5C;AACA,MAAMG,YAAY,GAAG,CAACJ,SAAS,GAAG,CAAb,IAAkBC,QAAvC;AAEA,SAAOC,KAAK,CAACG,UAAN,CAAiBC,kBAAjB,CACFC,OADE,CACM,KADN,EACaR,MAAM,KAAK,CAAX,GAAe,GAAf,GAAqBS,MAAM,CAACL,YAAD,CADxC,EAEFI,OAFE,CAEM,KAFN,EAEaC,MAAM,CAACJ,YAAY,GAAGL,MAAf,GAAwBA,MAAxB,GAAiCK,YAAlC,CAFnB,EAGFG,OAHE,CAGM,SAHN,EAGiBC,MAAM,CAACT,MAAD,CAHvB,CAAP;AAIH,CARD;;IAUaU,UAAU,gBAAGC,UAAA,CAAiB,SAASD,UAAT,CAAoBE,KAApB,EAA4CC,GAA5C;AACvC,MACIb,MADJ,GAYIY,KAZJ,CACIZ,MADJ;AAAA,MAEIC,SAFJ,GAYIW,KAZJ,CAEIX,SAFJ;AAAA,MAGIC,QAHJ,GAYIU,KAZJ,CAGIV,QAHJ;AAAA,yBAYIU,KAZJ,CAIIE,SAJJ;AAAA,MAIIA,SAJJ,iCAIgB,CAAC,EAAD,EAAK,EAAL,EAAS,EAAT,EAAa,GAAb,EAAkB,GAAlB,CAJhB;AAAA,MAKIC,YALJ,GAYIH,KAZJ,CAKIG,YALJ;AAAA,MAMIC,WANJ,GAYIJ,KAZJ,CAMII,WANJ;AAAA,8BAYIJ,KAZJ,CAOIK,gBAPJ;AAAA,MAOIA,gBAPJ,sCAOuB,IAPvB;AAAA,8BAYIL,KAZJ,CAQIM,eARJ;AAAA,MAQIA,eARJ,sCAQsB,IARtB;AAAA,4BAYIN,KAZJ,CASIO,YATJ;AAAA,MASIA,YATJ,oCASmB,IATnB;AAAA,8BAYIP,KAZJ,CAUIQ,yCAVJ;AAAA,MAUIA,yCAVJ,sCAUgD,KAVhD;AAAA,MAWOC,UAXP,iCAYIT,KAZJ;;AAaA,yBAAkBU,eAAe,EAAjC;AAAA,MAAQnB,KAAR,oBAAQA,KAAR;;AAEA,MAAMoB,YAAY,GAAGC,IAAI,CAACC,IAAL,CAAUzB,MAAM,GAAGE,QAAnB,IAA+B,CAApD;AACA,MAAMwB,iBAAiB,GAAGN,yCAA1B;AAEAO,EAAAA,sBAAsB,CAAC;AACnBZ,IAAAA,YAAY,EAAZA,YADmB;AAEnBQ,IAAAA,YAAY,EAAZA,YAFmB;AAGnBtB,IAAAA,SAAS,EAATA,SAHmB;AAInBmB,IAAAA,yCAAyC,EAAzCA;AAJmB,GAAD,CAAtB;AAOA,MAAMQ,SAAS,GAAGJ,IAAI,CAACC,IAAL,CAAUzB,MAAM,GAAGE,QAAnB,CAAlB;AACA,MAAM2B,eAAe,GAAG5B,SAAS,GAAG,CAApC;AACA,MAAM6B,WAAW,GAAG7B,SAAS,GAAG2B,SAAS,GAAG,CAA5C;AAEA,MAAMG,SAAS,GAAGC,EAAE,CAAC,mDAAD,EAAsDpB,KAAK,CAACmB,SAA5D,CAApB;AAEA,SACIpB,aAAA,MAAA,oBAASU;AAAYU,IAAAA,SAAS,EAAEA;AAAWlB,IAAAA,GAAG,EAAEA;IAAhD,EACKM,YAAY,IACTR,aAAA,OAAA;AAAMoB,IAAAA,SAAS,EAAC;GAAhB,EACKhC,eAAe,CAACC,MAAD,EAASC,SAAT,EAAoBC,QAApB,EAA8BC,KAA9B,CADpB,EAEIQ,aAAA,CAACsB,MAAD;kBACgB9B,KAAK,CAACG,UAAN,CAAiBJ;AAC7B6B,IAAAA,SAAS,EAAC;AACVG,IAAAA,IAAI,EAAEpB,SAAS,CAACqB,GAAV,CAAc,UAAAjC,QAAQ;AAAA,aAAK;AAC7BkC,QAAAA,IAAI,EAAE3B,MAAM,CAACP,QAAD,CADiB;AAE7BmC,QAAAA,KAAK,EAAEnC;AAFsB,OAAL;AAAA,KAAtB;AAINoC,IAAAA,QAAQ,EAAE,kBAAAC,KAAK;AACXxB,MAAAA,YAAY,CAAC,CAAD,CAAZ;AACAC,MAAAA,WAAW,CAACwB,MAAM,CAACD,KAAK,CAACE,MAAN,CAAaJ,KAAd,CAAP,CAAX;AACH;AACDA,IAAAA,KAAK,EAAEnC;GAXX,CAFJ,CAFR,EAmBKe,gBAAgB,IACbN,aAAA,CAAC+B,KAAD;AAAOC,IAAAA,EAAE,EAAC;kBAAkBxC,KAAK,CAACG,UAAN,CAAiBsC;GAA7C,EACIjC,aAAA,CAACkC,UAAD;AACIC,IAAAA,UAAU,EAAC;AACXC,IAAAA,QAAQ,EAAE,CAAClB;AACXmB,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAE;AAAA,aAAMlC,YAAY,CAAC,CAAD,CAAlB;AAAA;kBAELW,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBC,qBADd,GAEXhD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBE;AAEnCC,IAAAA,OAAO,EACH3B,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBC,qBADd,GAEXhD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBE;GAbvC,CADJ,EAiBIzC,aAAA,CAACkC,UAAD;AACIC,IAAAA,UAAU,EAAC;AACXC,IAAAA,QAAQ,EAAE,CAAClB;AACXmB,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAE;AAAA,aAAMlC,YAAY,CAACd,SAAS,GAAG,CAAb,CAAlB;AAAA;kBAELyB,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBI,wBADd,GAEXnD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBK;AAEnCF,IAAAA,OAAO,EACH3B,iBAAiB,GACXvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBI,wBADd,GAEXnD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBK;GAbvC,CAjBJ,EAiCKrC,eAAe,IAAIU,SAAS,GAAG,CAA/B,IACGjB,aAAA,CAAC6C,WAAD;AAAa5B,IAAAA,SAAS,EAAEA;AAAW6B,IAAAA,gBAAgB,EAAExD;AAAWgD,IAAAA,OAAO,EAAElC;GAAzE,CAlCR,EAoCIJ,aAAA,CAACkC,UAAD;AACIC,IAAAA,UAAU,EAAC;AACXC,IAAAA,QAAQ,EAAE,CAACjB;AACXkB,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAE;AAAA,aAAMlC,YAAY,CAACd,SAAS,GAAG,CAAb,CAAlB;AAAA;kBAELyB,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBQ,oBAA5B,GAAmDvD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBS;AAEjGN,IAAAA,OAAO,EACH3B,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBQ,oBAA5B,GAAmDvD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBS;GATrG,CApCJ,EAgDIhD,aAAA,CAACkC,UAAD;AACIC,IAAAA,UAAU,EAAC;AACXC,IAAAA,QAAQ,EAAE,CAACjB;AACXkB,IAAAA,IAAI,EAAC;AACLC,IAAAA,OAAO,EAAE;AAAA,aAAMlC,YAAY,CAACa,SAAS,GAAG,CAAb,CAAlB;AAAA;kBAELF,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBU,oBAA5B,GAAmDzD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBW;AAEjGR,IAAAA,OAAO,EACH3B,iBAAiB,GAAGvB,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBU,oBAA5B,GAAmDzD,KAAK,CAACG,UAAN,CAAiB4C,OAAjB,CAAyBW;GATrG,CAhDJ,CApBR,CADJ;AAqFH,CArHyB;;;;"}
+{"version":3,"file":"Pagination.js","sources":["../../../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react';\nimport cn from 'classnames';\nimport { PageNumbers } from './PageNumbers';\nimport { LocalizationTexts, useLocalization } from '../Provider/Provider';\nimport { Select } from '../Select/Select';\nimport { Group } from '../Group/Group';\nimport { IconButton } from '../IconButton/IconButton';\nimport { usePaginationValues } from './usePagination';\nimport { usePaginationShortcuts } from './usePaginationShortcuts';\n\nexport * from './usePagination';\n\nexport type PaginationTextsActions = {\n    /**\n     * Aria-label for first page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPage: string;\n    /**\n     * Aria-label for first page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    firstPageWithShortcut: string;\n    /**\n     * Aria-label for next page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPage: string;\n    /**\n     * Aria-label for next page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    nextPageWithShortcut: string;\n    /**\n     * Aria-label for previous page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPage: string;\n    /**\n     * Aria-label for previous page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    previousPageWithShortcut: string;\n    /**\n     * Aria-label for last page action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPage: string;\n    /**\n     * Aria-label for last page action button with shortcut.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    lastPageWithShortcut: string;\n    /**\n     * Aria-label for page X action button.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageX: string;\n};\n\nexport type PaginationTexts = {\n    /**\n     * Aria-label provided for page numbers and page actions group.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    label: string;\n    /**\n     * Aria-label provided for page size selection.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    pageSize: string;\n    /**\n     * Text that indicates the number of the first and last element displayed on the current page, out of total items\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    showingXofYofTotal: string;\n    /**\n     * Aria-labels provided for page action buttons.\n     * To read more about how to provide the text, see [Provider](component:provider) component\n     */\n    actions: PaginationTextsActions;\n};\n\nexport type PaginationProps = React.HTMLAttributes<HTMLDivElement> &\n    usePaginationValues & {\n        /** Indicate total number of items that will be paginated */\n        length: number;\n        /** Page size options */\n        pageSizes?: number[];\n        /** Shows page controls */\n        showPageControls?: boolean;\n        /** Shows page numbers between navigation buttons, which allows users to quickly navigate to a specific page */\n        showPageNumbers?: boolean;\n        /** Shows a dropdown with page sizes, which allows user to change the number of items displayed on the page  */\n        showPageSize?: boolean;\n        /** Enable pagination shortcuts */\n        dangerouslyHijackGlobalKeyboardNavigation?: boolean;\n    };\n\nconst getShowingLabel = (length: number, pageIndex: number, pageSize: number, texts: LocalizationTexts): string => {\n    const minItemIndex = pageIndex * pageSize + 1;\n    const maxItemIndex = (pageIndex + 1) * pageSize;\n\n    return texts.pagination.showingXofYofTotal\n        .replace('[X]', length === 0 ? '0' : String(minItemIndex))\n        .replace('[Y]', String(maxItemIndex > length ? length : maxItemIndex))\n        .replace('[total]', String(length));\n};\n\nexport const Pagination = React.forwardRef(function Pagination(props: PaginationProps, ref: React.Ref<HTMLDivElement>) {\n    const {\n        length,\n        pageIndex,\n        pageSize,\n        pageSizes = [10, 25, 50, 100, 500],\n        setPageIndex,\n        setPageSize,\n        showPageControls = true,\n        showPageNumbers = true,\n        showPageSize = true,\n        dangerouslyHijackGlobalKeyboardNavigation = false,\n        ...otherProps\n    } = props;\n    const { texts } = useLocalization();\n\n    const maxPageIndex = Math.ceil(length / pageSize) - 1;\n    const showShortcutTexts = dangerouslyHijackGlobalKeyboardNavigation;\n\n    usePaginationShortcuts({\n        setPageIndex,\n        maxPageIndex,\n        pageIndex,\n        dangerouslyHijackGlobalKeyboardNavigation,\n    });\n\n    const pageCount = Math.ceil(length / pageSize);\n    const canPreviousPage = pageIndex > 0;\n    const canNextPage = pageIndex < pageCount - 1;\n\n    const className = cn('inline-flex relative justify-between items-center', props.className);\n\n    return (\n        <div {...otherProps} className={className} data-taco=\"pagination\" ref={ref}>\n            {showPageSize && (\n                <span className=\"mr-4\">\n                    {getShowingLabel(length, pageIndex, pageSize, texts)}\n                    <Select\n                        aria-label={texts.pagination.pageSize}\n                        className=\"ml-4 !w-20\"\n                        data={pageSizes.map(pageSize => ({\n                            text: String(pageSize),\n                            value: pageSize,\n                        }))}\n                        onChange={event => {\n                            setPageIndex(0);\n                            setPageSize(Number(event.target.value));\n                        }}\n                        value={pageSize}\n                    />\n                </span>\n            )}\n            {showPageControls && (\n                <Group as=\"nav\" aria-label={texts.pagination.label}>\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-start\"\n                        onClick={() => setPageIndex(0)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.firstPageWithShortcut\n                                : texts.pagination.actions.firstPage\n                        }\n                    />\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canPreviousPage}\n                        icon=\"arrow-left\"\n                        onClick={() => setPageIndex(pageIndex - 1)}\n                        aria-label={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                        tooltip={\n                            showShortcutTexts\n                                ? texts.pagination.actions.previousPageWithShortcut\n                                : texts.pagination.actions.previousPage\n                        }\n                    />\n                    {showPageNumbers && pageCount > 0 && (\n                        <PageNumbers pageCount={pageCount} currentPageIndex={pageIndex} onClick={setPageIndex} />\n                    )}\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-right\"\n                        onClick={() => setPageIndex(pageIndex + 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.nextPageWithShortcut : texts.pagination.actions.nextPage\n                        }\n                    />\n                    <IconButton\n                        appearance=\"default\"\n                        disabled={!canNextPage}\n                        icon=\"arrow-end\"\n                        onClick={() => setPageIndex(pageCount - 1)}\n                        aria-label={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                        tooltip={\n                            showShortcutTexts ? texts.pagination.actions.lastPageWithShortcut : texts.pagination.actions.lastPage\n                        }\n                    />\n                </Group>\n            )}\n        </div>\n    );\n});\n"],"names":["getShowingLabel","length","pageIndex","pageSize","texts","minItemIndex","maxItemIndex","pagination","showingXofYofTotal","replace","String","Pagination","React","props","ref","pageSizes","setPageIndex","setPageSize","showPageControls","showPageNumbers","showPageSize","dangerouslyHijackGlobalKeyboardNavigation","otherProps","useLocalization","maxPageIndex","Math","ceil","showShortcutTexts","usePaginationShortcuts","pageCount","canPreviousPage","canNextPage","className","cn","Select","data","map","text","value","onChange","event","Number","target","Group","as","label","IconButton","appearance","disabled","icon","onClick","actions","firstPageWithShortcut","firstPage","tooltip","previousPageWithShortcut","previousPage","PageNumbers","currentPageIndex","nextPageWithShortcut","nextPage","lastPageWithShortcut","lastPage"],"mappings":"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"}

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

@@ -3,6 +3,7 @@ import { forwardRef, createElement } from 'react';
 import '../Icon/components/index.js';
 import '../Icon/Icon.js';
 import '../Accordion/Accordion.js';
+import '../Backdrop/Backdrop.js';
 import '../VisuallyHidden/VisuallyHidden.js';
 import '../Badge/Badge.js';
 import '../Tooltip/Tooltip.js';

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

@@ -1 +1 @@
-{"version":3,"file":"SearchInput.js","sources":["../../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!bg-transparent !border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;IAZT,CADJ;AAgBH,CApC0B;;;;"}
+{"version":3,"file":"SearchInput.js","sources":["../../../../../src/components/SearchInput/SearchInput.tsx"],"sourcesContent":["import * as React from 'react';\nimport keycode from 'keycode';\nimport { Input, InputProps, useLocalization, IconButton } from '../..';\n\nexport type SearchInputTexts = {\n    /**\n     * aria-label text for input\n     */\n    inputLabel: string;\n};\n\nexport type SearchInputProps = Omit<InputProps, 'icon'> & {\n    /** Current input value will be passed to the method. In order to get the value, the component must be controlled otherwise value will always be undefined */\n    onSearch?: (value: string | number | readonly string[] | undefined) => void;\n};\n\nexport const SearchInput = React.forwardRef(function SearchInput(\n    { onSearch, ...props }: SearchInputProps,\n    ref: React.Ref<HTMLInputElement>\n) {\n    const { texts } = useLocalization();\n\n    const handleClick = (): void => {\n        if (!props.disabled) {\n            onSearch?.(props.value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>): void => {\n        const isEnterKeyPressed = event.keyCode === keycode('enter');\n\n        if (isEnterKeyPressed) {\n            handleClick();\n        }\n    };\n\n    return (\n        <Input\n            aria-label={texts.searchInput.inputLabel}\n            {...props}\n            button={\n                <IconButton\n                    icon=\"search\"\n                    className=\"!bg-transparent !border-transparent\"\n                    disabled={props.disabled}\n                    onClick={handleClick}\n                />\n            }\n            onKeyDown={handleKeyDown}\n            ref={ref}\n        />\n    );\n});\n"],"names":["SearchInput","React","ref","onSearch","props","useLocalization","texts","handleClick","disabled","value","handleKeyDown","event","isEnterKeyPressed","keyCode","keycode","Input","searchInput","inputLabel","button","IconButton","icon","className","onClick","onKeyDown"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAgBaA,WAAW,gBAAGC,UAAA,CAAiB,SAASD,WAAT,OAExCE,GAFwC;MACtCC,gBAAAA;MAAaC;;AAGf,yBAAkBC,eAAe,EAAjC;AAAA,MAAQC,KAAR,oBAAQA,KAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc;AAChB,QAAI,CAACH,KAAK,CAACI,QAAX,EAAqB;AACjBL,MAAAA,QAAQ,SAAR,IAAAA,QAAQ,WAAR,YAAAA,QAAQ,CAAGC,KAAK,CAACK,KAAT,CAAR;AACH;AACJ,GAJD;;AAMA,MAAMC,aAAa,GAAG,SAAhBA,aAAgB,CAACC,KAAD;AAClB,QAAMC,iBAAiB,GAAGD,KAAK,CAACE,OAAN,KAAkBC,OAAO,CAAC,OAAD,CAAnD;;AAEA,QAAIF,iBAAJ,EAAuB;AACnBL,MAAAA,WAAW;AACd;AACJ,GAND;;AAQA,SACIN,aAAA,CAACc,KAAD;kBACgBT,KAAK,CAACU,WAAN,CAAkBC;KAC1Bb;AACJc,IAAAA,MAAM,EACFjB,aAAA,CAACkB,UAAD;AACIC,MAAAA,IAAI,EAAC;AACLC,MAAAA,SAAS,EAAC;AACVb,MAAAA,QAAQ,EAAEJ,KAAK,CAACI;AAChBc,MAAAA,OAAO,EAAEf;KAJb;AAOJgB,IAAAA,SAAS,EAAEb;AACXR,IAAAA,GAAG,EAAEA;IAZT,CADJ;AAgBH,CApC0B;;;;"}

package/dist/esm/src/index.js

@@ -1,6 +1,7 @@
 export { icons } from './components/Icon/components/index.js';
 export { Icon } from './components/Icon/Icon.js';
 export { Accordion } from './components/Accordion/Accordion.js';
+export { Backdrop } from './components/Backdrop/Backdrop.js';
 export { VisuallyHidden } from './components/VisuallyHidden/VisuallyHidden.js';
 export { Badge } from './components/Badge/Badge.js';
 export { Tooltip } from './components/Tooltip/Tooltip.js';

package/dist/esm/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.css

@@ -236,7 +236,7 @@
 
 .yt-dialog__drag::before,
 .yt-dialog__drag::after {
-    @apply absolute bg-grey-dark rounded;
+    @apply bg-grey-dark absolute rounded;
     content: '';
     left: theme('spacing.1');
     height: 2px;
@@ -251,7 +251,7 @@
     bottom: 3px;
 }
 
-.yt-dialog *:last-child {
+[data-taco='dialog'] *:last-child {
     @apply mb-0;
 }
 

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import './css/global.css';
 export * from './components/Accordion/Accordion';
+export * from './components/Backdrop/Backdrop';
 export * from './components/Badge/Badge';
 export * from './components/Banner/Banner';
 export * from './components/Button/Button';

package/dist/taco.cjs.development.js

@@ -3188,6 +3188,13 @@ Accordion.Item = Item;
 Accordion.Trigger = Trigger;
 Accordion.Content = Content;
 
+var Backdrop = function Backdrop(props) {
+  var className = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden', props.className);
+  return React.createElement("div", Object.assign({}, props, {
+    className: className
+  }));
+};
+
 var VisuallyHidden = /*#__PURE__*/React.forwardRef(function VisuallyHidden(props, ref) {
   return React.createElement("span", Object.assign({}, props, {
     className: "sr-only",
@@ -4092,10 +4099,9 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     'w-md': dialog.size === 'md',
     'w-lg': dialog.size === 'lg'
   });
-  var containerClassName = cn('yt-dialog 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)]', {
+  var 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);
-  var overlayClassName = cn('fixed inset-0 cursor-default overflow-y-auto bg-[rgba(50,46,62,0.8)] animate-[fade-in_150ms] aria-hidden:hidden'); // the chosen behaviour in taco is that outside clicks do not close the dialog
+  }, props.className); // the chosen behaviour in taco is that outside clicks do not close the dialog
 
   var handleInteractOutside = function handleInteractOutside(event) {
     return event.preventDefault();
@@ -4113,10 +4119,9 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
   }
 
   return React.createElement(DialogPrimitive.Portal, null, React.createElement(DialogPrimitive.Overlay, {
-    className: overlayClassName
-  }, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
+    asChild: true
+  }, React.createElement(Backdrop, null, React.createElement(DialogPrimitive.Content, Object.assign({}, props, {
     className: className,
-    "data-taco": "dialog",
     onEscapeKeyDown: dialog.onClose,
     onInteractOutside: handleInteractOutside,
     onCloseAutoFocus: handleCloseAutoFocus,
@@ -4126,7 +4131,8 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
       top: dialog.draggable ? "calc(50% + " + position.y + "px)" : undefined
     })
   }), React.createElement("div", {
-    className: containerClassName
+    className: containerClassName,
+    "data-taco": "dialog"
   }, output, dialog.draggable && React.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"
@@ -4138,7 +4144,7 @@ var Content$2 = /*#__PURE__*/React.forwardRef(function DialogContent(props, ref)
     "aria-label": texts.dialog.close,
     className: "absolute top-0 right-0 mt-2 mr-2",
     icon: "close"
-  }))), dialog.elements.drawer, dialog.elements.extra)));
+  }))), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 var Drawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -7474,6 +7480,7 @@ var Pagination = /*#__PURE__*/React.forwardRef(function Pagination(props, ref) {
   var className = cn('inline-flex relative justify-between items-center', props.className);
   return React.createElement("div", Object.assign({}, otherProps, {
     className: className,
+    "data-taco": "pagination",
     ref: ref
   }), showPageSize && React.createElement("span", {
     className: "mr-4"
@@ -9419,12 +9426,6 @@ var tailwindcssAriaAttributes = {
     __proto__: null
 };
 
-function getCjsExportFromNamespace (n) {
-	return n && n['default'] || n;
-}
-
-var require$$0 = getCjsExportFromNamespace(tailwindcssAriaAttributes);
-
 var tailwind_config = {
   theme: {
     colors: {
@@ -9500,7 +9501,7 @@ var tailwind_config = {
       }
     }
   },
-  plugins: [/*#__PURE__*/require$$0, /*#__PURE__*/plugin(function (_ref) {
+  plugins: [/*#__PURE__*/tailwindcssAriaAttributes, /*#__PURE__*/plugin(function (_ref) {
     var addUtilities = _ref.addUtilities,
         theme = _ref.theme;
     // ideally we would do this using the @layer utilities directive, but
@@ -9882,6 +9883,7 @@ var useOnClickOutside = function useOnClickOutside(ref, callback) {
 };
 
 exports.Accordion = Accordion;
+exports.Backdrop = Backdrop;
 exports.Badge = Badge;
 exports.Banner = Banner;
 exports.Button = Button$1;