@chayns-components/core 5.0.0-beta.573 → 5.0.0-beta.575

package/lib/api/image/post.d.ts

@@ -6,9 +6,10 @@ export interface PostImageResult {
 }
 interface PostImageOptions {
     file: File;
+    shouldUploadImageToSite?: boolean;
 }
 /**
  * Uploads an image to the tsimg cloud service
  */
-export declare const postImage: ({ file, }: PostImageOptions) => Promise<PostImageResult | undefined>;
+export declare const postImage: ({ file, shouldUploadImageToSite, }: PostImageOptions) => Promise<PostImageResult | undefined>;
 export {};

package/lib/api/image/post.js

@@ -1,19 +1,29 @@
-import { getAccessToken, getUser } from 'chayns-api';
+import { getAccessToken, getSite, getUser } from 'chayns-api';
 import { getFileAsArrayBuffer } from '../../utils/fileDialog';
 /**
  * Uploads an image to the tsimg cloud service
  */
 export const postImage = async _ref => {
   let {
-    file
+    file,
+    shouldUploadImageToSite
   } = _ref;
   const {
     accessToken
   } = await getAccessToken();
   const user = getUser();
+  const site = getSite();
   if (!accessToken || !user?.personId) {
     return undefined;
   }
+  let head = {
+    'X-Person-Id': user.personId
+  };
+  if (shouldUploadImageToSite && site.id) {
+    head = {
+      'X-Site-Id': site.id
+    };
+  }
   const body = await getFileAsArrayBuffer(file);
   const response = await fetch('https://api.tsimg.cloud/image', {
     body,
@@ -21,7 +31,7 @@ export const postImage = async _ref => {
       Accept: 'application/json',
       Authorization: `bearer ${accessToken}`,
       'Content-Type': 'image/*',
-      'X-Person-Id': user.personId
+      ...head
     },
     method: 'POST'
   });

package/lib/api/image/post.js.map

@@ -1 +1 @@
-{"version":3,"file":"post.js","names":["getAccessToken","getUser","getFileAsArrayBuffer","postImage","_ref","file","accessToken","user","personId","undefined","body","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/fileDialog';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface PostImageOptions {\n    file: File;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    const body = await getFileAsArrayBuffer(file);\n\n    const response = await fetch('https://api.tsimg.cloud/image', {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n            'Content-Type': 'image/*',\n            'X-Person-Id': user.personId,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        return (await response.json()) as PostImageResult;\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,QAAQ,YAAY;AAEpD,SAASC,oBAAoB,QAAQ,wBAAwB;AAY7D;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAEqC;EAAA,IAF9B;IAC5BC;EACc,CAAC,GAAAD,IAAA;EACf,MAAM;IAAEE;EAAY,CAAC,GAAG,MAAMN,cAAc,CAAC,CAAC;EAC9C,MAAMO,IAAI,GAAGN,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACK,WAAW,IAAI,CAACC,IAAI,EAAEC,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;EAEA,MAAMC,IAAI,GAAG,MAAMR,oBAAoB,CAACG,IAAI,CAAC;EAE7C,MAAMM,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DF,IAAI;IACJG,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,UAAST,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,aAAa,EAAEC,IAAI,CAACC;IACxB,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC","ignoreList":[]}
+{"version":3,"file":"post.js","names":["getAccessToken","getSite","getUser","getFileAsArrayBuffer","postImage","_ref","file","shouldUploadImageToSite","accessToken","user","site","personId","undefined","head","id","body","response","fetch","headers","Accept","Authorization","method","ok","json","Error","status"],"sources":["../../../src/api/image/post.ts"],"sourcesContent":["import { getAccessToken, getSite, getUser } from 'chayns-api';\nimport type { Meta } from '../../types/file';\nimport { getFileAsArrayBuffer } from '../../utils/fileDialog';\n\nexport interface PostImageResult {\n    key: string;\n    base: string;\n    meta?: Meta;\n}\n\ninterface PostImageOptions {\n    file: File;\n    shouldUploadImageToSite?: boolean;\n}\n\n/**\n * Uploads an image to the tsimg cloud service\n */\nexport const postImage = async ({\n    file,\n    shouldUploadImageToSite,\n}: PostImageOptions): Promise<PostImageResult | undefined> => {\n    const { accessToken } = await getAccessToken();\n    const user = getUser();\n    const site = getSite();\n\n    if (!accessToken || !user?.personId) {\n        return undefined;\n    }\n\n    let head: { [key: string]: string } = { 'X-Person-Id': user.personId };\n\n    if (shouldUploadImageToSite && site.id) {\n        head = { 'X-Site-Id': site.id };\n    }\n\n    const body = await getFileAsArrayBuffer(file);\n\n    const response = await fetch('https://api.tsimg.cloud/image', {\n        body,\n        headers: {\n            Accept: 'application/json',\n            Authorization: `bearer ${accessToken}`,\n            'Content-Type': 'image/*',\n            ...head,\n        },\n        method: 'POST',\n    });\n\n    if (response.ok) {\n        return (await response.json()) as PostImageResult;\n    }\n\n    throw Error(`Failed to POST image (status code: ${response.status}).`);\n};\n"],"mappings":"AAAA,SAASA,cAAc,EAAEC,OAAO,EAAEC,OAAO,QAAQ,YAAY;AAE7D,SAASC,oBAAoB,QAAQ,wBAAwB;AAa7D;AACA;AACA;AACA,OAAO,MAAMC,SAAS,GAAG,MAAAC,IAAA,IAGqC;EAAA,IAH9B;IAC5BC,IAAI;IACJC;EACc,CAAC,GAAAF,IAAA;EACf,MAAM;IAAEG;EAAY,CAAC,GAAG,MAAMR,cAAc,CAAC,CAAC;EAC9C,MAAMS,IAAI,GAAGP,OAAO,CAAC,CAAC;EACtB,MAAMQ,IAAI,GAAGT,OAAO,CAAC,CAAC;EAEtB,IAAI,CAACO,WAAW,IAAI,CAACC,IAAI,EAAEE,QAAQ,EAAE;IACjC,OAAOC,SAAS;EACpB;EAEA,IAAIC,IAA+B,GAAG;IAAE,aAAa,EAAEJ,IAAI,CAACE;EAAS,CAAC;EAEtE,IAAIJ,uBAAuB,IAAIG,IAAI,CAACI,EAAE,EAAE;IACpCD,IAAI,GAAG;MAAE,WAAW,EAAEH,IAAI,CAACI;IAAG,CAAC;EACnC;EAEA,MAAMC,IAAI,GAAG,MAAMZ,oBAAoB,CAACG,IAAI,CAAC;EAE7C,MAAMU,QAAQ,GAAG,MAAMC,KAAK,CAAC,+BAA+B,EAAE;IAC1DF,IAAI;IACJG,OAAO,EAAE;MACLC,MAAM,EAAE,kBAAkB;MAC1BC,aAAa,EAAG,UAASZ,WAAY,EAAC;MACtC,cAAc,EAAE,SAAS;MACzB,GAAGK;IACP,CAAC;IACDQ,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIL,QAAQ,CAACM,EAAE,EAAE;IACb,OAAQ,MAAMN,QAAQ,CAACO,IAAI,CAAC,CAAC;EACjC;EAEA,MAAMC,KAAK,CAAE,sCAAqCR,QAAQ,CAACS,MAAO,IAAG,CAAC;AAC1E,CAAC","ignoreList":[]}

package/lib/components/accordion/Accordion.js

@@ -1,6 +1,7 @@
 import { AnimatePresence, MotionConfig } from 'framer-motion';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../hooks/uuid';
+import AreaProvider from '../area-provider/AreaProvider';
 import AccordionBody from './accordion-body/AccordionBody';
 import { AccordionGroupContext } from './accordion-group/AccordionGroup';
 import AccordionHead from './accordion-head/AccordionHead';
@@ -139,7 +140,7 @@ const Accordion = _ref => {
     maxHeight: bodyMaxHeight,
     onScroll: onBodyScroll,
     shouldHideBody: shouldRenderClosed && !isOpen
-  }, children)))));
+  }, /*#__PURE__*/React.createElement(AreaProvider, null, children))))));
 };
 Accordion.displayName = 'Accordion';
 export default Accordion;

package/lib/components/accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","createElement","className","$isOpen","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n}) => {\n    const { isWrapped, openAccordionUuid, updateOpenAccordionUuid } =\n        useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaProvider","AccordionBody","AccordionGroupContext","AccordionHead","StyledAccordion","AccordionContext","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","openAccordionUuid","updateOpenAccordionUuid","isParentWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","createElement","className","$isOpen","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","Provider","value","transition","type","onClick","initial","maxHeight","onScroll","shouldHideBody","displayName"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AreaProvider from '../area-provider/AreaProvider';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n}) => {\n    const { isWrapped, openAccordionUuid, updateOpenAccordionUuid } =\n        useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AreaProvider>{children}</AreaProvider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/amount-control/AmountControl.js

@@ -35,6 +35,7 @@ const AmountControl = _ref => {
         setDisplayState('default');
     }
   }, [amountValue, maxAmount]);
+  const hasFocus = useMemo(() => displayState !== 'default', [displayState]);
 
   /**
    * Function that sets the amountValue to the amount
@@ -168,6 +169,7 @@ const AmountControl = _ref => {
   }, leftIcon)), /*#__PURE__*/React.createElement(StyledAmountControlInput, {
     $displayState: displayState,
     $shouldShowIcon: shouldShowIcon,
+    $hasFocus: hasFocus,
     onBlur: handleInputBlur,
     onChange: handleInputChange,
     value: displayState === 'default' && label ? label : inputValue,

package/lib/components/amount-control/AmountControl.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","$displayState","$shouldShowIcon","onBlur","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    maxAmount,\n    onChange,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    /**\n     * Function that updates the onChange event\n     */\n    useEffect(() => {\n        if (onChange) {\n            onChange(amountValue);\n        }\n    }, [amountValue, onChange]);\n\n    const handleAmountAdd = () => {\n        setAmountValue((prevState) => prevState + 1);\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    };\n\n    const handleAmountRemove = () => {\n        setAmountValue((prevState) => prevState - 1);\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    };\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const valueBeforeCheck = Number(event.target.value);\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: Number(event.target.value),\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-trash']} size={25} />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledAmountControlInput\n                    $displayState={displayState}\n                    $shouldShowIcon={shouldShowIcon}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                    type={amountValue === 0 ? 'text' : 'number'}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AmountControl.js","names":["AnimatePresence","React","useCallback","useEffect","useMemo","useState","checkForValidAmount","Icon","StyledAmountControl","StyledAmountControlInput","StyledMotionAmountControlButton","AmountControl","_ref","amount","icon","shouldShowIcon","label","maxAmount","onChange","amountValue","setAmountValue","inputValue","setInputValue","displayState","setDisplayState","minAmount","hasFocus","toString","handleAmountAdd","prevState","Number","handleAmountRemove","handleFirstAmount","handleInputBlur","handleInputChange","event","valueBeforeCheck","target","value","checkedValue","leftIcon","item","createElement","icons","size","color","shouldShowLeftIcon","onClick","initial","key","width","opacity","padding","animate","exit","transition","duration","type","disabled","$isDisabled","$displayState","$shouldShowIcon","$hasFocus","onBlur","displayName"],"sources":["../../../src/components/amount-control/AmountControl.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    ChangeEvent,\n    FC,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useState,\n} from 'react';\nimport { checkForValidAmount } from '../../utils/amountControl';\nimport Icon from '../icon/Icon';\nimport {\n    StyledAmountControl,\n    StyledAmountControlInput,\n    StyledMotionAmountControlButton,\n} from './AmountControl.styles';\n\nexport type DisplayState = 'default' | 'delete' | 'normal' | 'maxAmount';\n\nexport type AmountControlProps = {\n    /**\n     * The amount that should be displayed.\n     */\n    amount?: number;\n    /**\n     * The icon that should be displayed if no amount is selected.\n     */\n    icon?: string;\n    /**\n     * A Text that should be displayed, if no amount is selected;\n     */\n    label?: string;\n    /**\n     * The maximum allowed amount. If the maxAmount is set to one, a delete button is displayed on the left side.\n     */\n    maxAmount?: number;\n    /**\n     * A Function that is executed when the amount is changed\n     */\n    onChange?: (amount: number) => void;\n    /**\n     * Whether the icon should be displayed if no amount is selected\n     */\n    shouldShowIcon?: boolean;\n};\n\nconst AmountControl: FC<AmountControlProps> = ({\n    amount,\n    icon,\n    shouldShowIcon = true,\n    label,\n    maxAmount,\n    onChange,\n}) => {\n    const [amountValue, setAmountValue] = useState(0);\n    const [inputValue, setInputValue] = useState('0');\n    const [displayState, setDisplayState] = useState<DisplayState>('default');\n\n    const minAmount = 0;\n\n    /**\n     * This function controls the displayState\n     */\n    useEffect(() => {\n        switch (true) {\n            case maxAmount === 1 && amountValue === 1:\n                setDisplayState('delete');\n                return;\n            case maxAmount && amountValue >= maxAmount:\n                setDisplayState('maxAmount');\n                return;\n            case amountValue > 0:\n                setDisplayState('normal');\n                return;\n            default:\n                setDisplayState('default');\n        }\n    }, [amountValue, maxAmount]);\n\n    const hasFocus = useMemo(() => displayState !== 'default', [displayState]);\n\n    /**\n     * Function that sets the amountValue to the amount\n     */\n    useEffect(() => {\n        if (!amount) {\n            return;\n        }\n\n        setAmountValue(checkForValidAmount({ amount, maxAmount, minAmount }));\n        setInputValue(checkForValidAmount({ amount, maxAmount, minAmount }).toString());\n    }, [amount, maxAmount, minAmount]);\n\n    /**\n     * Function that updates the onChange event\n     */\n    useEffect(() => {\n        if (onChange) {\n            onChange(amountValue);\n        }\n    }, [amountValue, onChange]);\n\n    const handleAmountAdd = () => {\n        setAmountValue((prevState) => prevState + 1);\n        setInputValue((prevState) => (Number(prevState) + 1).toString());\n    };\n\n    const handleAmountRemove = () => {\n        setAmountValue((prevState) => prevState - 1);\n        setInputValue((prevState) => (Number(prevState) - 1).toString());\n    };\n\n    const handleFirstAmount = useCallback(() => {\n        if (amountValue !== 0) {\n            return;\n        }\n\n        setAmountValue(1);\n        setInputValue('1');\n    }, [amountValue]);\n\n    const handleInputBlur = useCallback(() => {\n        setAmountValue(inputValue === '' ? 0 : Number(inputValue));\n\n        if (inputValue === '') {\n            setInputValue('0');\n        }\n    }, [inputValue]);\n\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            const valueBeforeCheck = Number(event.target.value);\n\n            const checkedValue = checkForValidAmount({\n                minAmount,\n                maxAmount,\n                amount: Number(event.target.value),\n            });\n\n            if (valueBeforeCheck < minAmount && minAmount === 0) {\n                setInputValue('0');\n\n                return;\n            }\n\n            setInputValue(checkedValue === 0 ? '' : checkedValue.toString());\n        },\n        [maxAmount, minAmount],\n    );\n\n    const leftIcon = useMemo(() => {\n        let item: ReactElement | null = null;\n\n        switch (displayState) {\n            case 'default':\n                item = <Icon icons={[icon ?? 'fa fa-cart-shopping']} size={15} />;\n                break;\n            case 'delete':\n                item = <Icon icons={['fa ts-trash']} size={25} />;\n                break;\n            case 'normal':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            case 'maxAmount':\n                item = <Icon icons={['fa fa-minus']} size={15} color=\"red\" />;\n                break;\n            default:\n                break;\n        }\n\n        return item;\n    }, [displayState, icon]);\n\n    const shouldShowLeftIcon = useMemo(() => {\n        if (shouldShowIcon) {\n            return true;\n        }\n\n        return !(displayState === 'default' && !shouldShowIcon);\n    }, [displayState, shouldShowIcon]);\n\n    return useMemo(\n        () => (\n            <StyledAmountControl onClick={handleFirstAmount}>\n                <AnimatePresence initial={false}>\n                    {shouldShowLeftIcon && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountRemove}\n                            disabled={amountValue !== 0 && amountValue <= minAmount}\n                            $isDisabled={amountValue !== 0 && amountValue <= minAmount}\n                        >\n                            {leftIcon}\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n                <StyledAmountControlInput\n                    $displayState={displayState}\n                    $shouldShowIcon={shouldShowIcon}\n                    $hasFocus={hasFocus}\n                    onBlur={handleInputBlur}\n                    onChange={handleInputChange}\n                    value={displayState === 'default' && label ? label : inputValue}\n                    type={amountValue === 0 ? 'text' : 'number'}\n                />\n                <AnimatePresence initial={false}>\n                    {displayState === 'normal' && (\n                        <StyledMotionAmountControlButton\n                            key=\"right_button\"\n                            initial={{ width: 0, opacity: 0, padding: 0 }}\n                            animate={{ width: 40, opacity: 1, padding: 0 }}\n                            exit={{ width: 0, opacity: 0, padding: 0 }}\n                            transition={{ duration: 0.2, type: 'tween' }}\n                            onClick={handleAmountAdd}\n                            disabled={maxAmount ? amountValue >= maxAmount : false}\n                            $isDisabled={maxAmount ? amountValue >= maxAmount : false}\n                        >\n                            <Icon icons={['fa fa-plus']} size={15} color=\"green\" />\n                        </StyledMotionAmountControlButton>\n                    )}\n                </AnimatePresence>\n            </StyledAmountControl>\n        ),\n        [\n            amountValue,\n            displayState,\n            handleFirstAmount,\n            handleInputBlur,\n            handleInputChange,\n            inputValue,\n            label,\n            leftIcon,\n            maxAmount,\n            shouldShowIcon,\n            shouldShowLeftIcon,\n        ],\n    );\n};\n\nAmountControl.displayName = 'AmountControl';\n\nexport default AmountControl;\n"],"mappings":"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","ignoreList":[]}

package/lib/components/amount-control/AmountControl.styles.d.ts

@@ -8,6 +8,7 @@ export declare const StyledAmountControl: import("styled-components").IStyledCom
 type StyledAmountControlInputProps = WithTheme<{
     $displayState: DisplayState;
     $shouldShowIcon: boolean;
+    $hasFocus: boolean;
 }>;
 export declare const StyledAmountControlInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledAmountControlInputProps>>;
 type StyledAmountControlButtonProps = WithTheme<{

package/lib/components/amount-control/AmountControl.styles.js

@@ -22,26 +22,32 @@ export const StyledAmountControlInput = styled.input`
     height: 28px;
     width: 95px;
     text-align: center;
-    ${_ref3 => {
+    cursor: ${_ref3 => {
   let {
-    $displayState
+    $hasFocus
   } = _ref3;
+  return $hasFocus ? 'text' : 'pointer';
+}};
+
+    ${_ref4 => {
+  let {
+    $displayState
+  } = _ref4;
   return $displayState !== 'normal' && css`
             border-bottom-right-radius: 3px;
             border-top-right-radius: 3px;
         `;
 }}
-
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $displayState,
     $shouldShowIcon
-  } = _ref4;
+  } = _ref5;
   return $displayState === 'default' && !$shouldShowIcon && css`
             border-bottom-left-radius: 3px;
             border-top-left-radius: 3px;
         `;
-}}
+}};
 `;
 export const StyledMotionAmountControlButton = styled(motion.button)`
     overflow: hidden;
@@ -49,10 +55,10 @@ export const StyledMotionAmountControlButton = styled(motion.button)`
     height: 28px;
     width: 40px;
 
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     $isDisabled
-  } = _ref5;
+  } = _ref6;
   return $isDisabled && css`
             opacity: 0.5;
         `;

package/lib/components/amount-control/AmountControl.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$displayState","_ref4","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref5","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    border: none;\n    height: 28px;\n    width: 95px;\n    text-align: center;\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `}\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,MAAMI,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BT,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMU,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBX,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,MAAMY,+BAA+B,GAAGb,MAAM,CACjDD,MAAM,CAACe,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXf,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}
+{"version":3,"file":"AmountControl.styles.js","names":["motion","styled","css","StyledAmountControl","div","_ref","theme","StyledAmountControlInput","input","_ref2","_ref3","$hasFocus","_ref4","$displayState","_ref5","$shouldShowIcon","StyledMotionAmountControlButton","button","_ref6","$isDisabled"],"sources":["../../../src/components/amount-control/AmountControl.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { DisplayState } from './AmountControl';\n\ntype StyledAmountControlProps = WithTheme<unknown>;\n\nexport const StyledAmountControl = styled.div<StyledAmountControlProps>`\n    background-color: ${({ theme }: StyledAmountControlProps) => theme['202']};\n    display: flex;\n    width: fit-content;\n    border-radius: 3px;\n`;\n\ntype StyledAmountControlInputProps = WithTheme<{\n    $displayState: DisplayState;\n    $shouldShowIcon: boolean;\n    $hasFocus: boolean;\n}>;\n\nexport const StyledAmountControlInput = styled.input<StyledAmountControlInputProps>`\n    background-color: ${({ theme }: StyledAmountControlInputProps) => theme['202']};\n    border: none;\n    height: 28px;\n    width: 95px;\n    text-align: center;\n    cursor: ${({ $hasFocus }) => ($hasFocus ? 'text' : 'pointer')};\n\n    ${({ $displayState }) =>\n        $displayState !== 'normal' &&\n        css`\n            border-bottom-right-radius: 3px;\n            border-top-right-radius: 3px;\n        `}\n    ${({ $displayState, $shouldShowIcon }) =>\n        $displayState === 'default' &&\n        !$shouldShowIcon &&\n        css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n        `};\n`;\n\ntype StyledAmountControlButtonProps = WithTheme<{\n    $isDisabled: boolean;\n}>;\n\nexport const StyledMotionAmountControlButton = styled(\n    motion.button,\n)<StyledAmountControlButtonProps>`\n    overflow: hidden;\n    background-color: rgba(255, 255, 255, 0.2);\n    height: 28px;\n    width: 40px;\n\n    ${({ $isDisabled }) =>\n        $isDisabled &&\n        css`\n            opacity: 0.5;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAM/C,OAAO,MAAMC,mBAAmB,GAAGF,MAAM,CAACG,GAA8B;AACxE,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAgC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC9E;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,wBAAwB,GAAGN,MAAM,CAACO,KAAqC;AACpF,wBAAwBC,KAAA;EAAA,IAAC;IAAEH;EAAqC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACnF;AACA;AACA;AACA;AACA,cAAcI,KAAA;EAAA,IAAC;IAAEC;EAAU,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAG,MAAM,GAAG,SAAS;AAAA,CAAE;AAClE;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAc,CAAC,GAAAD,KAAA;EAAA,OAChBC,aAAa,KAAK,QAAQ,IAC1BX,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,MAAMY,KAAA;EAAA,IAAC;IAAED,aAAa;IAAEE;EAAgB,CAAC,GAAAD,KAAA;EAAA,OACjCD,aAAa,KAAK,SAAS,IAC3B,CAACE,eAAe,IAChBb,GAAI;AACZ;AACA;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAMD,OAAO,MAAMc,+BAA+B,GAAGf,MAAM,CACjDD,MAAM,CAACiB,MACX,CAAkC;AAClC;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OACdC,WAAW,IACXjB,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC","ignoreList":[]}

package/lib/components/area-provider/AreaProvider.d.ts

@@ -0,0 +1,14 @@
+import React, { type ReactNode } from 'react';
+interface IAreaProviderContext {
+    shouldChangeColor?: boolean;
+}
+export declare const AreaProviderContext: React.Context<IAreaProviderContext>;
+interface AreaProviderProps {
+    children: ReactNode;
+    shouldChangeColor?: boolean;
+}
+declare const AreaProvider: {
+    ({ children, shouldChangeColor }: AreaProviderProps): React.JSX.Element;
+    displayName: string;
+};
+export default AreaProvider;

package/lib/components/area-provider/AreaProvider.js

@@ -0,0 +1,20 @@
+import React, { useMemo } from 'react';
+export const AreaProviderContext = /*#__PURE__*/React.createContext({
+  shouldChangeColor: undefined
+});
+AreaProviderContext.displayName = 'AreaProviderContext';
+const AreaProvider = _ref => {
+  let {
+    children,
+    shouldChangeColor = true
+  } = _ref;
+  const providerValue = useMemo(() => ({
+    shouldChangeColor
+  }), [shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(AreaProviderContext.Provider, {
+    value: providerValue
+  }, children);
+};
+AreaProvider.displayName = 'AreaProvider';
+export default AreaProvider;
+//# sourceMappingURL=AreaProvider.js.map

package/lib/components/area-provider/AreaProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AreaProvider.js","names":["React","useMemo","AreaProviderContext","createContext","shouldChangeColor","undefined","displayName","AreaProvider","_ref","children","providerValue","createElement","Provider","value"],"sources":["../../../src/components/area-provider/AreaProvider.tsx"],"sourcesContent":["import React, { useMemo, type ReactNode } from 'react';\n\ninterface IAreaProviderContext {\n    shouldChangeColor?: boolean;\n}\n\nexport const AreaProviderContext = React.createContext<IAreaProviderContext>({\n    shouldChangeColor: undefined,\n});\n\nAreaProviderContext.displayName = 'AreaProviderContext';\n\ninterface AreaProviderProps {\n    children: ReactNode;\n    shouldChangeColor?: boolean;\n}\n\nconst AreaProvider = ({ children, shouldChangeColor = true }: AreaProviderProps) => {\n    const providerValue = useMemo<IAreaProviderContext>(\n        () => ({\n            shouldChangeColor,\n        }),\n        [shouldChangeColor],\n    );\n\n    return (\n        <AreaProviderContext.Provider value={providerValue}>\n            {children}\n        </AreaProviderContext.Provider>\n    );\n};\n\nAreaProvider.displayName = 'AreaProvider';\n\nexport default AreaProvider;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAwB,OAAO;AAMtD,OAAO,MAAMC,mBAAmB,gBAAGF,KAAK,CAACG,aAAa,CAAuB;EACzEC,iBAAiB,EAAEC;AACvB,CAAC,CAAC;AAEFH,mBAAmB,CAACI,WAAW,GAAG,qBAAqB;AAOvD,MAAMC,YAAY,GAAGC,IAAA,IAA+D;EAAA,IAA9D;IAAEC,QAAQ;IAAEL,iBAAiB,GAAG;EAAwB,CAAC,GAAAI,IAAA;EAC3E,MAAME,aAAa,GAAGT,OAAO,CACzB,OAAO;IACHG;EACJ,CAAC,CAAC,EACF,CAACA,iBAAiB,CACtB,CAAC;EAED,oBACIJ,KAAA,CAAAW,aAAA,CAACT,mBAAmB,CAACU,QAAQ;IAACC,KAAK,EAAEH;EAAc,GAC9CD,QACyB,CAAC;AAEvC,CAAC;AAEDF,YAAY,CAACD,WAAW,GAAG,cAAc;AAEzC,eAAeC,YAAY","ignoreList":[]}

package/lib/components/button/Button.js

@@ -3,7 +3,7 @@ import { AnimatePresence } from 'framer-motion';
 import React from 'react';
 import { useTheme } from 'styled-components';
 import Icon from '../icon/Icon';
-import SmallWaitCursor, { SmallWaitCursorSize } from '../small-wait-cursor/SmallWaitCursor';
+import SmallWaitCursor from '../small-wait-cursor/SmallWaitCursor';
 import { StyledIconWrapper, StyledMotionButton, StyledMotionChildrenWrapper, StyledMotionWaitCursorWrapper } from './Button.styles';
 const Button = _ref => {
   let {
@@ -66,7 +66,7 @@ const Button = _ref => {
   }, /*#__PURE__*/React.createElement(SmallWaitCursor, {
     color: "white",
     shouldHideBackground: true,
-    size: SmallWaitCursorSize.Small
+    size: 26
   })), !shouldShowWaitCursor && children && /*#__PURE__*/React.createElement(StyledMotionChildrenWrapper, {
     animate: {
       opacity: 1,

package/lib/components/button/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useTheme","Icon","SmallWaitCursor","SmallWaitCursorSize","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","theme","createElement","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","whileTap","backgroundColor","whileHover","initial","color","icons","animate","opacity","width","exit","key","style","overflow","transition","duration","shouldHideBackground","size","Small","displayName"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport SmallWaitCursor, { SmallWaitCursorSize } from '../small-wait-cursor/SmallWaitCursor';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Shows a wait cursor instead of button text\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme: Theme = useTheme();\n\n    return (\n        <StyledMotionButton\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            onClick={handleClick}\n            whileTap={\n                isDisabled ? {} : { backgroundColor: isSecondary ? theme['201'] : theme['407'] }\n            }\n            whileHover={\n                isDisabled ? {} : { backgroundColor: isSecondary ? theme['203'] : theme['409'] }\n            }\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color=\"white\" icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <SmallWaitCursor\n                            color=\"white\"\n                            shouldHideBackground\n                            size={SmallWaitCursorSize.Small}\n                        />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,MAA4C,OAAO;AAC/D,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,eAAe,IAAIC,mBAAmB,QAAQ,sCAAsC;AAC3F,SACIC,iBAAiB,EACjBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,6BAA6B,QAC1B,iBAAiB;AAqCxB,MAAMC,MAAuB,GAAGC,IAAA,IAS1B;EAAA,IAT2B;IAC7BC,QAAQ;IACRC,SAAS;IACTC,IAAI;IACJC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC,oBAAoB;IACpBC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEAL,OAAO,CAACI,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,GAAGxB,IAAI,CAAC,6BAA6B,EAAEc,SAAS,CAAC;EAEpE,MAAMW,KAAY,GAAGtB,QAAQ,CAAC,CAAC;EAE/B,oBACID,KAAA,CAAAwB,aAAA,CAAClB,kBAAkB;IACfM,SAAS,EAAEU,aAAc;IACzBG,QAAQ,EAAEX,UAAW;IACrBY,WAAW,EAAEZ,UAAW;IACxBa,YAAY,EAAE,CAAC,CAAChB,QAAS;IACzBiB,QAAQ,EAAE,OAAOf,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDgB,YAAY,EAAEd,WAAY;IAC1BC,OAAO,EAAEG,WAAY;IACrBW,QAAQ,EACJhB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE,CAClF;IACDS,UAAU,EACNlB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE;EAClF,gBAEDvB,KAAA,CAAAwB,aAAA,CAACzB,eAAe;IAACkC,OAAO,EAAE;EAAM,GAC3BpB,IAAI,iBACDb,KAAA,CAAAwB,aAAA,CAACnB,iBAAiB,qBACdL,KAAA,CAAAwB,aAAA,CAACtB,IAAI;IAACgC,KAAK,EAAC,OAAO;IAACC,KAAK,EAAE,CAACtB,IAAI;EAAE,CAAE,CACrB,CACtB,EACAI,oBAAoB,iBACjBjB,KAAA,CAAAwB,aAAA,CAAChB,6BAA6B;IAC1B4B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAC9BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9B5C,KAAA,CAAAwB,aAAA,CAACrB,eAAe;IACZ+B,KAAK,EAAC,OAAO;IACbW,oBAAoB;IACpBC,IAAI,EAAE1C,mBAAmB,CAAC2C;EAAM,CACnC,CAC0B,CAClC,EACA,CAAC9B,oBAAoB,IAAIN,QAAQ,iBAC9BX,KAAA,CAAAwB,aAAA,CAACjB,2BAA2B;IACxB6B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BjC,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDF,MAAM,CAACuC,WAAW,GAAG,QAAQ;AAE7B,eAAevC,MAAM","ignoreList":[]}
+{"version":3,"file":"Button.js","names":["clsx","AnimatePresence","React","useTheme","Icon","SmallWaitCursor","StyledIconWrapper","StyledMotionButton","StyledMotionChildrenWrapper","StyledMotionWaitCursorWrapper","Button","_ref","children","className","icon","isDisabled","isSecondary","onClick","shouldShowWaitCursor","shouldStopPropagation","handleClick","event","stopPropagation","buttonClasses","theme","createElement","disabled","$isDisabled","$hasChildren","$hasIcon","$isSecondary","whileTap","backgroundColor","whileHover","initial","color","icons","animate","opacity","width","exit","key","style","overflow","transition","duration","shouldHideBackground","size","displayName"],"sources":["../../../src/components/button/Button.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode } from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport SmallWaitCursor from '../small-wait-cursor/SmallWaitCursor';\nimport {\n    StyledIconWrapper,\n    StyledMotionButton,\n    StyledMotionChildrenWrapper,\n    StyledMotionWaitCursorWrapper,\n} from './Button.styles';\n\nexport type ButtonProps = {\n    /**\n     * The label of the button\n     */\n    children?: ReactNode;\n    /**\n     * Additional class names for the button element\n     */\n    className?: string;\n    /**\n     * An icon that is displayed on the left-hand side of the button text\n     */\n    icon?: string;\n    /**\n     * Disables the button so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Displays the button in the secondary style\n     */\n    isSecondary?: boolean;\n    /**\n     * Function to be executed when the button is clicked\n     */\n    onClick: MouseEventHandler<HTMLButtonElement>;\n    /**\n     * Shows a wait cursor instead of button text\n     */\n    shouldShowWaitCursor?: boolean;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Button: FC<ButtonProps> = ({\n    children,\n    className,\n    icon,\n    isDisabled,\n    isSecondary,\n    onClick,\n    shouldShowWaitCursor,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLButtonElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        onClick(event);\n    };\n\n    const buttonClasses = clsx('beta-chayns-button ellipsis', className);\n\n    const theme: Theme = useTheme();\n\n    return (\n        <StyledMotionButton\n            className={buttonClasses}\n            disabled={isDisabled}\n            $isDisabled={isDisabled}\n            $hasChildren={!!children}\n            $hasIcon={typeof icon === 'string' && icon !== ''}\n            $isSecondary={isSecondary}\n            onClick={handleClick}\n            whileTap={\n                isDisabled ? {} : { backgroundColor: isSecondary ? theme['201'] : theme['407'] }\n            }\n            whileHover={\n                isDisabled ? {} : { backgroundColor: isSecondary ? theme['203'] : theme['409'] }\n            }\n        >\n            <AnimatePresence initial={false}>\n                {icon && (\n                    <StyledIconWrapper>\n                        <Icon color=\"white\" icons={[icon]} />\n                    </StyledIconWrapper>\n                )}\n                {shouldShowWaitCursor && (\n                    <StyledMotionWaitCursorWrapper\n                        animate={{ opacity: 1, width: 40 }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"wait-cursor\"\n                        style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        <SmallWaitCursor color=\"white\" shouldHideBackground size={26} />\n                    </StyledMotionWaitCursorWrapper>\n                )}\n                {!shouldShowWaitCursor && children && (\n                    <StyledMotionChildrenWrapper\n                        animate={{ opacity: 1, width: 'auto' }}\n                        exit={{ opacity: 0, width: 0 }}\n                        initial={{ opacity: 0, width: 0 }}\n                        key=\"children\"\n                        // style={{ overflow: 'hidden' }}\n                        transition={{ duration: 0.2 }}\n                    >\n                        {children}\n                    </StyledMotionChildrenWrapper>\n                )}\n            </AnimatePresence>\n        </StyledMotionButton>\n    );\n};\n\nButton.displayName = 'Button';\n\nexport default Button;\n"],"mappings":"AAAA,OAAOA,IAAI,MAAM,MAAM;AACvB,SAASC,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,MAA4C,OAAO;AAC/D,SAASC,QAAQ,QAAQ,mBAAmB;AAE5C,OAAOC,IAAI,MAAM,cAAc;AAC/B,OAAOC,eAAe,MAAM,sCAAsC;AAClE,SACIC,iBAAiB,EACjBC,kBAAkB,EAClBC,2BAA2B,EAC3BC,6BAA6B,QAC1B,iBAAiB;AAqCxB,MAAMC,MAAuB,GAAGC,IAAA,IAS1B;EAAA,IAT2B;IAC7BC,QAAQ;IACRC,SAAS;IACTC,IAAI;IACJC,UAAU;IACVC,WAAW;IACXC,OAAO;IACPC,oBAAoB;IACpBC;EACJ,CAAC,GAAAR,IAAA;EACG,MAAMS,WAAiD,GAAIC,KAAK,IAAK;IACjE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEAL,OAAO,CAACI,KAAK,CAAC;EAClB,CAAC;EAED,MAAME,aAAa,GAAGvB,IAAI,CAAC,6BAA6B,EAAEa,SAAS,CAAC;EAEpE,MAAMW,KAAY,GAAGrB,QAAQ,CAAC,CAAC;EAE/B,oBACID,KAAA,CAAAuB,aAAA,CAAClB,kBAAkB;IACfM,SAAS,EAAEU,aAAc;IACzBG,QAAQ,EAAEX,UAAW;IACrBY,WAAW,EAAEZ,UAAW;IACxBa,YAAY,EAAE,CAAC,CAAChB,QAAS;IACzBiB,QAAQ,EAAE,OAAOf,IAAI,KAAK,QAAQ,IAAIA,IAAI,KAAK,EAAG;IAClDgB,YAAY,EAAEd,WAAY;IAC1BC,OAAO,EAAEG,WAAY;IACrBW,QAAQ,EACJhB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE,CAClF;IACDS,UAAU,EACNlB,UAAU,GAAG,CAAC,CAAC,GAAG;MAAEiB,eAAe,EAAEhB,WAAW,GAAGQ,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK;IAAE;EAClF,gBAEDtB,KAAA,CAAAuB,aAAA,CAACxB,eAAe;IAACiC,OAAO,EAAE;EAAM,GAC3BpB,IAAI,iBACDZ,KAAA,CAAAuB,aAAA,CAACnB,iBAAiB,qBACdJ,KAAA,CAAAuB,aAAA,CAACrB,IAAI;IAAC+B,KAAK,EAAC,OAAO;IAACC,KAAK,EAAE,CAACtB,IAAI;EAAE,CAAE,CACrB,CACtB,EACAI,oBAAoB,iBACjBhB,KAAA,CAAAuB,aAAA,CAAChB,6BAA6B;IAC1B4B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAG,CAAE;IACnCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC,aAAa;IACjBC,KAAK,EAAE;MAAEC,QAAQ,EAAE;IAAS,CAAE;IAC9BC,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,gBAE9B3C,KAAA,CAAAuB,aAAA,CAACpB,eAAe;IAAC8B,KAAK,EAAC,OAAO;IAACW,oBAAoB;IAACC,IAAI,EAAE;EAAG,CAAE,CACpC,CAClC,EACA,CAAC7B,oBAAoB,IAAIN,QAAQ,iBAC9BV,KAAA,CAAAuB,aAAA,CAACjB,2BAA2B;IACxB6B,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAO,CAAE;IACvCC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAC/BL,OAAO,EAAE;MAAEI,OAAO,EAAE,CAAC;MAAEC,KAAK,EAAE;IAAE,CAAE;IAClCE,GAAG,EAAC;IACJ;IAAA;IACAG,UAAU,EAAE;MAAEC,QAAQ,EAAE;IAAI;EAAE,GAE7BjC,QACwB,CAEpB,CACD,CAAC;AAE7B,CAAC;AAEDF,MAAM,CAACsC,WAAW,GAAG,QAAQ;AAE7B,eAAetC,MAAM","ignoreList":[]}

package/lib/components/content-card/ContentCard.js

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useContext, useMemo } from 'react';
 import { ContentCardType } from '../../types/contentCard';
+import AreaProvider, { AreaProviderContext } from '../area-provider/AreaProvider';
 import { StyledContentCard } from './ContentCard.styles';
 const ContentCard = _ref => {
   let {
@@ -7,10 +8,15 @@ const ContentCard = _ref => {
     onClick,
     type = ContentCardType.Default
   } = _ref;
+  const areaProvider = useContext(AreaProviderContext);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   return /*#__PURE__*/React.createElement(StyledContentCard, {
     onClick: onClick,
-    $type: type
-  }, children);
+    $type: type,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(AreaProvider, {
+    shouldChangeColor: !shouldChangeColor
+  }, children));
 };
 ContentCard.displayName = 'ContentCard';
 export default ContentCard;

package/lib/components/content-card/ContentCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.js","names":["React","ContentCardType","StyledContentCard","ContentCard","_ref","children","onClick","type","Default","createElement","$type","displayName"],"sources":["../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => (\n    <StyledContentCard onClick={onClick} $type={type}>\n        {children}\n    </StyledContentCard>\n);\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAyB,OAAO;AAC5C,SAASC,eAAe,QAAQ,yBAAyB;AACzD,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA;EAAA,IAAC;IACvCC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAGN,eAAe,CAACO;EAC3B,CAAC,GAAAJ,IAAA;EAAA,oBACGJ,KAAA,CAAAS,aAAA,CAACP,iBAAiB;IAACI,OAAO,EAAEA,OAAQ;IAACI,KAAK,EAAEH;EAAK,GAC5CF,QACc,CAAC;AAAA,CACvB;AAEDF,WAAW,CAACQ,WAAW,GAAG,aAAa;AAEvC,eAAeR,WAAW","ignoreList":[]}
+{"version":3,"file":"ContentCard.js","names":["React","useContext","useMemo","ContentCardType","AreaProvider","AreaProviderContext","StyledContentCard","ContentCard","_ref","children","onClick","type","Default","areaProvider","shouldChangeColor","createElement","$type","$shouldChangeColor","displayName"],"sources":["../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaProvider, { AreaProviderContext } from '../area-provider/AreaProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaProviderContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaProvider shouldChangeColor={!shouldChangeColor}>{children}</AreaProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,YAAY,IAAIC,mBAAmB,QAAQ,+BAA+B;AACjF,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA,IAIpC;EAAA,IAJqC;IACvCC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAGR,eAAe,CAACS;EAC3B,CAAC,GAAAJ,IAAA;EACG,MAAMK,YAAY,GAAGZ,UAAU,CAACI,mBAAmB,CAAC;EAEpD,MAAMS,iBAAiB,GAAGZ,OAAO,CAC7B,MAAMW,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACT,iBAAiB;IAACI,OAAO,EAAEA,OAAQ;IAACM,KAAK,EAAEL,IAAK;IAACM,kBAAkB,EAAEH;EAAkB,gBACpFd,KAAA,CAAAe,aAAA,CAACX,YAAY;IAACU,iBAAiB,EAAE,CAACA;EAAkB,GAAEL,QAAuB,CAC9D,CAAC;AAE5B,CAAC;AAEDF,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}

package/lib/components/content-card/ContentCard.styles.d.ts

@@ -3,6 +3,7 @@ import { ContentCardType } from '../../types/contentCard';
 import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 type StyledContentCardProps = WithTheme<{
     $type: ContentCardType;
+    $shouldChangeColor: boolean;
 }>;
 export declare const StyledContentCard: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledContentCardProps>>;
 export {};

package/lib/components/content-card/ContentCard.styles.js

@@ -7,24 +7,41 @@ export const StyledContentCard = styled.div`
   } = _ref;
   return theme.cardBorderRadius;
 }}px;
-    box-shadow: 0 2px 6px 0
-        rgba(0, 0, 0, ${_ref2 => {
+
+    ${_ref2 => {
   let {
-    theme
+    theme,
+    $shouldChangeColor
   } = _ref2;
-  return theme.cardShadow;
-}});
+  return !$shouldChangeColor && css`
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `;
+}};
+
     padding: 8px 12px;
 
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+
     &:not(:last-child) {
         margin-bottom: 8px;
     }
 
-    ${_ref3 => {
+    ${_ref4 => {
   let {
     $type,
-    theme
-  } = _ref3;
+    theme,
+    $shouldChangeColor
+  } = _ref4;
+  if ($type === ContentCardType.Default && $shouldChangeColor) {
+    return css`
+                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+            `;
+  }
   switch ($type) {
     case ContentCardType.Error:
       return css`

package/lib/components/content-card/ContentCard.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","_ref","theme","cardBorderRadius","_ref2","cardShadow","_ref3","$type","Error","Success","Warning","cardBackgroundOpacity"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n    box-shadow: 0 2px 6px 0\n        rgba(0, 0, 0, ${({ theme }: StyledContentCardProps) => theme.cardShadow});\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme }: StyledContentCardProps) => {\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,yBAAyB;AAOzD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA4B;AACpE,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA,CAAC;AACnF;AACA,wBAAwBC,KAAA;EAAA,IAAC;IAAEF;EAA8B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,UAAU;AAAA,CAAC;AAChF;AACA;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAA8C;EAAA,IAA7C;IAAEC,KAAK;IAAEL;EAA8B,CAAC,GAAAI,KAAA;EACvC,QAAQC,KAAK;IACT,KAAKT,eAAe,CAACU,KAAK;MACtB,OAAOX,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,OAAO,CAAE;AACvD,wCAAwCA,KAAK,CAAC,OAAO,CAAE;AACvD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACW,OAAO;MACxB,OAAOZ,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,SAAS,CAAE;AACzD,wCAAwCA,KAAK,CAAC,SAAS,CAAE;AACzD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACY,OAAO;MACxB,OAAOb,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,UAAU,CAAE;AAC1D,wCAAwCA,KAAK,CAAC,UAAU,CAAE;AAC1D;AACA,iBAAiB;IACL;MACI,OAAOL,GAAI;AAC3B;AACA,0BAA0BK,KAAK,CAAC,mBAAmB,CAAE;AACrD,0BAA0BA,KAAK,CAACS,qBAAsB;AACtD;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC","ignoreList":[]}
+{"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","_ref","theme","cardBorderRadius","_ref2","$shouldChangeColor","cardShadow","_ref3","text","_ref4","$type","Default","cardBackgroundOpacity","Error","Success","Warning"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n\n    ${({ theme, $shouldChangeColor }: StyledContentCardProps) =>\n        !$shouldChangeColor &&\n        css`\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `};\n\n    padding: 8px 12px;\n\n    color: ${({ theme }: StyledContentCardProps) => theme.text};\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n        if ($type === ContentCardType.Default && $shouldChangeColor) {\n            return css`\n                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});\n            `;\n        }\n\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,yBAAyB;AAQzD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA4B;AACpE,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA,CAAC;AACnF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpD,CAACC,kBAAkB,IACnBR,GAAI;AACZ,oDAAoDK,KAAK,CAACI,UAAW;AACrE,SAAS;AAAA,CAAC;AACV;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,IAAI;AAAA,CAAC;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAkE;EAAA,IAAjE;IAAEC,KAAK;IAAER,KAAK;IAAEG;EAA2C,CAAC,GAAAI,KAAA;EAC3D,IAAIC,KAAK,KAAKZ,eAAe,CAACa,OAAO,IAAIN,kBAAkB,EAAE;IACzD,OAAOR,GAAI;AACvB,yCAAyCK,KAAK,CAAC,SAAS,CAAE,KAAIA,KAAK,CAACU,qBAAsB;AAC1F,aAAa;EACL;EAEA,QAAQF,KAAK;IACT,KAAKZ,eAAe,CAACe,KAAK;MACtB,OAAOhB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,OAAO,CAAE;AACvD,wCAAwCA,KAAK,CAAC,OAAO,CAAE;AACvD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACgB,OAAO;MACxB,OAAOjB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,SAAS,CAAE;AACzD,wCAAwCA,KAAK,CAAC,SAAS,CAAE;AACzD;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACiB,OAAO;MACxB,OAAOlB,GAAI;AAC3B,wCAAwCK,KAAK,CAAC,UAAU,CAAE;AAC1D,wCAAwCA,KAAK,CAAC,UAAU,CAAE;AAC1D;AACA,iBAAiB;IACL;MACI,OAAOL,GAAI;AAC3B;AACA,0BAA0BK,KAAK,CAAC,mBAAmB,CAAE;AACrD,0BAA0BA,KAAK,CAACU,qBAAsB;AACtD;AACA,iBAAiB;EACT;AACJ,CAAE;AACN,CAAC","ignoreList":[]}

package/lib/components/file-input/FileInput.d.ts

@@ -1,5 +1,10 @@
 import { FC } from 'react';
+import type { FileInputFileItem } from '../../types/fileInput';
 export type FileInputProps = {
+    /**
+     * Already uploaded files to display.
+     */
+    files?: FileInputFileItem[];
     /**
      * An array of icons that should be displayed inside the FileInput
      */
@@ -35,7 +40,7 @@ export type FileInputProps = {
     /**
      * A function to be executed when a file is removed.
      */
-    onRemove?: (file: File | string) => void;
+    onRemove?: (file: File | FileInputFileItem | string) => void;
 };
 declare const FileInput: FC<FileInputProps>;
 export default FileInput;