@chayns-components/core 5.0.0-beta.433 → 5.0.0-beta.435

package/lib/api/theme/get.d.ts

@@ -0,0 +1,2 @@
+import type { DesignSettings } from '../../types/colorSchemeProvider';
+export declare const getDesignSettings: () => Promise<DesignSettings | undefined>;

package/lib/api/theme/get.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDesignSettings = void 0;
+var _chaynsApi = require("chayns-api");
+const getDesignSettings = async () => {
+  const {
+    id
+  } = (0, _chaynsApi.getSite)();
+  const response = await fetch(`https://api-qa.chayns.net/css/${id}/style/v2`, {
+    method: 'GET'
+  });
+  if (response.status === 200) {
+    return await response.json();
+  }
+  return undefined;
+};
+exports.getDesignSettings = getDesignSettings;
+//# sourceMappingURL=get.js.map

package/lib/api/theme/get.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get.js","names":["_chaynsApi","require","getDesignSettings","id","getSite","response","fetch","method","status","json","undefined","exports"],"sources":["../../../src/api/theme/get.ts"],"sourcesContent":["import { getSite } from 'chayns-api';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\n\nexport const getDesignSettings = async (): Promise<DesignSettings | undefined> => {\n    const { id } = getSite();\n\n    const response = await fetch(`https://api-qa.chayns.net/css/${id}/style/v2`, {\n        method: 'GET',\n    });\n\n    if (response.status === 200) {\n        return (await response.json()) as DesignSettings;\n    }\n\n    return undefined;\n};\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AAGO,MAAMC,iBAAiB,GAAG,MAAAA,CAAA,KAAiD;EAC9E,MAAM;IAAEC;EAAG,CAAC,GAAG,IAAAC,kBAAO,EAAC,CAAC;EAExB,MAAMC,QAAQ,GAAG,MAAMC,KAAK,CAAE,iCAAgCH,EAAG,WAAU,EAAE;IACzEI,MAAM,EAAE;EACZ,CAAC,CAAC;EAEF,IAAIF,QAAQ,CAACG,MAAM,KAAK,GAAG,EAAE;IACzB,OAAQ,MAAMH,QAAQ,CAACI,IAAI,CAAC,CAAC;EACjC;EAEA,OAAOC,SAAS;AACpB,CAAC;AAACC,OAAA,CAAAT,iBAAA,GAAAA,iBAAA"}

package/lib/components/accordion/Accordion.d.ts

@@ -72,6 +72,10 @@ export type AccordionProps = {
      * The placeholder to be used for the search
      */
     searchPlaceholder?: string;
+    /**
+     * The value that is displayed inside the search
+     */
+    searchValue?: string;
     /**
      * This will force the background color of the accordion to be used even if it is closed and not hovered.
      */

package/lib/components/accordion/Accordion.js

@@ -35,6 +35,7 @@ const Accordion = _ref => {
     rightElement,
     searchIcon,
     searchPlaceholder,
+    searchValue,
     shouldForceBackground = false,
     shouldHideBackground = false,
     shouldRotateIcon = true,
@@ -135,6 +136,7 @@ const Accordion = _ref => {
     rightElement: rightElement,
     searchIcon: searchIcon,
     searchPlaceholder: searchPlaceholder,
+    searchValue: searchValue,
     shouldRotateIcon: shouldRotateIcon,
     title: title,
     titleElement: titleElement

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldForceBackground","shouldHideBackground","shouldRotateIcon","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"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     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: 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     * 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     * 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     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\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    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = 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 onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [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) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\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}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\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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"}
+{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRotateIcon","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"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';\nimport { useTheme } from 'styled-components';\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     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: 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     * 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     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\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    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = 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 onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [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) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\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}\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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"}

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

@@ -17,18 +17,26 @@ const StyledAccordion = exports.StyledAccordion = _styledComponents.default.div`
     theme
   } = _ref;
   return (isOpen || shouldForceBackground) && !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
-            background-color: ${theme['100']}; // ToDo: Add opacity here
-            border-radius: 3px; // ToDo: Add correct border-radius here
-            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here
+            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            border-radius: ${theme.cardBorderRadius}px;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
         `;
 }}
 
-    border-bottom: 1px solid transparent;
-    margin-bottom: ${_ref2 => {
+    ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.accordionLines && (0, _styledComponents.css)`
+            border-bottom: 1px solid transparent;
+        `;
+}}
+    
+    margin-bottom: ${_ref3 => {
   let {
     isOpen,
     isWrapped
-  } = _ref2;
+  } = _ref3;
   return isOpen && !isWrapped ? '30px' : '0px';
 }};
     transition:
@@ -38,13 +46,13 @@ const StyledAccordion = exports.StyledAccordion = _styledComponents.default.div`
         box-shadow 0.3s ease,
         margin-bottom 0.3s ease;
 
-    ${_ref3 => {
+    ${_ref4 => {
   let {
     isOpen,
     isWrapped,
     shouldForceBackground,
     theme
-  } = _ref3;
+  } = _ref4;
   if (shouldForceBackground) return undefined;
   if (isWrapped) {
     return (0, _styledComponents.css)`
@@ -61,33 +69,33 @@ const StyledAccordion = exports.StyledAccordion = _styledComponents.default.div`
   return undefined;
 }}
 
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     isParentWrapped
-  } = _ref4;
+  } = _ref5;
   return isParentWrapped && (0, _styledComponents.css)`
             padding-left: 17px;
         `;
 }}
 
-    ${_ref5 => {
+    ${_ref6 => {
   let {
     isWrapped
-  } = _ref5;
+  } = _ref6;
   return !isWrapped && (0, _styledComponents.css)`
             margin-top: 10px;
         `;
 }}
 
-    ${_ref6 => {
+    ${_ref7 => {
   let {
     isWrapped,
     shouldHideBackground,
     theme
-  } = _ref6;
+  } = _ref7;
   return !isWrapped && !shouldHideBackground && (0, _styledComponents.css)`
             &:hover {
-                background-color: ${theme['100']}; // ToDo: Add opacity here
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
             }
         `;
 }}

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledAccordion","exports","styled","div","_ref","isOpen","isWrapped","shouldForceBackground","shouldHideBackground","theme","css","_ref2","_ref3","undefined","headline","_ref4","isParentWrapped","_ref5","_ref6"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    isOpen: boolean;\n    isParentWrapped: boolean;\n}> &\n    Pick<AccordionProps, 'isWrapped' | 'shouldForceBackground' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({\n        isOpen,\n        isWrapped,\n        shouldForceBackground,\n        shouldHideBackground,\n        theme,\n    }: StyledMotionAccordionProps) =>\n        (isOpen || shouldForceBackground) &&\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            background-color: ${theme['100']}; // ToDo: Add opacity here\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        `}\n\n    border-bottom: 1px solid transparent;\n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n    transition:\n        background-color 0.3s ease,\n        border-bottom-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n\n    ${({ isOpen, isWrapped, shouldForceBackground, theme }: StyledMotionAccordionProps) => {\n        if (shouldForceBackground) return undefined;\n\n        if (isWrapped) {\n            return css`\n                :not(:last-child) {\n                    border-bottom-color: ${theme.headline};\n                }\n            `;\n        }\n\n        if (!isOpen) {\n            return css`\n                border-bottom-color: ${theme.headline};\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ isParentWrapped }) =>\n        isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n        `}\n\n    ${({ isWrapped, shouldHideBackground, theme }) =>\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            &:hover {\n                background-color: ${theme['100']}; // ToDo: Add opacity here\n            }\n        `}\n`;\n"],"mappings":"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"}
+{"version":3,"file":"Accordion.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledAccordion","exports","styled","div","_ref","isOpen","isWrapped","shouldForceBackground","shouldHideBackground","theme","css","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","undefined","headline","_ref5","isParentWrapped","_ref6","_ref7"],"sources":["../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { AccordionProps } from './Accordion';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    isOpen: boolean;\n    isParentWrapped: boolean;\n}> &\n    Pick<AccordionProps, 'isWrapped' | 'shouldForceBackground' | 'shouldHideBackground'>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({\n        isOpen,\n        isWrapped,\n        shouldForceBackground,\n        shouldHideBackground,\n        theme,\n    }: StyledMotionAccordionProps) =>\n        (isOpen || shouldForceBackground) &&\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            border-radius: ${theme.cardBorderRadius}px;\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `}\n\n    ${({ theme }: StyledMotionAccordionProps) =>\n        theme.accordionLines &&\n        css`\n            border-bottom: 1px solid transparent;\n        `}\n    \n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n    transition:\n        background-color 0.3s ease,\n        border-bottom-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n\n    ${({ isOpen, isWrapped, shouldForceBackground, theme }: StyledMotionAccordionProps) => {\n        if (shouldForceBackground) return undefined;\n\n        if (isWrapped) {\n            return css`\n                :not(:last-child) {\n                    border-bottom-color: ${theme.headline};\n                }\n            `;\n        }\n\n        if (!isOpen) {\n            return css`\n                border-bottom-color: ${theme.headline};\n            `;\n        }\n\n        return undefined;\n    }}\n\n    ${({ isParentWrapped }) =>\n        isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n        `}\n\n    ${({ isWrapped, shouldHideBackground, theme }) =>\n        !isWrapped &&\n        !shouldHideBackground &&\n        css`\n            &:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n`;\n"],"mappings":"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"}

package/lib/components/accordion/accordion-head/AccordionHead.d.ts

@@ -10,6 +10,7 @@ type AccordionHeadProps = {
     rightElement?: ReactNode;
     searchIcon?: string[];
     searchPlaceholder?: string;
+    searchValue?: string;
     shouldRotateIcon?: boolean;
     title: string;
     titleElement?: ReactNode;

package/lib/components/accordion/accordion-head/AccordionHead.js

@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _AccordionHead = require("./AccordionHead.styles");
 var _accordion = require("../../../utils/accordion");
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -24,6 +25,7 @@ const AccordionHead = _ref => {
     rightElement,
     searchIcon,
     searchPlaceholder,
+    searchValue,
     shouldRotateIcon,
     title,
     titleElement
@@ -32,6 +34,10 @@ const AccordionHead = _ref => {
     closed: isWrapped ? 40 : 33,
     open: isWrapped ? 40 : 33
   });
+  const {
+    accordionIcon,
+    iconStyle
+  } = (0, _styledComponents.useTheme)();
   const titleWrapperRef = (0, _react.useRef)(null);
   const hasSearchIcon = Array.isArray(searchIcon);
   (0, _react.useEffect)(() => {
@@ -41,6 +47,20 @@ const AccordionHead = _ref => {
       width: (titleWrapperRef.current?.clientWidth ?? 0) - 10
     }));
   }, [isWrapped, title]);
+  const iconElement = (0, _react.useMemo)(() => {
+    if (icon || icon && isFixed) {
+      return /*#__PURE__*/_react.default.createElement(_Icon.default, {
+        icons: [isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']
+      });
+    }
+    if (!accordionIcon) {
+      return null;
+    }
+    return /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledAccordionIcon, {
+      className: iconStyle,
+      icon: accordionIcon?.toString(16)
+    });
+  }, [accordionIcon, icon, iconStyle, isFixed]);
   return /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionAccordionHead, {
     animate: {
       height: isOpen ? headHeight.open : headHeight.closed
@@ -53,9 +73,7 @@ const AccordionHead = _ref => {
     },
     initial: false,
     onClick: !isFixed ? onClick : undefined
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icons: [isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']
-  })), /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionContentWrapper, {
+  }, iconElement), /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionContentWrapper, {
     animate: {
       opacity: isTitleGreyed ? 0.5 : 1
     },
@@ -96,7 +114,8 @@ const AccordionHead = _ref => {
     key: "rightInput",
     onChange: onSearchChange,
     placeholder: searchPlaceholder,
-    type: "text"
+    type: "text",
+    value: searchValue
   }), hasSearchIcon && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInputIconWrapper, {
     animate: {
       opacity: 1

package/lib/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_AccordionHead","_accordion","_Icon","_interopRequireDefault","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldRotateIcon","title","titleElement","headHeight","setHeadHeight","useState","closed","open","titleWrapperRef","useRef","hasSearchIcon","Array","isArray","useEffect","getAccordionHeadHeight","width","current","clientWidth","createElement","StyledMotionAccordionHead","animate","height","className","initial","StyledMotionIconWrapper","rotate","undefined","icons","StyledMotionContentWrapper","opacity","ref","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","key","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","exit","hasIcon","onChange","placeholder","type","StyledMotionRightInputIconWrapper","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionRightInput,\n    StyledMotionRightInputIconWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport Icon from '../../icon/Icon';\n\ntype AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchIcon?: string[];\n    searchPlaceholder?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldRotateIcon,\n    title,\n    titleElement,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const hasSearchIcon = Array.isArray(searchIcon);\n\n    useEffect(() => {\n        setHeadHeight(\n            getAccordionHeadHeight({\n                isWrapped,\n                title,\n                width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n            }),\n        );\n    }, [isWrapped, title]);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n            >\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n            >\n                <LayoutGroup>\n                    <StyledMotionTitleWrapper>\n                        <AnimatePresence initial={false}>\n                            <StyledMotionTitle\n                                animate={{ scale: 1 }}\n                                initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                isOpen={isOpen}\n                                isWrapped={isWrapped}\n                                key={\n                                    isOpen && !isWrapped\n                                        ? 'accordionHeadTitleBig'\n                                        : 'accordionHeadTitle'\n                                }\n                            >\n                                {title}\n                            </StyledMotionTitle>\n                        </AnimatePresence>\n                    </StyledMotionTitleWrapper>\n                    {titleElement && (\n                        <StyledMotionTitleElementWrapper layout>\n                            {titleElement}\n                        </StyledMotionTitleElementWrapper>\n                    )}\n                </LayoutGroup>\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false}>\n                        {typeof onSearchChange === 'function' && isOpen ? (\n                            <>\n                                <StyledMotionRightInput\n                                    animate={{ opacity: 1, width: '165px' }}\n                                    autoComplete=\"off\"\n                                    exit={{ opacity: 0, width: 0 }}\n                                    hasIcon={hasSearchIcon}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"rightInput\"\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    type=\"text\"\n                                />\n                                {hasSearchIcon && (\n                                    <StyledMotionRightInputIconWrapper\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0 }}\n                                        initial={{ opacity: 0 }}\n                                        key=\"rightInputIcon\"\n                                    >\n                                        <Icon icons={searchIcon} />\n                                    </StyledMotionRightInputIconWrapper>\n                                )}\n                            </>\n                        ) : (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key=\"rightElementWrapper\"\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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"}
+{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_AccordionHead","_accordion","_Icon","_interopRequireDefault","_styledComponents","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","headHeight","setHeadHeight","useState","closed","open","accordionIcon","iconStyle","useTheme","titleWrapperRef","useRef","hasSearchIcon","Array","isArray","useEffect","getAccordionHeadHeight","width","current","clientWidth","iconElement","useMemo","createElement","icons","StyledAccordionIcon","className","toString","StyledMotionAccordionHead","animate","height","initial","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","key","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","exit","hasIcon","onChange","placeholder","type","value","StyledMotionRightInputIconWrapper","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionRightInput,\n    StyledMotionRightInputIconWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport Icon from '../../icon/Icon';\nimport { useTheme } from 'styled-components';\n\ntype AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchIcon?: string[];\n    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const { accordionIcon, iconStyle } = useTheme();\n\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const hasSearchIcon = Array.isArray(searchIcon);\n\n    useEffect(() => {\n        setHeadHeight(\n            getAccordionHeadHeight({\n                isWrapped,\n                title,\n                width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n            }),\n        );\n    }, [isWrapped, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || (icon && isFixed)) {\n            return (\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            );\n        }\n\n        if (!accordionIcon) {\n            return null;\n        }\n\n        return (\n            <StyledAccordionIcon\n                className={iconStyle as string}\n                icon={(accordionIcon as number)?.toString(16)}\n            />\n        );\n    }, [accordionIcon, icon, iconStyle, isFixed]);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n            >\n                <LayoutGroup>\n                    <StyledMotionTitleWrapper>\n                        <AnimatePresence initial={false}>\n                            <StyledMotionTitle\n                                animate={{ scale: 1 }}\n                                initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                isOpen={isOpen}\n                                isWrapped={isWrapped}\n                                key={\n                                    isOpen && !isWrapped\n                                        ? 'accordionHeadTitleBig'\n                                        : 'accordionHeadTitle'\n                                }\n                            >\n                                {title}\n                            </StyledMotionTitle>\n                        </AnimatePresence>\n                    </StyledMotionTitleWrapper>\n                    {titleElement && (\n                        <StyledMotionTitleElementWrapper layout>\n                            {titleElement}\n                        </StyledMotionTitleElementWrapper>\n                    )}\n                </LayoutGroup>\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false}>\n                        {typeof onSearchChange === 'function' && isOpen ? (\n                            <>\n                                <StyledMotionRightInput\n                                    animate={{ opacity: 1, width: '165px' }}\n                                    autoComplete=\"off\"\n                                    exit={{ opacity: 0, width: 0 }}\n                                    hasIcon={hasSearchIcon}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"rightInput\"\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    type=\"text\"\n                                    value={searchValue}\n                                />\n                                {hasSearchIcon && (\n                                    <StyledMotionRightInputIconWrapper\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0 }}\n                                        initial={{ opacity: 0 }}\n                                        key=\"rightInputIcon\"\n                                    >\n                                        <Icon icons={searchIcon} />\n                                    </StyledMotionRightInputIconWrapper>\n                                )}\n                            </>\n                        ) : (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key=\"rightElementWrapper\"\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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"}

package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts

@@ -531,6 +531,10 @@ export declare const StyledMotionIconWrapper: import("styled-components").IStyle
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, {
     theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
 }>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
+type StyledAccordionIconProps = WithTheme<{
+    icon: string;
+}>;
+export declare const StyledAccordionIcon: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, StyledAccordionIconProps>>;
 export declare const StyledMotionContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<{
     slot?: string | undefined;
     title?: string | undefined;

package/lib/components/accordion/accordion-head/AccordionHead.styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = void 0;
+exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = exports.StyledAccordionIcon = void 0;
 var _framerMotion = require("framer-motion");
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -34,12 +34,33 @@ const StyledMotionIconWrapper = exports.StyledMotionIconWrapper = (0, _styledCom
     justify-content: center;
     width: 25px;
 `;
+const StyledAccordionIcon = exports.StyledAccordionIcon = _styledComponents.default.i`
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.headline;
+}};
+
+    &:before {
+        content: ${_ref4 => {
+  let {
+    icon
+  } = _ref4;
+  return `"\\${icon}"`;
+}};
+        font-family: 'Font Awesome 6 Pro', Fontawesome !important;
+    }
+`;
 const StyledMotionContentWrapper = exports.StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-self: flex-start;
-    cursor: ${_ref3 => {
+    cursor: ${_ref5 => {
   let {
     onClick
-  } = _ref3;
+  } = _ref5;
   return typeof onClick === 'function' ? 'pointer' : 'default';
 }};
     display: flex;
@@ -54,43 +75,43 @@ const StyledMotionTitleWrapper = exports.StyledMotionTitleWrapper = (0, _styledC
     grid-template-areas: 'header';
 `;
 const StyledMotionTitle = exports.StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)`
-    font-size: ${_ref4 => {
+    font-size: ${_ref6 => {
   let {
     isOpen,
     isWrapped
-  } = _ref4;
+  } = _ref6;
   return isOpen && !isWrapped ? '1.3rem' : undefined;
 }};
-    font-weight: ${_ref5 => {
+    font-weight: ${_ref7 => {
   let {
     isOpen,
     isWrapped
-  } = _ref5;
+  } = _ref7;
   return isOpen && isWrapped ? 700 : 'normal';
 }};
     grid-area: header;
-    height: ${_ref6 => {
+    height: ${_ref8 => {
   let {
     isWrapped
-  } = _ref6;
+  } = _ref8;
   return isWrapped ? '100%' : undefined;
 }};
     overflow: hidden;
     text-overflow: ellipsis;
     transform-origin: top left;
     user-select: none;
-    white-space: ${_ref7 => {
+    white-space: ${_ref9 => {
   let {
     isOpen,
     isWrapped
-  } = _ref7;
+  } = _ref9;
   return isOpen && !isWrapped ? 'normal' : 'nowrap';
 }};
 
-    ${_ref8 => {
+    ${_ref10 => {
   let {
     isWrapped
-  } = _ref8;
+  } = _ref10;
   return isWrapped && (0, _styledComponents.css)`
             align-items: center;
             display: flex;
@@ -120,25 +141,25 @@ const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledCompo
     background-color: transparent;
     border: 1px solid transparent;
     border-bottom-color: rgba(
-        ${_ref9 => {
+        ${_ref11 => {
   let {
     theme
-  } = _ref9;
+  } = _ref11;
   return theme['headline-rgb'];
 }},
         0.45
     );
-    color: ${_ref10 => {
+    color: ${_ref12 => {
   let {
     theme
-  } = _ref10;
+  } = _ref12;
   return theme.text;
 }};
     grid-area: header;
-    padding: ${_ref11 => {
+    padding: ${_ref13 => {
   let {
     hasIcon
-  } = _ref11;
+  } = _ref13;
   return hasIcon ? '5px 23px 5px 1px' : '5px 1px';
 }};
 `;

package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionAccordionHead","exports","styled","motion","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledMotionContentWrapper","_ref3","StyledMotionTitleWrapper","StyledMotionTitle","_ref4","isOpen","isWrapped","undefined","_ref5","_ref6","_ref7","_ref8","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref9","_ref10","_ref11","hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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"}
+{"version":3,"file":"AccordionHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledMotionAccordionHead","exports","styled","motion","div","_ref","theme","text","StyledMotionIconWrapper","_ref2","onClick","StyledAccordionIcon","_ref3","headline","_ref4","icon","StyledMotionContentWrapper","_ref5","StyledMotionTitleWrapper","StyledMotionTitle","_ref6","isOpen","isWrapped","undefined","_ref7","_ref8","_ref9","_ref10","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref11","_ref12","_ref13","hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)<StyledMotionAccordionHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\ntype StyledAccordionIconProps = WithTheme<{ icon: string }>;\n\nexport const StyledAccordionIcon = styled.i<StyledAccordionIconProps>`\n    align-items: center;\n    justify-content: center;\n    display: flex;\n    color: ${({ theme }: StyledAccordionIconProps) => theme.headline};\n\n    &:before {\n        content: ${({ icon }) => `\"\\\\${icon}\"`};\n        font-family: 'Font Awesome 6 Pro', Fontawesome !important;\n    }\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)<FramerMotionBugFix>`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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"}

package/lib/components/color-scheme-provider/ColorSchemeProvider.d.ts

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import type { DesignSettings } from '../../types/colorSchemeProvider';
 declare enum ColorMode {
     Classic = 0,
     Dark = 1,
@@ -23,6 +24,10 @@ type ColorSchemeProviderProps = {
     cssVariables?: {
         [key: string]: string | number;
     };
+    /**
+     * The design settings of a page.
+     */
+    designSettings?: DesignSettings;
     /**
      * The secondary hex color to be used for the children
      */

package/lib/components/color-scheme-provider/ColorSchemeProvider.js

@@ -8,6 +8,8 @@ var _colors = require("@chayns/colors");
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _font = require("../../utils/font");
+var _chaynsApi = require("chayns-api");
+var _get = require("../../api/theme/get");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var ColorMode = /*#__PURE__*/function (ColorMode) {
@@ -28,39 +30,67 @@ const GlobalStyle = (0, _styledComponents.createGlobalStyle)`
 const ColorSchemeProvider = _ref => {
   let {
     children,
-    color = '#005EB8',
-    colorMode = ColorMode.Classic,
+    color,
+    colorMode,
     cssVariables = {},
     secondaryColor,
-    style = {}
+    style = {},
+    designSettings
   } = _ref;
   const [colors, setColors] = (0, _react.useState)({});
-  const [themeColors, setThemeColors] = (0, _react.useState)({});
+  const [theme, setTheme] = (0, _react.useState)({});
+  const [internalDesignSettings, setInternalDesignSettings] = (0, _react.useState)();
+  (0, _react.useEffect)(() => {
+    if (designSettings) {
+      setInternalDesignSettings(designSettings);
+      return;
+    }
+    void (0, _get.getDesignSettings)().then(result => {
+      setInternalDesignSettings(result);
+    });
+  }, [designSettings]);
+  const site = (0, _chaynsApi.getSite)();
+  const internalColorMode = colorMode ?? site.colorMode;
+  const internalColor = color ?? site.color;
   (0, _react.useEffect)(() => {
     const availableColors = (0, _colors.getAvailableColorList)();
     const newColors = {};
-    const newThemeColors = {};
+    const newTheme = {};
     availableColors.forEach(colorName => {
       const hexColor = (0, _colors.getColorFromPalette)(colorName, {
-        color,
-        colorMode,
+        color: internalColor,
+        colorMode: internalColorMode,
         secondaryColor
       });
       if (hexColor) {
         const rgbColor = (0, _colors.hexToRgb255)(hexColor);
         newColors[`--chayns-color--${colorName}`] = hexColor;
-        newThemeColors[colorName] = hexColor;
+        newTheme[colorName] = hexColor;
         if (rgbColor) {
           newColors[`--chayns-color-rgb--${colorName}`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
-          newThemeColors[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
+          newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;
         }
       }
     });
+    if (internalDesignSettings) {
+      Object.keys(internalDesignSettings).forEach(key => {
+        if (key === 'iconStyle') {
+          newTheme[key] = (0, _font.convertIconStyle)(internalDesignSettings.iconStyle);
+          return;
+        }
+
+        // ToDo: Find better solution
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        newTheme[key] = internalDesignSettings[key];
+      });
+    }
+    setTheme(newTheme);
     setColors(newColors);
-    setThemeColors(newThemeColors);
-  }, [color, colorMode, secondaryColor]);
+  }, [internalColor, internalColorMode, internalDesignSettings, secondaryColor]);
   return /*#__PURE__*/_react.default.createElement(_styledComponents.ThemeProvider, {
-    theme: themeColors
+    theme: theme
   }, /*#__PURE__*/_react.default.createElement("div", {
     style: {
       ...colors,

package/lib/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","children","color","colorMode","Classic","cssVariables","secondaryColor","style","colors","setColors","useState","themeColors","setThemeColors","useEffect","availableColors","getAvailableColorList","newColors","newThemeColors","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","createElement","ThemeProvider","theme","displayName","_default","exports"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { generateFontFaces } from '../../utils/font';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n  ${generateFontFaces}\n\n  .ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color = '#005EB8',\n    colorMode = ColorMode.Classic,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [themeColors, setThemeColors] = useState<Theme>({});\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newThemeColors: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color,\n                colorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newThemeColors[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[`--chayns-color-rgb--${colorName}`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newThemeColors[`${colorName}-rgb`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        setColors(newColors);\n        setThemeColors(newThemeColors);\n    }, [color, colorMode, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={themeColors}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AACA,IAAAG,iBAAA,GAAAH,OAAA;AACA,IAAAI,KAAA,GAAAJ,OAAA;AAAqD,SAAAK,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAc,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAgB,GAAA,CAAAnB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAAA,IAEhDY,SAAS,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA,EAATA,SAAS,SAyCd;AAGA,MAAMC,WAAW,GAAG,IAAAC,mCAAiB,CAAC;AACtC,IAAIC,uBAAkB;AACtB;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,MAAMC,mBAAiD,GAAGC,IAAA,IAOpD;EAAA,IAPqD;IACvDC,QAAQ;IACRC,KAAK,GAAG,SAAS;IACjBC,SAAS,GAAGR,SAAS,CAACS,OAAO;IAC7BC,YAAY,GAAG,CAAC,CAAC;IACjBC,cAAc;IACdC,KAAK,GAAG,CAAC;EACb,CAAC,GAAAP,IAAA;EACG,MAAM,CAACQ,MAAM,EAAEC,SAAS,CAAC,GAAG,IAAAC,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAC/C,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAG,IAAAF,eAAQ,EAAQ,CAAC,CAAC,CAAC;EAEzD,IAAAG,gBAAS,EAAC,MAAM;IACZ,MAAMC,eAAe,GAAG,IAAAC,6BAAqB,EAAC,CAAC;IAE/C,MAAMC,SAAgB,GAAG,CAAC,CAAC;IAC3B,MAAMC,cAAqB,GAAG,CAAC,CAAC;IAEhCH,eAAe,CAACI,OAAO,CAAEC,SAAiB,IAAK;MAC3C,MAAMC,QAAQ,GAAG,IAAAC,2BAAmB,EAACF,SAAS,EAAE;QAC5CjB,KAAK;QACLC,SAAS;QACTG;MACJ,CAAC,CAAC;MAEF,IAAIc,QAAQ,EAAE;QACV,MAAME,QAAQ,GAAG,IAAAC,mBAAW,EAACH,QAAQ,CAAC;QAEtCJ,SAAS,CAAE,mBAAkBG,SAAU,EAAC,CAAC,GAAGC,QAAQ;QACpDH,cAAc,CAACE,SAAS,CAAC,GAAGC,QAAQ;QAEpC,IAAIE,QAAQ,EAAE;UACVN,SAAS,CAAE,uBAAsBG,SAAU,EAAC,CAAC,GACxC,GAAEG,QAAQ,CAAC7C,CAAE,KAAI6C,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,EAAC;UACjDR,cAAc,CAAE,GAAEE,SAAU,MAAK,CAAC,GAC7B,GAAEG,QAAQ,CAAC7C,CAAE,KAAI6C,QAAQ,CAACE,CAAE,KAAIF,QAAQ,CAACG,CAAE,EAAC;QACrD;MACJ;IACJ,CAAC,CAAC;IAEFhB,SAAS,CAACO,SAAS,CAAC;IACpBJ,cAAc,CAACK,cAAc,CAAC;EAClC,CAAC,EAAE,CAACf,KAAK,EAAEC,SAAS,EAAEG,cAAc,CAAC,CAAC;EAEtC,oBACIpC,MAAA,CAAAU,OAAA,CAAA8C,aAAA,CAACtD,iBAAA,CAAAuD,aAAa;IAACC,KAAK,EAAEjB;EAAY,gBAC9BzC,MAAA,CAAAU,OAAA,CAAA8C,aAAA;IAAKnB,KAAK,EAAE;MAAE,GAAGC,MAAM;MAAE,GAAGH,YAAY;MAAE,GAAGE;IAAM;EAAE,GAAEN,QAAc,CAAC,eACtE/B,MAAA,CAAAU,OAAA,CAAA8C,aAAA,CAAC9B,WAAW,MAAE,CACH,CAAC;AAExB,CAAC;AAEDG,mBAAmB,CAAC8B,WAAW,GAAG,qBAAqB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAnD,OAAA,GAEzCmB,mBAAmB"}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_colors","require","_react","_interopRequireWildcard","_styledComponents","_font","_chaynsApi","_get","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","ColorMode","GlobalStyle","createGlobalStyle","generateFontFaces","ColorSchemeProvider","_ref","children","color","colorMode","cssVariables","secondaryColor","style","designSettings","colors","setColors","useState","theme","setTheme","internalDesignSettings","setInternalDesignSettings","useEffect","getDesignSettings","then","result","site","getSite","internalColorMode","internalColor","availableColors","getAvailableColorList","newColors","newTheme","forEach","colorName","hexColor","getColorFromPalette","rgbColor","hexToRgb255","g","b","keys","key","convertIconStyle","iconStyle","createElement","ThemeProvider","displayName","_default","exports"],"sources":["../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { getAvailableColorList, getColorFromPalette, hexToRgb255 } from '@chayns/colors';\nimport React, { FC, ReactNode, useEffect, useState } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { convertIconStyle, generateFontFaces } from '../../utils/font';\nimport type { DesignSettings } from '../../types/colorSchemeProvider';\nimport { getSite } from 'chayns-api';\nimport { getDesignSettings } from '../../api/theme/get';\n\nenum ColorMode {\n    Classic,\n    Dark,\n    Light,\n}\n\ntype ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * Css variables to be added in addition to the chayns variables\n     */\n    cssVariables?: { [key: string]: string | number };\n    /**\n     * The design settings of a page.\n     */\n    designSettings?: DesignSettings;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\n// ToDo remove type after the framer-motion bug is Fixed\nexport type FramerMotionBugFix = WithTheme<unknown>;\n\nconst GlobalStyle = createGlobalStyle`\n  ${generateFontFaces}\n\n  .ellipsis {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n`;\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color,\n    colorMode,\n    cssVariables = {},\n    secondaryColor,\n    style = {},\n    designSettings,\n}) => {\n    const [colors, setColors] = useState<Theme>({});\n    const [theme, setTheme] = useState<Theme>({});\n    const [internalDesignSettings, setInternalDesignSettings] = useState<DesignSettings>();\n\n    useEffect(() => {\n        if (designSettings) {\n            setInternalDesignSettings(designSettings);\n\n            return;\n        }\n\n        void getDesignSettings().then((result) => {\n            setInternalDesignSettings(result);\n        });\n    }, [designSettings]);\n\n    const site = getSite();\n\n    const internalColorMode = colorMode ?? site.colorMode;\n    const internalColor = color ?? site.color;\n\n    useEffect(() => {\n        const availableColors = getAvailableColorList();\n\n        const newColors: Theme = {};\n        const newTheme: Theme = {};\n\n        availableColors.forEach((colorName: string) => {\n            const hexColor = getColorFromPalette(colorName, {\n                color: internalColor,\n                colorMode: internalColorMode,\n                secondaryColor,\n            });\n\n            if (hexColor) {\n                const rgbColor = hexToRgb255(hexColor);\n\n                newColors[`--chayns-color--${colorName}`] = hexColor;\n                newTheme[colorName] = hexColor;\n\n                if (rgbColor) {\n                    newColors[`--chayns-color-rgb--${colorName}`] =\n                        `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                    newTheme[`${colorName}-rgb`] = `${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}`;\n                }\n            }\n        });\n\n        if (internalDesignSettings) {\n            Object.keys(internalDesignSettings).forEach((key) => {\n                if (key === 'iconStyle') {\n                    newTheme[key] = convertIconStyle(internalDesignSettings.iconStyle);\n\n                    return;\n                }\n\n                // ToDo: Find better solution\n                // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n                // @ts-ignore\n                // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\n                newTheme[key] = internalDesignSettings[key];\n            });\n        }\n\n        setTheme(newTheme);\n        setColors(newColors);\n    }, [internalColor, internalColorMode, internalDesignSettings, secondaryColor]);\n\n    return (\n        <ThemeProvider theme={theme}>\n            <div style={{ ...colors, ...cssVariables, ...style }}>{children}</div>\n            <GlobalStyle />\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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"}

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

@@ -7,12 +7,29 @@ exports.StyledContentCard = void 0;
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const StyledContentCard = exports.StyledContentCard = _styledComponents.default.div`
-    background-color: ${_ref => {
+    background-color: rgba(${_ref => {
   let {
     theme
   } = _ref;
-  return theme['secondary-100'];
+  return theme['100-rgb'];
+}}, ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.cardBackgroundOpacity;
 }};
+    border-radius: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.cardBorderRadius;
+}}px;
+    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme.cardShadow;
+}});
     padding: 8px 12px;
 
     &:not(:last-child) {

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

@@ -1 +1 @@
-{"version":3,"file":"ContentCard.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledContentCard","exports","styled","div","_ref","theme"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<unknown>;\n\nexport const StyledContentCard = styled.div`\n    background-color: ${({ theme }: StyledContentCardProps) => theme['secondary-100']};\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC5C,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,eAAe,CAAC;AAAA,CAAC;AACtF;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"ContentCard.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledContentCard","exports","styled","div","_ref","theme","_ref2","cardBackgroundOpacity","_ref3","cardBorderRadius","_ref4","cardShadow"],"sources":["../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<unknown>;\n\nexport const StyledContentCard = styled.div`\n    background-color: rgba(${({ theme }: StyledContentCardProps) => theme['100-rgb']}, ${({ theme }: StyledContentCardProps) => theme.cardBackgroundOpacity};\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${({ theme }: StyledContentCardProps) => theme.cardShadow});\n    padding: 8px 12px;\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAKhC,MAAMG,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,GAAGE,yBAAM,CAACC,GAAI;AAC5C,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC,KAAIC,KAAA;EAAA,IAAC;IAAED;EAA8B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAACE,qBAAqB;AAAA,CAAC;AAC5J,qBAAqBC,KAAA;EAAA,IAAC;IAAEH;EAA8B,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,gBAAgB;AAAA,CAAC;AACnF,4CAA4CC,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,UAAU;AAAA,CAAC;AACpG;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/icon/Icon.js

@@ -8,6 +8,7 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _react = _interopRequireDefault(require("react"));
 var _Icon = require("./Icon.styles");
 var _icon = require("../../utils/icon");
+var _styledComponents = require("styled-components");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 const Icon = _ref => {
   let {
@@ -37,6 +38,9 @@ const Icon = _ref => {
       onDoubleClick(event);
     }
   };
+  const {
+    iconStyle
+  } = (0, _styledComponents.useTheme)();
   let maxStackSizeFactor = 1;
   icons.forEach(icon => {
     const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
@@ -55,7 +59,7 @@ const Icon = _ref => {
     size: size
   }, icons.map(icon => {
     const stackSizeFactor = (0, _icon.getStackSizeFactor)(icon);
-    const iconClasses = (0, _clsx.default)(icon, {
+    const iconClasses = (0, _clsx.default)(`${iconStyle} ${icon}`, {
       'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined
     });
     return /*#__PURE__*/_react.default.createElement(_Icon.StyledIcon, {

package/lib/components/icon/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_icon","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from '../../utils/icon';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double-clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(icon, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":";;;;;;AAAA,IAAAA,KAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,KAAA,GAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AAAsD,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAyCtD,MAAMG,IAAmB,GAAGC,IAAA,IAUtB;EAAA,IAVuB;IACzBC,SAAS;IACTC,KAAK;IACLC,KAAK;IACLC,UAAU;IACVC,OAAO;IACPC,aAAa;IACbC,WAAW;IACXC,IAAI,GAAG,EAAE;IACTC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,WAA+C,GAAIC,KAAK,IAAK;IAC/D,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAOP,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACM,KAAK,CAAC;IAClB;EACJ,CAAC;EAED,MAAME,iBAAqD,GAAIF,KAAK,IAAK;IACrE,IAAIF,qBAAqB,EAAE;MACvBE,KAAK,CAACC,eAAe,CAAC,CAAC;IAC3B;IAEA,IAAI,OAAON,aAAa,KAAK,UAAU,EAAE;MACrCA,aAAa,CAACK,KAAK,CAAC;IACxB;EACJ,CAAC;EAED,IAAIG,kBAAkB,GAAG,CAAC;EAE1BX,KAAK,CAACY,OAAO,CAAEC,IAAI,IAAK;IACpB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD,IAAIC,eAAe,IAAIA,eAAe,GAAGH,kBAAkB,EAAE;MACzDA,kBAAkB,GAAGG,eAAe;IACxC;EACJ,CAAC,CAAC;EAEF,MAAME,oBAAoB,GAAGhB,KAAK,CAACiB,MAAM,GAAG,CAAC;EAE7C,MAAMC,cAAc,GAAG,IAAAC,aAAI,EACvB,kBAAkB,EAClBH,oBAAoB,GAAG,UAAU,GAAG,EAAE,EACtClB,SACJ,CAAC;EAED,oBACIR,MAAA,CAAAK,OAAA,CAAAyB,aAAA,CAAC7B,KAAA,CAAA8B,iBAAiB;IACdvB,SAAS,EAAEoB,cAAe;IAC1BjB,UAAU,EAAEA,UAAW;IACvBC,OAAO,EAAE,OAAOA,OAAO,KAAK,UAAU,GAAGK,WAAW,GAAGe,SAAU;IACjEnB,aAAa,EAAE,OAAOA,aAAa,KAAK,UAAU,GAAGO,iBAAiB,GAAGY,SAAU;IACnFlB,WAAW,EAAEA,WAAY;IACzBC,IAAI,EAAEA;EAAK,GAEVL,KAAK,CAACuB,GAAG,CAAEV,IAAI,IAAK;IACjB,MAAMC,eAAe,GAAG,IAAAC,wBAAkB,EAACF,IAAI,CAAC;IAEhD,MAAMW,WAAW,GAAG,IAAAL,aAAI,EAACN,IAAI,EAAE;MAC3B,aAAa,EAAEG,oBAAoB,IAAIF,eAAe,KAAKQ;IAC/D,CAAC,CAAC;IAEF,oBACIhC,MAAA,CAAAK,OAAA,CAAAyB,aAAA,CAAC7B,KAAA,CAAAkC,UAAU;MACP3B,SAAS,EAAE0B,WAAY;MACvBzB,KAAK,EAAEc,IAAI,CAACa,QAAQ,CAAC,YAAY,CAAC,GAAG,OAAO,GAAG3B,KAAM;MACrD4B,QAAQ,EAAG,CAACb,eAAe,IAAI,CAAC,IAAIH,kBAAkB,GAAIN,IAAK;MAC/DuB,SAAS,EAAEZ,oBAAqB;MAChCa,GAAG,EAAEhB,IAAK;MACVR,IAAI,EAAEA;IAAK,CACd,CAAC;EAEV,CAAC,CACc,CAAC;AAE5B,CAAC;AAEDT,IAAI,CAACkC,WAAW,GAAG,MAAM;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArC,OAAA,GAEXC,IAAI"}
+{"version":3,"file":"Icon.js","names":["_clsx","_interopRequireDefault","require","_react","_Icon","_icon","_styledComponents","obj","__esModule","default","Icon","_ref","className","color","icons","isDisabled","onClick","onDoubleClick","onMouseDown","size","shouldStopPropagation","handleClick","event","stopPropagation","handleDoubleClick","iconStyle","useTheme","maxStackSizeFactor","forEach","icon","stackSizeFactor","getStackSizeFactor","shouldUseStackedIcon","length","wrapperClasses","clsx","createElement","StyledIconWrapper","undefined","map","iconClasses","StyledIcon","includes","fontSize","isStacked","key","displayName","_default","exports"],"sources":["../../../src/components/icon/Icon.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport React, { FC, MouseEventHandler } from 'react';\nimport { StyledIcon, StyledIconWrapper } from './Icon.styles';\nimport { getStackSizeFactor } from '../../utils/icon';\nimport { useTheme } from 'styled-components';\n\nexport type IconProps = {\n    /**\n     * Additional class names for the root element\n     */\n    className?: string;\n    /**\n     * The color of the icon\n     */\n    color?: string;\n    /**\n     * The FontAwesome or tobit icons to render. Multiple icons are stacked.\n     */\n    icons: string[];\n    /**\n     * Disables the icon so that it cannot be clicked anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * Function to be executed when the icon was clicked\n     */\n    onClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when the icon was double-clicked\n     */\n    onDoubleClick?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Function to be executed when a mouse button is pressed on the icon\n     */\n    onMouseDown?: MouseEventHandler<HTMLSpanElement>;\n    /**\n     * Size of the icon in pixel\n     */\n    size?: number;\n    /**\n     * Stops event propagation on click\n     */\n    shouldStopPropagation?: boolean;\n};\n\nconst Icon: FC<IconProps> = ({\n    className,\n    color,\n    icons,\n    isDisabled,\n    onClick,\n    onDoubleClick,\n    onMouseDown,\n    size = 15,\n    shouldStopPropagation,\n}) => {\n    const handleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onClick === 'function') {\n            onClick(event);\n        }\n    };\n\n    const handleDoubleClick: MouseEventHandler<HTMLSpanElement> = (event) => {\n        if (shouldStopPropagation) {\n            event.stopPropagation();\n        }\n\n        if (typeof onDoubleClick === 'function') {\n            onDoubleClick(event);\n        }\n    };\n\n    const { iconStyle } = useTheme();\n\n    let maxStackSizeFactor = 1;\n\n    icons.forEach((icon) => {\n        const stackSizeFactor = getStackSizeFactor(icon);\n\n        if (stackSizeFactor && stackSizeFactor > maxStackSizeFactor) {\n            maxStackSizeFactor = stackSizeFactor;\n        }\n    });\n\n    const shouldUseStackedIcon = icons.length > 1;\n\n    const wrapperClasses = clsx(\n        'beta-chayns-icon',\n        shouldUseStackedIcon ? 'fa-stack' : '',\n        className,\n    );\n\n    return (\n        <StyledIconWrapper\n            className={wrapperClasses}\n            isDisabled={isDisabled}\n            onClick={typeof onClick === 'function' ? handleClick : undefined}\n            onDoubleClick={typeof onDoubleClick === 'function' ? handleDoubleClick : undefined}\n            onMouseDown={onMouseDown}\n            size={size}\n        >\n            {icons.map((icon) => {\n                const stackSizeFactor = getStackSizeFactor(icon);\n\n                const iconClasses = clsx(`${iconStyle as string} ${icon}`, {\n                    'fa-stack-1x': shouldUseStackedIcon && stackSizeFactor === undefined,\n                });\n\n                return (\n                    <StyledIcon\n                        className={iconClasses}\n                        color={icon.includes('fa-inverse') ? 'white' : color}\n                        fontSize={((stackSizeFactor || 1) / maxStackSizeFactor) * size}\n                        isStacked={shouldUseStackedIcon}\n                        key={icon}\n                        size={size}\n                    />\n                );\n            })}\n        </StyledIconWrapper>\n    );\n};\n\nIcon.displayName = 'Icon';\n\nexport default Icon;\n"],"mappings":"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"}

package/lib/components/text-area/TextArea.js

@@ -18,7 +18,6 @@ const TextArea = _ref => {
     maxHeight = '120px',
     minHeight = '41px'
   } = _ref;
-  const [displayedValue, setDisplayedValue] = (0, _react.useState)('');
   const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
   const textareaRef = (0, _react.useRef)(null);
   const {
@@ -37,40 +36,21 @@ const TextArea = _ref => {
    * To maintain the functionality while clearing the input, the length need to be greater than -1.
    */
   (0, _react.useEffect)(() => {
-    if (displayedValue.length > -1) {
+    if (value && value.length > -1) {
       adjustTextareaHeight();
     }
-  }, [adjustTextareaHeight, displayedValue]);
-
-  /**
-   * This function sets the external value
-   */
-  (0, _react.useEffect)(() => {
-    if (typeof value === 'string') {
-      setDisplayedValue(value);
-    }
-  }, [value]);
-
-  /**
-   * This function updates the value
-   */
-  const handleChange = (0, _react.useCallback)(event => {
-    setDisplayedValue(event.target.value);
-    if (onChange) {
-      onChange(event);
-    }
-  }, [onChange]);
+  }, [adjustTextareaHeight, value]);
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
     browser: browser?.name,
     ref: textareaRef,
-    value: displayedValue,
+    value: value,
     onBlur: onBlur,
-    onChange: handleChange,
+    onChange: onChange,
     maxHeight: maxHeight,
     minHeight: minHeight,
     isOverflowing: isOverflowing,
     rows: 1
-  }), !displayedValue && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder)), [browser?.name, displayedValue, handleChange, isOverflowing, maxHeight, minHeight, onBlur, placeholder]);
+  }), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder)), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value]);
 };
 TextArea.displayName = 'TextArea';
 var _default = exports.default = TextArea;

package/lib/components/text-area/TextArea.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","displayedValue","setDisplayedValue","useState","isOverflowing","setIsOverflowing","textareaRef","useRef","browser","getDevice","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","handleChange","event","target","useMemo","createElement","StyledTextArea","StyledTextAreaInput","name","ref","rows","StyledTextAreaLabel","displayName","_default","exports"],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel } from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\n}) => {\n    const [displayedValue, setDisplayedValue] = useState('');\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const { browser } = getDevice();\n\n    const adjustTextareaHeight = useCallback(() => {\n        if (textareaRef.current) {\n            textareaRef.current.style.height = 'auto';\n            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n            setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\n\n    /**\n     * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n     * To maintain the functionality while clearing the input, the length need to be greater than -1.\n     */\n    useEffect(() => {\n        if (displayedValue.length > -1) {\n            adjustTextareaHeight();\n        }\n    }, [adjustTextareaHeight, displayedValue]);\n\n    /**\n     * This function sets the external value\n     */\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setDisplayedValue(value);\n        }\n    }, [value]);\n\n    /**\n     * This function updates the value\n     */\n    const handleChange = useCallback(\n        (event: ChangeEvent<HTMLTextAreaElement>) => {\n            setDisplayedValue(event.target.value);\n\n            if (onChange) {\n                onChange(event);\n            }\n        },\n        [onChange],\n    );\n\n    return useMemo(\n        () => (\n            <StyledTextArea>\n                <StyledTextAreaInput\n                    browser={browser?.name}\n                    ref={textareaRef}\n                    value={displayedValue}\n                    onBlur={onBlur}\n                    onChange={handleChange}\n                    maxHeight={maxHeight}\n                    minHeight={minHeight}\n                    isOverflowing={isOverflowing}\n                    rows={1}\n                />\n                {!displayedValue && <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>}\n            </StyledTextArea>\n        ),\n        [\n            browser?.name,\n            displayedValue,\n            handleChange,\n            isOverflowing,\n            maxHeight,\n            minHeight,\n            onBlur,\n            placeholder,\n        ],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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"}
+{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","useState","textareaRef","useRef","browser","getDevice","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","useMemo","createElement","StyledTextArea","StyledTextAreaInput","name","ref","rows","StyledTextAreaLabel","displayName","_default","exports"],"sources":["../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n    ChangeEventHandler,\n    CSSProperties,\n    FC,\n    FocusEventHandler,\n    ReactElement,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel } from './TextArea.styles';\n\nexport type TextAreaProps = {\n    /**\n     * The maximum height of the text area.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * The minimum height of the text area.\n     */\n    minHeight?: CSSProperties['minHeight'];\n    /**\n     * Function that is executed when the text area loses focus.\n     */\n    onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n    /**\n     * Function that is executed when the text of the text area changes.\n     */\n    onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n    /**\n     * Placeholder for the text area field.\n     */\n    placeholder?: string | ReactElement;\n    /**\n     * Value if the text area should be controlled.\n     */\n    value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n    placeholder,\n    value,\n    onChange,\n    onBlur,\n    maxHeight = '120px',\n    minHeight = '41px',\n}) => {\n    const [isOverflowing, setIsOverflowing] = useState(false);\n\n    const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n    const { browser } = getDevice();\n\n    const adjustTextareaHeight = useCallback(() => {\n        if (textareaRef.current) {\n            textareaRef.current.style.height = 'auto';\n            textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n            setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n        }\n    }, [maxHeight]);\n\n    /**\n     * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n     * To maintain the functionality while clearing the input, the length need to be greater than -1.\n     */\n    useEffect(() => {\n        if (value && value.length > -1) {\n            adjustTextareaHeight();\n        }\n    }, [adjustTextareaHeight, value]);\n\n    return useMemo(\n        () => (\n            <StyledTextArea>\n                <StyledTextAreaInput\n                    browser={browser?.name}\n                    ref={textareaRef}\n                    value={value}\n                    onBlur={onBlur}\n                    onChange={onChange}\n                    maxHeight={maxHeight}\n                    minHeight={minHeight}\n                    isOverflowing={isOverflowing}\n                    rows={1}\n                />\n                {!value && <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>}\n            </StyledTextArea>\n        ),\n        [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value],\n    );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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"}

package/lib/types/colorSchemeProvider.d.ts

@@ -0,0 +1,15 @@
+export interface DesignSettings {
+    accordionIcon: number;
+    accordionLines: boolean;
+    cardBorderRadius: number;
+    cardBackgroundOpacity: number;
+    cardShadow: number;
+    iconStyle: IconStyle;
+}
+export declare enum IconStyle {
+    SOLID = 0,
+    REGULAR = 1,
+    LIGHT = 2,
+    DUOTONE = 3,
+    SHARP = 4
+}

package/lib/types/colorSchemeProvider.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IconStyle = void 0;
+let IconStyle = exports.IconStyle = /*#__PURE__*/function (IconStyle) {
+  IconStyle[IconStyle["SOLID"] = 0] = "SOLID";
+  IconStyle[IconStyle["REGULAR"] = 1] = "REGULAR";
+  IconStyle[IconStyle["LIGHT"] = 2] = "LIGHT";
+  IconStyle[IconStyle["DUOTONE"] = 3] = "DUOTONE";
+  IconStyle[IconStyle["SHARP"] = 4] = "SHARP";
+  return IconStyle;
+}({});
+//# sourceMappingURL=colorSchemeProvider.js.map

package/lib/types/colorSchemeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colorSchemeProvider.js","names":["IconStyle","exports"],"sources":["../../src/types/colorSchemeProvider.ts"],"sourcesContent":["export interface DesignSettings {\n    accordionIcon: number;\n    accordionLines: boolean;\n    cardBorderRadius: number;\n    cardBackgroundOpacity: number;\n    cardShadow: number;\n    iconStyle: IconStyle;\n}\n\nexport enum IconStyle {\n    SOLID,\n    REGULAR,\n    LIGHT,\n    DUOTONE,\n    SHARP,\n}\n"],"mappings":";;;;;;IASYA,SAAS,GAAAC,OAAA,CAAAD,SAAA,0BAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAATA,SAAS,CAATA,SAAS;EAAA,OAATA,SAAS;AAAA"}

package/lib/utils/font.d.ts

@@ -1,6 +1,8 @@
+import { IconStyle } from '../types/colorSchemeProvider';
 export interface Font {
     family: string;
     src: string;
     unicodeRange?: string;
 }
+export declare const convertIconStyle: (iconStyle: IconStyle) => "fa-solid" | "fa-duotone" | "fa-sharp" | "fa-light" | "fa-regular";
 export declare const generateFontFaces: () => string;

package/lib/utils/font.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.generateFontFaces = void 0;
+exports.generateFontFaces = exports.convertIconStyle = void 0;
+var _colorSchemeProvider = require("../types/colorSchemeProvider");
 const fonts = [{
   family: 'Noto Color Emoji',
   src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2',
@@ -45,6 +46,21 @@ const fonts = [{
   src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2',
   unicodeRange: 'U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8'
 }];
+const convertIconStyle = iconStyle => {
+  switch (iconStyle) {
+    case _colorSchemeProvider.IconStyle.SOLID:
+      return 'fa-solid';
+    case _colorSchemeProvider.IconStyle.DUOTONE:
+      return 'fa-duotone';
+    case _colorSchemeProvider.IconStyle.SHARP:
+      return 'fa-sharp';
+    case _colorSchemeProvider.IconStyle.LIGHT:
+      return 'fa-light';
+    default:
+      return 'fa-regular';
+  }
+};
+exports.convertIconStyle = convertIconStyle;
 const generateFontFaces = () => fonts.map(font => `
   @font-face {
     font-display: swap;

package/lib/utils/font.js.map

@@ -1 +1 @@
-{"version":3,"file":"font.js","names":["fonts","family","src","unicodeRange","generateFontFaces","map","font","join","exports"],"sources":["../../src/utils/font.ts"],"sourcesContent":["export interface Font {\n    family: string;\n    src: string;\n    unicodeRange?: string;\n}\n\nconst fonts: Font[] = [\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2',\n        unicodeRange: 'U+1f1e6-1f1ff',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2',\n        unicodeRange:\n            'U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2',\n        unicodeRange:\n            'U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2',\n        unicodeRange:\n            'U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2',\n        unicodeRange:\n            'U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2',\n        unicodeRange:\n            'U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2',\n        unicodeRange:\n            'U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2',\n        unicodeRange:\n            'U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2',\n        unicodeRange:\n            'U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2',\n        unicodeRange:\n            'U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8',\n    },\n];\n\nexport const generateFontFaces = () =>\n    fonts\n        .map(\n            (font) => `\n  @font-face {\n    font-display: swap;\n    font-family: \"${font.family}\";\n    font-style: normal;\n    font-weight: 400;\n    src: url(\"${font.src}\") format(\"woff2\");\n    ${font.unicodeRange ? `unicode-range: ${font.unicodeRange};` : ''}\n  }\n`\n        )\n        .join('');\n"],"mappings":";;;;;;AAMA,MAAMA,KAAa,GAAG,CAClB;EACIC,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EAAE;AAClB,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,CACJ;AAEM,MAAMC,iBAAiB,GAAGA,CAAA,KAC7BJ,KAAK,CACAK,GAAG,CACCC,IAAI,IAAM;AACvB;AACA;AACA,oBAAoBA,IAAI,CAACL,MAAO;AAChC;AACA;AACA,gBAAgBK,IAAI,CAACJ,GAAI;AACzB,MAAMI,IAAI,CAACH,YAAY,GAAI,kBAAiBG,IAAI,CAACH,YAAa,GAAE,GAAG,EAAG;AACtE;AACA,CACQ,CAAC,CACAI,IAAI,CAAC,EAAE,CAAC;AAACC,OAAA,CAAAJ,iBAAA,GAAAA,iBAAA"}
+{"version":3,"file":"font.js","names":["_colorSchemeProvider","require","fonts","family","src","unicodeRange","convertIconStyle","iconStyle","IconStyle","SOLID","DUOTONE","SHARP","LIGHT","exports","generateFontFaces","map","font","join"],"sources":["../../src/utils/font.ts"],"sourcesContent":["import { IconStyle } from '../types/colorSchemeProvider';\n\nexport interface Font {\n    family: string;\n    src: string;\n    unicodeRange?: string;\n}\n\nconst fonts: Font[] = [\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.0.woff2',\n        unicodeRange: 'U+1f1e6-1f1ff',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.1.woff2',\n        unicodeRange:\n            'U+200d, U+2620, U+26a7, U+fe0f, U+1f308, U+1f38c, U+1f3c1, U+1f3f3-1f3f4, U+1f6a9, U+e0062-e0063, U+e0065, U+e0067, U+e006c, U+e006e, U+e0073-e0074, U+e0077, U+e007f',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.2.woff2',\n        unicodeRange:\n            'U+23, U+2a, U+30-39, U+a9, U+ae, U+200d, U+203c, U+2049, U+20e3, U+2122, U+2139, U+2194-2199, U+21a9-21aa, U+23cf, U+23e9-23ef, U+23f8-23fa, U+24c2, U+25aa-25ab, U+25b6, U+25c0, U+25fb-25fe, U+2611, U+2622-2623, U+2626, U+262a, U+262e-262f, U+2638, U+2640, U+2642, U+2648-2653, U+2660, U+2663, U+2665-2666, U+2668, U+267b, U+267e-267f, U+2695, U+269b-269c, U+26a0, U+26a7, U+26aa-26ab, U+26ce, U+26d4, U+2705, U+2714, U+2716, U+271d, U+2721, U+2733-2734, U+2747, U+274c, U+274e, U+2753-2755, U+2757, U+2764, U+2795-2797, U+27a1, U+27b0, U+27bf, U+2934-2935, U+2b05-2b07, U+2b1b-2b1c, U+2b55, U+3030, U+303d, U+3297, U+3299, U+fe0f, U+1f170-1f171, U+1f17e-1f17f, U+1f18e, U+1f191-1f19a, U+1f201-1f202, U+1f21a, U+1f22f, U+1f232-1f23a, U+1f250-1f251, U+1f310, U+1f3a6, U+1f3b5-1f3b6, U+1f3bc, U+1f3e7, U+1f441, U+1f499-1f49c, U+1f49f-1f4a0, U+1f4a2, U+1f4ac-1f4ad, U+1f4b1-1f4b2, U+1f4b9, U+1f4db, U+1f4f2-1f4f6, U+1f500-1f50a, U+1f515, U+1f518-1f524, U+1f52f-1f53d, U+1f549, U+1f54e, U+1f5a4, U+1f5e8, U+1f5ef, U+1f6ab, U+1f6ad-1f6b1, U+1f6b3, U+1f6b7-1f6bc, U+1f6be, U+1f6c2-1f6c5, U+1f6d0-1f6d1, U+1f6d7, U+1f6dc, U+1f7e0-1f7eb, U+1f7f0, U+1f90d-1f90e, U+1f9e1, U+1fa75-1fa77, U+1faaf',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.3.woff2',\n        unicodeRange:\n            'U+231a-231b, U+2328, U+23f0-23f3, U+2602, U+260e, U+2692, U+2694, U+2696-2697, U+2699, U+26b0-26b1, U+26cf, U+26d1, U+26d3, U+2702, U+2709, U+270f, U+2712, U+fe0f, U+1f302, U+1f321, U+1f392-1f393, U+1f3a9, U+1f3bd, U+1f3ee, U+1f3f7, U+1f3fa, U+1f451-1f462, U+1f484, U+1f489-1f48a, U+1f48c-1f48e, U+1f4a1, U+1f4a3, U+1f4b0, U+1f4b3-1f4b8, U+1f4bb-1f4da, U+1f4dc-1f4f1, U+1f4ff, U+1f50b-1f514, U+1f516-1f517, U+1f526-1f529, U+1f52c-1f52e, U+1f550-1f567, U+1f56f-1f570, U+1f576, U+1f587, U+1f58a-1f58d, U+1f5a5, U+1f5a8, U+1f5b1-1f5b2, U+1f5c2-1f5c4, U+1f5d1-1f5d3, U+1f5dc-1f5de, U+1f5e1, U+1f5f3, U+1f6aa, U+1f6ac, U+1f6bd, U+1f6bf, U+1f6c1, U+1f6cb, U+1f6cd-1f6cf, U+1f6d2, U+1f6e0-1f6e1, U+1f6f0, U+1f97b-1f97f, U+1f9af, U+1f9ba, U+1f9e2-1f9e6, U+1f9ea-1f9ec, U+1f9ee-1f9f4, U+1f9f7-1f9ff, U+1fa71-1fa74, U+1fa79-1fa7b, U+1fa86, U+1fa91-1fa93, U+1fa96, U+1fa99-1faa0, U+1faa2-1faa7, U+1faaa-1faae',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.4.woff2',\n        unicodeRange:\n            'U+265f, U+26bd-26be, U+26f3, U+26f8, U+fe0f, U+1f004, U+1f0cf, U+1f380-1f384, U+1f386-1f38b, U+1f38d-1f391, U+1f396-1f397, U+1f399-1f39b, U+1f39e-1f39f, U+1f3a3-1f3a5, U+1f3a7-1f3a9, U+1f3ab-1f3b4, U+1f3b7-1f3bb, U+1f3bd-1f3c0, U+1f3c5-1f3c6, U+1f3c8-1f3c9, U+1f3cf-1f3d3, U+1f3f8-1f3f9, U+1f47e, U+1f4e2, U+1f4f7-1f4fd, U+1f52b, U+1f579, U+1f58c-1f58d, U+1f5bc, U+1f6f7, U+1f6f9, U+1f6fc, U+1f93f, U+1f941, U+1f945, U+1f947-1f94f, U+1f9e7-1f9e9, U+1f9f5-1f9f6, U+1fa70-1fa71, U+1fa80-1fa81, U+1fa83-1fa85, U+1fa87-1fa88, U+1fa94-1fa95, U+1fa97-1fa98, U+1faa1, U+1faa9',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.5.woff2',\n        unicodeRange:\n            'U+2693, U+26e9-26ea, U+26f1-26f2, U+26f4-26f5, U+26fa, U+26fd, U+2708, U+fe0f, U+1f301, U+1f303, U+1f306-1f307, U+1f309, U+1f310, U+1f3a0-1f3a2, U+1f3aa, U+1f3cd-1f3ce, U+1f3d5, U+1f3d7-1f3db, U+1f3df-1f3e6, U+1f3e8-1f3ed, U+1f3ef-1f3f0, U+1f488, U+1f492, U+1f4ba, U+1f54b-1f54d, U+1f5fa-1f5ff, U+1f680-1f6a2, U+1f6a4-1f6a8, U+1f6b2, U+1f6d1, U+1f6d5-1f6d6, U+1f6dd-1f6df, U+1f6e2-1f6e5, U+1f6e9, U+1f6eb-1f6ec, U+1f6f3-1f6f6, U+1f6f8, U+1f6fa-1f6fb, U+1f9bc-1f9bd, U+1f9ed, U+1f9f3, U+1fa7c',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.6.woff2',\n        unicodeRange:\n            'U+2615, U+fe0f, U+1f32d-1f330, U+1f336, U+1f33d, U+1f345-1f37f, U+1f382, U+1f52a, U+1f942-1f944, U+1f950-1f96f, U+1f99e, U+1f9aa, U+1f9c0-1f9cb, U+1fad0-1fadb',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.7.woff2',\n        unicodeRange:\n            'U+200d, U+2600-2601, U+2603-2604, U+2614, U+2618, U+26a1, U+26c4-26c5, U+26c8, U+26f0, U+2728, U+2744, U+2b1b, U+2b50, U+fe0f, U+1f300, U+1f304-1f305, U+1f308, U+1f30a-1f30f, U+1f311-1f321, U+1f324-1f32c, U+1f331-1f335, U+1f337-1f33c, U+1f33e-1f344, U+1f3d4, U+1f3d6, U+1f3dc-1f3de, U+1f3f5, U+1f400-1f43f, U+1f490, U+1f4a7, U+1f4ab, U+1f4ae, U+1f525, U+1f54a, U+1f573, U+1f577-1f578, U+1f648-1f64a, U+1f940, U+1f980-1f9ae, U+1f9ba, U+1fa90, U+1faa8, U+1fab0-1fabd, U+1fabf, U+1face-1facf, U+1fae7',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.8.woff2',\n        unicodeRange:\n            'U+200d, U+2640, U+2642, U+2695-2696, U+26f7, U+26f9, U+2708, U+2764, U+fe0f, U+1f33e, U+1f373, U+1f37c, U+1f384-1f385, U+1f393, U+1f3a4, U+1f3a8, U+1f3c2-1f3c4, U+1f3c7, U+1f3ca-1f3cc, U+1f3eb, U+1f3ed, U+1f3fb-1f3ff, U+1f466-1f478, U+1f47c, U+1f481-1f483, U+1f486-1f487, U+1f48b, U+1f48f, U+1f491, U+1f4bb-1f4bc, U+1f527, U+1f52c, U+1f574-1f575, U+1f57a, U+1f645-1f647, U+1f64b, U+1f64d-1f64e, U+1f680, U+1f692, U+1f6a3, U+1f6b4-1f6b6, U+1f6c0, U+1f6cc, U+1f91d, U+1f926, U+1f930-1f931, U+1f934-1f93a, U+1f93c-1f93e, U+1f977, U+1f9af-1f9b3, U+1f9b8-1f9b9, U+1f9bc-1f9bd, U+1f9cc-1f9cf, U+1f9d1-1f9df, U+1fa82, U+1fac3-1fac5',\n    },\n    {\n        family: 'Noto Color Emoji',\n        src: 'https://api.chayns-static.space/font/NotoColorEmoji/v24/Yq6P-KqIXTD0t4D9z1ESnKM3-HpFabsE4tq3luCC7p-aXxcn.9.woff2',\n        unicodeRange:\n            'U+200d, U+261d, U+2620, U+2639-263a, U+2665, U+270a-270d, U+2728, U+2763-2764, U+2b50, U+fe0f, U+1f31a-1f31f, U+1f32b, U+1f383, U+1f389, U+1f3fb-1f3ff, U+1f440-1f450, U+1f463-1f465, U+1f479-1f47b, U+1f47d-1f480, U+1f485, U+1f48b-1f48c, U+1f493-1f49f, U+1f4a4-1f4a6, U+1f4a8-1f4ab, U+1f4af, U+1f525, U+1f573, U+1f590, U+1f595-1f596, U+1f5a4, U+1f5e3, U+1f600-1f644, U+1f648-1f64a, U+1f64c, U+1f64f, U+1f90c-1f925, U+1f927-1f92f, U+1f932-1f933, U+1f970-1f976, U+1f978-1f97a, U+1f9a0, U+1f9b4-1f9b7, U+1f9bb, U+1f9be-1f9bf, U+1f9d0, U+1f9e0-1f9e1, U+1fa75-1fa79, U+1fac0-1fac2, U+1fae0-1fae6, U+1fae8, U+1faf0-1faf8',\n    },\n];\n\nexport const convertIconStyle = (iconStyle: IconStyle) => {\n    switch (iconStyle) {\n        case IconStyle.SOLID:\n            return 'fa-solid';\n        case IconStyle.DUOTONE:\n            return 'fa-duotone';\n        case IconStyle.SHARP:\n            return 'fa-sharp';\n        case IconStyle.LIGHT:\n            return 'fa-light';\n        default:\n            return 'fa-regular';\n    }\n};\n\nexport const generateFontFaces = () =>\n    fonts\n        .map(\n            (font) => `\n  @font-face {\n    font-display: swap;\n    font-family: \"${font.family}\";\n    font-style: normal;\n    font-weight: 400;\n    src: url(\"${font.src}\") format(\"woff2\");\n    ${font.unicodeRange ? `unicode-range: ${font.unicodeRange};` : ''}\n  }\n`,\n        )\n        .join('');\n"],"mappings":";;;;;;AAAA,IAAAA,oBAAA,GAAAC,OAAA;AAQA,MAAMC,KAAa,GAAG,CAClB;EACIC,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EAAE;AAClB,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,EACD;EACIF,MAAM,EAAE,kBAAkB;EAC1BC,GAAG,EAAE,kHAAkH;EACvHC,YAAY,EACR;AACR,CAAC,CACJ;AAEM,MAAMC,gBAAgB,GAAIC,SAAoB,IAAK;EACtD,QAAQA,SAAS;IACb,KAAKC,8BAAS,CAACC,KAAK;MAChB,OAAO,UAAU;IACrB,KAAKD,8BAAS,CAACE,OAAO;MAClB,OAAO,YAAY;IACvB,KAAKF,8BAAS,CAACG,KAAK;MAChB,OAAO,UAAU;IACrB,KAAKH,8BAAS,CAACI,KAAK;MAChB,OAAO,UAAU;IACrB;MACI,OAAO,YAAY;EAC3B;AACJ,CAAC;AAACC,OAAA,CAAAP,gBAAA,GAAAA,gBAAA;AAEK,MAAMQ,iBAAiB,GAAGA,CAAA,KAC7BZ,KAAK,CACAa,GAAG,CACCC,IAAI,IAAM;AACvB;AACA;AACA,oBAAoBA,IAAI,CAACb,MAAO;AAChC;AACA;AACA,gBAAgBa,IAAI,CAACZ,GAAI;AACzB,MAAMY,IAAI,CAACX,YAAY,GAAI,kBAAiBW,IAAI,CAACX,YAAa,GAAE,GAAG,EAAG;AACtE;AACA,CACQ,CAAC,CACAY,IAAI,CAAC,EAAE,CAAC;AAACJ,OAAA,CAAAC,iBAAA,GAAAA,iBAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.433",
+    "version": "5.0.0-beta.435",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -65,5 +65,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "c7d263ad6fb63db654408f2b56f15e6b04ab8f76"
+    "gitHead": "91888d02bb6dbe58d754c129c8531f0941afb9e0"
 }