@economic/taco 2.45.0-alpha.3 → 2.45.0-alpha.30

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":";;;;;;;;;;;;;AAaA,MAAMA,SAAS,GAAIC,KAA8B;EAC7C,oBACIC;IACIC,SAAS,EAAC,iFAAiF;iBACjF;kBACVD;IAAMC,SAAS,EAAC;IAAqE,EACpFF,KAAK,CAACG,QAAQ,CACb;AAEd,CAAC;SAeeC,iBAAiBA,CAACJ,KAA6B;EAC3D,MAAM;IACFK,UAAU;IACVC,gBAAgB;IAChBC,gBAAgB;IAChBC,eAAe,GAAGA,MAAM,IAAI;IAC5BC,qBAAqB,GAAGA,MAAM,IAAI;IAClCC,cAAc,EAAEC,kBAAkB;IAClCC,iBAAiB;IACjBC,QAAQ,EAAEC,YAAY;IACtBC,IAAI,EAAEC,IAAI;IACVC,OAAO,EAAEC;GACZ,GAAGlB,KAAK;EACT,MAAM;IAAEmB;GAAO,GAAGC,eAAe,EAAE;EACnC,MAAMC,aAAa,GAAGpB,cAAK,CAACqB,MAAM,CAA2C,IAAI,CAAC;EAClF,MAAM,CAACP,IAAI,EAAEE,OAAO,CAAC,GAAGM,oBAAoB,CAAU;IAClDL,QAAQ;IACRF;GACH,CAAC;EACF,MAAM,CAACQ,MAAM,EAAEC,SAAS,CAAC,GAAGxB,cAAK,CAACyB,QAAQ,CAAC,EAAE,CAAC;EAE9CzB,cAAK,CAAC0B,SAAS,CAAC;IACZF,SAAS,CAAC,EAAE,CAAC;GAChB,EAAE,CAACV,IAAI,CAAC,CAAC;EAEV,MAAMa,aAAa,GAAIC,KAA0B;IAC7C,IAAIA,KAAK,CAACC,GAAG,KAAK,WAAW,IAAID,KAAK,CAACC,GAAG,KAAK,SAAS,IAAID,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MAAA,IAAAC,qBAAA;MAC/EF,KAAK,CAACG,cAAc,EAAE;MACtB,CAAAD,qBAAA,GAAAV,aAAa,CAACY,OAAO,cAAAF,qBAAA,uBAArBA,qBAAA,CAAuBG,aAAa,CAACC,yBAAyB,CAACN,KAA8C,CAAC,CAAC;;GAEtH;EAED,MAAMO,qBAAqB,GAAIC,SAAoB;IAC/CzB,iBAAiB,CAACyB,SAAS,CAAC;IAC5BpB,OAAO,CAAC,KAAK,CAAC;GACjB;EAED,oBACIhB,6BAACF,SAAS,qBACNE,6BAACqC,IAAqB;IAACvB,IAAI,EAAEA,IAAI;IAAEwB,YAAY,EAAEtB;kBAC7ChB,6BAACqC,OAAwB;IAACpC,SAAS,EAAC;kBAChCD,6BAACuC,kBAAO;IAAClC,gBAAgB,EAAEA,gBAAgB;IAAEC,gBAAgB,EAAEA;KAC1DF,UAAU,iBACPJ,6BAACwC,IAAI;IACDvC,SAAS,EAAC,6DAA6D;IACvEwC,IAAI,EAAE3B,IAAI,GAAG,YAAY,GAAG;IAC9B,IACF,IAAI,CACF,CACa,eAC3Bd,6BAACqC,OAAwB;IAACpC,SAAS,EAAC;kBAChCD,6BAAC0C,WAAW;IACRC,SAAS;IACT1C,SAAS,EAAC,wMAAwM;IAClNgB,QAAQ,EAAEW,KAAK,IAAIJ,SAAS,CAACI,KAAK,CAACgB,MAAM,CAACC,KAAK,CAAC;IAChDC,SAAS,EAAEnB,aAAa;IACxBoB,WAAW,EAAE7B,KAAK,CAAC8B,MAAM,CAACzB;IAC5B,eACFvB,6BAACiD,MAAwB;IACrBC,aAAa,EAAC,QAAQ;IACtBjD,SAAS,EAAC,iFAAiF;IAC3FkD,GAAG,EAAE/B,aAAa;IAClBgC,QAAQ,EAAE,CAAC;KACVhD,UAAU,aAAVA,UAAU,uBAAVA,UAAU,CACLiD,MAAM,CAACjB,SAAS,IAAI7B,eAAe,CAAC6B,SAAS,EAAEkB,mBAAmB,CAAC/B,MAAM,CAAC,CAAC,CAAC,CAC7EgC,GAAG,CAACnB,SAAS;IACV,MAAMoB,MAAM,GAAGC,qBAAqB,CAChCrB,SAAS,EACT9B,gBAAgB,EAChB6B,qBAAqB,EACrBuB,kBAAkB,CAACtB,SAAS,EAAE/B,gBAAgB,CAAC,CAClD;IAED,IAAI+B,SAAS,CAACuB,OAAO,EAAE;MACnB,oBACI3D;QACIC,SAAS,EAAC,kHAAkH;QAC5H4B,GAAG,EAAE,GAAGO,SAAS,CAACwB,MAAM,IAAIxB,SAAS,CAACyB,MAAM;SAC3CP,mBAAmB,CAAC/B,MAAM,CAAC,CAACa,SAAS,CAAC,GAAGoB,MAAM,GAAG,IAAI,EACtDpB,SAAS,CAACuB,OAAO,CACbN,MAAM,CAACjB,SAAS,IACb5B,qBAAqB,CAAC4B,SAAS,EAAEb,MAAM,EAAE+B,mBAAmB,CAAC/B,MAAM,CAAC,CAAC,CACxE,CACAgC,GAAG,CAACO,eAAe,IAChBL,qBAAqB,CACjBK,eAAe,EACfxD,gBAAgB,EAChB6B,qBAAqB,EACrBuB,kBAAkB,CAACI,eAAe,EAAEzD,gBAAgB,CAAC,CACxD,CACJ,CACF;;IAIf,OAAOmD,MAAM;GAChB,CAAC,CACiB,EAC1B9C,kBAAkB,iBACfV,6BAAC+D,MAAM;IACH9D,SAAS,EAAC,0GAA0G;IACpH+D,OAAO,EAAEtD;KACRQ,KAAK,CAAC8B,MAAM,CAACiB,YAAY,CACrB,IACT,IAAI,eACRjE;IAAIC,SAAS,EAAC;IAAqC,eACnDD;IACIC,SAAS,EAAC,yLAAyL;IACnM+D,OAAO,EAAEnD,YAAY;IACrBuC,QAAQ,EAAE;KACTlC,KAAK,CAAC8B,MAAM,CAACkB,MAAM,CACpB,CACmB,CACP,CAChB;AAEpB;AAEA,MAAMZ,mBAAmB,GAAI/B,MAAc,IAAMa,SAAoB;EACjE,IAAI,CAACb,MAAM,IAAI,CAACA,MAAM,CAAC4C,MAAM,EAAE;IAC3B,OAAO,IAAI;;EAGf,MAAMC,sBAAsB,GAAGC,MAAM,CAACjC,SAAS,CAACwB,MAAM,CAAC,CAACU,OAAO,CAAC/C,MAAM,CAAC,GAAG,CAAC,CAAC;EAC5E,MAAMgD,kBAAkB,GAAGnC,SAAS,CAACK,IAAI,CAAC+B,WAAW,EAAE,CAACF,OAAO,CAAC/C,MAAM,CAACiD,WAAW,EAAE,CAAC,GAAG,CAAC,CAAC;EAE1F,OAAOJ,sBAAsB,IAAIG,kBAAkB;AACvD,CAAC;AAED,MAAMb,kBAAkB,GAAGA,CAACtB,SAAoB,EAAE/B,gBAA2B;EACzE,OAAO+B,SAAS,CAACwB,MAAM,KAAKvD,gBAAgB,CAACuD,MAAM,IAAIxB,SAAS,CAACyB,MAAM,KAAKxD,gBAAgB,CAACwD,MAAM;AACvG,CAAC;AAED,MAAMJ,qBAAqB,GAAGA,CAC1BrB,SAAoB,EACpB9B,gBAAwB,EACxBK,iBAAiD,EACjD+C,kBAAkB,GAAG,KAAK;EAE1B,MAAM/B,aAAa,GAAIC,KAA6C;IAChE,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,EAAE;MACvBlB,iBAAiB,CAACyB,SAAS,CAAC;;GAEnC;EAED,oBACIpC;oBACkB0D,kBAAkB,GAAG,MAAM,GAAGe,SAAS;IACrDxE,SAAS,EAAC,iDAAiD;iBACjD,6BAA6B;IACvC4B,GAAG,EAAE,GAAGO,SAAS,CAACwB,MAAM,IAAIxB,SAAS,CAACyB,MAAM,EAAE;IAC9CG,OAAO,EAAEA,MAAMrD,iBAAiB,CAACyB,SAAS,CAAC;IAC3CU,SAAS,EAAEnB,aAAa;IACxByB,QAAQ,EAAE;kBACVpD,6BAAC0E,aAAa,oBACNtC,SAAS;IACbnC,SAAS,EAAC,yFAAyF;IACnGK,gBAAgB,EAAEA;KACpB,CACG;AAEjB,CAAC;SAOeqE,gBAAgBA,CAAC5E,KAA4B;EACzD,MAAM;IAAEM,gBAAgB;IAAEC;GAAkB,GAAGP,KAAK;EAEpD,oBACIC,6BAACF,SAAS,qBACNE,6BAACuC,kBAAO;IAAClC,gBAAgB,EAAEA,gBAAgB;IAAEC,gBAAgB,EAAEA;IAAoB,CAC3E;AAEpB;;;;"}

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,