@chayns-components/core 5.0.0-beta.695 → 5.0.0-beta.698

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

@@ -35,7 +35,6 @@ const Accordion = ({
   onOpen,
   onSearchChange,
   rightElement,
-  searchIcon,
   searchPlaceholder,
   searchValue,
   shouldForceBackground = false,
@@ -159,7 +158,6 @@ const Accordion = ({
     onClick: handleHeadClick,
     onSearchChange: onSearchChange,
     rightElement: rightElement,
-    searchIcon: searchIcon,
     searchPlaceholder: searchPlaceholder,
     searchValue: searchValue,
     shouldRotateIcon: shouldRotateIcon,

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledAccordion","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","AreaContext","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    type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\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     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n}) => {\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    return (\n        <StyledAccordion\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $shouldShowLines={!isLastAccordion}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_AccordionContextProvider","_Accordion","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","title","titleElement","onTitleInputChange","titleInputProps","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","contextIsWrapped","AccordionWrappedContext","useMemo","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","StyledAccordion","className","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","onMouseEnter","onMouseLeave","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","AreaContext","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    type MouseEventHandler,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { InputProps } from '../input/Input';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function to be executed when the accordion is no longer hovered.\n     */\n    onHoverEnd?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the accordion is hovered.\n     */\n    onHoverStart?: MouseEventHandler<HTMLDivElement>;\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     * Function that is executed when the text of the search in the accordion\n     * title changes. When this function is given, the search field is displayed\n     * as the Accordion title.\n     */\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * The value that is displayed inside the search\n     */\n    searchValue?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * The props of the title Input.\n     */\n    titleInputProps?: InputProps;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    onBodyScroll,\n    onClose,\n    onHoverEnd,\n    onHoverStart,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchPlaceholder,\n    searchValue,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRenderClosed = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    onTitleInputChange,\n    titleInputProps,\n}) => {\n    const {\n        isWrapped: groupIsWrapped,\n        openAccordionUuid,\n        accordionGroupUuid,\n        accordionUuids,\n        updateOpenAccordionUuid,\n    } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const { isWrapped: contextIsWrapped } = useContext(AccordionWrappedContext);\n\n    const isWrapped = useMemo(\n        () => groupIsWrapped ?? contextIsWrapped,\n        [contextIsWrapped, groupIsWrapped],\n    );\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const isOpenRef = useRef(isOpen);\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    const isLastAccordion = useMemo(\n        () => (accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false),\n        [accordionUuids, uuid],\n    );\n\n    useEffect(() => {\n        isOpenRef.current = isOpen;\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(\n        () => ({ isWrapped: isWrapped === true }),\n        [isWrapped],\n    );\n\n    const areaContextProviderValue = useMemo(() => ({ shouldChangeColor: true }), []);\n\n    const accordionWrappedContextProviderValue = useMemo(() => ({ isWrapped: true }), []);\n\n    return (\n        <StyledAccordion\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            $isOpen={isOpen}\n            $shouldShowLines={!isLastAccordion}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n            onMouseEnter={onHoverStart}\n            onMouseLeave={onHoverEnd}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        uuid={uuid}\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped === true}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchPlaceholder={searchPlaceholder}\n                        searchValue={searchValue}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                        onTitleInputChange={onTitleInputChange}\n                        titleInputProps={titleInputProps}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                <AccordionWrappedContext.Provider\n                                    value={accordionWrappedContextProviderValue}\n                                >\n                                    <AreaContext.Provider value={areaContextProviderValue}>\n                                        {children}\n                                    </AreaContext.Provider>\n                                </AccordionWrappedContext.Provider>\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

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

@@ -11,7 +11,8 @@ var _useElementSize = require("../../../hooks/useElementSize");
 var _accordion = require("../../../utils/accordion");
 var _AreaContextProvider = require("../../area-provider/AreaContextProvider");
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
-var _Input = _interopRequireDefault(require("../../input/Input"));
+var _Input = _interopRequireWildcard(require("../../input/Input"));
+var _SearchInput = _interopRequireDefault(require("../../search-input/SearchInput"));
 var _AccordionHead = require("./AccordionHead.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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); }
@@ -26,7 +27,6 @@ const AccordionHead = ({
   onClick,
   onSearchChange,
   rightElement,
-  searchIcon,
   searchPlaceholder,
   searchValue,
   shouldRotateIcon,
@@ -46,7 +46,6 @@ const AccordionHead = ({
   const titleElementChildrenSize = (0, _useElementSize.useElementSize)(titleElementWrapperRef, {
     shouldUseChildElement: true
   });
-  const hasSearchIcon = Array.isArray(searchIcon);
   (0, _react.useEffect)(() => {
     if (typeof onTitleInputChange === 'function') {
       setHeadHeight({
@@ -163,27 +162,7 @@ const AccordionHead = ({
   }, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledRightWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false,
     key: `accordionRightWrapper--${uuid}`
-  }, typeof onSearchChange === 'function' && isOpen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInput, {
-    animate: {
-      opacity: 1,
-      width: '165px'
-    },
-    autoComplete: "off",
-    exit: {
-      opacity: 0,
-      width: 0
-    },
-    $hasIcon: hasSearchIcon,
-    initial: {
-      opacity: 0,
-      width: 0
-    },
-    key: `rightInput--${uuid}`,
-    onChange: onSearchChange,
-    placeholder: searchPlaceholder,
-    type: "text",
-    value: searchValue
-  }), hasSearchIcon && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInputIconWrapper, {
+  }, typeof onSearchChange === 'function' && isOpen && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionSearchWrapper, {
     animate: {
       opacity: 1
     },
@@ -193,10 +172,13 @@ const AccordionHead = ({
     initial: {
       opacity: 0
     },
-    key: `rightInputIcon-${uuid}`
-  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    icons: searchIcon
-  }))) : /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightElementWrapper, {
+    key: `searchWrapper--${uuid}`
+  }, /*#__PURE__*/_react.default.createElement(_SearchInput.default, {
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    size: _Input.InputSize.Small,
+    value: searchValue
+  })), rightElement && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightElementWrapper, {
     animate: {
       opacity: 1
     },

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","titleElementChildrenSize","useElementSize","shouldUseChildElement","hasSearchIcon","Array","isArray","useEffect","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","AreaContext","Provider","value","shouldChangeColor","onFocus","event","onBlur","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$isWrapped","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","$hasIcon","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    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { type InputProps } from '../../input/Input';\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';\n\nexport type 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    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\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    uuid,\n    titleInputProps,\n    onTitleInputChange,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    const hasSearchIcon = Array.isArray(searchIcon);\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\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--${uuid}`}\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-${uuid}`}\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--${uuid}`}\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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","ignoreList":[]}
+{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_accordion","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","_SearchInput","_AccordionHead","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","_extends","assign","bind","arguments","length","apply","AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldRotateIcon","title","titleElement","uuid","titleInputProps","onTitleInputChange","headHeight","setHeadHeight","useState","closed","open","theme","useTheme","titleElementWrapperRef","useRef","titleWrapperRef","titleElementChildrenSize","useElementSize","shouldUseChildElement","useEffect","_titleWrapperRef$curr","getAccordionHeadHeight","width","current","clientWidth","fontSize","iconElement","useMemo","createElement","icons","internalIcon","accordionIcon","toString","internalIconStyle","iconStyle","StyledAccordionIcon","className","$icon","accordionHeadHeight","height","tmp","setTmp","StyledMotionAccordionHead","animate","initial","key","StyledMotionIconWrapper","rotate","undefined","StyledMotionContentWrapper","opacity","ref","AreaContext","Provider","value","shouldChangeColor","onFocus","event","onBlur","onChange","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","exit","$isOpen","$isWrapped","transition","duration","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","StyledMotionSearchWrapper","placeholder","size","InputSize","Small","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 { useTheme } from 'styled-components';\nimport { useElementSize } from '../../../hooks/useElementSize';\nimport { getAccordionHeadHeight } from '../../../utils/accordion';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\nimport Icon from '../../icon/Icon';\nimport Input, { InputSize, type InputProps } from '../../input/Input';\nimport SearchInput from '../../search-input/SearchInput';\nimport {\n    StyledAccordionIcon,\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionSearchWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\nexport type 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    searchPlaceholder?: string;\n    searchValue?: string;\n    shouldRotateIcon?: boolean;\n    title: string;\n    titleElement?: ReactNode;\n    uuid: string;\n    onTitleInputChange?: ChangeEventHandler<HTMLInputElement>;\n    titleInputProps?: InputProps;\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    searchPlaceholder,\n    searchValue,\n    shouldRotateIcon,\n    title,\n    titleElement,\n    uuid,\n    titleInputProps,\n    onTitleInputChange,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const theme = useTheme();\n\n    const titleElementWrapperRef = useRef<HTMLDivElement>(null);\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const titleElementChildrenSize = useElementSize(titleElementWrapperRef, {\n        shouldUseChildElement: true,\n    });\n\n    useEffect(() => {\n        if (typeof onTitleInputChange === 'function') {\n            setHeadHeight({ closed: 50, open: 50 });\n        } else {\n            setHeadHeight(\n                getAccordionHeadHeight({\n                    isWrapped,\n                    title,\n                    width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n                }),\n            );\n        }\n        // The fontSize need to be included to trigger a new calculation.\n        // After the size is increased, the Title is cut at the bottom.\n    }, [isWrapped, onTitleInputChange, theme.fontSize, title]);\n\n    const iconElement = useMemo(() => {\n        if (icon || isFixed) {\n            return (\n                <Icon\n                    icons={[isFixed ? 'fa fa-horizontal-rule' : (icon ?? 'fa fa-chevron-right')]}\n                />\n            );\n        }\n\n        let internalIcon = 'f105';\n\n        if (\n            theme?.accordionIcon &&\n            theme.accordionIcon !== 110 &&\n            theme.accordionIcon !== 1110100\n        ) {\n            internalIcon = (theme.accordionIcon as number).toString(16);\n        }\n\n        const internalIconStyle = theme?.iconStyle ? (theme.iconStyle as string) : 'fa-regular';\n\n        return <StyledAccordionIcon className={internalIconStyle} $icon={internalIcon} />;\n    }, [icon, theme, isFixed]);\n\n    let accordionHeadHeight = isOpen ? headHeight.open : headHeight.closed;\n\n    if (titleElementChildrenSize && titleElementChildrenSize.height > accordionHeadHeight) {\n        // If the titleElement is bigger than the title, the height of the accordion head should be increased.\n        // The height of the titleElement is increased by 8px because of the padding of the accordion head element.\n        accordionHeadHeight = titleElementChildrenSize.height + 8;\n    }\n\n    const [tmp, setTmp] = useState(true);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: accordionHeadHeight }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            key={`accordionHead--${uuid}`}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                key={`accordionHeadIcon--${uuid}`}\n            >\n                {iconElement}\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed && tmp ? onClick : undefined}\n                ref={titleWrapperRef}\n                key={`accordionHeadContentWrapper--${uuid}`}\n            >\n                {typeof onTitleInputChange === 'function' ? (\n                    // eslint-disable-next-line react/jsx-no-constructed-context-values\n                    <AreaContext.Provider value={{ shouldChangeColor: true }}>\n                        <Input\n                            {...titleInputProps}\n                            value={title}\n                            onFocus={(event) => {\n                                setTmp(false);\n\n                                if (titleInputProps?.onFocus) {\n                                    titleInputProps.onFocus(event);\n                                }\n                            }}\n                            onBlur={(event) => {\n                                setTmp(true);\n\n                                if (titleInputProps?.onBlur) {\n                                    titleInputProps.onBlur(event);\n                                }\n                            }}\n                            onChange={onTitleInputChange}\n                        />\n                    </AreaContext.Provider>\n                ) : (\n                    <LayoutGroup key={`accordionHeadLayoutGroup--${uuid}`}>\n                        <StyledMotionTitleWrapper key={`accordionHeadTitleWrapperWrapper--${uuid}`}>\n                            <AnimatePresence\n                                initial={false}\n                                key={`accordionHeadTitleWrapper--${uuid}`}\n                            >\n                                <StyledMotionTitle\n                                    animate={{ scale: 1 }}\n                                    initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                    exit={{ opacity: 0 }}\n                                    $isOpen={isOpen}\n                                    $isWrapped={isWrapped}\n                                    transition={{\n                                        opacity: {\n                                            duration: 0,\n                                        },\n                                    }}\n                                    key={\n                                        isOpen && !isWrapped\n                                            ? `accordionHeadTitleBig--${uuid}`\n                                            : `accordionHeadTitle--${uuid}`\n                                    }\n                                >\n                                    {title}\n                                </StyledMotionTitle>\n                            </AnimatePresence>\n                        </StyledMotionTitleWrapper>\n                        {titleElement && (\n                            <StyledMotionTitleElementWrapper\n                                layout\n                                key={`accordionTitleElement--${uuid}`}\n                                ref={titleElementWrapperRef}\n                            >\n                                {titleElement}\n                            </StyledMotionTitleElementWrapper>\n                        )}\n                    </LayoutGroup>\n                )}\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false} key={`accordionRightWrapper--${uuid}`}>\n                        {typeof onSearchChange === 'function' && isOpen && (\n                            <StyledMotionSearchWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`searchWrapper--${uuid}`}\n                            >\n                                <SearchInput\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    size={InputSize.Small}\n                                    value={searchValue}\n                                />\n                            </StyledMotionSearchWrapper>\n                        )}\n                        {rightElement && (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key={`rightElementWrapper--${uuid}`}\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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","ignoreList":[]}

package/lib/cjs/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 = exports.StyledAccordionIcon = void 0;
+exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionSearchWrapper = 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); }
@@ -93,18 +93,20 @@ const StyledMotionTitleElementWrapper = exports.StyledMotionTitleElementWrapper
     margin-left: 8px;
 `;
 const StyledRightWrapper = exports.StyledRightWrapper = _styledComponents.default.div`
-    display: grid;
+    display: flex;
     flex: 0 0 auto;
-    grid-template-areas: 'right';
+    gap: 8px;
     margin-right: 5px;
     overflow: hidden;
     position: relative;
 `;
+const StyledMotionSearchWrapper = exports.StyledMotionSearchWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+`;
 const StyledMotionRightElementWrapper = exports.StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-items: center;
     display: flex;
-    grid-area: header;
-    justify-content: flex-end;
 `;
 const StyledMotionRightInput = exports.StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)`
     background-color: transparent;

package/lib/cjs/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","hasOwnProperty","call","i","set","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","$isWrapped","undefined","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$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-content: center;\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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","ignoreList":[]}
+{"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","hasOwnProperty","call","i","set","StyledMotionAccordionHead","exports","styled","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledAccordionIcon","headline","$icon","StyledMotionContentWrapper","StyledMotionTitleWrapper","StyledMotionTitle","$isOpen","$isWrapped","undefined","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionSearchWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","$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-content: center;\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: flex;\n    flex: 0 0 auto;\n    gap: 8px;\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionSearchWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\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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","ignoreList":[]}

package/lib/cjs/components/input/Input.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.InputSize = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = require("styled-components");
 var _useElementSize = require("../../hooks/useElementSize");
@@ -13,6 +13,11 @@ var _Input = require("./Input.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 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 && {}.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; }
+let InputSize = exports.InputSize = /*#__PURE__*/function (InputSize) {
+  InputSize["Small"] = "small";
+  InputSize["Medium"] = "medium";
+  return InputSize;
+}({});
 const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   leftElement,
   inputMode,
@@ -27,6 +32,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
   shouldRemainPlaceholder = false,
   shouldShowClearIcon = false,
   shouldShowCenteredContent = false,
+  size = InputSize.Medium,
   type = 'text',
   value,
   shouldUseAutoFocus = false,
@@ -84,14 +90,14 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
         right: 3,
         top: -1.5
       } : {
-        bottom: -10,
+        bottom: size === InputSize.Small ? -4 : -10,
         right: -6
       };
     }
     return {
       left: -1
     };
-  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);
+  }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);
   return /*#__PURE__*/_react.default.createElement(_Input.StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -99,7 +105,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     $shouldChangeColor: shouldChangeColor,
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
-    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size
   }, leftElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, leftElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
   }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
@@ -135,6 +142,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)(({
     $isInvalid: isInvalid
   }, placeholder))), shouldShowClearIcon && /*#__PURE__*/_react.default.createElement(_Input.StyledMotionInputClearIcon, {
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder,
+    $size: size,
     animate: {
       opacity: hasValue ? 1 : 0
     },

package/lib/cjs/components/input/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default","exports"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_useElementSize","_AreaContextProvider","_Icon","_interopRequireDefault","_Input","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","InputSize","exports","Input","forwardRef","leftElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","rightElement","shouldShowOnlyBottomBorder","shouldRemainPlaceholder","shouldShowClearIcon","shouldShowCenteredContent","size","Medium","type","value","shouldUseAutoFocus","isInvalid","id","ref","_rightElement$props","hasValue","setHasValue","useState","placeholderWidth","setPlaceholderWidth","areaProvider","useContext","AreaContext","theme","useTheme","inputRef","useRef","placeholderRef","placeholderSize","useElementSize","useEffect","width","shouldChangeColor","useMemo","handleClearIconClick","useCallback","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","useImperativeHandle","focus","_inputRef$current","labelPosition","right","top","bottom","Small","left","createElement","StyledInput","className","$isDisabled","StyledInputContentWrapper","$shouldChangeColor","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","$size","StyledInputIconWrapper","StyledInputContent","StyledInputField","$placeholderWidth","disabled","autoFocus","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","animate","fontSize","initial","layout","transition","duration","StyledInputLabel","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","StyledInputRightElement","displayName","_default"],"sources":["../../../../src/components/input/Input.tsx"],"sourcesContent":["import React, {\n    ChangeEvent,\n    ChangeEventHandler,\n    FocusEventHandler,\n    forwardRef,\n    HTMLInputTypeAttribute,\n    KeyboardEventHandler,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport enum InputSize {\n    Small = 'small',\n    Medium = 'medium',\n}\n\nexport type InputProps = {\n    /**\n     * An element to be displayed on the left side of the input field\n     */\n    leftElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the placeholder should remain at its position if a value is typed.\n     */\n    shouldRemainPlaceholder?: boolean;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * The size of the input field\n     */\n    size?: InputSize;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            leftElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldRemainPlaceholder = false,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            size = InputSize.Medium,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const [placeholderWidth, setPlaceholderWidth] = useState(0);\n\n        const areaProvider = useContext(AreaContext);\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n        const placeholderRef = useRef<HTMLLabelElement>(null);\n\n        const placeholderSize = useElementSize(placeholderRef);\n\n        useEffect(() => {\n            if (placeholderSize && shouldShowOnlyBottomBorder) {\n                setPlaceholderWidth(placeholderSize.width + 5);\n            }\n        }, [placeholderSize, shouldShowOnlyBottomBorder]);\n\n        const shouldChangeColor = useMemo(\n            () => areaProvider.shouldChangeColor ?? false,\n            [areaProvider.shouldChangeColor],\n        );\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n        const shouldShowBorder = rightElement?.props?.style?.backgroundColor === undefined;\n\n        const handleInputFieldChange = useCallback(\n            (event: ChangeEvent<HTMLInputElement>) => {\n                setHasValue(event.target.value !== '');\n\n                if (typeof onChange === 'function') {\n                    onChange(event);\n                }\n            },\n            [onChange],\n        );\n\n        useImperativeHandle(\n            ref,\n            () => ({\n                focus: () => inputRef.current?.focus(),\n            }),\n            [],\n        );\n\n        useEffect(() => {\n            if (typeof value === 'string') {\n                setHasValue(value !== '');\n            }\n        }, [value]);\n\n        const labelPosition = useMemo(() => {\n            if (hasValue && !shouldRemainPlaceholder) {\n                return shouldShowOnlyBottomBorder\n                    ? { right: 3, top: -1.5 }\n                    : { bottom: size === InputSize.Small ? -4 : -10, right: -6 };\n            }\n\n            return { left: -1 };\n        }, [hasValue, shouldRemainPlaceholder, shouldShowOnlyBottomBorder, size]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $shouldChangeColor={shouldChangeColor}\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                    $size={size}\n                >\n                    {leftElement && <StyledInputIconWrapper>{leftElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            $placeholderWidth={placeholderWidth}\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize:\n                                    hasValue &&\n                                    !shouldShowOnlyBottomBorder &&\n                                    !shouldRemainPlaceholder\n                                        ? '9px'\n                                        : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            ref={placeholderRef}\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.1 }}\n                        >\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            $size={size}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/input/Input.styles.js

@@ -35,9 +35,16 @@ const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledCom
     transition: opacity 0.3s ease;
 
     ${({
-  $shouldShowOnlyBottomBorder
+  $size
+}) => $size === 'small' && (0, _styledComponents.css)`
+            height: 32px;
+        `}
+
+    ${({
+  $shouldShowOnlyBottomBorder,
+  $size
 }) => !$shouldShowOnlyBottomBorder && (0, _styledComponents.css)`
-            min-height: 42px;
+            min-height: ${$size === 'medium' ? '42px' : '32px'};
         `}
 
     ${({
@@ -128,9 +135,13 @@ const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _sty
     cursor: pointer;
     display: flex;
     flex: 0 0 auto;
-    height: 40px;
+    height: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
     justify-content: center;
-    width: 40px;
+    width: ${({
+  $size
+}) => $size === 'medium' ? '40px' : '30px'};
 `;
 const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponents.default.div`
     align-items: baseline;