@chayns-components/core 5.0.0-beta.98 → 5.0.0-beta.981

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

@@ -0,0 +1,192 @@
+import { AnimatePresence, MotionConfig } from 'framer-motion';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { useUuid } from '../../hooks/uuid';
+import { AreaContext } from '../area-provider/AreaContextProvider';
+import AccordionBody from './accordion-body/AccordionBody';
+import { AccordionGroupContext } from './accordion-group/AccordionGroup';
+import AccordionHead from './accordion-head/AccordionHead';
+import { AccordionWrappedContext } from './accordion-provider/AccordionContextProvider';
+import { StyledMotionAccordion } from './Accordion.styles';
+export const AccordionContext = /*#__PURE__*/React.createContext({
+  isWrapped: undefined
+});
+const Accordion = _ref => {
+  let {
+    bodyMaxHeight,
+    children,
+    icon,
+    isDefaultOpen = false,
+    isDisabled = false,
+    isFixed = false,
+    isOpened,
+    isTitleGreyed = false,
+    onBodyScroll,
+    onClose,
+    onHoverEnd,
+    onHoverStart,
+    onOpen,
+    onSearchChange,
+    rightElement,
+    searchPlaceholder,
+    searchValue,
+    shouldForceBackground = false,
+    shouldHideBackground = false,
+    shouldRenderClosed = false,
+    shouldRotateIcon = true,
+    shouldHideBottomLine = false,
+    title,
+    titleElement,
+    onTitleInputChange,
+    titleInputProps,
+    titleColor,
+    onBodyAnimationComplete
+  } = _ref;
+  const {
+    isWrapped: groupIsWrapped,
+    openAccordionUuid,
+    accordionGroupUuid,
+    accordionUuids,
+    updateOpenAccordionUuid
+  } = useContext(AccordionGroupContext);
+  const {
+    isWrapped: isParentWrapped
+  } = useContext(AccordionContext);
+  const {
+    isWrapped: contextIsWrapped
+  } = useContext(AccordionWrappedContext);
+  const isWrapped = useMemo(() => groupIsWrapped ?? contextIsWrapped, [contextIsWrapped, groupIsWrapped]);
+  const [isAccordionOpen, setIsAccordionOpen] = useState(isDefaultOpen ?? isOpened);
+  const uuid = useUuid();
+  const isInitialRenderRef = useRef(true);
+  const isInGroup = typeof updateOpenAccordionUuid === 'function';
+  const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
+  const isOpenRef = useRef(isOpen);
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  const isLastAccordion = useMemo(() => accordionUuids ? accordionUuids[accordionUuids.length - 1] === uuid : false, [accordionUuids, uuid]);
+  useEffect(() => {
+    isOpenRef.current = isOpen;
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [isOpen, onClose, onOpen]);
+  const handleHeadClick = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
+    if (typeof updateOpenAccordionUuid === 'function') {
+      updateOpenAccordionUuid(uuid);
+    }
+    setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
+  }, [isDisabled, updateOpenAccordionUuid, uuid]);
+  useEffect(() => {
+    if (isDisabled && isOpen) {
+      if (typeof updateOpenAccordionUuid === 'function') {
+        updateOpenAccordionUuid(uuid);
+      }
+      setIsAccordionOpen(currentIsAccordionOpen => !currentIsAccordionOpen);
+    }
+  }, [isDisabled, isOpen, updateOpenAccordionUuid, uuid]);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isOpen) {
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
+      }
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
+    }
+  }, [isOpen]);
+  useEffect(() => {
+    if (isDefaultOpen) {
+      if (typeof updateOpenAccordionUuid === 'function') {
+        updateOpenAccordionUuid(uuid, {
+          shouldOnlyOpen: true
+        });
+      } else {
+        setIsAccordionOpen(true);
+      }
+    }
+  }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
+  useEffect(() => {
+    if (typeof isOpened === 'boolean') {
+      if (typeof updateOpenAccordionUuid === 'function' && isOpened !== isOpenRef.current) {
+        updateOpenAccordionUuid(uuid);
+      } else {
+        setIsAccordionOpen(isOpened);
+      }
+    }
+  }, [isOpened, updateOpenAccordionUuid, uuid]);
+  const accordionContextProviderValue = useMemo(() => ({
+    isWrapped: isWrapped === true
+  }), [isWrapped]);
+  const areaContextProviderValue = useMemo(() => ({
+    shouldChangeColor: true
+  }), []);
+  const accordionWrappedContextProviderValue = useMemo(() => ({
+    isWrapped: true
+  }), []);
+  return /*#__PURE__*/React.createElement(StyledMotionAccordion, {
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    "data-uuid": `${accordionGroupUuid ?? ''}---${uuid}`,
+    className: "beta-chayns-accordion",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    $isOpen: isOpen,
+    $shouldShowLines: !isLastAccordion || !isWrapped,
+    $isParentWrapped: isParentWrapped,
+    $isWrapped: isWrapped,
+    $shouldForceBackground: shouldForceBackground,
+    $shouldHideBackground: shouldHideBackground,
+    $shouldHideBottomLine: shouldHideBottomLine,
+    onMouseEnter: onHoverStart,
+    onMouseLeave: onHoverEnd
+  }, /*#__PURE__*/React.createElement(AccordionContext.Provider, {
+    value: accordionContextProviderValue
+  }, /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(AccordionHead, {
+    uuid: uuid,
+    icon: icon,
+    isOpen: isOpen,
+    isFixed: isFixed,
+    isTitleGreyed: isTitleGreyed || isDisabled,
+    isWrapped: isWrapped === true,
+    onClick: handleHeadClick,
+    onSearchChange: onSearchChange,
+    rightElement: rightElement,
+    searchPlaceholder: searchPlaceholder,
+    searchValue: searchValue,
+    shouldRotateIcon: shouldRotateIcon,
+    title: title,
+    titleElement: titleElement,
+    onTitleInputChange: onTitleInputChange,
+    titleInputProps: titleInputProps,
+    titleColor: titleColor
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, (isOpen || shouldRenderClosed) && /*#__PURE__*/React.createElement(AccordionBody, {
+    maxHeight: bodyMaxHeight,
+    onScroll: onBodyScroll,
+    onAnimationComplete: onBodyAnimationComplete,
+    shouldHideBody: shouldRenderClosed && !isOpen
+  }, /*#__PURE__*/React.createElement(AccordionWrappedContext.Provider, {
+    value: accordionWrappedContextProviderValue
+  }, /*#__PURE__*/React.createElement(AreaContext.Provider, {
+    value: areaContextProviderValue
+  }, children)))))));
+};
+Accordion.displayName = 'Accordion';
+export default Accordion;
+//# sourceMappingURL=Accordion.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionBody","AccordionGroupContext","AccordionHead","AccordionWrappedContext","StyledMotionAccordion","AccordionContext","createContext","isWrapped","undefined","Accordion","_ref","bodyMaxHeight","children","icon","isDefaultOpen","isDisabled","isFixed","isOpened","isTitleGreyed","onBodyScroll","onClose","onHoverEnd","onHoverStart","onOpen","onSearchChange","rightElement","searchPlaceholder","searchValue","shouldForceBackground","shouldHideBackground","shouldRenderClosed","shouldRotateIcon","shouldHideBottomLine","title","titleElement","onTitleInputChange","titleInputProps","titleColor","onBodyAnimationComplete","groupIsWrapped","openAccordionUuid","accordionGroupUuid","accordionUuids","updateOpenAccordionUuid","isParentWrapped","contextIsWrapped","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","isOpenRef","onCloseRef","onOpenRef","isLastAccordion","length","current","handleHeadClick","currentIsAccordionOpen","shouldOnlyOpen","accordionContextProviderValue","areaContextProviderValue","shouldChangeColor","accordionWrappedContextProviderValue","createElement","animate","height","opacity","className","exit","initial","$isOpen","$shouldShowLines","$isParentWrapped","$isWrapped","$shouldForceBackground","$shouldHideBackground","$shouldHideBottomLine","onMouseEnter","onMouseLeave","Provider","value","transition","type","onClick","maxHeight","onScroll","onAnimationComplete","shouldHideBody","displayName"],"sources":["../../../../src/components/accordion/Accordion.tsx"],"sourcesContent":["import {AnimatePresence, MotionConfig} from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    UIEvent,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\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 {StyledMotionAccordion} from './Accordion.styles';\n\nexport const AccordionContext = React.createContext<{ isWrapped?: boolean }>({\n    isWrapped: undefined,\n});\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 accordion body is animated\n     */\n    onBodyAnimationComplete?: 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     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: 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     * The title color.\n     */\n    titleColor?: CSSProperties['color'];\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                                           shouldHideBottomLine = false,\n                                           title,\n                                           titleElement,\n                                           onTitleInputChange,\n                                           titleInputProps,\n                                           titleColor,\n                                           onBodyAnimationComplete,\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    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    return (\n        <StyledMotionAccordion\n            animate={{height: 'auto', opacity: 1}}\n            data-uuid={`${accordionGroupUuid ?? ''}---${uuid}`}\n            className=\"beta-chayns-accordion\"\n            exit={{height: 0, opacity: 0}}\n            initial={{height: 0, opacity: 0}}\n            $isOpen={isOpen}\n            $shouldShowLines={!isLastAccordion || !isWrapped}\n            $isParentWrapped={isParentWrapped}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBackground={shouldHideBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\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                        titleColor={titleColor}\n                    />\n                    <AnimatePresence initial={false}>\n                        {(isOpen || shouldRenderClosed) && (\n                            <AccordionBody\n                                maxHeight={bodyMaxHeight}\n                                onScroll={onBodyScroll}\n                                onAnimationComplete={onBodyAnimationComplete}\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        </StyledMotionAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,95 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionAccordion = styled(motion.div)`
+    ${_ref => {
+  let {
+    $isOpen,
+    $isWrapped,
+    $shouldForceBackground,
+    $shouldHideBackground,
+    theme
+  } = _ref;
+  return ($isOpen || $shouldForceBackground) && !$isWrapped && !$shouldHideBackground && css`
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+                border-radius: ${theme.cardBorderRadius}px;
+                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+            `;
+}}
+
+    ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.accordionLines && css`
+                border-bottom: 1px solid transparent;
+            `;
+}}
+
+    margin-bottom: ${_ref3 => {
+  let {
+    $isOpen,
+    $isWrapped
+  } = _ref3;
+  return $isOpen && !$isWrapped ? '30px' : '0px';
+}};
+    transition: background-color 0.3s ease,
+    border-bottom-color 0.3s ease,
+    border-radius 0.3s ease,
+    box-shadow 0.3s ease,
+    margin-bottom 0.3s ease;
+    will-change: unset !important;
+
+    ${_ref4 => {
+  let {
+    $isOpen,
+    $isWrapped,
+    $shouldForceBackground,
+    $shouldShowLines,
+    $shouldHideBottomLine,
+    theme
+  } = _ref4;
+  if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
+  if (theme.accordionLines) {
+    if ($isWrapped && $shouldShowLines) {
+      return css`
+                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
+                `;
+    }
+    if (!$isOpen && $shouldShowLines) {
+      return css`
+                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
+                `;
+    }
+  }
+  return undefined;
+}}
+    ${_ref5 => {
+  let {
+    $isParentWrapped
+  } = _ref5;
+  return $isParentWrapped && css`
+                padding-left: 17px;
+            `;
+}}
+    ${_ref6 => {
+  let {
+    $isWrapped
+  } = _ref6;
+  return !$isWrapped && css`
+                margin-top: 10px;
+            `;
+}}
+    ${_ref7 => {
+  let {
+    $isWrapped,
+    $shouldHideBackground,
+    theme
+  } = _ref7;
+  return !$isWrapped && !$shouldHideBackground && css`
+                &:hover {
+                    background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+                }
+            `;
+}};
+`;
+//# sourceMappingURL=Accordion.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","$shouldHideBottomLine","undefined","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import {motion} from 'framer-motion';\nimport styled, {css} from 'styled-components';\nimport type {WithTheme} from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    $isOpen: boolean;\n    $isParentWrapped?: boolean;\n    $isWrapped?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldHideBackground?: boolean;\n    $shouldShowLines?: boolean;\n    $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n    ${({\n           $isOpen,\n           $isWrapped,\n           $shouldForceBackground,\n           $shouldHideBackground,\n           theme,\n       }: StyledMotionAccordionProps) =>\n            ($isOpen || $shouldForceBackground) &&\n            !$isWrapped &&\n            !$shouldHideBackground &&\n            css`\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n                border-radius: ${theme.cardBorderRadius}px;\n                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n            `}\n\n    ${({theme}: StyledMotionAccordionProps) =>\n            theme.accordionLines &&\n            css`\n                border-bottom: 1px solid transparent;\n            `}\n\n    margin-bottom: ${({$isOpen, $isWrapped}: StyledMotionAccordionProps) =>\n            $isOpen && !$isWrapped ? '30px' : '0px'};\n    transition: background-color 0.3s ease,\n    border-bottom-color 0.3s ease,\n    border-radius 0.3s ease,\n    box-shadow 0.3s ease,\n    margin-bottom 0.3s ease;\n    will-change: unset !important;\n\n    ${({\n           $isOpen,\n           $isWrapped,\n           $shouldForceBackground,\n           $shouldShowLines,\n           $shouldHideBottomLine,\n           theme,\n       }: StyledMotionAccordionProps) => {\n        if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n\n        if (theme.accordionLines) {\n            if ($isWrapped && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            if (!$isOpen && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n        }\n\n        return undefined;\n    }}\n    ${({$isParentWrapped}: StyledMotionAccordionProps) =>\n            $isParentWrapped &&\n            css`\n                padding-left: 17px;\n            `}\n    ${({$isWrapped}: StyledMotionAccordionProps) =>\n            !$isWrapped &&\n            css`\n                margin-top: 10px;\n            `}\n    ${({$isWrapped, $shouldHideBackground, theme}: StyledMotionAccordionProps) =>\n            !$isWrapped &&\n            !$shouldHideBackground &&\n            css`\n                &:hover {\n                    background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n                }\n            `};\n`;\n"],"mappings":"AAAA,SAAQA,MAAM,QAAO,eAAe;AACpC,OAAOC,MAAM,IAAGC,GAAG,QAAO,mBAAmB;AAa7C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAMC,IAAA;EAAA,IAAC;IACIC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACxB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACf,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF,iCAAiCD,KAAK,CAACE,gBAAgB;AACvD,wDAAwDF,KAAK,CAACG,UAAU;AACxE,aAAa;AAAA;AACb;AACA,MAAMC,KAAA;EAAA,IAAC;IAACJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAC9BJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACf;AACA,aAAa;AAAA;AACb;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAACV,OAAO;IAAEC;EAAsC,CAAC,GAAAS,KAAA;EAAA,OAC3DV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAOmC;EAAA,IAPlC;IACIX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBC,qBAAqB;IACrBT;EACwB,CAAC,GAAAO,KAAA;EAC5B,IAAIT,sBAAsB,IAAIW,qBAAqB,EAAE,OAAOC,SAAS;EAErE,IAAIV,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;IAEA,IAAI,CAACJ,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;EACJ;EAEA,OAAOU,SAAS;AACpB,CAAC;AACL,MAAMC,KAAA;EAAA,IAAC;IAACC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OACzCC,gBAAgB,IAChBpB,GAAG;AACf;AACA,aAAa;AAAA;AACb,MAAMqB,KAAA;EAAA,IAAC;IAAChB;EAAsC,CAAC,GAAAgB,KAAA;EAAA,OACnC,CAAChB,UAAU,IACXL,GAAG;AACf;AACA,aAAa;AAAA;AACb,MAAMsB,KAAA;EAAA,IAAC;IAACjB,UAAU;IAAEE,qBAAqB;IAAEC;EAAiC,CAAC,GAAAc,KAAA;EAAA,OACjE,CAACjB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACf;AACA,6CAA6CQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AAC7F;AACA,aAAa;AAAA;AACb,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/accordion-body/AccordionBody.js

@@ -0,0 +1,48 @@
+import { getDevice } from 'chayns-api';
+import React, { useMemo } from 'react';
+import { AccordionGroupContext } from '../accordion-group/AccordionGroup';
+import { StyledMotionAccordionBody } from './AccordionBody.styles';
+const AccordionBody = _ref => {
+  let {
+    children,
+    maxHeight,
+    onScroll,
+    shouldHideBody,
+    onAnimationComplete
+  } = _ref;
+  const {
+    browser
+  } = getDevice();
+  const AccordionGroupContextProviderValue = useMemo(() => ({
+    openAccordionUuid: undefined
+  }), []);
+  return /*#__PURE__*/React.createElement(StyledMotionAccordionBody, {
+    animate: {
+      height: shouldHideBody ? '0' : 'auto',
+      opacity: shouldHideBody ? 0 : 1
+    },
+    className: "beta-chayns-accordion-body",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    $maxHeight: maxHeight,
+    $browser: browser?.name,
+    onAnimationComplete: onAnimationComplete,
+    onScroll: onScroll,
+    transition: {
+      opacity: {
+        duration: 0.1
+      }
+    }
+  }, /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
+    value: AccordionGroupContextProviderValue
+  }, children));
+};
+AccordionBody.displayName = 'AccordionBody';
+export default AccordionBody;
+//# sourceMappingURL=AccordionBody.js.map

package/lib/esm/components/accordion/accordion-body/AccordionBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","_ref","children","maxHeight","onScroll","shouldHideBody","onAnimationComplete","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","transition","duration","Provider","value","displayName"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n    /**\n     * The elements that should be shown inside the body.\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight: AccordionProps['bodyMaxHeight'];\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the body should be shown.\n     */\n    shouldHideBody: boolean;\n\n    onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldHideBody,\n    onAnimationComplete,\n}) => {\n    const { browser } = getDevice();\n\n    const AccordionGroupContextProviderValue = useMemo(\n        () => ({ openAccordionUuid: undefined }),\n        [],\n    );\n\n    return (\n        <StyledMotionAccordionBody\n            animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n            className=\"beta-chayns-accordion-body\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            $maxHeight={maxHeight}\n            $browser={browser?.name}\n            onAnimationComplete={onAnimationComplete}\n            onScroll={onScroll}\n            transition={{ opacity: { duration: 0.1 } }}\n        >\n            <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n                {children}\n            </AccordionGroupContext.Provider>\n        </StyledMotionAccordionBody>\n    );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAA4BC,OAAO,QAAQ,OAAO;AAE9D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,yBAAyB,QAAQ,wBAAwB;AAuBlE,MAAMC,aAAqC,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC3CC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM;IAAEM;EAAQ,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE/B,MAAMa,kCAAkC,GAAGX,OAAO,CAC9C,OAAO;IAAEY,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACZ,yBAAyB;IACtBa,OAAO,EAAE;MAAEC,MAAM,EAAER,cAAc,GAAG,GAAG,GAAG,MAAM;MAAES,OAAO,EAAET,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFU,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAEf,SAAU;IACtBgB,QAAQ,EAAEZ,OAAO,EAAEa,IAAK;IACxBd,mBAAmB,EAAEA,mBAAoB;IACzCF,QAAQ,EAAEA,QAAS;IACnBiB,UAAU,EAAE;MAAEP,OAAO,EAAE;QAAEQ,QAAQ,EAAE;MAAI;IAAE;EAAE,gBAE3C1B,KAAA,CAAAe,aAAA,CAACb,qBAAqB,CAACyB,QAAQ;IAACC,KAAK,EAAEhB;EAAmC,GACrEN,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDF,aAAa,CAACyB,WAAW,GAAG,eAAe;AAE3C,eAAezB,aAAa","ignoreList":[]}

package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js

@@ -0,0 +1,46 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionAccordionBody = styled(motion.div)`
+    overflow: hidden;
+
+    ${_ref => {
+  let {
+    $maxHeight
+  } = _ref;
+  return typeof $maxHeight === 'number' && css`
+            max-height: ${$maxHeight}px;
+            overflow-y: scroll;
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref2 => {
+  let {
+    $browser,
+    theme
+  } = _ref2;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=AccordionBody.styles.js.map

package/lib/esm/components/accordion/accordion-body/AccordionBody.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n    $maxHeight?: number;\n    $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    overflow: hidden;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"AACA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACb,OAAOC,UAAU,KAAK,QAAQ,IAC9BJ,GAAG;AACX,0BAA0BI,UAAU;AACpC;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAsC,CAAC,GAAAF,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBN,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/accordion-content/AccordionContent.js

@@ -0,0 +1,31 @@
+import { getDevice } from 'chayns-api';
+import React from 'react';
+import { AccordionContext } from '../Accordion';
+import { StyledAccordionContent } from './AccordionContent.styles';
+const AccordionContent = _ref => {
+  let {
+    children,
+    maxHeight,
+    onScroll,
+    shouldPreventBottomSpace = false
+  } = _ref;
+  const {
+    browser
+  } = getDevice();
+  return /*#__PURE__*/React.createElement(AccordionContext.Consumer, null, _ref2 => {
+    let {
+      isWrapped
+    } = _ref2;
+    return /*#__PURE__*/React.createElement(StyledAccordionContent, {
+      className: "beta-chayns-accordion-content",
+      $isWrapped: isWrapped,
+      $browser: browser?.name,
+      $maxHeight: maxHeight,
+      onScroll: onScroll,
+      $shouldPreventBottomSpace: shouldPreventBottomSpace
+    }, children);
+  });
+};
+AccordionContent.displayName = 'AccordionContent';
+export default AccordionContent;
+//# sourceMappingURL=AccordionContent.js.map

package/lib/esm/components/accordion/accordion-content/AccordionContent.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.js","names":["getDevice","React","AccordionContext","StyledAccordionContent","AccordionContent","_ref","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","createElement","Consumer","_ref2","isWrapped","className","$isWrapped","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent } from 'react';\nimport { AccordionContext } from '../Accordion';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight?: number;\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the bottom space should be removed.\n     */\n    shouldPreventBottomSpace?: boolean;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldPreventBottomSpace = false,\n}) => {\n    const { browser } = getDevice();\n\n    return (\n        <AccordionContext.Consumer>\n            {({ isWrapped }) => (\n                <StyledAccordionContent\n                    className=\"beta-chayns-accordion-content\"\n                    $isWrapped={isWrapped}\n                    $browser={browser?.name}\n                    $maxHeight={maxHeight}\n                    onScroll={onScroll}\n                    $shouldPreventBottomSpace={shouldPreventBottomSpace}\n                >\n                    {children}\n                </StyledAccordionContent>\n            )}\n        </AccordionContext.Consumer>\n    );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,MAAkC,OAAO;AACrD,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,sBAAsB,QAAQ,2BAA2B;AAqBlE,MAAMC,gBAA2C,GAAGC,IAAA,IAK9C;EAAA,IAL+C;IACjDC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,wBAAwB,GAAG;EAC/B,CAAC,GAAAJ,IAAA;EACG,MAAM;IAAEK;EAAQ,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE/B,oBACIC,KAAA,CAAAU,aAAA,CAACT,gBAAgB,CAACU,QAAQ,QACrBC,KAAA;IAAA,IAAC;MAAEC;IAAU,CAAC,GAAAD,KAAA;IAAA,oBACXZ,KAAA,CAAAU,aAAA,CAACR,sBAAsB;MACnBY,SAAS,EAAC,+BAA+B;MACzCC,UAAU,EAAEF,SAAU;MACtBG,QAAQ,EAAEP,OAAO,EAAEQ,IAAK;MACxBC,UAAU,EAAEZ,SAAU;MACtBC,QAAQ,EAAEA,QAAS;MACnBY,yBAAyB,EAAEX;IAAyB,GAEnDH,QACmB,CAAC;EAAA,CAEN,CAAC;AAEpC,CAAC;AAEDF,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AAEjD,eAAejB,gBAAgB","ignoreList":[]}

package/lib/esm/components/accordion/accordion-content/AccordionContent.styles.js

@@ -0,0 +1,65 @@
+import styled, { css } from 'styled-components';
+export const StyledAccordionContent = styled.div`
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.text;
+}};
+    padding: ${_ref2 => {
+  let {
+    $isWrapped
+  } = _ref2;
+  return $isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px';
+}};
+
+    ${_ref3 => {
+  let {
+    $shouldPreventBottomSpace
+  } = _ref3;
+  return $shouldPreventBottomSpace && css`
+            padding-bottom: 0;
+        `;
+}}
+
+    ${_ref4 => {
+  let {
+    $maxHeight
+  } = _ref4;
+  return typeof $maxHeight === 'number' && css`
+            max-height: ${$maxHeight}px;
+            overflow-y: scroll;
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref5 => {
+  let {
+    $browser,
+    theme
+  } = _ref5;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=AccordionContent.styles.js.map

package/lib/esm/components/accordion/accordion-content/AccordionContent.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionContent.styles.js","names":["styled","css","StyledAccordionContent","div","_ref","theme","text","_ref2","$isWrapped","_ref3","$shouldPreventBottomSpace","_ref4","$maxHeight","_ref5","$browser"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAccordionContentProps = WithTheme<{\n    $isWrapped?: boolean;\n    $maxHeight?: number;\n    $browser: Browser | 'bot' | null | undefined;\n    $shouldPreventBottomSpace: boolean;\n}>;\n\nexport const StyledAccordionContent = styled.div<StyledAccordionContentProps>`\n    color: ${({ theme }: StyledAccordionContentProps) => theme.text};\n    padding: ${({ $isWrapped }) => ($isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px')};\n\n    ${({ $shouldPreventBottomSpace }) =>\n        $shouldPreventBottomSpace &&\n        css`\n            padding-bottom: 0;\n        `}\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledAccordionContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,sBAAsB,GAAGF,MAAM,CAACG,GAAgC;AAC7E,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACnE,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,iBAAiB,GAAG,gBAAgB;AAAA,CAAC;AACtF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAC5BC,yBAAyB,IACzBT,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACb,OAAOC,UAAU,KAAK,QAAQ,IAC9BX,GAAG;AACX,0BAA0BW,UAAU;AACpC;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAET;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAC/CC,QAAQ,KAAK,SAAS,GAChBb,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}