@economic/taco 2.45.0-alpha.2 → 2.45.0-alpha.25

package/dist/esm/packages/taco/src/components/Drawer/components/Content.js.map

@@ -1 +1 @@
-{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <IconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn(\n        'grow flex flex-col',\n        {\n            'overflow-y-hidden': isScrollable,\n            'p-4': !isScrollable,\n        },\n        className\n    );\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyDown('Escape', onEscape);\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            {output}\n            <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n            </div>\n            {showCloseButton ? (\n                <Close>\n                    <IconButton\n                        appearance=\"discrete\"\n                        aria-label={texts.drawer.close}\n                        className=\"absolute right-0 top-0 mr-2 mt-4\"\n                        icon=\"close\"\n                    />\n                </Close>\n            ) : null}\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","externalRef","className","otherProps","useMergedRef","style","setStyle","useState","texts","useLocalization","onClickBack","useCurrentDrawer","cName","cn","useEffect","drawer","_ref$current","current","closest","marginAdjust","closeButton","_drawer$querySelector","querySelector","closeButtonWidth","_closeButton$offsetWi","offsetWidth","closeButtonRightMargin","actionsWrapper","_drawer$querySelector2","actionsWrapperWidth","_actionsWrapper$offse","actionsWrapperRightMargin","marginRight","DialogPrimitive","IconButton","appearance","back","icon","Footer","DrawerFooter","Actions","Group","id","Close","DrawerClose","onClose","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current2","contains","target","preventDefault","containerWidth","setContainerWidth","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","x","_contentRef$current","resizedWidth","Math","min","max","output","content","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}
+{"version":3,"file":"Content.js","sources":["../../../../../../../../src/components/Drawer/components/Content.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { Group, GroupProps } from '../../Group/Group';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Backdrop } from '../../Backdrop/Backdrop';\nimport { useCurrentMenu } from '../../Menu/Context';\nimport { useCurrentDrawer } from '../Context';\nimport {\n    getBackdropClassNames,\n    getDrawerContainerClassNames,\n    getDrawerContentClassNames,\n    getDrawerDragHandlerClassNames,\n} from '../util';\nimport { useDraggable } from '../../../utils/hooks/useDraggable';\nimport { useMergedRef } from '../../../hooks/useMergedRef';\nimport { FocusScope } from '@react-aria/focus';\nimport { ScrollArea } from '../../ScrollArea/ScrollArea';\nimport { useGlobalKeyDown } from '../../../hooks/useGlobalKeyDown';\n\nconst RESIZE_MIN = 360;\nconst RESIZE_MAX = 1000;\n\nexport type DrawerContentRenderProps = {\n    close: () => void;\n};\n\nexport enum DrawerAnimationDefinition {\n    Visible = 'visible',\n    Hidden = 'hidden',\n}\n\nconst RenderPropWrapper = React.forwardRef(function RenderPropWrapper({ children, onClick, renderProps }: any, ref) {\n    const close = () => {\n        onClick(new CustomEvent('close'));\n    };\n\n    return children({ close, ref, ...renderProps });\n});\n\nexport type DrawerTitleProps = React.HTMLAttributes<HTMLHeadingElement>;\nexport const Title = React.forwardRef(function DrawerTitle(props: DrawerTitleProps, externalRef: React.Ref<HTMLHeadingElement>) {\n    const { className, children, ...otherProps } = props;\n    const ref = useMergedRef<HTMLHeadingElement>(externalRef);\n    const [style, setStyle] = React.useState({});\n    const { texts } = useLocalization();\n    const { onClickBack } = useCurrentDrawer();\n\n    /**\n     * By design in default drawer version Title has grey separator, but we might have exceptions like Drawer + Tabs scenario,\n     * where we might want to hide the grey separator. For this reason separator was rendered with using of classNames,\n     * so it can be easily overriden in exceptional scenarios.\n     *  */\n    const cName = cn('grow-0 py-4 px-4 justify-self-start mb-0 border-b-[1px] border-grey-300 flex items-start', className);\n\n    React.useEffect(() => {\n        const drawer = ref?.current?.closest('[data-taco=\"drawer\"]');\n\n        // This is the margin amount that we need to deduct from the margins to align with the design\n        const marginAdjust = 4;\n\n        const closeButton: HTMLButtonElement | null = drawer?.querySelector(`[aria-label=\"${texts.drawer.close}\"]`) ?? null;\n        const closeButtonWidth = closeButton?.offsetWidth ?? 0;\n        const closeButtonRightMargin = 8;\n\n        const actionsWrapper: HTMLSpanElement | null = drawer?.querySelector(`#taco-drawer-actions[data-taco=\"group\"]`) ?? null;\n        const actionsWrapperWidth = actionsWrapper?.offsetWidth ?? 0;\n        const actionsWrapperRightMargin = 8;\n\n        const marginRight =\n            closeButtonWidth + actionsWrapperWidth + closeButtonRightMargin + actionsWrapperRightMargin - marginAdjust;\n\n        setStyle({ marginRight });\n    }, [ref, texts.drawer.close]);\n\n    return (\n        <DialogPrimitive.Title className={cName} {...otherProps} ref={ref}>\n            {onClickBack ? (\n                <IconButton\n                    appearance=\"discrete\"\n                    aria-label={texts.drawer.back}\n                    className=\"mr-3 text-base\"\n                    icon=\"chevron-left\"\n                    onClick={onClickBack}\n                />\n            ) : null}\n            {\n                // We need to apply the right margin as an inline style instead of using Tailwind CSS.\n                // This is necessary because we are creating styles dynamically at runtime,\n                // and Tailwind doesn't support generating runtime styles.\n            }\n            <span className=\"line-clamp-2 inline-block overflow-y-hidden\" style={style}>\n                {children}\n            </span>\n        </DialogPrimitive.Title>\n    );\n});\n\nexport type DrawerFooterProps = React.HTMLAttributes<HTMLDivElement>;\nexport const Footer = React.forwardRef(function DrawerFooter(props: DrawerFooterProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    /**\n     * The same scenario as Title, grey separator rendered using classNames to have posibility to override it.\n     */\n    const cName = cn('mt-auto flex justify-end grow-0 p-4 border-t-[1px] border-grey-300', props.className);\n    return <div {...otherProps} className={cName} ref={ref} />;\n});\n\nexport const Actions = React.forwardRef(function Actions(props: GroupProps, ref: React.Ref<HTMLDivElement>) {\n    const { className, ...otherProps } = props;\n    const cName = cn('absolute top-0 right-10 mr-[8px] mt-4', className);\n    // Id is added to identify the actions wrapper inside a useEffect in Dialog.Title\n    return <Group {...otherProps} className={cName} id=\"taco-drawer-actions\" ref={ref} />;\n});\n\nexport type DrawerCloseProps = React.HTMLAttributes<HTMLButtonElement>;\nexport const Close = React.forwardRef(function DrawerClose(props: DrawerCloseProps, ref: React.Ref<HTMLButtonElement>) {\n    const { onClose } = useCurrentDrawer();\n\n    return <DialogPrimitive.Close {...props} onClick={onClose} ref={ref} asChild />;\n});\n\n/**\n * It is container component, needed to provide default scrolling behaviour and padding, to simplyfy usage, requested by feature devs.\n * It is optional to use InnerContent component, if consumer need to implement custom behaviour or paddings for inner content,\n * then it's simply enough to render children and wrap them in custom implementation.\n */\nexport type DrawerInnerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    /**\n     * Consumer might want to use innerContent component to apply default paddings, but want to implement custom scrolling behaviour,\n     * default value - true\n     */\n    isScrollable?: boolean;\n};\nexport const InnerContent = React.forwardRef(function InnerContent(\n    props: DrawerInnerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { className, isScrollable = true, children, ...otherProps } = props;\n    const cName = cn(\n        'grow flex flex-col',\n        {\n            'overflow-y-hidden': isScrollable,\n            'p-4': !isScrollable,\n        },\n        className\n    );\n    return (\n        <div {...otherProps} className={cName} ref={ref}>\n            {isScrollable ? <ScrollArea className=\"w-full gap-y-0.5 p-4\">{children}</ScrollArea> : children}\n        </div>\n    );\n});\n\nconst Portal = (props: DialogPrimitive.DialogPortalProps) => {\n    const { children, ...otherProps } = props;\n    const { open = false, variant, outlet } = useCurrentDrawer();\n\n    const backdropClassNames = React.useMemo(() => {\n        return getBackdropClassNames(open);\n    }, [open]);\n\n    if (!outlet) {\n        return null;\n    }\n\n    return (\n        <DialogPrimitive.Portal {...otherProps} container={outlet ?? undefined}>\n            {variant === 'overlay' ? (\n                <DialogPrimitive.Overlay forceMount>\n                    {/* Animate backdrop appearance for overlay version of Drawer */}\n                    <Backdrop className={backdropClassNames} />\n                </DialogPrimitive.Overlay>\n            ) : null}\n            {children}\n        </DialogPrimitive.Portal>\n    );\n};\n\ntype UntrappedFocusDrawerContentProps = React.HTMLAttributes<HTMLDivElement> & {\n    onEscape: (event: KeyboardEvent) => void;\n};\nconst UntrappedFocusDrawerContent = React.forwardRef(function EmbeddedDrawerContent(\n    props: UntrappedFocusDrawerContentProps,\n    ref: React.Ref<HTMLDivElement>\n) {\n    const { onEscape, children, ...otherProps } = props;\n\n    useGlobalKeyDown('Escape', onEscape);\n\n    return (\n        <div {...otherProps} ref={ref}>\n            <FocusScope autoFocus={true} restoreFocus={true}>\n                {children}\n            </FocusScope>\n        </div>\n    );\n});\n\nexport type DrawerContentProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> & {\n    /** An accessible label to be announced when the side drawer is opened */\n    'aria-label': string;\n    children: Omit<React.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);\n};\nexport const DrawerContent = React.forwardRef(function Content(\n    props: DrawerContentProps,\n    externalRef: React.Ref<HTMLDivElement>\n) {\n    const {\n        size,\n        onClose,\n        onResize,\n        open = false,\n        closeOnEscape,\n        variant,\n        focusTrap,\n        showCloseButton,\n        setOpen,\n    } = useCurrentDrawer();\n    const { className, style, children, ...otherProps } = props;\n    const { texts } = useLocalization();\n    const ref = useMergedRef<HTMLDivElement>(externalRef);\n\n    // if the drawer was opened by a menu, we need to close the menu when the drawer closes\n    // the menu is still open (and mounted) because it is the trigger for the drawer\n    const menu = useCurrentMenu();\n    let handleCloseAutoFocus: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];\n\n    if (menu) {\n        handleCloseAutoFocus = () => {\n            menu.close();\n        };\n    }\n\n    const containerClassName: string = React.useMemo(() => cn(getDrawerContainerClassNames(variant), className), [className]);\n\n    const { contentClassName, dragHandlerClassName } = React.useMemo(() => {\n        const contentClassName = getDrawerContentClassNames(size, variant, open);\n        const dragHandlerClassName: string = getDrawerDragHandlerClassNames();\n        return { contentClassName, dragHandlerClassName };\n    }, [size, variant, open]);\n\n    const handleEscapeKeyDown = (event: KeyboardEvent) => {\n        const isTargetInsideDrawerContent = ref.current?.contains(event.target as HTMLElement);\n        if (isTargetInsideDrawerContent) {\n            if (!closeOnEscape) {\n                event.preventDefault();\n            } else {\n                setOpen && setOpen(false);\n                if (onClose) {\n                    onClose();\n                }\n            }\n        }\n    };\n\n    const [containerWidth, setContainerWidth] = React.useState<number>();\n\n    const dragHandlerRef = React.useRef<HTMLDivElement>(null);\n    const {\n        position,\n        dragging,\n        handleProps: dragHandleProps,\n        resetPosition,\n    } = useDraggable(useMergedRef<HTMLDivElement>(dragHandlerRef));\n\n    const contentRef = React.useRef<HTMLDivElement>(null);\n\n    React.useEffect(() => {\n        if (onResize) {\n            onResize(position.x);\n        }\n    }, [position]);\n\n    React.useEffect(() => {\n        setContainerWidth(contentRef.current?.offsetWidth);\n    }, [contentRef, open]);\n\n    const resizedWidth = React.useMemo((): number | undefined => {\n        if (containerWidth) {\n            return Math.min(RESIZE_MAX, Math.max(RESIZE_MIN, containerWidth - position.x || 0));\n        }\n        return;\n    }, [containerWidth, position]);\n\n    React.useEffect(() => {\n        if (!dragging && resizedWidth) {\n            setContainerWidth(resizedWidth);\n            resetPosition();\n        }\n    }, [dragging]);\n\n    let output;\n\n    if (typeof children === 'function') {\n        output = (\n            <Close>\n                <RenderPropWrapper>{children}</RenderPropWrapper>\n            </Close>\n        );\n    } else {\n        output = children;\n    }\n\n    const content = (\n        <div ref={contentRef} data-taco=\"drawer\" className={containerClassName}>\n            <>\n                {output}\n                <div className={dragHandlerClassName} {...dragHandleProps} data-testid=\"resize-handler\" ref={dragHandlerRef}>\n                    {dragging ? <div data-testid=\"resize-hit-area\" className=\"fixed bottom-0 left-0 right-0 top-0\" /> : null}\n                </div>\n                {showCloseButton ? (\n                    <Close>\n                        <IconButton\n                            appearance=\"discrete\"\n                            aria-label={texts.drawer.close}\n                            className=\"absolute right-0 top-0 mr-2 mt-4\"\n                            icon=\"close\"\n                        />\n                    </Close>\n                ) : null}\n            </>\n        </div>\n    );\n\n    const styleProp = {\n        ...style,\n        ...{ width: resizedWidth },\n    };\n\n    return focusTrap ? (\n        <DialogPrimitive.Content\n            forceMount\n            {...otherProps}\n            className={contentClassName}\n            onEscapeKeyDown={handleEscapeKeyDown}\n            onInteractOutside={variant === 'overlay' ? undefined : event => event.preventDefault()}\n            onCloseAutoFocus={handleCloseAutoFocus}\n            ref={ref}\n            style={styleProp}>\n            {content}\n        </DialogPrimitive.Content>\n    ) : (\n        <UntrappedFocusDrawerContent onEscape={handleEscapeKeyDown} className={contentClassName} style={styleProp} ref={ref}>\n            {content}\n        </UntrappedFocusDrawerContent>\n    );\n});\n\nexport const Content = React.forwardRef(function Content(props: DrawerContentProps, externalRef: React.Ref<HTMLDivElement>) {\n    const { children } = props;\n\n    return (\n        <Portal>\n            <DrawerContent {...props} ref={externalRef}>\n                {children}\n            </DrawerContent>\n        </Portal>\n    );\n});\n"],"names":["RESIZE_MIN","RESIZE_MAX","DrawerAnimationDefinition","RenderPropWrapper","React","forwardRef","children","onClick","renderProps","ref","close","CustomEvent","Title","DrawerTitle","props","externalRef","className","otherProps","useMergedRef","style","setStyle","useState","texts","useLocalization","onClickBack","useCurrentDrawer","cName","cn","useEffect","drawer","_ref$current","current","closest","marginAdjust","closeButton","_drawer$querySelector","querySelector","closeButtonWidth","_closeButton$offsetWi","offsetWidth","closeButtonRightMargin","actionsWrapper","_drawer$querySelector2","actionsWrapperWidth","_actionsWrapper$offse","actionsWrapperRightMargin","marginRight","DialogPrimitive","IconButton","appearance","back","icon","Footer","DrawerFooter","Actions","Group","id","Close","DrawerClose","onClose","asChild","InnerContent","isScrollable","ScrollArea","Portal","open","variant","outlet","backdropClassNames","useMemo","getBackdropClassNames","container","undefined","forceMount","Backdrop","UntrappedFocusDrawerContent","EmbeddedDrawerContent","onEscape","useGlobalKeyDown","FocusScope","autoFocus","restoreFocus","DrawerContent","Content","size","onResize","closeOnEscape","focusTrap","showCloseButton","setOpen","menu","useCurrentMenu","handleCloseAutoFocus","containerClassName","getDrawerContainerClassNames","contentClassName","dragHandlerClassName","getDrawerContentClassNames","getDrawerDragHandlerClassNames","handleEscapeKeyDown","event","isTargetInsideDrawerContent","_ref$current2","contains","target","preventDefault","containerWidth","setContainerWidth","dragHandlerRef","useRef","position","dragging","handleProps","dragHandleProps","resetPosition","useDraggable","contentRef","x","_contentRef$current","resizedWidth","Math","min","max","output","content","styleProp","width","onEscapeKeyDown","onInteractOutside","onCloseAutoFocus"],"mappings":"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"}

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

@@ -37,7 +37,8 @@ const Title = /*#__PURE__*/forwardRef(function DialogTitle(props, ref) {
 });
 const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
   const {
-    placement: side
+    placement: side,
+    hideWhenDetached = false
   } = props;
   const context = useContext(HangerContext);
   const {
@@ -53,7 +54,8 @@ const Content = /*#__PURE__*/forwardRef(function HangerContent(props, ref) {
     onInteractOutside: handleInteractOutside,
     side: side,
     sideOffset: 1,
-    ref: ref
+    ref: ref,
+    hideWhenDetached: hideWhenDetached
   }, props.children, /*#__PURE__*/createElement(UnstyledArrow, {
     className: "text-blue-500"
   }), /*#__PURE__*/createElement(Close, {

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

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

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js

@@ -11,15 +11,13 @@ import '../../../primitives/Collection/Collection.js';
 import { AgreementItem } from './Agreement/Item.js';
 import { AgreementDisplay as AgreementDisplay$1 } from './Agreement/Display.js';
 
-const Container = ({
-  children
-}) => {
+const Container = props => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
-  }), children);
+  }), props.children);
 };
 function AgreementSelector(props) {
   const {

package/dist/esm/packages/taco/src/components/Header/components/AgreementSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { AgreementItem } from './Agreement/Item';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = ({ children }: React.PropsWithChildren) => {\n    return (\n        <div\n            className=\"-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {children}\n        </div>\n    );\n};\n\nexport type AgreementSelectorProps = {\n    agreements: Agreement[];\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, searchValue: string, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger className=\"xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none\">\n                    <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </Display>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        className=\"focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, search, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            className=\"focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        className=\"focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            onChangeAgreement(agreement);\n        }\n    };\n\n    return (\n        <button\n            aria-current={isCurrentAgreement ? 'true' : undefined}\n            className=\"focus:yt-focus-dark w-full rounded outline-none\"\n            data-taco=\"header-agreements-agreement\"\n            key={`${agreement.number}_${agreement.userId}`}\n            onClick={() => onChangeAgreement(agreement)}\n            onKeyDown={handleKeyDown}\n            tabIndex={0}>\n            <AgreementItem\n                {...agreement}\n                className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </button>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc} />\n        </Container>\n    );\n}\n"],"names":["Container","children","React","className","AgreementSelector","props","agreements","currentAgreement","fallbackImageSrc","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","_collectionRef$curren","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Display","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined","AgreementItem","AgreementDisplay"],"mappings":"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"}
+{"version":3,"file":"AgreementSelector.js","sources":["../../../../../../../../src/components/Header/components/AgreementSelector.tsx"],"sourcesContent":["import React from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { useControllableState } from '@radix-ui/react-use-controllable-state';\nimport * as CollectionPrimitive from '../../../primitives/Collection/Collection';\nimport { AgreementItem } from './Agreement/Item';\nimport { createCustomKeyboardEvent } from '../../../utils/input';\nimport { Icon } from '../../Icon/Icon';\nimport { SearchInput } from '../../SearchInput/SearchInput';\nimport { Button } from '../../Button/Button';\nimport { useLocalization } from '../../Provider/Localization';\nimport { Agreement } from './Agreement/types';\nimport { AgreementDisplay as Display } from './Agreement/Display';\n\nconst Container = (props: React.PropsWithChildren) => {\n    return (\n        <div\n            className=\"-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64\"\n            data-taco=\"header-agreements\">\n            <span className=\"hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex\" />\n            {props.children}\n        </div>\n    );\n};\n\nexport type AgreementSelectorProps = {\n    agreements: Agreement[];\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n    filterAgreement: (agreement: Agreement, filter: (agreement: Agreement) => boolean) => void;\n    filterClientAgreement: (agreement: Agreement, searchValue: string, filter: (agreement: Agreement) => boolean) => void;\n    onAddAgreement?: () => void;\n    onChangeAgreement: (agreement: Agreement) => void;\n    onLogout: () => void;\n    open?: boolean;\n    setOpen?: (open: boolean) => void;\n};\n\nexport function AgreementSelector(props: AgreementSelectorProps) {\n    const {\n        agreements,\n        currentAgreement,\n        fallbackImageSrc,\n        filterAgreement = () => true,\n        filterClientAgreement = () => true,\n        onAddAgreement: handleAddAgreement,\n        onChangeAgreement,\n        onLogout: handleLogout,\n        open: prop,\n        setOpen: onChange,\n    } = props;\n    const { texts } = useLocalization();\n    const collectionRef = React.useRef<CollectionPrimitive.CollectionRef | null>(null);\n    const [open, setOpen] = useControllableState<boolean>({\n        onChange,\n        prop,\n    });\n    const [search, setSearch] = React.useState('');\n\n    React.useEffect(() => {\n        setSearch('');\n    }, [open]);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === 'Enter') {\n            event.preventDefault();\n            collectionRef.current?.dispatchEvent(createCustomKeyboardEvent(event as React.KeyboardEvent<HTMLInputElement>));\n        }\n    };\n\n    const handleChangeAgreement = (agreement: Agreement) => {\n        onChangeAgreement(agreement);\n        setOpen(false);\n    };\n\n    return (\n        <Container>\n            <PopoverPrimitive.Root open={open} onOpenChange={setOpen}>\n                <PopoverPrimitive.Trigger className=\"xl:focus-visible:yt-focus-dark [&:focus-visible_img]:yt-focus-dark w-full rounded outline-none xl:[&:focus-visible_img]:shadow-none\">\n                    <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc}>\n                        {agreements ? (\n                            <Icon\n                                className=\"ml-auto hidden flex-shrink-0 flex-grow-0 text-white xl:flex\"\n                                name={open ? 'chevron-up' : 'chevron-down'}\n                            />\n                        ) : null}\n                    </Display>\n                </PopoverPrimitive.Trigger>\n                <PopoverPrimitive.Content className=\"z-[996] mt-2 flex h-[calc(100vh_-_theme(spacing.16))] w-64 flex-col gap-1 bg-blue-900\">\n                    <SearchInput\n                        autoFocus\n                        className=\"focus-visible:!yt-focus-dark mx-2 !border-transparent !bg-white/[0.08] !text-white hover:!bg-white/[0.16] hover:!shadow-none focus:!bg-white/[0.16] active:!bg-white/[0.16] [&+div>button]:!text-white\"\n                        onChange={event => setSearch(event.target.value)}\n                        onKeyDown={handleKeyDown}\n                        placeholder={texts.header.search}\n                    />\n                    <CollectionPrimitive.Root\n                        querySelector=\"button\"\n                        className=\"-my-1 flex w-full flex-grow flex-col gap-1 overflow-auto px-2 py-1 outline-none\"\n                        ref={collectionRef}\n                        tabIndex={-1}>\n                        {agreements\n                            ?.filter(agreement => filterAgreement(agreement, filterBySearchValue(search)))\n                            .map(agreement => {\n                                const button = createAgreementButton(\n                                    agreement,\n                                    fallbackImageSrc,\n                                    handleChangeAgreement,\n                                    isCurrentAgreement(agreement, currentAgreement)\n                                );\n\n                                if (agreement.clients) {\n                                    return (\n                                        <span\n                                            className=\"flex flex-col gap-px [&>*:first-child>span]:!rounded-t [&>*:last-child>span]:!rounded-b [&>*>span]:!rounded-none\"\n                                            key={`${agreement.number}_${agreement.userId}_clients`}>\n                                            {filterBySearchValue(search)(agreement) ? button : null}\n                                            {agreement.clients\n                                                .filter(agreement =>\n                                                    filterClientAgreement(agreement, search, filterBySearchValue(search))\n                                                )\n                                                .map(clientAgreement =>\n                                                    createAgreementButton(\n                                                        clientAgreement,\n                                                        fallbackImageSrc,\n                                                        handleChangeAgreement,\n                                                        isCurrentAgreement(clientAgreement, currentAgreement)\n                                                    )\n                                                )}\n                                        </span>\n                                    );\n                                }\n\n                                return button;\n                            })}\n                    </CollectionPrimitive.Root>\n                    {handleAddAgreement ? (\n                        <Button\n                            className=\"focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]\"\n                            onClick={handleAddAgreement}>\n                            {texts.header.addAgreement}\n                        </Button>\n                    ) : null}\n                    <hr className=\"my-0 h-px w-full bg-white/[0.08]\" />\n                    <a\n                        className=\"focus-visible:yt-focus-dark mx-2 mb-2 flex h-8 shrink-0 items-center justify-center rounded text-white hover:cursor-pointer hover:text-white hover:underline focus-visible:outline-none\"\n                        onClick={handleLogout}\n                        tabIndex={0}>\n                        {texts.header.logout}\n                    </a>\n                </PopoverPrimitive.Content>\n            </PopoverPrimitive.Root>\n        </Container>\n    );\n}\n\nconst filterBySearchValue = (search: string) => (agreement: Agreement) => {\n    if (!search || !search.length) {\n        return true;\n    }\n\n    const matchesAgreementNumber = String(agreement.number).indexOf(search) > -1;\n    const matchesCompanyName = agreement.name.toLowerCase().indexOf(search.toLowerCase()) > -1;\n\n    return matchesAgreementNumber || matchesCompanyName;\n};\n\nconst isCurrentAgreement = (agreement: Agreement, currentAgreement: Agreement) => {\n    return agreement.number === currentAgreement.number && agreement.userId === currentAgreement.userId;\n};\n\nconst createAgreementButton = (\n    agreement: Agreement,\n    fallbackImageSrc: string,\n    onChangeAgreement: (agreement: Agreement) => void,\n    isCurrentAgreement = false\n) => {\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {\n        if (event.key === 'Enter') {\n            onChangeAgreement(agreement);\n        }\n    };\n\n    return (\n        <button\n            aria-current={isCurrentAgreement ? 'true' : undefined}\n            className=\"focus:yt-focus-dark w-full rounded outline-none\"\n            data-taco=\"header-agreements-agreement\"\n            key={`${agreement.number}_${agreement.userId}`}\n            onClick={() => onChangeAgreement(agreement)}\n            onKeyDown={handleKeyDown}\n            tabIndex={0}>\n            <AgreementItem\n                {...agreement}\n                className=\"h-14 bg-white/[0.08] xl:hover:bg-white/[0.16] [[aria-current='true']>&]:bg-white/[0.16]\"\n                fallbackImageSrc={fallbackImageSrc}\n            />\n        </button>\n    );\n};\n\nexport type AgreementDisplayProps = React.HTMLAttributes<HTMLDivElement> & {\n    currentAgreement: Agreement;\n    fallbackImageSrc: string;\n};\n\nexport function AgreementDisplay(props: AgreementDisplayProps) {\n    const { currentAgreement, fallbackImageSrc } = props;\n\n    return (\n        <Container>\n            <Display currentAgreement={currentAgreement} fallbackImageSrc={fallbackImageSrc} />\n        </Container>\n    );\n}\n"],"names":["Container","props","React","className","children","AgreementSelector","agreements","currentAgreement","fallbackImageSrc","filterAgreement","filterClientAgreement","onAddAgreement","handleAddAgreement","onChangeAgreement","onLogout","handleLogout","open","prop","setOpen","onChange","texts","useLocalization","collectionRef","useRef","useControllableState","search","setSearch","useState","useEffect","handleKeyDown","event","key","_collectionRef$curren","preventDefault","current","dispatchEvent","createCustomKeyboardEvent","handleChangeAgreement","agreement","PopoverPrimitive","onOpenChange","Display","Icon","name","SearchInput","autoFocus","target","value","onKeyDown","placeholder","header","CollectionPrimitive","querySelector","ref","tabIndex","filter","filterBySearchValue","map","button","createAgreementButton","isCurrentAgreement","clients","number","userId","clientAgreement","Button","onClick","addAgreement","logout","length","matchesAgreementNumber","String","indexOf","matchesCompanyName","toLowerCase","undefined","AgreementItem","AgreementDisplay"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Icon/components/Autopay.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+function IconAutopay(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M1.367 6.142a.734.734 0 011.003.269l.83 1.438a9.885 9.885 0 017.774-5.769 9.993 9.993 0 015.73.975 10.135 10.135 0 014.249 4.002.734.734 0 01-1.272.734 8.667 8.667 0 00-3.633-3.422 8.525 8.525 0 00-4.888-.832 8.417 8.417 0 00-6.355 4.376l.749-.433a.734.734 0 01.734 1.271l-2.56 1.479a.734.734 0 01-1.004-.269L1.098 7.145a.734.734 0 01.27-1.003zm2.895 10.273a.734.734 0 011.003.269 7.627 7.627 0 003.384 3.09 8.195 8.195 0 004.668.668 8.64 8.64 0 004.376-2.005c.792-.684 1.427-1.318 1.895-2.138l-.731.422a.734.734 0 01-.734-1.27l2.495-1.442a.734.734 0 011.003.27l1.501 2.6a.734.734 0 01-1.271.734l-.683-1.183c-.6 1.326-1.485 2.229-2.516 3.118a10.107 10.107 0 01-5.122 2.346 9.664 9.664 0 01-5.504-.79 9.095 9.095 0 01-4.032-3.686.734.734 0 01.268-1.003zm7.382-8.75c0-.372.264-.498.522-.498s.521.132.521.499v.413c.763.097 1.446.361 1.87.774.321.304.493.642.493.963 0 .379-.298.643-.66.643-.309 0-.544-.11-.83-.356-.488-.464-.901-.648-1.475-.648-.676 0-1.107.384-1.107.866 0 .43.333.706 1.062.849l1.285.267c1.31.307 1.955 1.01 1.955 2.13 0 1.36-1.004 2.3-2.61 2.489v.361c0 .367-.264.5-.522.5s-.527-.133-.527-.5v-.35c-.872-.074-1.64-.344-2.116-.785-.322-.293-.505-.625-.505-.97 0-.447.327-.7.734-.7.252 0 .459.081.786.357.51.464 1.072.705 1.651.705.809 0 1.245-.361 1.245-.912 0-.43-.327-.682-1.153-.86l-1.281-.282c-1.253-.316-1.885-1.044-1.885-2.155 0-1.325.998-2.254 2.547-2.398v-.401z",
+    fill: "currentColor"
+  }));
+}
+var Autopay = /*#__PURE__*/forwardRef(IconAutopay);
+
+export default Autopay;
+//# sourceMappingURL=Autopay.js.map

package/dist/esm/packages/taco/src/components/Icon/components/Autopay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Autopay.js","sources":["../../../../../../../../src/components/Icon/components/Autopay.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconAutopay(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M1.367 6.142a.734.734 0 011.003.269l.83 1.438a9.885 9.885 0 017.774-5.769 9.993 9.993 0 015.73.975 10.135 10.135 0 014.249 4.002.734.734 0 01-1.272.734 8.667 8.667 0 00-3.633-3.422 8.525 8.525 0 00-4.888-.832 8.417 8.417 0 00-6.355 4.376l.749-.433a.734.734 0 01.734 1.271l-2.56 1.479a.734.734 0 01-1.004-.269L1.098 7.145a.734.734 0 01.27-1.003zm2.895 10.273a.734.734 0 011.003.269 7.627 7.627 0 003.384 3.09 8.195 8.195 0 004.668.668 8.64 8.64 0 004.376-2.005c.792-.684 1.427-1.318 1.895-2.138l-.731.422a.734.734 0 01-.734-1.27l2.495-1.442a.734.734 0 011.003.27l1.501 2.6a.734.734 0 01-1.271.734l-.683-1.183c-.6 1.326-1.485 2.229-2.516 3.118a10.107 10.107 0 01-5.122 2.346 9.664 9.664 0 01-5.504-.79 9.095 9.095 0 01-4.032-3.686.734.734 0 01.268-1.003zm7.382-8.75c0-.372.264-.498.522-.498s.521.132.521.499v.413c.763.097 1.446.361 1.87.774.321.304.493.642.493.963 0 .379-.298.643-.66.643-.309 0-.544-.11-.83-.356-.488-.464-.901-.648-1.475-.648-.676 0-1.107.384-1.107.866 0 .43.333.706 1.062.849l1.285.267c1.31.307 1.955 1.01 1.955 2.13 0 1.36-1.004 2.3-2.61 2.489v.361c0 .367-.264.5-.522.5s-.527-.133-.527-.5v-.35c-.872-.074-1.64-.344-2.116-.785-.322-.293-.505-.625-.505-.97 0-.447.327-.7.734-.7.252 0 .459.081.786.357.51.464 1.072.705 1.651.705.809 0 1.245-.361 1.245-.912 0-.43-.327-.682-1.153-.86l-1.281-.282c-1.253-.316-1.885-1.044-1.885-2.155 0-1.325.998-2.254 2.547-2.398v-.401z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconAutopay);\n"],"names":["IconAutopay","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,WAAWA,CAACC,KAAoC,EAAEC,MAAiC;EACxF,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,y2CAAy2C;IAC32CN,IAAI,EAAC;IACP,CACA;AAEd;AACA,2BAAeD,UAAgB,CAACH,WAAW,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/AutopayPaused.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+function IconAutopayPaused(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M9.356 2.503a.743.743 0 10.449 1.417 9.323 9.323 0 011.909-.391 8.998 8.998 0 011.883.013.743.743 0 10.168-1.476 10.484 10.484 0 00-2.195-.016 10.81 10.81 0 00-2.214.453zM7.46 5.037a.743.743 0 10-.817-1.241c-.628.413-1.215.893-1.747 1.433-.52.528-.978 1.103-1.366 1.712a.743.743 0 101.253.798 8.928 8.928 0 011.17-1.467A9.28 9.28 0 017.46 5.037zm9.14-2.22a.743.743 0 00-.59 1.363 7.904 7.904 0 011.611.935c.484.363.914.776 1.287 1.229a.743.743 0 001.147-.945 9.004 9.004 0 00-1.54-1.472 9.387 9.387 0 00-1.915-1.11zM3.767 10.008a.743.743 0 10-1.432-.396A9.316 9.316 0 002 11.795a.743.743 0 101.485.048 7.83 7.83 0 01.282-1.835zm17.716-2.152a.743.743 0 10-1.389.529c.21.549.353 1.126.425 1.723a.743.743 0 101.476-.18 8.81 8.81 0 00-.512-2.072zm-9.28-.732c-.26 0-.527.127-.527.505v.406c-1.567.145-2.577 1.085-2.577 2.426 0 1.125.639 1.862 1.907 2.182l1.296.285c.836.18 1.167.435 1.167.87 0 .558-.441.923-1.26.923-.586 0-1.154-.244-1.67-.714-.332-.278-.54-.36-.796-.36-.412 0-.743.256-.743.709 0 .348.186.684.51.98.482.447 1.26.72 2.143.796v.354c0 .371.272.505.533.505.262 0 .529-.134.529-.505v-.366c1.625-.191 2.64-1.143 2.64-2.519 0-1.133-.652-1.845-1.978-2.156l-1.3-.27c-.738-.145-1.075-.424-1.075-.859 0-.488.436-.876 1.12-.876.581 0 .999.185 1.492.655.29.25.528.36.842.36.366 0 .667-.267.667-.65 0-.325-.174-.667-.499-.975-.43-.418-1.12-.685-1.892-.783v-.418c0-.372-.267-.505-.528-.505zm8.802 8.025a.743.743 0 00-.946.457 7.718 7.718 0 01-2.763 3.704 8.23 8.23 0 01-4.48 1.548 8.628 8.628 0 01-4.69-1.152c-.906-.524-1.649-1.03-2.262-1.749l.79.276a.743.743 0 10.49-1.404l-2.732-.952a.743.743 0 00-.946.458l-.997 2.86a.743.743 0 101.403.49l.45-1.294c.84 1.193 1.88 1.918 3.06 2.601a10.114 10.114 0 005.5 1.35 9.715 9.715 0 005.287-1.83 9.204 9.204 0 003.293-4.417.743.743 0 00-.457-.946z",
+    fill: "currentColor"
+  }));
+}
+var AutopayPaused = /*#__PURE__*/forwardRef(IconAutopayPaused);
+
+export default AutopayPaused;
+//# sourceMappingURL=AutopayPaused.js.map

package/dist/esm/packages/taco/src/components/Icon/components/AutopayPaused.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AutopayPaused.js","sources":["../../../../../../../../src/components/Icon/components/AutopayPaused.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconAutopayPaused(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M9.356 2.503a.743.743 0 10.449 1.417 9.323 9.323 0 011.909-.391 8.998 8.998 0 011.883.013.743.743 0 10.168-1.476 10.484 10.484 0 00-2.195-.016 10.81 10.81 0 00-2.214.453zM7.46 5.037a.743.743 0 10-.817-1.241c-.628.413-1.215.893-1.747 1.433-.52.528-.978 1.103-1.366 1.712a.743.743 0 101.253.798 8.928 8.928 0 011.17-1.467A9.28 9.28 0 017.46 5.037zm9.14-2.22a.743.743 0 00-.59 1.363 7.904 7.904 0 011.611.935c.484.363.914.776 1.287 1.229a.743.743 0 001.147-.945 9.004 9.004 0 00-1.54-1.472 9.387 9.387 0 00-1.915-1.11zM3.767 10.008a.743.743 0 10-1.432-.396A9.316 9.316 0 002 11.795a.743.743 0 101.485.048 7.83 7.83 0 01.282-1.835zm17.716-2.152a.743.743 0 10-1.389.529c.21.549.353 1.126.425 1.723a.743.743 0 101.476-.18 8.81 8.81 0 00-.512-2.072zm-9.28-.732c-.26 0-.527.127-.527.505v.406c-1.567.145-2.577 1.085-2.577 2.426 0 1.125.639 1.862 1.907 2.182l1.296.285c.836.18 1.167.435 1.167.87 0 .558-.441.923-1.26.923-.586 0-1.154-.244-1.67-.714-.332-.278-.54-.36-.796-.36-.412 0-.743.256-.743.709 0 .348.186.684.51.98.482.447 1.26.72 2.143.796v.354c0 .371.272.505.533.505.262 0 .529-.134.529-.505v-.366c1.625-.191 2.64-1.143 2.64-2.519 0-1.133-.652-1.845-1.978-2.156l-1.3-.27c-.738-.145-1.075-.424-1.075-.859 0-.488.436-.876 1.12-.876.581 0 .999.185 1.492.655.29.25.528.36.842.36.366 0 .667-.267.667-.65 0-.325-.174-.667-.499-.975-.43-.418-1.12-.685-1.892-.783v-.418c0-.372-.267-.505-.528-.505zm8.802 8.025a.743.743 0 00-.946.457 7.718 7.718 0 01-2.763 3.704 8.23 8.23 0 01-4.48 1.548 8.628 8.628 0 01-4.69-1.152c-.906-.524-1.649-1.03-2.262-1.749l.79.276a.743.743 0 10.49-1.404l-2.732-.952a.743.743 0 00-.946.458l-.997 2.86a.743.743 0 101.403.49l.45-1.294c.84 1.193 1.88 1.918 3.06 2.601a10.114 10.114 0 005.5 1.35 9.715 9.715 0 005.287-1.83 9.204 9.204 0 003.293-4.417.743.743 0 00-.457-.946z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconAutopayPaused);\n"],"names":["IconAutopayPaused","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,iBAAiBA,CAACC,KAAoC,EAAEC,MAAiC;EAC9F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,6vDAA6vD;IAC/vDN,IAAI,EAAC;IACP,CACA;AAEd;AACA,iCAAeD,UAAgB,CAACH,iBAAiB,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/Experiment.js

@@ -0,0 +1,20 @@
+import { forwardRef, createElement } from 'react';
+
+function IconExperiment(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z",
+    fill: "currentColor",
+    stroke: "currentColor"
+  }));
+}
+var Experiment = /*#__PURE__*/forwardRef(IconExperiment);
+
+export default Experiment;
+//# sourceMappingURL=Experiment.js.map

package/dist/esm/packages/taco/src/components/Icon/components/Experiment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Experiment.js","sources":["../../../../../../../../src/components/Icon/components/Experiment.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconExperiment(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 20 20\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M8.962 9.26V5.313h2.843V9.28c0 .376.796 1.24 1.049 1.511L14.5 12.5c-.507.218-3.166-1.19-4.341-.211C7.159 14.789 6 13 6.5 12c.316-.632 2.462-1.803 2.462-2.74zm.24-4.469a.762.762 0 00-.752.772v3.696a.61.61 0 01-.177.43l-2.592 2.6c-.911.913-.281 2.502.992 2.502h7.154c1.25 0 1.89-1.538 1.027-2.466l-2.446-2.63a.61.61 0 01-.162-.415V5.563a.762.762 0 00-.752-.772H9.202z\"\n                fill=\"currentColor\"\n                stroke=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconExperiment);\n"],"names":["IconExperiment","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d","stroke"],"mappings":";;AACA,SAASA,cAAcA,CAACC,KAAoC,EAAEC,MAAiC;EAC3F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,+WAA+W;IACjXN,IAAI,EAAC,cAAc;IACnBO,MAAM,EAAC;IACT,CACA;AAEd;AACA,8BAAeR,UAAgB,CAACH,cAAc,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/Person.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+function IconPerson(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zm0 1.5c-3.684 0-5.696 1.84-6.346 6.002-.01.061-.015.123-.015.186 0 .68.565 1.238 1.288 1.305l.147.007h9.852c.068 0 .136-.004.203-.013.784-.103 1.329-.768 1.217-1.485C17.696 14.84 15.684 13 12 13zm0-11c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2zm0 1.5c-1.13 0-2.186 1.174-2.186 2.75S10.87 9 12 9s2.186-1.174 2.186-2.75S13.129 3.5 12 3.5z",
+    fill: "currentColor"
+  }));
+}
+var Person = /*#__PURE__*/forwardRef(IconPerson);
+
+export default Person;
+//# sourceMappingURL=Person.js.map

package/dist/esm/packages/taco/src/components/Icon/components/Person.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Person.js","sources":["../../../../../../../../src/components/Icon/components/Person.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconPerson(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zm0 1.5c-3.684 0-5.696 1.84-6.346 6.002-.01.061-.015.123-.015.186 0 .68.565 1.238 1.288 1.305l.147.007h9.852c.068 0 .136-.004.203-.013.784-.103 1.329-.768 1.217-1.485C17.696 14.84 15.684 13 12 13zm0-11c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2zm0 1.5c-1.13 0-2.186 1.174-2.186 2.75S10.87 9 12 9s2.186-1.174 2.186-2.75S13.129 3.5 12 3.5z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconPerson);\n"],"names":["IconPerson","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,UAAUA,CAACC,KAAoC,EAAEC,MAAiC;EACvF,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,4jBAA4jB;IAC9jBN,IAAI,EAAC;IACP,CACA;AAEd;AACA,0BAAeD,UAAgB,CAACH,UAAU,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/PersonSolid.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+function IconPersonSolid(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zM12 2c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2z",
+    fill: "currentColor"
+  }));
+}
+var PersonSolid = /*#__PURE__*/forwardRef(IconPersonSolid);
+
+export default PersonSolid;
+//# sourceMappingURL=PersonSolid.js.map

package/dist/esm/packages/taco/src/components/Icon/components/PersonSolid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PersonSolid.js","sources":["../../../../../../../../src/components/Icon/components/PersonSolid.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconPersonSolid(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M12 11.5c4.553 0 7.21 2.43 7.969 7.29.24 1.537-.928 2.962-2.608 3.182-.144.018-.29.028-.435.028H7.074C5.376 22 4 20.74 4 19.187c0-.133.01-.266.03-.398C4.79 13.93 7.448 11.5 12 11.5zM12 2c2.112 0 3.825 1.903 3.825 4.25S14.112 10.5 12 10.5c-2.113 0-3.825-1.903-3.825-4.25S9.887 2 12 2z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconPersonSolid);\n"],"names":["IconPersonSolid","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,eAAeA,CAACC,KAAoC,EAAEC,MAAiC;EAC5F,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,6RAA6R;IAC/RN,IAAI,EAAC;IACP,CACA;AAEd;AACA,+BAAeD,UAAgB,CAACH,eAAe,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/Wallet.js

@@ -0,0 +1,19 @@
+import { forwardRef, createElement } from 'react';
+
+function IconWallet(props, svgRef) {
+  return /*#__PURE__*/createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.75 4.5h14.5a.25.25 0 01.25.25V7H16a5 5 0 000 10h3.5v2.25a.25.25 0 01-.25.25H4.75a.25.25 0 01-.25-.25V4.75a.25.25 0 01.25-.25zM22 7h-1V4.75A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V17h1a1 1 0 001-1V8a1 1 0 00-1-1zm-.5 1.5H16a3.5 3.5 0 100 7h5.5v-7zm-5.5 5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z",
+    fill: "currentColor"
+  }));
+}
+var Wallet = /*#__PURE__*/forwardRef(IconWallet);
+
+export default Wallet;
+//# sourceMappingURL=Wallet.js.map

package/dist/esm/packages/taco/src/components/Icon/components/Wallet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Wallet.js","sources":["../../../../../../../../src/components/Icon/components/Wallet.tsx"],"sourcesContent":["import * as React from 'react';\nfunction IconWallet(props: React.SVGProps<SVGSVGElement>, svgRef?: React.Ref<SVGSVGElement>): JSX.Element {\n    return (\n        <svg fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\" ref={svgRef} {...props}>\n            <path\n                fillRule=\"evenodd\"\n                clipRule=\"evenodd\"\n                d=\"M4.75 4.5h14.5a.25.25 0 01.25.25V7H16a5 5 0 000 10h3.5v2.25a.25.25 0 01-.25.25H4.75a.25.25 0 01-.25-.25V4.75a.25.25 0 01.25-.25zM22 7h-1V4.75A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v14.5c0 .966.784 1.75 1.75 1.75h14.5A1.75 1.75 0 0021 19.25V17h1a1 1 0 001-1V8a1 1 0 00-1-1zm-.5 1.5H16a3.5 3.5 0 100 7h5.5v-7zm-5.5 5a1.5 1.5 0 100-3 1.5 1.5 0 000 3z\"\n                fill=\"currentColor\"\n            />\n        </svg>\n    );\n}\nexport default React.forwardRef(IconWallet);\n"],"names":["IconWallet","props","svgRef","React","fill","xmlns","viewBox","ref","fillRule","clipRule","d"],"mappings":";;AACA,SAASA,UAAUA,CAACC,KAAoC,EAAEC,MAAiC;EACvF,oBACIC;IAAKC,IAAI,EAAC,MAAM;IAACC,KAAK,EAAC,4BAA4B;IAACC,OAAO,EAAC,WAAW;IAACC,GAAG,EAAEL;KAAYD,KAAK,gBAC1FE;IACIK,QAAQ,EAAC,SAAS;IAClBC,QAAQ,EAAC,SAAS;IAClBC,CAAC,EAAC,sWAAsW;IACxWN,IAAI,EAAC;IACP,CACA;AAEd;AACA,0BAAeD,UAAgB,CAACH,UAAU,CAAC;;;;"}

package/dist/esm/packages/taco/src/components/Icon/components/index.js

@@ -16,6 +16,8 @@ import AttachAuto from './AttachAuto.js';
 import AttachCancel from './AttachCancel.js';
 import AttachWarning from './AttachWarning.js';
 import Attach from './Attach.js';
+import AutopayPaused from './AutopayPaused.js';
+import Autopay from './Autopay.js';
 import AutotextInsert from './AutotextInsert.js';
 import Autotext from './Autotext.js';
 import BasicTabs from './BasicTabs.js';
@@ -106,6 +108,7 @@ import EnvelopeSolid from './EnvelopeSolid.js';
 import Envelope from './Envelope.js';
 import ExpandView from './ExpandView.js';
 import Expenses from './Expenses.js';
+import Experiment from './Experiment.js';
 import ExportToExcel from './ExportToExcel.js';
 import ExportToPdf from './ExportToPdf.js';
 import Export from './Export.js';
@@ -182,7 +185,9 @@ import Period from './Period.js';
 import PersonChange from './PersonChange.js';
 import PersonMinus from './PersonMinus.js';
 import PersonPlus from './PersonPlus.js';
+import PersonSolid from './PersonSolid.js';
 import PersonTick from './PersonTick.js';
+import Person from './Person.js';
 import PhoneSolid from './PhoneSolid.js';
 import Phone from './Phone.js';
 import Play from './Play.js';
@@ -241,6 +246,7 @@ import Transfer from './Transfer.js';
 import Undo from './Undo.js';
 import Undock from './Undock.js';
 import Unreconciled from './Unreconciled.js';
+import Wallet from './Wallet.js';
 import Warning from './Warning.js';
 import Webshop from './Webshop.js';
 import Website from './Website.js';
@@ -267,6 +273,8 @@ const icons = {
   'attach-cancel': AttachCancel,
   'attach-warning': AttachWarning,
   attach: Attach,
+  'autopay-paused': AutopayPaused,
+  autopay: Autopay,
   'autotext-insert': AutotextInsert,
   autotext: Autotext,
   'basic-tabs': BasicTabs,
@@ -357,6 +365,7 @@ const icons = {
   envelope: Envelope,
   'expand-view': ExpandView,
   expenses: Expenses,
+  experiment: Experiment,
   'export-to-excel': ExportToExcel,
   'export-to-pdf': ExportToPdf,
   export: Export,
@@ -433,7 +442,9 @@ const icons = {
   'person-change': PersonChange,
   'person-minus': PersonMinus,
   'person-plus': PersonPlus,
+  'person-solid': PersonSolid,
   'person-tick': PersonTick,
+  person: Person,
   'phone-solid': PhoneSolid,
   phone: Phone,
   play: Play,
@@ -492,6 +503,7 @@ const icons = {
   undo: Undo,
   undock: Undock,
   unreconciled: Unreconciled,
+  wallet: Wallet,
   warning: Warning,
   webshop: Webshop,
   website: Website,