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

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

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

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

@@ -0,0 +1,194 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledInput = styled.div`
+    opacity: ${_ref => {
+  let {
+    $isDisabled
+  } = _ref;
+  return $isDisabled ? 0.5 : 1;
+}};
+    display: flex;
+    width: 100%;
+`;
+export const StyledInputContentWrapper = styled.div`
+    align-items: center;
+    background-color: ${_ref2 => {
+  let {
+    theme,
+    $shouldChangeColor
+  } = _ref2;
+  return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
+}};
+    border: 1px solid
+        ${_ref3 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref3;
+  return $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)';
+}};
+    color: ${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['006'];
+}};
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    transition: opacity 0.3s ease;
+
+    ${_ref5 => {
+  let {
+    $size
+  } = _ref5;
+  return $size === 'small' && css`
+            height: 32px;
+        `;
+}}
+
+    ${_ref6 => {
+  let {
+    $shouldShowOnlyBottomBorder,
+    $size
+  } = _ref6;
+  return !$shouldShowOnlyBottomBorder && css`
+            min-height: ${$size === 'medium' ? '42px' : '32px'};
+        `;
+}}
+
+    ${_ref7 => {
+  let {
+    $shouldRoundRightCorners,
+    $shouldShowOnlyBottomBorder,
+    theme
+  } = _ref7;
+  if ($shouldShowOnlyBottomBorder) {
+    return css`
+                border-top: none;
+                border-right: none;
+                border-left: none;
+                background-color: transparent;
+                border-color: ${theme['408']};
+            `;
+  }
+  if ($shouldRoundRightCorners) {
+    return css`
+                border-radius: 3px;
+            `;
+  }
+  return css`
+            border-bottom-left-radius: 3px;
+            border-top-left-radius: 3px;
+            border-right: none;
+        `;
+}}
+`;
+export const StyledInputContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    margin: ${_ref8 => {
+  let {
+    $shouldShowOnlyBottomBorder
+  } = _ref8;
+  return !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0';
+}};
+    position: relative;
+`;
+export const StyledInputField = styled.input`
+    background: none;
+    border: none;
+    color: ${_ref9 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref9;
+  return $isInvalid ? theme.wrong : theme.text;
+}};
+    padding: 0;
+    width: ${_ref10 => {
+  let {
+    $placeholderWidth
+  } = _ref10;
+  return `calc(100% - ${$placeholderWidth}px)`;
+}};
+    line-height: 1em;
+
+    ${_ref11 => {
+  let {
+    $shouldShowCenteredContent
+  } = _ref11;
+  return $shouldShowCenteredContent && css`
+            text-align: center;
+        `;
+}}
+`;
+export const StyledMotionInputLabelWrapper = styled(motion.label)`
+    align-items: center;
+    display: flex;
+    flex: 0 0 auto;
+    gap: 4px;
+    line-height: 1.3;
+    pointer-events: none;
+    position: absolute;
+    user-select: none;
+    max-width: 100%;
+`;
+export const StyledMotionInputElement = styled(motion.div)`
+    display: flex;
+`;
+export const StyledInputLabel = styled.label`
+    line-height: 1.3;
+    pointer-events: none;
+    width: 100%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: ${_ref12 => {
+  let {
+    theme,
+    $isInvalid
+  } = _ref12;
+  return $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`;
+}};
+`;
+export const StyledMotionInputClearIcon = styled(motion.div)`
+    align-items: center;
+    border-left: ${_ref13 => {
+  let {
+    $shouldShowOnlyBottomBorder
+  } = _ref13;
+  return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
+}};
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: ${_ref14 => {
+  let {
+    $size
+  } = _ref14;
+  return $size === 'medium' ? '40px' : '30px';
+}};
+    justify-content: center;
+    width: ${_ref15 => {
+  let {
+    $size
+  } = _ref15;
+  return $size === 'medium' ? '40px' : '30px';
+}};
+`;
+export const StyledInputIconWrapper = styled.div`
+    align-items: baseline;
+    display: flex;
+    flex: 0 0 auto;
+    justify-content: center;
+    margin-left: 10px;
+`;
+export const StyledInputRightElement = styled.div`
+    border-bottom-right-radius: 3px;
+    border-top-right-radius: 3px;
+    overflow: hidden;
+    flex: 0 0 auto;
+`;
+//# sourceMappingURL=Input.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","$shouldChangeColor","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$size","_ref6","$shouldShowOnlyBottomBorder","_ref7","$shouldRoundRightCorners","StyledInputContent","_ref8","StyledInputField","input","_ref9","text","_ref10","$placeholderWidth","_ref11","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledMotionInputElement","StyledInputLabel","_ref12","StyledMotionInputClearIcon","_ref13","_ref14","_ref15","StyledInputIconWrapper","StyledInputRightElement"],"sources":["../../../../src/components/input/Input.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { InputSize } from './Input';\n\ntype StyledInputProps = WithTheme<{ $isDisabled?: boolean }>;\n\nexport const StyledInput = styled.div<StyledInputProps>`\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    display: flex;\n    width: 100%;\n`;\n\ntype StyledInputContentWrapperProps = WithTheme<{\n    $shouldRoundRightCorners: boolean;\n    $shouldShowOnlyBottomBorder?: boolean;\n    $isInvalid?: boolean;\n    $shouldChangeColor: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme, $shouldChangeColor }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n    border: 1px solid\n        ${({ theme, $isInvalid }: StyledInputContentWrapperProps) =>\n            $isInvalid ? theme.wrong : 'rgba(160, 160, 160, 0.3)'};\n    color: ${({ theme }: StyledInputContentWrapperProps) => theme['006']};\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    transition: opacity 0.3s ease;\n\n    ${({ $size }) =>\n        $size === 'small' &&\n        css`\n            height: 32px;\n        `}\n\n    ${({ $shouldShowOnlyBottomBorder, $size }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: ${$size === 'medium' ? '42px' : '32px'};\n        `}\n\n    ${({ $shouldRoundRightCorners, $shouldShowOnlyBottomBorder, theme }) => {\n        if ($shouldShowOnlyBottomBorder) {\n            return css`\n                border-top: none;\n                border-right: none;\n                border-left: none;\n                background-color: transparent;\n                border-color: ${theme['408']};\n            `;\n        }\n\n        if ($shouldRoundRightCorners) {\n            return css`\n                border-radius: 3px;\n            `;\n        }\n\n        return css`\n            border-bottom-left-radius: 3px;\n            border-top-left-radius: 3px;\n            border-right: none;\n        `;\n    }}\n`;\n\ntype StyledInputContentProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\n\nexport const StyledInputContent = styled.div<StyledInputContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0'};\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{\n    $isInvalid?: boolean;\n    $shouldShowCenteredContent: boolean;\n    $placeholderWidth: number;\n}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: ${({ $placeholderWidth }) => `calc(100% - ${$placeholderWidth}px)`};\n    line-height: 1em;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\n`;\n\nexport const StyledMotionInputElement = styled(motion.div)`\n    display: flex;\n`;\n\ntype StyledInputLabelProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputLabel = styled.label<StyledInputLabelProps>`\n    line-height: 1.3;\n    pointer-events: none;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    color: ${({ theme, $isInvalid }: StyledInputLabelProps) =>\n        $isInvalid ? theme.wrong : `rgba(${theme['text-rgb'] ?? ''}, 0.45)`};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{\n    $shouldShowOnlyBottomBorder?: boolean;\n    $size: InputSize;\n}>;\n\nexport const StyledMotionInputClearIcon = styled(motion.div)<StyledMotionInputClearIconProps>`\n    align-items: center;\n    border-left: ${({ $shouldShowOnlyBottomBorder }) =>\n        $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)'};\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n    justify-content: center;\n    width: ${({ $size }) => ($size === 'medium' ? '40px' : '30px')};\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/list/List.js

@@ -0,0 +1,54 @@
+import { AnimatePresence, MotionConfig } from 'framer-motion';
+import React, { useCallback, useMemo, useState } from 'react';
+export const ListContext = /*#__PURE__*/React.createContext({
+  incrementExpandableItemCount: () => () => {},
+  isAnyItemExpandable: false,
+  isWrapped: false,
+  openItemUuid: undefined,
+  updateOpenItemUuid: () => {}
+});
+ListContext.displayName = 'ListContext';
+const List = _ref => {
+  let {
+    children,
+    isWrapped = false
+  } = _ref;
+  const [openItemUuid, setOpenItemUuid] = useState(undefined);
+  const [expandableItemCount, setExpandableItemCount] = useState(0);
+  const updateOpenItemUuid = useCallback(function (uuid) {
+    let {
+      shouldOnlyOpen
+    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+    setOpenItemUuid(currentOpenItemUuid => {
+      if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {
+        return undefined;
+      }
+      return uuid;
+    });
+  }, [setOpenItemUuid]);
+  const incrementExpandableItemCount = useCallback(() => {
+    setExpandableItemCount(count => count + 1);
+    return () => {
+      setExpandableItemCount(count => count - 1);
+    };
+  }, [setExpandableItemCount]);
+  const providerValue = useMemo(() => ({
+    incrementExpandableItemCount,
+    isAnyItemExpandable: expandableItemCount > 0,
+    isWrapped,
+    openItemUuid,
+    updateOpenItemUuid
+  }), [expandableItemCount, incrementExpandableItemCount, isWrapped, openItemUuid, updateOpenItemUuid]);
+  return /*#__PURE__*/React.createElement(ListContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement(MotionConfig, {
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, children)));
+};
+List.displayName = 'List';
+export default List;
+//# sourceMappingURL=List.js.map

package/lib/esm/components/list/List.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"List.js","names":["AnimatePresence","MotionConfig","React","useCallback","useMemo","useState","ListContext","createContext","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","undefined","updateOpenItemUuid","displayName","List","_ref","children","setOpenItemUuid","expandableItemCount","setExpandableItemCount","uuid","shouldOnlyOpen","arguments","length","currentOpenItemUuid","count","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../src/components/list/List.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useMemo, useState } from 'react';\n\ninterface IListContext {\n    incrementExpandableItemCount: () => () => void;\n    isAnyItemExpandable: boolean;\n    isWrapped: boolean;\n    openItemUuid: string | undefined;\n    updateOpenItemUuid: (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\n}\n\nexport const ListContext = React.createContext<IListContext>({\n    incrementExpandableItemCount: () => () => {},\n    isAnyItemExpandable: false,\n    isWrapped: false,\n    openItemUuid: undefined,\n    updateOpenItemUuid: () => {},\n});\n\nListContext.displayName = 'ListContext';\n\ntype ListProps = {\n    /**\n     * The items of the list\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n};\n\nconst List: FC<ListProps> = ({ children, isWrapped = false }) => {\n    const [openItemUuid, setOpenItemUuid] = useState<IListContext['openItemUuid']>(undefined);\n    const [expandableItemCount, setExpandableItemCount] = useState<number>(0);\n\n    const updateOpenItemUuid = useCallback<IListContext['updateOpenItemUuid']>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenItemUuid((currentOpenItemUuid) => {\n                if (currentOpenItemUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenItemUuid],\n    );\n\n    const incrementExpandableItemCount = useCallback(() => {\n        setExpandableItemCount((count) => count + 1);\n\n        return () => {\n            setExpandableItemCount((count) => count - 1);\n        };\n    }, [setExpandableItemCount]);\n\n    const providerValue = useMemo<IListContext>(\n        () => ({\n            incrementExpandableItemCount,\n            isAnyItemExpandable: expandableItemCount > 0,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        }),\n        [\n            expandableItemCount,\n            incrementExpandableItemCount,\n            isWrapped,\n            openItemUuid,\n            updateOpenItemUuid,\n        ],\n    );\n\n    return (\n        <ListContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </ListContext.Provider>\n    );\n};\n\nList.displayName = 'List';\n\nexport default List;\n"],"mappings":"AAAA,SAASA,eAAe,EAAEC,YAAY,QAAQ,eAAe;AAC7D,OAAOC,KAAK,IAAmBC,WAAW,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO;AAU5E,OAAO,MAAMC,WAAW,gBAAGJ,KAAK,CAACK,aAAa,CAAe;EACzDC,4BAA4B,EAAEA,CAAA,KAAM,MAAM,CAAC,CAAC;EAC5CC,mBAAmB,EAAE,KAAK;EAC1BC,SAAS,EAAE,KAAK;EAChBC,YAAY,EAAEC,SAAS;EACvBC,kBAAkB,EAAEA,CAAA,KAAM,CAAC;AAC/B,CAAC,CAAC;AAEFP,WAAW,CAACQ,WAAW,GAAG,aAAa;AAcvC,MAAMC,IAAmB,GAAGC,IAAA,IAAqC;EAAA,IAApC;IAAEC,QAAQ;IAAEP,SAAS,GAAG;EAAM,CAAC,GAAAM,IAAA;EACxD,MAAM,CAACL,YAAY,EAAEO,eAAe,CAAC,GAAGb,QAAQ,CAA+BO,SAAS,CAAC;EACzF,MAAM,CAACO,mBAAmB,EAAEC,sBAAsB,CAAC,GAAGf,QAAQ,CAAS,CAAC,CAAC;EAEzE,MAAMQ,kBAAkB,GAAGV,WAAW,CAClC,UAACkB,IAAI,EAA8B;IAAA,IAA5B;MAAEC;IAAe,CAAC,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAX,SAAA,GAAAW,SAAA,MAAG,CAAC,CAAC;IAC1BL,eAAe,CAAEO,mBAAmB,IAAK;MACrC,IAAIA,mBAAmB,KAAKJ,IAAI,IAAIC,cAAc,KAAK,IAAI,EAAE;QACzD,OAAOV,SAAS;MACpB;MAEA,OAAOS,IAAI;IACf,CAAC,CAAC;EACN,CAAC,EACD,CAACH,eAAe,CACpB,CAAC;EAED,MAAMV,4BAA4B,GAAGL,WAAW,CAAC,MAAM;IACnDiB,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAE5C,OAAO,MAAM;MACTN,sBAAsB,CAAEM,KAAK,IAAKA,KAAK,GAAG,CAAC,CAAC;IAChD,CAAC;EACL,CAAC,EAAE,CAACN,sBAAsB,CAAC,CAAC;EAE5B,MAAMO,aAAa,GAAGvB,OAAO,CACzB,OAAO;IACHI,4BAA4B;IAC5BC,mBAAmB,EAAEU,mBAAmB,GAAG,CAAC;IAC5CT,SAAS;IACTC,YAAY;IACZE;EACJ,CAAC,CAAC,EACF,CACIM,mBAAmB,EACnBX,4BAA4B,EAC5BE,SAAS,EACTC,YAAY,EACZE,kBAAkB,CAE1B,CAAC;EAED,oBACIX,KAAA,CAAA0B,aAAA,CAACtB,WAAW,CAACuB,QAAQ;IAACC,KAAK,EAAEH;EAAc,gBACvCzB,KAAA,CAAA0B,aAAA,CAAC3B,YAAY;IAAC8B,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBACxC9B,KAAA,CAAA0B,aAAA,CAAC5B,eAAe;IAACiC,OAAO,EAAE;EAAM,GAAEhB,QAA0B,CAClD,CACI,CAAC;AAE/B,CAAC;AAEDF,IAAI,CAACD,WAAW,GAAG,MAAM;AAEzB,eAAeC,IAAI","ignoreList":[]}

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

@@ -0,0 +1,145 @@
+import { AnimatePresence } from 'framer-motion';
+import React, { useCallback, useContext, useEffect, useRef } 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';
+import ListItemHead from './list-item-head/ListItemHead';
+import { StyledMotionListItem } from './ListItem.styles';
+const ListItem = _ref => {
+  let {
+    children,
+    hoverItem,
+    icons,
+    imageBackground,
+    images,
+    isDefaultOpen,
+    isOpen,
+    isTitleGreyed,
+    leftElements,
+    onClick,
+    onClose,
+    onLongPress,
+    onOpen,
+    rightElements,
+    shouldForceBackground = false,
+    shouldHideBottomLine = false,
+    shouldHideImageOrIconBackground,
+    shouldHideIndicator = false,
+    shouldOpenImageOnClick = false,
+    shouldPreventLayoutAnimation = false,
+    shouldShowRoundImageOrIcon,
+    shouldShowSeparatorBelow = false,
+    subtitle,
+    title,
+    titleElement
+  } = _ref;
+  const {
+    incrementExpandableItemCount,
+    isAnyItemExpandable,
+    isWrapped,
+    openItemUuid,
+    updateOpenItemUuid
+  } = useContext(ListContext);
+  const {
+    isWrapped: isParentAccordionWrapped
+  } = useContext(AccordionContext);
+  const isInitialRenderRef = useRef(true);
+  const uuid = useUuid();
+  const isExpandable = children !== undefined;
+  const isItemOpen = isOpen ?? openItemUuid === uuid;
+  const onCloseRef = useRef(onClose);
+  const onOpenRef = useRef(onOpen);
+  useEffect(() => {
+    onCloseRef.current = onClose;
+    onOpenRef.current = onOpen;
+  }, [isOpen, onClose, onOpen]);
+  useEffect(() => {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isItemOpen) {
+      if (typeof onOpenRef.current === 'function') {
+        onOpenRef.current();
+      }
+    } else if (typeof onCloseRef.current === 'function') {
+      onCloseRef.current();
+    }
+  }, [isItemOpen]);
+  const handleHeadClick = useCallback(event => {
+    if (isExpandable) {
+      updateOpenItemUuid(uuid);
+    }
+    if (typeof onClick === 'function') {
+      onClick(event);
+    }
+  }, [isExpandable, onClick, updateOpenItemUuid, uuid]);
+  useEffect(() => {
+    if (isExpandable && !shouldHideIndicator) {
+      // The incrementExpandableItemCount function returns an cleanup
+      // function to decrement expandableItemCount if component unmounts
+      return incrementExpandableItemCount();
+    }
+    return undefined;
+  }, [incrementExpandableItemCount, isExpandable, shouldHideIndicator]);
+  useEffect(() => {
+    if (isDefaultOpen) {
+      updateOpenItemUuid(uuid, {
+        shouldOnlyOpen: true
+      });
+    }
+  }, [isDefaultOpen, updateOpenItemUuid, uuid]);
+  const isClickable = typeof onClick === 'function' || isExpandable;
+  return /*#__PURE__*/React.createElement(StyledMotionListItem, {
+    animate: {
+      height: 'auto',
+      opacity: 1
+    },
+    className: "beta-chayns-list-item",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    key: `list-item-${uuid}`,
+    layout: shouldPreventLayoutAnimation ? undefined : 'position',
+    $isClickable: isClickable,
+    $isInAccordion: typeof isParentAccordionWrapped === 'boolean',
+    $isOpen: isItemOpen,
+    $isWrapped: isWrapped,
+    $shouldForceBackground: shouldForceBackground,
+    $shouldHideBottomLine: shouldHideBottomLine,
+    $shouldHideIndicator: shouldHideIndicator,
+    $shouldShowSeparatorBelow: shouldShowSeparatorBelow
+  }, /*#__PURE__*/React.createElement(ListItemHead, {
+    hoverItem: hoverItem,
+    icons: icons,
+    imageBackground: imageBackground,
+    images: images,
+    isAnyItemExpandable: isAnyItemExpandable,
+    isExpandable: isExpandable,
+    isOpen: isItemOpen,
+    isTitleGreyed: isTitleGreyed,
+    leftElements: leftElements,
+    onClick: isClickable ? handleHeadClick : undefined,
+    onLongPress: onLongPress,
+    rightElements: rightElements,
+    shouldHideImageOrIconBackground: shouldHideImageOrIconBackground,
+    shouldHideIndicator: shouldHideIndicator,
+    shouldOpenImageOnClick: shouldOpenImageOnClick,
+    shouldShowRoundImageOrIcon: shouldShowRoundImageOrIcon,
+    subtitle: subtitle,
+    title: title,
+    titleElement: titleElement
+  }), /*#__PURE__*/React.createElement(AnimatePresence, {
+    initial: false
+  }, isExpandable && isItemOpen && /*#__PURE__*/React.createElement(ListItemBody, {
+    id: uuid
+  }, /*#__PURE__*/React.createElement(AreaContextProvider, null, children))));
+};
+ListItem.displayName = 'ListItem';
+export default ListItem;
+//# sourceMappingURL=ListItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.js","names":["AnimatePresence","React","useCallback","useContext","useEffect","useRef","useUuid","AccordionContext","AreaContextProvider","ListContext","ListItemBody","ListItemHead","StyledMotionListItem","ListItem","_ref","children","hoverItem","icons","imageBackground","images","isDefaultOpen","isOpen","isTitleGreyed","leftElements","onClick","onClose","onLongPress","onOpen","rightElements","shouldForceBackground","shouldHideBottomLine","shouldHideImageOrIconBackground","shouldHideIndicator","shouldOpenImageOnClick","shouldPreventLayoutAnimation","shouldShowRoundImageOrIcon","shouldShowSeparatorBelow","subtitle","title","titleElement","incrementExpandableItemCount","isAnyItemExpandable","isWrapped","openItemUuid","updateOpenItemUuid","isParentAccordionWrapped","isInitialRenderRef","uuid","isExpandable","undefined","isItemOpen","onCloseRef","onOpenRef","current","handleHeadClick","event","shouldOnlyOpen","isClickable","createElement","animate","height","opacity","className","exit","initial","key","layout","$isClickable","$isInAccordion","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBottomLine","$shouldHideIndicator","$shouldShowSeparatorBelow","id","displayName"],"sources":["../../../../../src/components/list/list-item/ListItem.tsx"],"sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, {\n    CSSProperties,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\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     * The background of the image. This is only used if images are passed.\n     */\n    imageBackground?: CSSProperties['background'];\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     * Whether the ListItem locks disabled but has full functionality.\n     */\n    isTitleGreyed?: boolean;\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     * 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 ListItem is closed.\n     */\n    onClose?: VoidFunction;\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     * Function to be executed when the ListItem is opened.\n     */\n    onOpen?: VoidFunction;\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     * This will force the background color of the ListItem to be used even if it is closed and not hovered.\n     */\n    shouldForceBackground?: boolean;\n    /**\n     * Whether the bottom line should be hidden.\n     */\n    shouldHideBottomLine?: boolean;\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 should be opened on click.\n     */\n    shouldOpenImageOnClick?: boolean;\n    /**\n     * Whether the layout animation should be prevented. This is useful when the\n     * `ListItem` is used in a list with a lot of items and the layout animation\n     * is not desired.\n     */\n    shouldPreventLayoutAnimation?: 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    imageBackground,\n    images,\n    isDefaultOpen,\n    isOpen,\n    isTitleGreyed,\n    leftElements,\n    onClick,\n    onClose,\n    onLongPress,\n    onOpen,\n    rightElements,\n    shouldForceBackground = false,\n    shouldHideBottomLine = false,\n    shouldHideImageOrIconBackground,\n    shouldHideIndicator = false,\n    shouldOpenImageOnClick = false,\n    shouldPreventLayoutAnimation = false,\n    shouldShowRoundImageOrIcon,\n    shouldShowSeparatorBelow = false,\n    subtitle,\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 isInitialRenderRef = useRef(true);\n\n    const uuid = useUuid();\n\n    const isExpandable = children !== undefined;\n    const isItemOpen = isOpen ?? openItemUuid === uuid;\n\n    const onCloseRef = useRef(onClose);\n    const onOpenRef = useRef(onOpen);\n\n    useEffect(() => {\n        onCloseRef.current = onClose;\n        onOpenRef.current = onOpen;\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isItemOpen) {\n            if (typeof onOpenRef.current === 'function') {\n                onOpenRef.current();\n            }\n        } else if (typeof onCloseRef.current === 'function') {\n            onCloseRef.current();\n        }\n    }, [isItemOpen]);\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 && !shouldHideIndicator) {\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, shouldHideIndicator]);\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            layout={shouldPreventLayoutAnimation ? undefined : 'position'}\n            $isClickable={isClickable}\n            $isInAccordion={typeof isParentAccordionWrapped === 'boolean'}\n            $isOpen={isItemOpen}\n            $isWrapped={isWrapped}\n            $shouldForceBackground={shouldForceBackground}\n            $shouldHideBottomLine={shouldHideBottomLine}\n            $shouldHideIndicator={shouldHideIndicator}\n            $shouldShowSeparatorBelow={shouldShowSeparatorBelow}\n        >\n            <ListItemHead\n                hoverItem={hoverItem}\n                icons={icons}\n                imageBackground={imageBackground}\n                images={images}\n                isAnyItemExpandable={isAnyItemExpandable}\n                isExpandable={isExpandable}\n                isOpen={isItemOpen}\n                isTitleGreyed={isTitleGreyed}\n                leftElements={leftElements}\n                onClick={isClickable ? handleHeadClick : undefined}\n                onLongPress={onLongPress}\n                rightElements={rightElements}\n                shouldHideImageOrIconBackground={shouldHideImageOrIconBackground}\n                shouldHideIndicator={shouldHideIndicator}\n                shouldOpenImageOnClick={shouldOpenImageOnClick}\n                shouldShowRoundImageOrIcon={shouldShowRoundImageOrIcon}\n                subtitle={subtitle}\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/esm/components/list/list-item/ListItem.styles.js

@@ -0,0 +1,68 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+export const StyledMotionListItem = styled(motion.div)`
+    overflow: hidden;
+    transition: background-color 0.3s ease;
+
+    ${_ref => {
+  let {
+    $isInAccordion,
+    $shouldHideIndicator
+  } = _ref;
+  return $isInAccordion && css`
+            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};
+        `;
+}}
+
+    ${_ref2 => {
+  let {
+    $isInAccordion,
+    $isOpen,
+    $shouldForceBackground,
+    theme
+  } = _ref2;
+  return (!$isInAccordion && $isOpen || $shouldForceBackground) && css`
+            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+        `;
+}}
+
+    ${_ref3 => {
+  let {
+    $isClickable,
+    $isInAccordion,
+    theme
+  } = _ref3;
+  return $isClickable && !$isInAccordion && css`
+            &&:hover {
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            }
+        `;
+}}
+    
+    ${_ref4 => {
+  let {
+    $isOpen,
+    $isInAccordion,
+    $isWrapped,
+    $shouldShowSeparatorBelow,
+    $shouldHideBottomLine,
+    theme
+  } = _ref4;
+  return ($shouldShowSeparatorBelow || (!$isOpen || $isWrapped || $isInAccordion) && theme.accordionLines && !$shouldHideBottomLine) && css`
+            &&:not(:last-child) {
+                border-bottom: ${$shouldShowSeparatorBelow ? '4px' : '1px'} solid
+                    rgba(${theme['headline-rgb']}, 0.5);
+            }
+        `;
+}}
+
+    ${_ref5 => {
+  let {
+    $isWrapped
+  } = _ref5;
+  return $isWrapped && css`
+            padding-left: 26px;
+        `;
+}}
+`;
+//# sourceMappingURL=ListItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItem.styles.js","names":["motion","styled","css","StyledMotionListItem","div","_ref","$isInAccordion","$shouldHideIndicator","_ref2","$isOpen","$shouldForceBackground","theme","cardBackgroundOpacity","_ref3","$isClickable","_ref4","$isWrapped","$shouldShowSeparatorBelow","$shouldHideBottomLine","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    $isInAccordion: boolean;\n    $isWrapped: boolean;\n    $shouldHideIndicator: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldShowSeparatorBelow: boolean;\n    $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionListItem = styled(motion.div)<StyledListItemProps>`\n    overflow: hidden;\n    transition: background-color 0.3s ease;\n\n    ${({ $isInAccordion, $shouldHideIndicator }: StyledListItemProps) =>\n        $isInAccordion &&\n        css`\n            padding-left: ${$shouldHideIndicator ? '16px' : '8px'};\n        `}\n\n    ${({ $isInAccordion, $isOpen,$shouldForceBackground, theme }) =>\n        ((!$isInAccordion &&\n        $isOpen) || $shouldForceBackground) &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n        `}\n\n    ${({ $isClickable, $isInAccordion, theme }) =>\n        $isClickable &&\n        !$isInAccordion &&\n        css`\n            &&:hover {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `}\n    \n    ${({\n        $isOpen,\n        $isInAccordion,\n        $isWrapped,\n        $shouldShowSeparatorBelow,\n           $shouldHideBottomLine,\n        theme,\n    }: StyledListItemProps) =>\n        ($shouldShowSeparatorBelow ||\n            ((!$isOpen || $isWrapped || $isInAccordion) && (theme.accordionLines && !$shouldHideBottomLine))) &&\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;AAc/C,OAAO,MAAMC,oBAAoB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AAC3E;AACA;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC,cAAc;IAAEC;EAA0C,CAAC,GAAAF,IAAA;EAAA,OAC5DC,cAAc,IACdJ,GAAG;AACX,4BAA4BK,oBAAoB,GAAG,MAAM,GAAG,KAAK;AACjE,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,cAAc;IAAEG,OAAO;IAACC,sBAAsB;IAAEC;EAAM,CAAC,GAAAH,KAAA;EAAA,OACxD,CAAE,CAACF,cAAc,IACjBG,OAAO,IAAKC,sBAAsB,KAClCR,GAAG;AACX,qCAAqCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,SAAS;AAAA;AACT;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,YAAY;IAAER,cAAc;IAAEK;EAAM,CAAC,GAAAE,KAAA;EAAA,OACtCC,YAAY,IACZ,CAACR,cAAc,IACfJ,GAAG;AACX;AACA,yCAAyCS,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AAAA;AACT;AACA,MAAMG,KAAA;EAAA,IAAC;IACCN,OAAO;IACPH,cAAc;IACdU,UAAU;IACVC,yBAAyB;IACtBC,qBAAqB;IACxBP;EACiB,CAAC,GAAAI,KAAA;EAAA,OAClB,CAACE,yBAAyB,IACrB,CAAC,CAACR,OAAO,IAAIO,UAAU,IAAIV,cAAc,KAAMK,KAAK,CAACQ,cAAc,IAAI,CAACD,qBAAuB,KACpGhB,GAAG;AACX;AACA,iCAAiCe,yBAAyB,GAAG,KAAK,GAAG,KAAK;AAC1E,2BAA2BN,KAAK,CAAC,cAAc,CAAC;AAChD;AACA,SAAS;AAAA;AACT;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEJ;EAAW,CAAC,GAAAI,KAAA;EAAA,OACbJ,UAAU,IACVd,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js

@@ -0,0 +1,34 @@
+import React, { useRef, useState } from 'react';
+import { StyledMotionListItemBody } from './ListItemBody.styles';
+const ListItemBody = _ref => {
+  let {
+    children,
+    id
+  } = _ref;
+  const containerRef = useRef(null);
+  const [height] = useState('auto');
+  return /*#__PURE__*/React.createElement(StyledMotionListItemBody, {
+    key: id,
+    animate: {
+      height,
+      opacity: 1
+    },
+    className: "beta-chayns-list-item-body",
+    exit: {
+      height: 0,
+      opacity: 0
+    },
+    initial: {
+      height: 0,
+      opacity: 0
+    },
+    transition: {
+      type: 'tween'
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: containerRef
+  }, children));
+};
+ListItemBody.displayName = 'ListItemBody';
+export default ListItemBody;
+//# sourceMappingURL=ListItemBody.js.map

package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemBody.js","names":["React","useRef","useState","StyledMotionListItemBody","ListItemBody","_ref","children","id","containerRef","height","createElement","key","animate","opacity","className","exit","initial","transition","type","ref","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n    children?: ReactNode;\n    id: string;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id }) => {\n    const containerRef = useRef<HTMLDivElement | null>(null);\n    const [height] = useState<number | 'auto'>('auto');\n\n    return (\n        <StyledMotionListItemBody\n            key={id}\n            animate={{ height, opacity: 1 }}\n            className=\"beta-chayns-list-item-body\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            transition={{ type: 'tween' }}\n        >\n            <div ref={containerRef}>{children}</div>\n        </StyledMotionListItemBody>\n    );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC9D,SAASC,wBAAwB,QAAQ,uBAAuB;AAOhE,MAAMC,YAAmC,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAAEC,QAAQ;IAAEC;EAAG,CAAC,GAAAF,IAAA;EACzD,MAAMG,YAAY,GAAGP,MAAM,CAAwB,IAAI,CAAC;EACxD,MAAM,CAACQ,MAAM,CAAC,GAAGP,QAAQ,CAAkB,MAAM,CAAC;EAElD,oBACIF,KAAA,CAAAU,aAAA,CAACP,wBAAwB;IACrBQ,GAAG,EAAEJ,EAAG;IACRK,OAAO,EAAE;MAAEH,MAAM;MAAEI,OAAO,EAAE;IAAE,CAAE;IAChCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEN,MAAM,EAAE,CAAC;MAAEI,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEP,MAAM,EAAE,CAAC;MAAEI,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BlB,KAAA,CAAAU,aAAA;IAAKS,GAAG,EAAEX;EAAa,GAAEF,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDF,YAAY,CAACgB,WAAW,GAAG,cAAc;AAEzC,eAAehB,YAAY","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-body/ListItemBody.styles.js

@@ -0,0 +1,6 @@
+import { motion } from 'framer-motion';
+import styled from 'styled-components';
+export const StyledMotionListItemBody = styled(motion.div)`
+    overflow: hidden;
+`;
+//# sourceMappingURL=ListItemBody.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ListItemBody.styles.js","names":["motion","styled","StyledMotionListItemBody","div"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\nimport type { FramerMotionBugFix } from '../../../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledMotionListItemBody = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,MAAM,mBAAmB;AAGtC,OAAO,MAAMC,wBAAwB,GAAGD,MAAM,CAACD,MAAM,CAACG,GAAG,CAAqB;AAC9E;AACA,CAAC","ignoreList":[]}

package/lib/esm/components/list/list-item/list-item-content/ListItemContent.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { StyledListItemContent } from './ListItemContent.styles';
+const ListItemContent = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/React.createElement(StyledListItemContent, {
+    className: "beta-chayns-list-item-content"
+  }, children);
+};
+ListItemContent.displayName = 'ListItemContent';
+export default ListItemContent;
+//# sourceMappingURL=ListItemContent.js.map