@chayns-components/core 5.0.0-beta.821 → 5.0.0-beta.822

package/lib/cjs/components/list/list-item/ListItem.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _framerMotion = require("framer-motion");
 var _react = _interopRequireWildcard(require("react"));
 var _uuid = require("../../../hooks/uuid");
+var _Accordion = require("../../accordion/Accordion");
 var _AreaContextProvider = _interopRequireDefault(require("../../area-provider/AreaContextProvider"));
 var _List = require("../List");
 var _ListItemBody = _interopRequireDefault(require("./list-item-body/ListItemBody"));
@@ -41,6 +42,9 @@ const ListItem = ({
     openItemUuid,
     updateOpenItemUuid
   } = (0, _react.useContext)(_List.ListContext);
+  const {
+    isWrapped: isParentAccordionWrapped
+  } = (0, _react.useContext)(_Accordion.AccordionContext);
   const uuid = (0, _uuid.useUuid)();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -85,6 +89,7 @@ const ListItem = ({
     key: `list-item-${uuid}`,
     $isClickable: isClickable,
     $isOpen: isItemOpen,
+    $isParentAccordionWrapped: isParentAccordionWrapped,
     $isWrapped: isWrapped,
     $shouldShowSeparatorBelow: shouldShowSeparatorBelow
   }, /*#__PURE__*/_react.default.createElement(_ListItemHead.default, {

package/lib/cjs/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,uBAAA,CAAAF,OAAA;AASA,IAAAG,KAAA,GAAAH,OAAA;AAEA,IAAAI,oBAAA,GAAAC,sBAAA,CAAAL,OAAA;AACA,IAAAM,KAAA,GAAAN,OAAA;AACA,IAAAO,aAAA,GAAAF,sBAAA,CAAAL,OAAA;AACA,IAAAQ,aAAA,GAAAH,sBAAA,CAAAL,OAAA;AACA,IAAAS,SAAA,GAAAT,OAAA;AAAyD,SAAAK,uBAAAK,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAAA,SAAAG,yBAAAH,CAAA,6BAAAI,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAD,wBAAA,YAAAA,CAAAH,CAAA,WAAAA,CAAA,GAAAM,CAAA,GAAAD,CAAA,KAAAL,CAAA;AAAA,SAAAR,wBAAAQ,CAAA,EAAAK,CAAA,SAAAA,CAAA,IAAAL,CAAA,IAAAA,CAAA,CAAAC,UAAA,SAAAD,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAE,OAAA,EAAAF,CAAA,QAAAM,CAAA,GAAAH,wBAAA,CAAAE,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAC,GAAA,CAAAP,CAAA,UAAAM,CAAA,CAAAE,GAAA,CAAAR,CAAA,OAAAS,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAf,CAAA,oBAAAe,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAjB,CAAA,EAAAe,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAd,CAAA,EAAAe,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAf,CAAA,CAAAe,CAAA,YAAAN,CAAA,CAAAP,OAAA,GAAAF,CAAA,EAAAM,CAAA,IAAAA,CAAA,CAAAa,GAAA,CAAAnB,CAAA,EAAAS,CAAA,GAAAA,CAAA;AAuFzD,MAAMW,QAA2B,GAAGA,CAAC;EACjCC,QAAQ;EACRC,SAAS;EACTC,KAAK;EACLC,MAAM;EACNC,aAAa;EACbC,MAAM;EACNC,OAAO;EACPC,WAAW;EACXC,YAAY;EACZC,aAAa;EACbC,+BAA+B;EAC/BC,mBAAmB;EACnBC,QAAQ;EACRC,0BAA0B;EAC1BC,wBAAwB,GAAG,KAAK;EAChCC,KAAK;EACLC;AACJ,CAAC,KAAK;EACF,MAAM;IACFC,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAG,IAAAC,iBAAU,EAACC,iBAAW,CAAC;EAE3B,MAAMC,IAAI,GAAG,IAAAC,aAAO,EAAC,CAAC;EAEtB,MAAMC,YAAY,GAAG1B,QAAQ,KAAK2B,SAAS;EAC3C,MAAMC,UAAU,GAAGvB,MAAM,IAAIe,YAAY,KAAKI,IAAI;EAElD,MAAMK,eAAe,GAAG,IAAAC,kBAAW,EAC9BC,KAAK,IAAK;IACP,IAAIL,YAAY,EAAE;MACdL,kBAAkB,CAACG,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOlB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACyB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACL,YAAY,EAAEpB,OAAO,EAAEe,kBAAkB,EAAEG,IAAI,CACpD,CAAC;EAED,IAAAQ,gBAAS,EAAC,MAAM;IACZ,IAAIN,YAAY,EAAE;MACd;MACA;MACA,OAAOT,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOU,SAAS;EACpB,CAAC,EAAE,CAACV,4BAA4B,EAAES,YAAY,CAAC,CAAC;EAEhD,IAAAM,gBAAS,EAAC,MAAM;IACZ,IAAI5B,aAAa,EAAE;MACfiB,kBAAkB,CAACG,IAAI,EAAE;QAAES,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAAC7B,aAAa,EAAEiB,kBAAkB,EAAEG,IAAI,CAAC,CAAC;EAE7C,MAAMU,WAAW,GAAG,OAAO5B,OAAO,KAAK,UAAU,IAAIoB,YAAY;EAEjE,oBACIxD,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAACzD,SAAA,CAAA0D,oBAAoB;IACjBC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAE,aAAanB,IAAI,EAAG;IACzBoB,YAAY,EAAEV,WAAY;IAC1BW,OAAO,EAAEjB,UAAW;IACpBkB,UAAU,EAAE3B,SAAU;IACtB4B,yBAAyB,EAAEjC;EAAyB,gBAEpD5C,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC1D,aAAA,CAAAI,OAAY;IACToB,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfe,mBAAmB,EAAEA,mBAAoB;IACzCQ,YAAY,EAAEA,YAAa;IAC3BrB,MAAM,EAAEuB,UAAW;IACnBpB,YAAY,EAAEA,YAAa;IAC3BF,OAAO,EAAE4B,WAAW,GAAGL,eAAe,GAAGF,SAAU;IACnDpB,WAAW,EAAEA,WAAY;IACzBE,aAAa,EAAEA,aAAc;IAC7BC,+BAA+B,EAAEA,+BAAgC;IACjEC,mBAAmB,EAAEA,mBAAoB;IACzCC,QAAQ,EAAEA,QAAS;IACnBC,0BAA0B,EAAEA,0BAA2B;IACvDE,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACF9C,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAACnE,aAAA,CAAAgF,eAAe;IAACN,OAAO,EAAE;EAAM,GAC3BhB,YAAY,IAAIE,UAAU,iBACvB1D,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC3D,aAAA,CAAAK,OAAY;IAACoE,EAAE,EAAEzB;EAAK,gBACnBtD,MAAA,CAAAW,OAAA,CAAAsD,aAAA,CAAC9D,oBAAA,CAAAQ,OAAmB,QAAEmB,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDD,QAAQ,CAACmD,WAAW,GAAG,UAAU;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAvE,OAAA,GAEnBkB,QAAQ","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_uuid","_Accordion","_AreaContextProvider","_interopRequireDefault","_List","_ListItemBody","_ListItemHead","_ListItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItem","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","useContext","ListContext","isParentAccordionWrapped","AccordionContext","uuid","useUuid","isExpandable","undefined","isItemOpen","handleHeadClick","useCallback","event","useEffect","shouldOnlyOpen","isClickable","createElement","StyledMotionListItem","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isParentAccordionWrapped","$isWrapped","$shouldShowSeparatorBelow","AnimatePresence","id","displayName","_default","exports"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isParentAccordionWrapped={isParentAccordionWrapped}\n            $isWrapped={isWrapped}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/list/list-item/ListItem.styles.js

@@ -19,6 +19,12 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
     overflow: hidden;
     transition: background-color 0.3s ease;
 
+    ${({
+  $isParentAccordionWrapped
+}) => $isParentAccordionWrapped && (0, _styledComponents.css)`
+            padding-left: 8px;
+        `}
+
     ${({
   $isClickable,
   theme
@@ -29,9 +35,11 @@ const StyledMotionListItem = exports.StyledMotionListItem = (0, _styledComponent
         `}
     
     ${({
+  $isOpen,
+  $isWrapped,
   $shouldShowSeparatorBelow,
   theme
-}) => ($shouldShowSeparatorBelow || theme.accordionLines) && (0, _styledComponents.css)`
+}) => ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped) && theme.accordionLines) && (0, _styledComponents.css)`
             &&:not(:last-child) {
                 border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                     rgba(${theme['headline-rgb']}, 0.5);

package/lib/cjs/components/list/list-item/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isClickable","$shouldShowSeparatorBelow","accordionLines","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow || theme.accordionLines) &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                    rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,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,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAUzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,YAAY;EAAEH;AAAM,CAAC,KACtBG,YAAY,IACZ,IAAAF,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEE,yBAAyB;EAAEJ;AAA2B,CAAC,KACxD,CAACI,yBAAyB,IAAIJ,KAAK,CAACK,cAAc,KAClD,IAAAJ,qBAAG;AACX;AACA,iCAAiCG,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BJ,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACbA,UAAU,IACV,IAAAL,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledMotionListItem","exports","styled","motion","div","$isOpen","theme","css","cardBackgroundOpacity","$isParentAccordionWrapped","$isClickable","$isWrapped","$shouldShowSeparatorBelow","accordionLines"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isParentAccordionWrapped: boolean;\n    $isWrapped: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isParentAccordionWrapped }: StyledListItemProps) =>\n        $isParentAccordionWrapped &&\n        css`\n            padding-left: 8px;\n        `}\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ $isOpen, $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow || ((!$isOpen || $isWrapped) && theme.accordionLines)) &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                    rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,aAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,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,SAAAF,wBAAAE,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAWzC,MAAMW,oBAAoB,GAAAC,OAAA,CAAAD,oBAAA,GAAG,IAAAE,yBAAM,EAACC,oBAAM,CAACC,GAAG,CAAsB;AAC3E,MAAM,CAAC;EAAEC,OAAO;EAAEC;AAAM,CAAC,KACjBD,OAAO,IACP,IAAAE,qBAAG;AACX,qCAAqCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACrF,SAAS;AACT;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAA+C,CAAC,KACjDA,yBAAyB,IACzB,IAAAF,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEG,YAAY;EAAEJ;AAAM,CAAC,KACtBI,YAAY,IACZ,IAAAH,qBAAG;AACX;AACA,yCAAyCD,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACE,qBAAqB;AACzF;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEH,OAAO;EAAEM,UAAU;EAAEC,yBAAyB;EAAEN;AAA2B,CAAC,KAC7E,CAACM,yBAAyB,IAAK,CAAC,CAACP,OAAO,IAAIM,UAAU,KAAKL,KAAK,CAACO,cAAe,KAChF,IAAAN,qBAAG;AACX;AACA,iCAAiCK,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEK;AAAW,CAAC,KACbA,UAAU,IACV,IAAAJ,qBAAG;AACX;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/slider/Slider.js

@@ -147,7 +147,12 @@ const Slider = ({
    */
   const handleInputChange = (0, _react.useCallback)(event => {
     void (0, _chaynsApi.setRefreshScrollEnabled)(false);
-    const newValue = Number(event.target.value);
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    }
     if (interval) {
       handleControlFromSlider(event);
       return;
@@ -156,7 +161,7 @@ const Slider = ({
     if (onChange) {
       onChange(newValue);
     }
-  }, [handleControlFromSlider, interval, onChange]);
+  }, [handleControlFromSlider, interval, maxValue, minValue, onChange]);
   const fromSliderThumbPosition = (0, _react.useMemo)(() => {
     if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
       return (0, _slider.calculateGradientOffset)({
@@ -230,8 +235,8 @@ const Slider = ({
     type: "range",
     value: fromValue,
     step: steps,
-    max: maxValue,
-    min: minValue,
+    max: maxValue % steps === 0 ? maxValue : maxValue + steps - maxValue % steps,
+    min: minValue % steps === 0 ? minValue : minValue - minValue % steps,
     onTouchStart: handleTouchStart,
     onTouchEnd: handleTouchEnd,
     onChange: handleInputChange,

package/lib/cjs/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 40,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 40,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_useElementSize","_slider","_Slider","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Slider","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","useState","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","useRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","useElementSize","theme","useTheme","useEffect","getThumbMaxWidth","maxNumber","handleMouseUp","useCallback","_fromSliderRef$curren","_toSliderRef$current","setRefreshScrollEnabled","from","Number","current","to","undefined","handleControlFromSlider","event","target","fillSlider","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","useMemo","calculateGradientOffset","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","calculatePopupPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","_fromSliderRef$curren2","_toSliderRef$current2","createElement","StyledSlider","ref","StyledSliderInput","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","StyledSliderThumb","$position","$isBigSlider","StyledSliderThumbLabel","$width","displayName","_default","exports"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            let newValue = Number(event.target.value);\n\n            if (newValue > maxValue) {\n                newValue = maxValue;\n            } else if (newValue < minValue) {\n                newValue = minValue;\n            }\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, maxValue, minValue, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 40,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 40,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue % steps === 0 ? maxValue : maxValue + steps - (maxValue % steps)}\n                    min={minValue % steps === 0 ? minValue : minValue - (minValue % steps)}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/slider/Slider.styles.js

@@ -106,7 +106,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
 }) => ({
   style: {
     minWidth: `${$width}px`,
-    top: `-${$isBigSlider ? 45 : 35}px`,
+    top: `-${$isBigSlider ? 56 : 48}px`,
     left: `${$position}px`
   }
 }))`
@@ -123,7 +123,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 8px;
+    padding: 16px;
     white-space: nowrap;
 
     transition: top 0.2s ease 0s;
@@ -132,7 +132,7 @@ const StyledSliderThumbLabel = exports.StyledSliderThumbLabel = _styledComponent
         background-color: inherit;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         border-right: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
         content: '';
         height: 14px;
         position: absolute;

package/lib/cjs/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 45 : 35}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireDefault","e","__esModule","default","StyledSlider","exports","styled","div","StyledSliderInput","motion","input","attrs","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","$width","minWidth","top"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 56 : 48}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.js

@@ -1,6 +1,7 @@
 import { AnimatePresence } from 'framer-motion';
 import React, { useCallback, useContext, useEffect } from 'react';
 import { useUuid } from '../../../hooks/uuid';
+import { AccordionContext } from '../../accordion/Accordion';
 import AreaContextProvider from '../../area-provider/AreaContextProvider';
 import { ListContext } from '../List';
 import ListItemBody from './list-item-body/ListItemBody';
@@ -33,6 +34,9 @@ const ListItem = _ref => {
     openItemUuid,
     updateOpenItemUuid
   } = useContext(ListContext);
+  const {
+    isWrapped: isParentAccordionWrapped
+  } = useContext(AccordionContext);
   const uuid = useUuid();
   const isExpandable = children !== undefined;
   const isItemOpen = isOpen ?? openItemUuid === uuid;
@@ -77,6 +81,7 @@ const ListItem = _ref => {
     key: `list-item-${uuid}`,
     $isClickable: isClickable,
     $isOpen: isItemOpen,
+    $isParentAccordionWrapped: isParentAccordionWrapped,
     $isWrapped: isWrapped,
     $shouldShowSeparatorBelow: shouldShowSeparatorBelow
   }, /*#__PURE__*/React.createElement(ListItemHead, {

package/lib/esm/components/list/list-item/ListItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isWrapped","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","images","isDefaultOpen","isOpen","onClick","onLongPress","leftElements","rightElements","shouldHideImageOrIconBackground","shouldHideIndicator","subtitle","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","uuid","isExpandable","undefined","isItemOpen","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","$isClickable","$isOpen","$isParentAccordionWrapped","$isWrapped","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport type { IListItemRightElements } from '../../../types/list';\nimport { AccordionContext } from '../../accordion/Accordion';\nimport AreaContextProvider from '../../area-provider/AreaContextProvider';\nimport { ListContext } from '../List';\nimport ListItemBody from './list-item-body/ListItemBody';\nimport ListItemHead from './list-item-head/ListItemHead';\nimport { StyledMotionListItem } from './ListItem.styles';\n\nexport type ListItemElements = [ReactNode, ...ReactNode[]];\n\nexport type ListItemProps = {\n    /**\n     * The content of the `ListItem` body. When the `ListItem` has children,\n     * it can be opened and also gets an icon as an indicator automatically.\n     */\n    children?: ReactNode;\n    /**\n     * Element that is displayed when hovering over the `ListItem` on the right\n     * side. On mobile devices, this element is not displayed.\n     */\n    hoverItem?: ReactNode;\n    /**\n     * The FontAwesome or tobit icons to render like an image on the left side\n     * of the header. Multiple icons are stacked. See the `Icon` component\n     * documentation for more information.\n     */\n    icons?: string[];\n    /**\n     * A list of image URLs that are displayed on the left side of the header.\n     * If multiple URLs are passed, the image is assembled from the first three\n     * image URLs as a puzzle.\n     */\n    images?: string[];\n    /**\n     * This can be used to automatically expand the `ListItem` during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This overrides the internal opening state of the item and makes it controlled.\n     */\n    isOpen?: boolean;\n    /**\n     * Function to be executed when the header of the `ListItem` was clicked\n     */\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    /**\n     * Function to be executed when the header of the `ListItem` is pressed for\n     * 400 milliseconds.\n     */\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    /**\n     * Elements that are displayed on the left side of the header. If multiple\n     * elements are specified, they are displayed one aside the other.\n     */\n    leftElements?: ListItemElements;\n    /**\n     * Elements that are displayed on the right side of the header. If multiple\n     * elements are specified, they are displayed one below the other.\n     */\n    rightElements?: IListItemRightElements;\n    /**\n     * Whether the background and border of the shape on which the image or icon of the element is displayed should be\n     * hidden.\n     */\n    shouldHideImageOrIconBackground?: boolean;\n    /**\n     * If the `ListItem` is expandable, the indicator is displayed on the left\n     * side of the header. If this property is set to true, the indicator is\n     * hidden.\n     */\n    shouldHideIndicator?: boolean;\n    /**\n     * Whether the image or icon should be displayed in a round shape. This should be always used for images of persons.\n     */\n    shouldShowRoundImageOrIcon?: boolean;\n    /**\n     * Whether a separator should be displayed below this item. In this case, the border is displayed thicker than normal.\n     */\n    shouldShowSeparatorBelow?: boolean;\n    /**\n     * Subtitle of the `ListItem` displayed in the head below the title\n     */\n    subtitle?: ReactNode;\n    /**\n     * Title of the `ListItem` displayed in the head\n     */\n    title: ReactNode;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst ListItem: FC<ListItemProps> = ({\n    children,\n    hoverItem,\n    icons,\n    images,\n    isDefaultOpen,\n    isOpen,\n    onClick,\n    onLongPress,\n    leftElements,\n    rightElements,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator,\n    subtitle,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    title,\n    titleElement,\n}) => {\n    const {\n        incrementExpandableItemCount,\n        isAnyItemExpandable,\n        isWrapped,\n        openItemUuid,\n        updateOpenItemUuid,\n    } = useContext(ListContext);\n\n    const { isWrapped: isParentAccordionWrapped } = useContext(AccordionContext);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const handleHeadClick = useCallback<MouseEventHandler<HTMLDivElement>>(\n        (event) => {\n            if (isExpandable) {\n                updateOpenItemUuid(uuid);\n            }\n\n            if (typeof onClick === 'function') {\n                onClick(event);\n            }\n        },\n        [isExpandable, onClick, updateOpenItemUuid, uuid],\n    );\n\n    useEffect(() => {\n        if (isExpandable) {\n            // The incrementExpandableItemCount function returns an cleanup\n            // function to decrement expandableItemCount if component unmounts\n            return incrementExpandableItemCount();\n        }\n\n        return undefined;\n    }, [incrementExpandableItemCount, isExpandable]);\n\n    useEffect(() => {\n        if (isDefaultOpen) {\n            updateOpenItemUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenItemUuid, uuid]);\n\n    const isClickable = typeof onClick === 'function' || isExpandable;\n\n    return (\n        <StyledMotionListItem\n            animate={{ height: 'auto', opacity: 1 }}\n            className=\"beta-chayns-list-item\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            key={`list-item-${uuid}`}\n            $isClickable={isClickable}\n            $isOpen={isItemOpen}\n            $isParentAccordionWrapped={isParentAccordionWrapped}\n            $isWrapped={isWrapped}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                subtitle={subtitle}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                title={title}\n                titleElement={titleElement}\n            />\n            <AnimatePresence initial={false}>\n                {isExpandable && isItemOpen && (\n                    <ListItemBody id={uuid}>\n                        <AreaContextProvider>{children}</AreaContextProvider>\n                    </ListItemBody>\n                )}\n            </AnimatePresence>\n        </StyledMotionListItem>\n    );\n};\n\nListItem.displayName = 'ListItem';\n\nexport default ListItem;\n"],"mappings":"AAAA,SAASA,eAAe,QAAQ,eAAe;AAC/C,OAAOC,KAAK,IAKRC,WAAW,EACXC,UAAU,EACVC,SAAS,QACN,OAAO;AACd,SAASC,OAAO,QAAQ,qBAAqB;AAE7C,SAASC,gBAAgB,QAAQ,2BAA2B;AAC5D,OAAOC,mBAAmB,MAAM,yCAAyC;AACzE,SAASC,WAAW,QAAQ,SAAS;AACrC,OAAOC,YAAY,MAAM,+BAA+B;AACxD,OAAOC,YAAY,MAAM,+BAA+B;AACxD,SAASC,oBAAoB,QAAQ,mBAAmB;AAuFxD,MAAMC,QAA2B,GAAGC,IAAA,IAkB9B;EAAA,IAlB+B;IACjCC,QAAQ;IACRC,SAAS;IACTC,KAAK;IACLC,MAAM;IACNC,aAAa;IACbC,MAAM;IACNC,OAAO;IACPC,WAAW;IACXC,YAAY;IACZC,aAAa;IACbC,+BAA+B;IAC/BC,mBAAmB;IACnBC,QAAQ;IACRC,0BAA0B;IAC1BC,wBAAwB,GAAG,KAAK;IAChCC,KAAK;IACLC;EACJ,CAAC,GAAAjB,IAAA;EACG,MAAM;IACFkB,4BAA4B;IAC5BC,mBAAmB;IACnBC,SAAS;IACTC,YAAY;IACZC;EACJ,CAAC,GAAGhC,UAAU,CAACK,WAAW,CAAC;EAE3B,MAAM;IAAEyB,SAAS,EAAEG;EAAyB,CAAC,GAAGjC,UAAU,CAACG,gBAAgB,CAAC;EAE5E,MAAM+B,IAAI,GAAGhC,OAAO,CAAC,CAAC;EAEtB,MAAMiC,YAAY,GAAGxB,QAAQ,KAAKyB,SAAS;EAC3C,MAAMC,UAAU,GAAGrB,MAAM,IAAIe,YAAY,KAAKG,IAAI;EAElD,MAAMI,eAAe,GAAGvC,WAAW,CAC9BwC,KAAK,IAAK;IACP,IAAIJ,YAAY,EAAE;MACdH,kBAAkB,CAACE,IAAI,CAAC;IAC5B;IAEA,IAAI,OAAOjB,OAAO,KAAK,UAAU,EAAE;MAC/BA,OAAO,CAACsB,KAAK,CAAC;IAClB;EACJ,CAAC,EACD,CAACJ,YAAY,EAAElB,OAAO,EAAEe,kBAAkB,EAAEE,IAAI,CACpD,CAAC;EAEDjC,SAAS,CAAC,MAAM;IACZ,IAAIkC,YAAY,EAAE;MACd;MACA;MACA,OAAOP,4BAA4B,CAAC,CAAC;IACzC;IAEA,OAAOQ,SAAS;EACpB,CAAC,EAAE,CAACR,4BAA4B,EAAEO,YAAY,CAAC,CAAC;EAEhDlC,SAAS,CAAC,MAAM;IACZ,IAAIc,aAAa,EAAE;MACfiB,kBAAkB,CAACE,IAAI,EAAE;QAAEM,cAAc,EAAE;MAAK,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACzB,aAAa,EAAEiB,kBAAkB,EAAEE,IAAI,CAAC,CAAC;EAE7C,MAAMO,WAAW,GAAG,OAAOxB,OAAO,KAAK,UAAU,IAAIkB,YAAY;EAEjE,oBACIrC,KAAA,CAAA4C,aAAA,CAAClC,oBAAoB;IACjBmC,OAAO,EAAE;MAAEC,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAE;IACxCC,SAAS,EAAC,uBAAuB;IACjCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,GAAG,EAAE,aAAaf,IAAI,EAAG;IACzBgB,YAAY,EAAET,WAAY;IAC1BU,OAAO,EAAEd,UAAW;IACpBe,yBAAyB,EAAEnB,wBAAyB;IACpDoB,UAAU,EAAEvB,SAAU;IACtBwB,yBAAyB,EAAE7B;EAAyB,gBAEpD3B,KAAA,CAAA4C,aAAA,CAACnC,YAAY;IACTK,SAAS,EAAEA,SAAU;IACrBC,KAAK,EAAEA,KAAM;IACbC,MAAM,EAAEA,MAAO;IACfe,mBAAmB,EAAEA,mBAAoB;IACzCM,YAAY,EAAEA,YAAa;IAC3BnB,MAAM,EAAEqB,UAAW;IACnBlB,YAAY,EAAEA,YAAa;IAC3BF,OAAO,EAAEwB,WAAW,GAAGH,eAAe,GAAGF,SAAU;IACnDlB,WAAW,EAAEA,WAAY;IACzBE,aAAa,EAAEA,aAAc;IAC7BC,+BAA+B,EAAEA,+BAAgC;IACjEC,mBAAmB,EAAEA,mBAAoB;IACzCC,QAAQ,EAAEA,QAAS;IACnBC,0BAA0B,EAAEA,0BAA2B;IACvDE,KAAK,EAAEA,KAAM;IACbC,YAAY,EAAEA;EAAa,CAC9B,CAAC,eACF7B,KAAA,CAAA4C,aAAA,CAAC7C,eAAe;IAACmD,OAAO,EAAE;EAAM,GAC3Bb,YAAY,IAAIE,UAAU,iBACvBvC,KAAA,CAAA4C,aAAA,CAACpC,YAAY;IAACiD,EAAE,EAAErB;EAAK,gBACnBpC,KAAA,CAAA4C,aAAA,CAACtC,mBAAmB,QAAEO,QAA8B,CAC1C,CAEL,CACC,CAAC;AAE/B,CAAC;AAEDF,QAAQ,CAAC+C,WAAW,GAAG,UAAU;AAEjC,eAAe/C,QAAQ","ignoreList":[]}

package/lib/esm/components/list/list-item/ListItem.styles.js

@@ -15,10 +15,19 @@ export const StyledMotionListItem = styled(motion.div)`
     transition: background-color 0.3s ease;
 
     ${_ref2 => {
+  let {
+    $isParentAccordionWrapped
+  } = _ref2;
+  return $isParentAccordionWrapped && css`
+            padding-left: 8px;
+        `;
+}}
+
+    ${_ref3 => {
   let {
     $isClickable,
     theme
-  } = _ref2;
+  } = _ref3;
   return $isClickable && css`
             &&:hover {
                 background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
@@ -26,12 +35,14 @@ export const StyledMotionListItem = styled(motion.div)`
         `;
 }}
     
-    ${_ref3 => {
+    ${_ref4 => {
   let {
+    $isOpen,
+    $isWrapped,
     $shouldShowSeparatorBelow,
     theme
-  } = _ref3;
-  return ($shouldShowSeparatorBelow || theme.accordionLines) && css`
+  } = _ref4;
+  return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped) && theme.accordionLines) && css`
             &&:not(:last-child) {
                 border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
                     rgba(${theme['headline-rgb']}, 0.5);
@@ -39,10 +50,10 @@ export const StyledMotionListItem = styled(motion.div)`
         `;
 }}}
 
-    ${_ref4 => {
+    ${_ref5 => {
   let {
     $isWrapped
-  } = _ref4;
+  } = _ref5;
   return $isWrapped && css`
             padding-left: 26px;
         `;

package/lib/esm/components/list/list-item/ListItem.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isClickable","_ref3","$shouldShowSeparatorBelow","accordionLines","_ref4","$isWrapped"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isWrapped: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow || theme.accordionLines) &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                    rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEH;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtBC,YAAY,IACZR,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IAAEC,yBAAyB;IAAEL;EAA2B,CAAC,GAAAI,KAAA;EAAA,OACxD,CAACC,yBAAyB,IAAIL,KAAK,CAACM,cAAc,KAClDX,GAAG;AACX;AACA,iCAAiCU,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BL,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMO,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACbC,UAAU,IACVb,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}
+{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isOpen","theme","cardBackgroundOpacity","_ref2","$isParentAccordionWrapped","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","accordionLines","_ref5"],"sources":["../../../../../src/components/list/list-item/ListItem.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemProps = WithTheme<{\n    $isClickable: boolean;\n    $isOpen: boolean;\n    $isParentAccordionWrapped: boolean;\n    $isWrapped: boolean;\n    $shouldShowSeparatorBelow: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    ${({ $isOpen, theme }) =>\n        $isOpen &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isParentAccordionWrapped }: StyledListItemProps) =>\n        $isParentAccordionWrapped &&\n        css`\n            padding-left: 8px;\n        `}\n\n    ${({ $isClickable, theme }) =>\n        $isClickable &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({ $isOpen, $isWrapped, $shouldShowSeparatorBelow, theme }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow || ((!$isOpen || $isWrapped) && theme.accordionLines)) &&\n        css`\n            &&:not(:last-child) {\n                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid\n                    rgba(${theme['headline-rgb']}, 0.5);\n            }\n        `}}\n\n    ${({ $isWrapped }) =>\n        $isWrapped &&\n        css`\n            padding-left: 26px;\n        `}\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E,MAAMC,IAAA;EAAA,IAAC;IAAEC,OAAO;IAAEC;EAAM,CAAC,GAAAF,IAAA;EAAA,OACjBC,OAAO,IACPJ,GAAG;AACX,qCAAqCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA+C,CAAC,GAAAD,KAAA;EAAA,OACjDC,yBAAyB,IACzBR,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAEL;EAAM,CAAC,GAAAI,KAAA;EAAA,OACtBC,YAAY,IACZV,GAAG;AACX;AACA,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMK,KAAA;EAAA,IAAC;IAAEP,OAAO;IAAEQ,UAAU;IAAEC,yBAAyB;IAAER;EAA2B,CAAC,GAAAM,KAAA;EAAA,OAC7E,CAACE,yBAAyB,IAAK,CAAC,CAACT,OAAO,IAAIQ,UAAU,KAAKP,KAAK,CAACS,cAAe,KAChFd,GAAG;AACX;AACA,iCAAiCa,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BR,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEH;EAAW,CAAC,GAAAG,KAAA;EAAA,OACbH,UAAU,IACVZ,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/slider/Slider.js

@@ -139,7 +139,12 @@ const Slider = _ref => {
    */
   const handleInputChange = useCallback(event => {
     void setRefreshScrollEnabled(false);
-    const newValue = Number(event.target.value);
+    let newValue = Number(event.target.value);
+    if (newValue > maxValue) {
+      newValue = maxValue;
+    } else if (newValue < minValue) {
+      newValue = minValue;
+    }
     if (interval) {
       handleControlFromSlider(event);
       return;
@@ -148,7 +153,7 @@ const Slider = _ref => {
     if (onChange) {
       onChange(newValue);
     }
-  }, [handleControlFromSlider, interval, onChange]);
+  }, [handleControlFromSlider, interval, maxValue, minValue, onChange]);
   const fromSliderThumbPosition = useMemo(() => {
     if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {
       return calculateGradientOffset({
@@ -221,8 +226,8 @@ const Slider = _ref => {
     type: "range",
     value: fromValue,
     step: steps,
-    max: maxValue,
-    min: minValue,
+    max: maxValue % steps === 0 ? maxValue : maxValue + steps - maxValue % steps,
+    min: minValue % steps === 0 ? minValue : minValue - minValue % steps,
     onTouchStart: handleTouchStart,
     onTouchEnd: handleTouchEnd,
     onChange: handleInputChange,

package/lib/esm/components/slider/Slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            const newValue = Number(event.target.value);\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 40,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 40,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue}\n                    min={minValue}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Slider.js","names":["setRefreshScrollEnabled","React","useCallback","useEffect","useMemo","useRef","useState","useTheme","useElementSize","calculateGradientOffset","calculatePopupPosition","fillSlider","getThumbMaxWidth","StyledSlider","StyledSliderInput","StyledSliderThumb","StyledSliderThumbLabel","Slider","_ref","maxValue","minValue","value","onSelect","onChange","interval","thumbLabelFormatter","shouldShowThumbLabel","steps","fromValue","setFromValue","toValue","setToValue","thumbWidth","setThumbWidth","isBigSlider","setIsBigSlider","fromSliderRef","toSliderRef","fromSliderThumbRef","toSliderThumbRef","fromSliderThumbContentRef","toSliderThumbContentRef","sliderWrapperRef","sliderWrapperSize","theme","maxNumber","handleMouseUp","from","Number","current","to","undefined","handleControlFromSlider","event","target","toSlider","fromSlider","String","handleControlToSlider","handleInputChange","newValue","fromSliderThumbPosition","max","min","containerWidth","offsetWidth","toSliderThumbPosition","toSliderThumbContentPosition","sliderValue","popupWidth","fromSliderThumbContentPosition","handleTouchStart","handleTouchEnd","createElement","ref","animate","height","initial","exit","$thumbWidth","$isInterval","type","step","onTouchStart","onTouchEnd","onMouseUp","$max","$min","$value","$position","$isBigSlider","$width","displayName"],"sources":["../../../../src/components/slider/Slider.tsx"],"sourcesContent":["import { setRefreshScrollEnabled } from 'chayns-api';\nimport React, { ChangeEvent, FC, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport { useTheme } from 'styled-components';\nimport { useElementSize } from '../../hooks/useElementSize';\nimport {\n    calculateGradientOffset,\n    calculatePopupPosition,\n    fillSlider,\n    getThumbMaxWidth,\n} from '../../utils/slider';\nimport {\n    StyledSlider,\n    StyledSliderInput,\n    StyledSliderThumb,\n    StyledSliderThumbLabel,\n} from './Slider.styles';\n\nexport interface SliderInterval {\n    maxValue: number;\n    minValue: number;\n}\n\nexport type SliderProps = {\n    /**\n     * The range that can be selected with two thumbs..\n     */\n    interval?: SliderInterval;\n    /**\n     * The maximum value of the slider.\n     */\n    maxValue: number;\n    /**\n     * The minimum value of the slider.\n     */\n    minValue: number;\n    /**\n     * Function that will be executed when the value is selected.\n     */\n    onSelect?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Function that will be executed when the value is changed.\n     */\n    onChange?: (value?: number, interval?: SliderInterval) => void;\n    /**\n     * Whether the current value should be displayed inside the slider thumb.\n     */\n    shouldShowThumbLabel?: boolean;\n    /**\n     * The steps of the slider.\n     */\n    steps?: number;\n    /**\n     * A function to format the thumb label.\n     */\n    thumbLabelFormatter?: (value: number) => string;\n    /**\n     * the Value that the slider should have.\n     */\n    value?: number;\n};\n\nconst Slider: FC<SliderProps> = ({\n    maxValue,\n    minValue,\n    value,\n    onSelect,\n    onChange,\n    interval,\n    thumbLabelFormatter,\n    shouldShowThumbLabel = false,\n    steps = 1,\n}) => {\n    const [fromValue, setFromValue] = useState(0);\n    const [toValue, setToValue] = useState(maxValue);\n    const [thumbWidth, setThumbWidth] = useState(20);\n    const [isBigSlider, setIsBigSlider] = useState(false);\n\n    const fromSliderRef = useRef<HTMLInputElement>(null);\n    const toSliderRef = useRef<HTMLInputElement>(null);\n    const fromSliderThumbRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbRef = useRef<HTMLDivElement>(null);\n    const fromSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const toSliderThumbContentRef = useRef<HTMLDivElement>(null);\n    const sliderWrapperRef = useRef<HTMLDivElement>(null);\n\n    const sliderWrapperSize = useElementSize(sliderWrapperRef);\n\n    const theme = useTheme();\n\n    useEffect(() => {\n        if (shouldShowThumbLabel) {\n            setThumbWidth(getThumbMaxWidth({ maxNumber: maxValue, thumbLabelFormatter }));\n        }\n    }, [maxValue, shouldShowThumbLabel, thumbLabelFormatter]);\n\n    /**\n     * This function sets the value\n     */\n    useEffect(() => {\n        if (typeof value !== 'number') {\n            return;\n        }\n\n        if (value >= minValue && value <= maxValue) {\n            setFromValue(value);\n        }\n    }, [maxValue, minValue, value]);\n\n    useEffect(() => {\n        if (fromValue > toValue) {\n            setFromValue(toValue);\n        }\n\n        if (toValue < fromValue) {\n            setToValue(fromValue);\n        }\n    }, [fromValue, toValue]);\n\n    const handleMouseUp = useCallback(() => {\n        void setRefreshScrollEnabled(true);\n\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n    }, [interval, onSelect]);\n\n    const handleControlFromSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setFromValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from > to) {\n                fromSliderRef.current.value = String(to);\n            } else {\n                fromSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    const handleControlToSlider = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            if (!fromSliderRef.current || !toSliderRef.current) {\n                return;\n            }\n\n            setToValue(Number(event.target.value));\n\n            const from = Number(fromSliderRef.current.value);\n            const to = Number(toSliderRef.current.value);\n\n            if (typeof onChange === 'function') {\n                onChange(undefined, { maxValue: to, minValue: from });\n            }\n\n            fillSlider({\n                toSlider: toSliderRef.current,\n                fromSlider: fromSliderRef.current,\n                theme,\n            });\n\n            if (from <= to) {\n                toSliderRef.current.value = String(to);\n            } else {\n                toSliderRef.current.value = String(from);\n            }\n        },\n        [onChange, theme],\n    );\n\n    useEffect(() => {\n        if (!fromSliderRef.current || !toSliderRef.current || !interval) {\n            return;\n        }\n\n        setFromValue(interval.minValue);\n        setToValue(interval.maxValue);\n\n        fromSliderRef.current.value = String(interval.minValue);\n        toSliderRef.current.value = String(interval.maxValue);\n\n        fillSlider({\n            fromSlider: fromSliderRef.current,\n            toSlider: toSliderRef.current,\n            theme,\n        });\n        // Note: interval can´t be in the deps because of rerender\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [theme]);\n\n    /**\n     * This function updates the value\n     */\n    const handleInputChange = useCallback(\n        (event: ChangeEvent<HTMLInputElement>) => {\n            void setRefreshScrollEnabled(false);\n\n            let newValue = Number(event.target.value);\n\n            if (newValue > maxValue) {\n                newValue = maxValue;\n            } else if (newValue < minValue) {\n                newValue = minValue;\n            }\n\n            if (interval) {\n                handleControlFromSlider(event);\n\n                return;\n            }\n\n            setFromValue(newValue);\n\n            if (onChange) {\n                onChange(newValue);\n            }\n        },\n        [handleControlFromSlider, interval, maxValue, minValue, onChange],\n    );\n\n    const fromSliderThumbPosition = useMemo(() => {\n        if (fromSliderRef.current && fromSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: fromValue,\n                thumbWidth: 40,\n                containerWidth: fromSliderRef.current.offsetWidth,\n            });\n        }\n\n        return 0;\n    }, [fromValue, maxValue, minValue, sliderWrapperSize]);\n\n    const toSliderThumbPosition = useMemo(() => {\n        if (toSliderRef.current && toSliderThumbRef.current && sliderWrapperSize) {\n            return calculateGradientOffset({\n                max: maxValue,\n                min: minValue,\n                value: toValue,\n                thumbWidth: 40,\n                containerWidth: toSliderRef.current.offsetWidth,\n            });\n        }\n        return 0;\n    }, [toValue, minValue, maxValue, sliderWrapperSize]);\n\n    const toSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: toValue,\n                popupWidth: thumbWidth,\n            }),\n        [maxValue, minValue, thumbWidth, toValue],\n    );\n\n    const fromSliderThumbContentPosition = useMemo(\n        () =>\n            calculatePopupPosition({\n                min: minValue,\n                max: maxValue,\n                sliderValue: fromValue,\n                popupWidth: thumbWidth,\n            }),\n        [fromValue, maxValue, minValue, thumbWidth],\n    );\n\n    const handleTouchStart = useCallback(() => {\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(true);\n        }\n    }, [shouldShowThumbLabel]);\n\n    const handleTouchEnd = useCallback(() => {\n        const from = Number(fromSliderRef.current?.value);\n        const to = Number(toSliderRef.current?.value);\n\n        if (typeof onSelect === 'function') {\n            onSelect(\n                interval ? undefined : from,\n                interval ? { maxValue: to, minValue: from } : undefined,\n            );\n        }\n\n        if (shouldShowThumbLabel) {\n            setIsBigSlider(false);\n        }\n    }, [interval, onSelect, shouldShowThumbLabel]);\n\n    return useMemo(\n        () => (\n            <StyledSlider ref={sliderWrapperRef}>\n                <StyledSliderInput\n                    animate={{ height: isBigSlider ? 30 : 10 }}\n                    initial={{ height: 10 }}\n                    exit={{ height: 10 }}\n                    $thumbWidth={40}\n                    ref={fromSliderRef}\n                    $isInterval={!!interval}\n                    type=\"range\"\n                    value={fromValue}\n                    step={steps}\n                    max={maxValue % steps === 0 ? maxValue : maxValue + steps - (maxValue % steps)}\n                    min={minValue % steps === 0 ? minValue : minValue - (minValue % steps)}\n                    onTouchStart={handleTouchStart}\n                    onTouchEnd={handleTouchEnd}\n                    onChange={handleInputChange}\n                    onMouseUp={handleMouseUp}\n                    $max={maxValue}\n                    $min={minValue}\n                    $value={fromValue}\n                />\n                <StyledSliderThumb\n                    ref={fromSliderThumbRef}\n                    $position={fromSliderThumbPosition}\n                    $isBigSlider={isBigSlider}\n                >\n                    {shouldShowThumbLabel && (\n                        <StyledSliderThumbLabel\n                            $width={thumbWidth}\n                            $isBigSlider={isBigSlider}\n                            $position={fromSliderThumbContentPosition}\n                            ref={fromSliderThumbContentRef}\n                        >\n                            {typeof thumbLabelFormatter === 'function'\n                                ? thumbLabelFormatter(fromValue)\n                                : fromValue}\n                        </StyledSliderThumbLabel>\n                    )}\n                </StyledSliderThumb>\n                {interval && (\n                    <StyledSliderThumb\n                        ref={toSliderThumbRef}\n                        $position={toSliderThumbPosition}\n                        $isBigSlider={isBigSlider}\n                    >\n                        {shouldShowThumbLabel && (\n                            <StyledSliderThumbLabel\n                                $width={thumbWidth}\n                                $isBigSlider={isBigSlider}\n                                $position={toSliderThumbContentPosition}\n                                ref={toSliderThumbContentRef}\n                            >\n                                {typeof thumbLabelFormatter === 'function'\n                                    ? thumbLabelFormatter(toValue)\n                                    : toValue}\n                            </StyledSliderThumbLabel>\n                        )}\n                    </StyledSliderThumb>\n                )}\n                {interval && (\n                    <StyledSliderInput\n                        animate={{ height: isBigSlider ? 30 : 10 }}\n                        initial={{ height: 10 }}\n                        exit={{ height: 10 }}\n                        $thumbWidth={40}\n                        $max={maxValue}\n                        $min={minValue}\n                        $value={toValue}\n                        ref={toSliderRef}\n                        $isInterval={!!interval}\n                        type=\"range\"\n                        value={toValue}\n                        step={steps}\n                        max={maxValue}\n                        min={minValue}\n                        onTouchStart={handleTouchStart}\n                        onTouchEnd={handleTouchEnd}\n                        onChange={handleControlToSlider}\n                        onMouseUp={handleMouseUp}\n                    />\n                )}\n            </StyledSlider>\n        ),\n        [\n            isBigSlider,\n            interval,\n            fromValue,\n            steps,\n            maxValue,\n            minValue,\n            handleTouchStart,\n            handleTouchEnd,\n            handleInputChange,\n            handleMouseUp,\n            fromSliderThumbPosition,\n            shouldShowThumbLabel,\n            thumbWidth,\n            fromSliderThumbContentPosition,\n            thumbLabelFormatter,\n            toSliderThumbPosition,\n            toSliderThumbContentPosition,\n            toValue,\n            handleControlToSlider,\n        ],\n    );\n};\n\nSlider.displayName = 'Slider';\n\nexport default Slider;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/slider/Slider.styles.js

@@ -107,7 +107,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
   return {
     style: {
       minWidth: `${$width}px`,
-      top: `-${$isBigSlider ? 45 : 35}px`,
+      top: `-${$isBigSlider ? 56 : 48}px`,
       left: `${$position}px`
     }
   };
@@ -125,7 +125,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
     display: flex;
     align-items: center;
     justify-content: center;
-    padding: 0 8px;
+    padding: 16px;
     white-space: nowrap;
 
     transition: top 0.2s ease 0s;
@@ -134,7 +134,7 @@ export const StyledSliderThumbLabel = styled.span.attrs(_ref3 => {
         background-color: inherit;
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         border-right: 1px solid rgba(0, 0, 0, 0.1);
-        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);
+        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);
         content: '';
         height: 14px;
         position: absolute;

package/lib/esm/components/slider/Slider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref3","$width","minWidth","top","_ref4"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 45 : 35}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACD,MAAM,CAACK,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;MACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7Cc,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAAF,KAAA;EAAA,OAAM;IAC9BN,KAAK,EAAE;MACHS,IAAI,EAAE,GAAGF,SAAS,IAAI;MACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;IACpC;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGxB,MAAM,CAACyB,IAAI,CAACpB,KAAK,CACnDqB,KAAA;EAAA,IAAC;IAAEN,SAAS;IAAEC,YAAY;IAAEM;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAM;IACtCb,KAAK,EAAE;MACHe,QAAQ,EAAE,GAAGD,MAAM,IAAI;MACvBE,GAAG,EAAE,IAAIR,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;MACnCC,IAAI,EAAE,GAAGF,SAAS;IACtB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBU,KAAA;EAAA,IAAC;IAAEV;EAAU,CAAC,GAAAU,KAAA;EAAA,OAAKV,SAAS,GAAG,CAAC,CAAC;AAAA;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"Slider.styles.js","names":["motion","styled","StyledSlider","div","StyledSliderInput","input","attrs","_ref","$isInterval","$value","$thumbWidth","$min","$max","theme","style","pointerEvents","width","background","undefined","StyledSliderThumb","_ref2","$position","$isBigSlider","left","height","StyledSliderThumbLabel","span","_ref3","$width","minWidth","top","_ref4"],"sources":["../../../../src/components/slider/Slider.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledSlider = styled.div`\n    width: 100%;\n    height: 30px;\n    cursor: pointer;\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    user-select: none;\n`;\n\ntype StyledSliderInputProps = WithTheme<{\n    $min: number;\n    $max: number;\n    $value: number;\n    $isInterval: boolean;\n    $thumbWidth: number;\n}>;\n\nexport const StyledSliderInput = styled(motion.input).attrs<StyledSliderInputProps>(\n    ({ $isInterval, $value, $thumbWidth, $min, $max, theme }) => ({\n        style: {\n            pointerEvents: $isInterval ? 'none' : 'all',\n            width: `calc(100% - ${$thumbWidth}px)`,\n            background: !$isInterval\n                ? `linear-gradient(\n            to right,\n            ${(theme as Theme)['409'] ?? ''} 0%,\n            ${(theme as Theme)['409'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n            ${(($value - $min) / ($max - $min)) * 100}%,\n            ${(theme as Theme)['403'] ?? ''}\n        )`\n                : undefined,\n        },\n    }),\n)`\n    position: absolute;\n    border-radius: 100px;\n    -webkit-appearance: none;\n\n    outline: none;\n    cursor: pointer !important;\n    z-index: 2;\n    appearance: none;\n\n    // Slider thumb for chrome\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        appearance: none;\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n\n    // slider thumb for firefox\n\n    &::-moz-range-thumb {\n        width: 50px;\n        height: 20px;\n        cursor: pointer;\n        opacity: 0;\n        pointer-events: all;\n        position: relative;\n    }\n`;\n\ntype StyledSliderThumbProps = WithTheme<{\n    $position: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumb = styled.div.attrs<StyledSliderThumbProps>(\n    ({ $position, $isBigSlider }) => ({\n        style: {\n            left: `${$position}px`,\n            height: `${$isBigSlider ? 0 : 20}px`,\n        },\n    }),\n)`\n    width: 20px;\n    height: 20px;\n    cursor: pointer;\n    border-radius: 100px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    pointer-events: none;\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0 8px;\n    white-space: nowrap;\n    top: 5px;\n\n    transition: top 0.2s ease 0s;\n`;\n\ntype StyledSliderThumbLabelProps = WithTheme<{\n    $position: number;\n    $width: number;\n    $isBigSlider: boolean;\n}>;\n\nexport const StyledSliderThumbLabel = styled.span.attrs<StyledSliderThumbLabelProps>(\n    ({ $position, $isBigSlider, $width }) => ({\n        style: {\n            minWidth: `${$width}px`,\n            top: `-${$isBigSlider ? 56 : 48}px`,\n            left: `${$position}px`,\n        },\n    }),\n)`\n    pointer-events: none;\n    color: #222;\n\n    height: 20px;\n    cursor: pointer;\n    border-radius: 3px;\n    background-color: white;\n    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);\n    z-index: 3;\n    position: absolute;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 16px;\n    white-space: nowrap;\n\n    transition: top 0.2s ease 0s;\n\n    &::after {\n        background-color: inherit;\n        border-bottom: 1px solid rgba(0, 0, 0, 0.1);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        box-shadow: 0 0 6px 2px rgba(0, 0, 0, 0.4);\n        content: '';\n        height: 14px;\n        position: absolute;\n        width: 14px;\n        z-index: -2;\n        left: ${({ $position }) => $position * -1}px;\n        transform: rotate(225deg);\n        bottom: -7px;\n    }\n\n    &::before {\n        background-color: inherit;\n        bottom: 0;\n        content: '';\n        left: 0;\n        position: absolute;\n        right: 0;\n        border-radius: 3px;\n        top: 0;\n        z-index: -1;\n    }\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,YAAY,GAAGD,MAAM,CAACE,GAAG;AACtC;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACD,MAAM,CAACK,KAAK,CAAC,CAACC,KAAK,CACvDC,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,MAAM;IAAEC,WAAW;IAAEC,IAAI;IAAEC,IAAI;IAAEC;EAAM,CAAC,GAAAN,IAAA;EAAA,OAAM;IAC1DO,KAAK,EAAE;MACHC,aAAa,EAAEP,WAAW,GAAG,MAAM,GAAG,KAAK;MAC3CQ,KAAK,EAAE,eAAeN,WAAW,KAAK;MACtCO,UAAU,EAAE,CAACT,WAAW,GAClB;AAClB;AACA,cAAeK,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAeA,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,cAAe,CAACJ,MAAM,GAAGE,IAAI,KAAKC,IAAI,GAAGD,IAAI,CAAC,GAAI,GAAG;AACrD,cAAeE,KAAK,CAAW,KAAK,CAAC,IAAI,EAAE;AAC3C,UAAU,GACQK;IACV;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMC,iBAAiB,GAAGlB,MAAM,CAACE,GAAG,CAACG,KAAK,CAC7Cc,KAAA;EAAA,IAAC;IAAEC,SAAS;IAAEC;EAAa,CAAC,GAAAF,KAAA;EAAA,OAAM;IAC9BN,KAAK,EAAE;MACHS,IAAI,EAAE,GAAGF,SAAS,IAAI;MACtBG,MAAM,EAAE,GAAGF,YAAY,GAAG,CAAC,GAAG,EAAE;IACpC;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAQD,OAAO,MAAMG,sBAAsB,GAAGxB,MAAM,CAACyB,IAAI,CAACpB,KAAK,CACnDqB,KAAA;EAAA,IAAC;IAAEN,SAAS;IAAEC,YAAY;IAAEM;EAAO,CAAC,GAAAD,KAAA;EAAA,OAAM;IACtCb,KAAK,EAAE;MACHe,QAAQ,EAAE,GAAGD,MAAM,IAAI;MACvBE,GAAG,EAAE,IAAIR,YAAY,GAAG,EAAE,GAAG,EAAE,IAAI;MACnCC,IAAI,EAAE,GAAGF,SAAS;IACtB;EACJ,CAAC;AAAA,CACL,CAAC;AACD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gBAAgBU,KAAA;EAAA,IAAC;IAAEV;EAAU,CAAC,GAAAU,KAAA;EAAA,OAAKV,SAAS,GAAG,CAAC,CAAC;AAAA;AACjD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}

package/lib/types/components/list/list-item/ListItem.styles.d.ts

@@ -2,6 +2,7 @@ import type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider'
 type StyledListItemProps = WithTheme<{
     $isClickable: boolean;
     $isOpen: boolean;
+    $isParentAccordionWrapped: boolean;
     $isWrapped: boolean;
     $shouldShowSeparatorBelow: boolean;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.821",
+    "version": "5.0.0-beta.822",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -85,5 +85,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "557a60e6b54cb4d886aa28e5358e9163cd9f33b7"
+    "gitHead": "e8b649a5bfb3f40535d95cbe0ac4b502b2c0fa85"
 }