@chayns-components/core 5.0.0-beta.402 → 5.0.0-beta.403

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

@@ -80,6 +80,10 @@ export type AccordionProps = {
      * This will hide the background color of the accordion
      */
     shouldHideBackground?: boolean;
+    /**
+     * Whether the icon should be rotating.
+     */
+    shouldRotateIcon?: boolean;
     /**
      * Title of the Accordion displayed in the head
      */

package/lib/components/accordion/Accordion.js

@@ -37,6 +37,7 @@ const Accordion = _ref => {
     searchPlaceholder,
     shouldForceBackground = false,
     shouldHideBackground = false,
+    shouldRotateIcon = true,
     title,
     titleElement,
     shouldRenderClosed = false
@@ -134,6 +135,7 @@ const Accordion = _ref => {
     rightElement: rightElement,
     searchIcon: searchIcon,
     searchPlaceholder: searchPlaceholder,
+    shouldRotateIcon: shouldRotateIcon,
     title: title,
     titleElement: titleElement
   }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldForceBackground","shouldHideBackground","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            isOpen={isOpen}\n            isParentWrapped={isParentWrapped}\n            isWrapped={isWrapped}\n            shouldForceBackground={shouldForceBackground}\n            shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AAYA,IAAAG,KAAA,GAAAH,OAAA;AACA,IAAAI,cAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,eAAA,GAAAN,OAAA;AACA,IAAAO,cAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,UAAA,GAAAR,OAAA;AAAqD,SAAAK,uBAAAI,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAAA,SAAAG,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAX,wBAAAW,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAH,UAAA,SAAAG,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAF,OAAA,EAAAE,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAJ,CAAA,UAAAG,CAAA,CAAAE,GAAA,CAAAL,CAAA,OAAAM,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAZ,CAAA,oBAAAY,CAAA,IAAAH,MAAA,CAAAI,SAAA,CAAAC,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAY,CAAA,SAAAI,CAAA,GAAAR,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAX,CAAA,EAAAY,CAAA,UAAAI,CAAA,KAAAA,CAAA,CAAAX,GAAA,IAAAW,CAAA,CAAAC,GAAA,IAAAR,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAI,CAAA,IAAAV,CAAA,CAAAM,CAAA,IAAAZ,CAAA,CAAAY,CAAA,YAAAN,CAAA,CAAAR,OAAA,GAAAE,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAc,GAAA,CAAAjB,CAAA,EAAAM,CAAA,GAAAA,CAAA;AAE9C,MAAMY,gBAAgB,GAAAC,OAAA,CAAAD,gBAAA,gBAAGE,cAAK,CAACC,aAAa,CAAC;EAAEC,SAAS,EAAE;AAAM,CAAC,CAAC;AA8FzE,MAAMC,SAA6B,GAAGC,IAAA,IAsBhC;EAAA,IAtBiC;IACnCC,aAAa;IACbC,QAAQ;IACRC,IAAI;IACJC,aAAa,GAAG,KAAK;IACrBC,UAAU,GAAG,KAAK;IAClBC,OAAO,GAAG,KAAK;IACfC,QAAQ;IACRC,aAAa,GAAG,KAAK;IACrBV,SAAS,GAAG,KAAK;IACjBW,YAAY;IACZC,OAAO;IACPC,MAAM;IACNC,cAAc;IACdC,YAAY;IACZC,UAAU;IACVC,iBAAiB;IACjBC,qBAAqB,GAAG,KAAK;IAC7BC,oBAAoB,GAAG,KAAK;IAC5BC,KAAK;IACLC,YAAY;IACZC,kBAAkB,GAAG;EACzB,CAAC,GAAApB,IAAA;EACG,MAAM;IAAEqB,iBAAiB;IAAEC;EAAwB,CAAC,GAAG,IAAAC,iBAAU,EAACC,qCAAqB,CAAC;EACxF,MAAM;IAAE1B,SAAS,EAAE2B;EAAgB,CAAC,GAAG,IAAAF,iBAAU,EAAC7B,gBAAgB,CAAC;EAEnE,MAAM,CAACgC,eAAe,EAAEC,kBAAkB,CAAC,GAAG,IAAAC,eAAQ,EAAUxB,aAAa,IAAIG,QAAQ,CAAC;EAE1F,MAAMsB,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,kBAAkB,GAAG,IAAAC,aAAM,EAAC,IAAI,CAAC;EAEvC,MAAMC,SAAS,GAAG,OAAOX,uBAAuB,KAAK,UAAU;EAE/D,MAAMY,MAAM,GAAGD,SAAS,GAAGZ,iBAAiB,KAAKQ,IAAI,GAAGH,eAAe;EAEvE,MAAMS,UAAU,GAAG,IAAAH,aAAM,EAACtB,OAAO,CAAC;EAClC,MAAM0B,SAAS,GAAG,IAAAJ,aAAM,EAACrB,MAAM,CAAC;EAEhC,IAAA0B,gBAAS,EAAC,MAAM;IACZF,UAAU,CAACG,OAAO,GAAG5B,OAAO;IAC5B0B,SAAS,CAACE,OAAO,GAAG3B,MAAM;EAC9B,CAAC,EAAE,CAACD,OAAO,EAAEC,MAAM,CAAC,CAAC;EAErB,MAAM4B,eAAe,GAAG,IAAAC,kBAAW,EAAC,MAAM;IACtC,IAAInC,UAAU,EAAE;MACZ;IACJ;IAEA,IAAI,OAAOiB,uBAAuB,KAAK,UAAU,EAAE;MAC/CA,uBAAuB,CAACO,IAAI,CAAC;IACjC;IAEAF,kBAAkB,CAAEc,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;EAC3E,CAAC,EAAE,CAACpC,UAAU,EAAEiB,uBAAuB,EAAEO,IAAI,CAAC,CAAC;EAE/C,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIhC,UAAU,IAAI6B,MAAM,EAAE;MACtB,IAAI,OAAOZ,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACO,IAAI,CAAC;MACjC;MAEAF,kBAAkB,CAAEc,sBAAsB,IAAK,CAACA,sBAAsB,CAAC;IAC3E;EACJ,CAAC,EAAE,CAACpC,UAAU,EAAE6B,MAAM,EAAEZ,uBAAuB,EAAEO,IAAI,CAAC,CAAC;EAEvD,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,kBAAkB,CAACO,OAAO,EAAE;MAC5BP,kBAAkB,CAACO,OAAO,GAAG,KAAK;IACtC,CAAC,MAAM,IAAIJ,MAAM,EAAE;MACf,IAAI,OAAOE,SAAS,CAACE,OAAO,KAAK,UAAU,EAAE;QACzCF,SAAS,CAACE,OAAO,CAAC,CAAC;MACvB;IACJ,CAAC,MAAM,IAAI,OAAOH,UAAU,CAACG,OAAO,KAAK,UAAU,EAAE;MACjDH,UAAU,CAACG,OAAO,CAAC,CAAC;IACxB;EACJ,CAAC,EAAE,CAACJ,MAAM,CAAC,CAAC;EAEZ,IAAAG,gBAAS,EAAC,MAAM;IACZ,IAAIjC,aAAa,EAAE;MACf,IAAI,OAAOkB,uBAAuB,KAAK,UAAU,EAAE;QAC/CA,uBAAuB,CAACO,IAAI,EAAE;UAAEa,cAAc,EAAE;QAAK,CAAC,CAAC;MAC3D,CAAC,MAAM;QACHf,kBAAkB,CAAC,IAAI,CAAC;MAC5B;IACJ;EACJ,CAAC,EAAE,CAACvB,aAAa,EAAEkB,uBAAuB,EAAEO,IAAI,CAAC,CAAC;EAElD,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAI,OAAO9B,QAAQ,KAAK,SAAS,EAAE;MAC/B,IAAI,OAAOe,uBAAuB,KAAK,UAAU,IAAIf,QAAQ,EAAE;QAC3De,uBAAuB,CAACO,IAAI,CAAC;MACjC,CAAC,MAAM;QACHF,kBAAkB,CAACpB,QAAQ,CAAC;MAChC;IACJ;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEe,uBAAuB,EAAEO,IAAI,CAAC,CAAC;EAE7C,MAAMc,6BAA6B,GAAG,IAAAC,cAAO,EAAC,OAAO;IAAE9C;EAAU,CAAC,CAAC,EAAE,CAACA,SAAS,CAAC,CAAC;EAEjF,oBACIlC,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAAC1E,UAAA,CAAA2E,eAAe;IACZC,SAAS,EAAC,uBAAuB;IACjCb,MAAM,EAAEA,MAAO;IACfT,eAAe,EAAEA,eAAgB;IACjC3B,SAAS,EAAEA,SAAU;IACrBkB,qBAAqB,EAAEA,qBAAsB;IAC7CC,oBAAoB,EAAEA;EAAqB,gBAE3CrD,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACnD,gBAAgB,CAACsD,QAAQ;IAACC,KAAK,EAAEN;EAA8B,gBAC5D/E,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACnF,aAAA,CAAAwF,YAAY;IAACC,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxCxF,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAAC3E,cAAA,CAAAI,OAAa;IACV6B,IAAI,EAAEA,IAAK;IACX+B,MAAM,EAAEA,MAAO;IACf5B,OAAO,EAAEA,OAAQ;IACjBE,aAAa,EAAEA,aAAa,IAAIH,UAAW;IAC3CP,SAAS,EAAEA,SAAU;IACrBuD,OAAO,EAAEd,eAAgB;IACzB3B,cAAc,EAAEA,cAAe;IAC/BC,YAAY,EAAEA,YAAa;IAC3BC,UAAU,EAAEA,UAAW;IACvBC,iBAAiB,EAAEA,iBAAkB;IACrCG,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACFvD,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAACnF,aAAA,CAAA4F,eAAe;IAACC,OAAO,EAAE;EAAM,GAC3B,CAACrB,MAAM,IAAId,kBAAkB,kBAC1BxD,MAAA,CAAAU,OAAA,CAAAuE,aAAA,CAAC9E,cAAA,CAAAO,OAAa;IACVkF,SAAS,EAAEvD,aAAc;IACzBwD,QAAQ,EAAEhD,YAAa;IACvBiD,cAAc,EAAEtC,kBAAkB,IAAI,CAACc;EAAO,GAE7ChC,QACU,CAEN,CACP,CACS,CACd,CAAC;AAE1B,CAAC;AAEDH,SAAS,CAAC4D,WAAW,GAAG,WAAW;AAAC,IAAAC,QAAA,GAAAjE,OAAA,CAAArB,OAAA,GAErByB,SAAS"}
+{"version":3,"file":"Accordion.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AccordionBody","_interopRequireDefault","_AccordionGroup","_AccordionHead","_Accordion","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","AccordionContext","exports","React","createContext","isWrapped","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","shouldForceBackground","shouldHideBackground","shouldRotateIcon","title","titleElement","shouldRenderClosed","openAccordionUuid","updateOpenAccordionUuid","useContext","AccordionGroupContext","isParentWrapped","isAccordionOpen","setIsAccordionOpen","useState","uuid","useUuid","isInitialRenderRef","useRef","isInGroup","isOpen","onCloseRef","onOpenRef","useEffect","current","handleHeadClick","useCallback","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","useMemo","createElement","StyledAccordion","className","Provider","value","MotionConfig","transition","type","onClick","AnimatePresence","initial","maxHeight","onScroll","shouldHideBody","displayName","_default"],"sources":["../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nexport type AccordionProps = {\n    /**\n     * Maximum height of the accordion body element. This automatically makes the content of the\n     * body element scrollable.\n     */\n    bodyMaxHeight?: number;\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title. Does not work with isOpened.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This can be used to open the Accordion from the outside.\n     */\n    isOpened?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion body will be scrolled\n     */\n    onBodyScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * This will force the background color of the accordion to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * This will hide the background color of the accordion\n     */\n    shouldHideBackground?: boolean;\n    /**\n     * Whether the icon should be rotating.\n     */\n    shouldRotateIcon?: boolean;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n    /**\n     * This will render the Accordion closed on the first render.\n     */\n    shouldRenderClosed?: boolean;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    bodyMaxHeight,\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isOpened,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onBodyScroll,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    shouldForceBackground = false,\n    shouldHideBackground = false,\n    shouldRotateIcon = true,\n    title,\n    titleElement,\n    shouldRenderClosed = false,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n    const { isWrapped: isParentWrapped } = useContext(AccordionContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen ?? isOpened);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [onClose, onOpen]);\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isDisabled && isOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid);\n            }\n\n            setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n        }\n    }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            if (typeof updateOpenAccordionUuid === 'function') {\n                updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n            } else {\n                setIsAccordionOpen(true);\n            }\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (typeof isOpened === 'boolean') {\n            if (typeof updateOpenAccordionUuid === 'function' && isOpened) {\n                updateOpenAccordionUuid(uuid);\n            } else {\n                setIsAccordionOpen(isOpened);\n            }\n        }\n    }, [isOpened, updateOpenAccordionUuid, uuid]);\n\n    const accordionContextProviderValue = useMemo(() => ({ isWrapped }), [isWrapped]);\n\n    return (\n        <StyledAccordion\n            className=\"beta-chayns-accordion\"\n            isOpen={isOpen}\n            isParentWrapped={isParentWrapped}\n            isWrapped={isWrapped}\n            shouldForceBackground={shouldForceBackground}\n            shouldHideBackground={shouldHideBackground}\n        >\n            <AccordionContext.Provider value={accordionContextProviderValue}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        shouldRotateIcon={shouldRotateIcon}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                shouldHideBody={shouldRenderClosed && !isOpen}\n                            >\n                                {children}\n                            </AccordionBody>\n                        )}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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"}

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

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

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

@@ -24,6 +24,7 @@ const AccordionHead = _ref => {
     rightElement,
     searchIcon,
     searchPlaceholder,
+    shouldRotateIcon,
     title,
     titleElement
   } = _ref;
@@ -48,7 +49,7 @@ const AccordionHead = _ref => {
     initial: false
   }, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionIconWrapper, {
     animate: {
-      rotate: isOpen || isFixed ? 90 : 0
+      rotate: (isOpen || isFixed) && shouldRotateIcon ? 90 : 0
     },
     initial: false,
     onClick: !isFixed ? onClick : undefined

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

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

package/lib/components/input/Input.d.ts

@@ -40,6 +40,10 @@ export type InputProps = {
      * Element to be displayed next to or instead of the "placeholder"
      */
     placeholderElement?: ReactNode;
+    /**
+     * An element that should be displayed on the right side of the Input.
+     */
+    rightElement?: ReactNode;
     /**
      * If true, a clear icon is displayed at the end of the input field
      */

package/lib/components/input/Input.js

@@ -22,6 +22,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     onKeyDown,
     placeholder,
     placeholderElement,
+    rightElement,
     shouldShowClearIcon = false,
     type = 'text',
     value,
@@ -72,6 +73,8 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     className: "beta-chayns-input",
     isDisabled: isDisabled,
     isInvalid: isInvalid
+  }, /*#__PURE__*/_react.default.createElement(_Input.StyledInputContentWrapper, {
+    shouldRoundRightCorners: !rightElement
   }, iconElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputIconWrapper, null, iconElement), /*#__PURE__*/_react.default.createElement(_Input.StyledInputContent, null, /*#__PURE__*/_react.default.createElement(_Input.StyledInputField, {
     disabled: isDisabled,
     onBlur: onBlur,
@@ -111,7 +114,7 @@ const Input = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: ['fa fa-times'],
     color: isInvalid ? theme.wrong : undefined
-  })));
+  }))), rightElement && /*#__PURE__*/_react.default.createElement(_Input.StyledInputRightElement, null, rightElement));
 });
 Input.displayName = 'Input';
 var _default = exports.default = Input;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","fontSize","initial","layout","style","transition","duration","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","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    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\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     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\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     * 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     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: 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     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\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        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) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput\n                className=\"beta-chayns-input\"\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n            >\n                {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                <StyledInputContent>\n                    <StyledInputField\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                    />\n                    <StyledMotionInputLabel\n                        animate={{\n                            fontSize: hasValue ? '10px' : '16px',\n                        }}\n                        initial={false}\n                        layout\n                        style={{ ...labelPosition }}\n                        transition={{ type: 'tween', duration: 0.3 }}\n                        isInvalid={isInvalid}\n                    >\n                        {placeholderElement}\n                        {placeholder}\n                    </StyledMotionInputLabel>\n                </StyledInputContent>\n                {shouldShowClearIcon && (\n                    <StyledMotionInputClearIcon\n                        animate={{ opacity: hasValue ? 1 : 0 }}\n                        initial={false}\n                        onClick={handleClearIconClick}\n                        transition={{ type: 'tween' }}\n                        isInvalid={isInvalid}\n                    >\n                        <Icon icons={['fa fa-times']} color={isInvalid ? theme.wrong : undefined} />\n                    </StyledMotionInputClearIcon>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["_react","_interopRequireWildcard","require","_styledComponents","_Icon","_interopRequireDefault","_Input","obj","__esModule","default","_getRequireWildcardCache","e","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","Input","forwardRef","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","hasValue","setHasValue","useState","theme","useTheme","inputRef","useRef","handleClearIconClick","useCallback","current","target","handleInputFieldChange","event","useImperativeHandle","focus","useEffect","labelPosition","useMemo","bottom","right","left","top","createElement","StyledInput","className","StyledInputContentWrapper","shouldRoundRightCorners","StyledInputIconWrapper","StyledInputContent","StyledInputField","disabled","autoFocus","StyledMotionInputLabel","animate","fontSize","initial","layout","style","transition","duration","StyledMotionInputClearIcon","opacity","onClick","icons","color","wrong","undefined","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    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useTheme } from 'styled-components';\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    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabel,\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     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\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     * 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     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactNode;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: 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     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n        },\n        ref\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n        const theme = useTheme() as Theme;\n        const inputRef = useRef<HTMLInputElement>(null);\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        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) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput\n                className=\"beta-chayns-input\"\n                isDisabled={isDisabled}\n                isInvalid={isInvalid}\n            >\n                <StyledInputContentWrapper shouldRoundRightCorners={!rightElement}>\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent>\n                        <StyledInputField\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                        />\n                        <StyledMotionInputLabel\n                            animate={{\n                                fontSize: hasValue ? '10px' : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                            isInvalid={isInvalid}\n                        >\n                            {placeholderElement}\n                            {placeholder}\n                        </StyledMotionInputLabel>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                            isInvalid={isInvalid}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                </StyledInputContentWrapper>\n                {rightElement && <StyledInputRightElement>{rightElement}</StyledInputRightElement>}\n            </StyledInput>\n        );\n    }\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

package/lib/components/input/Input.styles.d.ts

@@ -4,6 +4,10 @@ import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
 import type { InputProps } from './Input';
 type StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;
 export declare const StyledInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputProps>>;
+type StyledInputContentWrapperProps = WithTheme<{
+    shouldRoundRightCorners: boolean;
+}>;
+export declare const StyledInputContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentWrapperProps>>;
 export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 type StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;
 export declare const StyledInputField: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputFieldProps>>;
@@ -538,4 +542,5 @@ export declare const StyledMotionInputClearIcon: import("styled-components").ISt
     onTransitionEndCapture?: import("react").TransitionEventHandler<HTMLDivElement> | undefined;
 } & import("framer-motion").MotionProps & import("react").RefAttributes<HTMLDivElement>, StyledMotionInputClearIconProps>> & Omit<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, keyof import("react").Component<any, {}, any>>;
 export declare const StyledInputIconWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StyledInputRightElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export {};

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

@@ -3,43 +3,59 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledMotionInputLabel = exports.StyledMotionInputClearIcon = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContent = exports.StyledInput = void 0;
+exports.StyledMotionInputLabel = exports.StyledMotionInputClearIcon = exports.StyledInputRightElement = exports.StyledInputIconWrapper = exports.StyledInputField = exports.StyledInputContentWrapper = exports.StyledInputContent = exports.StyledInput = void 0;
 var _framerMotion = require("framer-motion");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const StyledInput = exports.StyledInput = _styledComponents.default.div`
+    opacity: ${_ref => {
+  let {
+    isDisabled
+  } = _ref;
+  return isDisabled ? 0.5 : 1;
+}};
+    display: flex;
+`;
+const StyledInputContentWrapper = exports.StyledInputContentWrapper = _styledComponents.default.div`
     align-items: center;
-    background-color: ${_ref => {
+    background-color: ${_ref2 => {
   let {
     theme
-  } = _ref;
+  } = _ref2;
   return theme['100'];
 }};
-    border: 1px solid ${_ref2 => {
+    border: 1px solid
+        ${_ref3 => {
   let {
     theme,
     isInvalid
-  } = _ref2;
+  } = _ref3;
   return isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
 }};
-    border-radius: 3px;
-    color: ${_ref3 => {
+    color: ${_ref4 => {
   let {
     theme
-  } = _ref3;
+  } = _ref4;
   return theme['006'];
 }};
     display: flex;
     justify-content: space-between;
     min-height: 42px;
-    opacity: ${_ref4 => {
-  let {
-    isDisabled
-  } = _ref4;
-  return isDisabled ? 0.5 : 1;
-}};
-    transition: opacity 0.3s ease;
     width: 100%;
+    transition: opacity 0.3s ease;
+    border-bottom-left-radius: 3px;
+    border-top-left-radius: 3px;
+        
+        ${_ref5 => {
+  let {
+    shouldRoundRightCorners
+  } = _ref5;
+  return shouldRoundRightCorners && (0, _styledComponents.css)`
+                border-bottom-right-radius: 3px;
+                border-top-right-radius: 3px;
+            `;
+}}}
 `;
 const StyledInputContent = exports.StyledInputContent = _styledComponents.default.div`
     display: flex;
@@ -51,11 +67,11 @@ const StyledInputContent = exports.StyledInputContent = _styledComponents.defaul
 const StyledInputField = exports.StyledInputField = _styledComponents.default.input`
     background: none;
     border: none;
-    color: ${_ref5 => {
+    color: ${_ref6 => {
   let {
     theme,
     isInvalid
-  } = _ref5;
+  } = _ref6;
   return isInvalid ? theme.wrong : theme.text;
 }};
     padding: 0;
@@ -70,13 +86,13 @@ const StyledMotionInputLabel = exports.StyledMotionInputLabel = (0, _styledCompo
     pointer-events: none;
     position: absolute;
     user-select: none;
-    color: ${_ref6 => {
+    color: ${_ref7 => {
   let {
     theme,
     isInvalid
-  } = _ref6;
+  } = _ref7;
   return isInvalid ? theme.wrong : undefined;
-}}
+}};
 `;
 const StyledMotionInputClearIcon = exports.StyledMotionInputClearIcon = (0, _styledComponents.default)(_framerMotion.motion.div)`
     align-items: center;
@@ -95,4 +111,10 @@ const StyledInputIconWrapper = exports.StyledInputIconWrapper = _styledComponent
     justify-content: center;
     margin-left: 10px;
 `;
+const StyledInputRightElement = exports.StyledInputRightElement = _styledComponents.default.div`
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
 //# sourceMappingURL=Input.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","obj","__esModule","default","StyledInput","exports","styled","div","_ref","theme","_ref2","isInvalid","wrong","_ref3","_ref4","isDisabled","StyledInputContent","StyledInputField","input","_ref5","text","StyledMotionInputLabel","motion","label","_ref6","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled'| 'isInvalid'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid ${({theme, isInvalid}:StyledInputProps ) => isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    border-radius: 3px;\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    transition: opacity 0.3s ease;\n    width: 100%;\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, isInvalid }: StyledInputFieldProps) => isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputLabel = styled(motion.label)<StyledMotionInputLabelProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    color: ${({theme, isInvalid}: StyledMotionInputLabelProps)=> isInvalid ? theme.wrong : undefined}\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,sBAAA,CAAAF,OAAA;AAAuC,SAAAE,uBAAAC,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAMhC,MAAMG,WAAW,GAAAC,OAAA,CAAAD,WAAA,GAAGE,yBAAM,CAACC,GAAsB;AACxD;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC;EAAwB,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACtE,wBAAwBC,KAAA;EAAA,IAAC;IAACD,KAAK;IAAEE;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAAMC,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAG,0BAA0B;AAAA,CAAC;AACvH;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEJ;EAAwB,CAAC,GAAAI,KAAA;EAAA,OAAKJ,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC3D;AACA;AACA;AACA,eAAeK,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC1D;AACA;AACA,CAAC;AAEM,MAAMC,kBAAkB,GAAAX,OAAA,CAAAW,kBAAA,GAAGV,yBAAM,CAACC,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAIM,MAAMU,gBAAgB,GAAAZ,OAAA,CAAAY,gBAAA,GAAGX,yBAAM,CAACY,KAA6B;AACpE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEV,KAAK;IAAEE;EAAiC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGH,KAAK,CAACW,IAAI;AAAA,CAAC;AACnG;AACA;AACA,CAAC;AAIM,MAAMC,sBAAsB,GAAAhB,OAAA,CAAAgB,sBAAA,GAAG,IAAAf,yBAAM,EAACgB,oBAAM,CAACC,KAAK,CAA+B;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAACf,KAAK;IAAEE;EAAsC,CAAC,GAAAa,KAAA;EAAA,OAAIb,SAAS,GAAGF,KAAK,CAACG,KAAK,GAAGa,SAAS;AAAA,CAAC;AACrG,CAAC;AAIM,MAAMC,0BAA0B,GAAArB,OAAA,CAAAqB,0BAAA,GAAG,IAAApB,yBAAM,EAACgB,oBAAM,CAACf,GAAG,CAAmC;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAEM,MAAMoB,sBAAsB,GAAAtB,OAAA,CAAAsB,sBAAA,GAAGrB,yBAAM,CAACC,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"Input.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","prototype","hasOwnProperty","call","i","set","StyledInput","exports","styled","div","_ref","isDisabled","StyledInputContentWrapper","_ref2","theme","_ref3","isInvalid","wrong","_ref4","_ref5","shouldRoundRightCorners","css","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabel","motion","label","_ref7","undefined","StyledMotionInputClearIcon","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputProps } from './Input';\n\ntype StyledInputProps = WithTheme<Pick<InputProps, 'isDisabled' | 'isInvalid'>>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ isDisabled }) => (isDisabled ? 0.5 : 1)};\n    display: flex;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{ shouldRoundRightCorners: boolean }>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputProps) => theme['100']};\n    border: 1px solid\n        ${({ theme, isInvalid }: StyledInputProps) =>\n            isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    min-height: 42px;\n    width: 100%;\n    transition: opacity 0.3s ease;\n    border-bottom-left-radius: 3px;\n    border-top-left-radius: 3px;\n        \n        ${({ shouldRoundRightCorners }) =>\n            shouldRoundRightCorners &&\n            css`\n                border-bottom-right-radius: 3px;\n                border-top-right-radius: 3px;\n            `}}\n`;\n\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, isInvalid }: StyledInputFieldProps) =>\n        isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\ntype StyledMotionInputLabelProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputLabel = styled(motion.label)<StyledMotionInputLabelProps>`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    color: ${({ theme, isInvalid }: StyledMotionInputLabelProps) =>\n        isInvalid ? theme.wrong : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<Pick<InputProps, 'isInvalid'>>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.402",
+    "version": "5.0.0-beta.403",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "keywords": [
         "chayns",
@@ -70,5 +70,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "6f2f36bfe7e18d3c37a745e753a8b68df128278d"
+    "gitHead": "ca4f49b15e2f0248bd1f8c5f26c90006c8bd6d7a"
 }