@chayns-components/core 5.0.0-beta.547 → 5.0.0-beta.550

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

@@ -20,6 +20,10 @@ export type InputProps = {
      * Disables the input so that it cannot be changed anymore
      */
     isDisabled?: boolean;
+    /**
+     * If true, the input field is marked as invalid
+     */
+    isInvalid?: boolean;
     /**
      * Function that is executed when the input field loses focus
      */
@@ -49,17 +53,13 @@ export type InputProps = {
      */
     rightElement?: ReactElement;
     /**
-     * If true, a clear icon is displayed at the end of the input field
+     * Whether the content should be displayed centered inside the input.
      */
-    shouldShowClearIcon?: boolean;
+    shouldShowCenteredContent?: boolean;
     /**
-     * Input type set for input element (e.g. 'text', 'number' or 'password')
-     */
-    type?: HTMLInputTypeAttribute;
-    /**
-     * Value if the input field should be controlled
+     * If true, a clear icon is displayed at the end of the input field
      */
-    value?: string;
+    shouldShowClearIcon?: boolean;
     /**
      * Whether only the bottom border should be displayed
      */
@@ -69,9 +69,13 @@ export type InputProps = {
      */
     shouldUseAutoFocus?: boolean;
     /**
-     * If true, the input field is marked as invalid
+     * Input type set for input element (e.g. 'text', 'number' or 'password')
      */
-    isInvalid?: boolean;
+    type?: HTMLInputTypeAttribute;
+    /**
+     * Value if the input field should be controlled
+     */
+    value?: string;
 };
 declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
 export default Input;

package/lib/components/input/Input.js

@@ -16,6 +16,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     rightElement,
     shouldShowOnlyBottomBorder,
     shouldShowClearIcon = false,
+    shouldShowCenteredContent = false,
     type = 'text',
     value,
     shouldUseAutoFocus = false,
@@ -55,7 +56,10 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
   }, [value]);
   const labelPosition = useMemo(() => {
     if (hasValue) {
-      return {
+      return shouldShowOnlyBottomBorder ? {
+        bottom: -4,
+        right: 3
+      } : {
         bottom: -8,
         right: -6
       };
@@ -64,7 +68,7 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
       left: 0,
       top: 0
     };
-  }, [hasValue]);
+  }, [hasValue, shouldShowOnlyBottomBorder]);
   return /*#__PURE__*/React.createElement(StyledInput, {
     className: "beta-chayns-input",
     $isDisabled: isDisabled
@@ -72,7 +76,9 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     $isInvalid: isInvalid,
     $shouldRoundRightCorners: shouldShowBorder,
     $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
-  }, iconElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, iconElement), /*#__PURE__*/React.createElement(StyledInputContent, null, /*#__PURE__*/React.createElement(StyledInputField, {
+  }, iconElement && /*#__PURE__*/React.createElement(StyledInputIconWrapper, null, iconElement), /*#__PURE__*/React.createElement(StyledInputContent, {
+    $shouldShowOnlyBottomBorder: shouldShowOnlyBottomBorder
+  }, /*#__PURE__*/React.createElement(StyledInputField, {
     id: id,
     disabled: isDisabled,
     onBlur: onBlur,
@@ -84,7 +90,8 @@ const Input = /*#__PURE__*/forwardRef((_ref, ref) => {
     value: value,
     autoFocus: shouldUseAutoFocus,
     inputMode: inputMode,
-    $isInvalid: isInvalid
+    $isInvalid: isInvalid,
+    $shouldShowCenteredContent: shouldShowCenteredContent
   }), /*#__PURE__*/React.createElement(StyledMotionInputLabelWrapper, {
     animate: {
       fontSize: hasValue ? '10px' : '16px'

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

@@ -1 +1 @@
-{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldShowClearIcon","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","theme","inputRef","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","bottom","right","left","top","createElement","className","$isDisabled","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","disabled","autoFocus","animate","fontSize","initial","layout","transition","duration","opacity","onClick","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    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: 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     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n    /**\n     * 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     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldShowClearIcon = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // 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) {\n                return { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent>\n                        <StyledInputField\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize: hasValue ? '10px' : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}
+{"version":3,"file":"Input.js","names":["React","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","useTheme","Icon","StyledInput","StyledInputContent","StyledInputContentWrapper","StyledInputField","StyledInputIconWrapper","StyledInputLabel","StyledInputRightElement","StyledMotionInputClearIcon","StyledMotionInputLabelWrapper","Input","_ref","ref","iconElement","inputMode","isDisabled","onBlur","onChange","onFocus","onKeyDown","placeholder","placeholderElement","rightElement","shouldShowOnlyBottomBorder","shouldShowClearIcon","shouldShowCenteredContent","type","value","shouldUseAutoFocus","isInvalid","id","hasValue","setHasValue","theme","inputRef","handleClearIconClick","current","target","shouldShowBorder","props","style","backgroundColor","undefined","handleInputFieldChange","event","focus","labelPosition","bottom","right","left","top","createElement","className","$isDisabled","$isInvalid","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","disabled","autoFocus","$shouldShowCenteredContent","animate","fontSize","initial","layout","transition","duration","opacity","onClick","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    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n    type ReactElement,\n} from 'react';\nimport { useTheme } from 'styled-components';\nimport type { Theme } from '../color-scheme-provider/ColorSchemeProvider';\nimport Icon from '../icon/Icon';\nimport {\n    StyledInput,\n    StyledInputContent,\n    StyledInputContentWrapper,\n    StyledInputField,\n    StyledInputIconWrapper,\n    StyledInputLabel,\n    StyledInputRightElement,\n    StyledMotionInputClearIcon,\n    StyledMotionInputLabelWrapper,\n} from './Input.styles';\n\nexport type InputRef = {\n    focus: VoidFunction;\n};\n\ntype InputMode =\n    | 'email'\n    | 'search'\n    | 'tel'\n    | 'text'\n    | 'url'\n    | 'none'\n    | 'numeric'\n    | 'decimal'\n    | undefined;\n\nexport type InputProps = {\n    /**\n     * Icon element to be displayed on the left side of the input field\n     */\n    iconElement?: ReactNode;\n    /**\n     * The id of the input\n     */\n    id?: string;\n    /**\n     * Defines the input mode of the input\n     */\n    inputMode?: InputMode;\n    /**\n     * Disables the input so that it cannot be changed anymore\n     */\n    isDisabled?: boolean;\n    /**\n     * If true, the input field is marked as invalid\n     */\n    isInvalid?: boolean;\n    /**\n     * Function that is executed when the input field loses focus\n     */\n    onBlur?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the text of the input changes\n     */\n    onChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when the input field is focused\n     */\n    onFocus?: FocusEventHandler<HTMLInputElement>;\n    /**\n     * Function that is executed when a letter is pressed\n     */\n    onKeyDown?: KeyboardEventHandler<HTMLInputElement>;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Element to be displayed next to or instead of the \"placeholder\"\n     */\n    placeholderElement?: ReactNode;\n    /**\n     * An element that should be displayed on the right side of the Input.\n     */\n    rightElement?: ReactElement;\n    /**\n     * Whether the content should be displayed centered inside the input.\n     */\n    shouldShowCenteredContent?: boolean;\n    /**\n     * If true, a clear icon is displayed at the end of the input field\n     */\n    shouldShowClearIcon?: boolean;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * If true, the input field is focused when the component is mounted\n     */\n    shouldUseAutoFocus?: boolean;\n    /**\n     * Input type set for input element (e.g. 'text', 'number' or 'password')\n     */\n    type?: HTMLInputTypeAttribute;\n    /**\n     * Value if the input field should be controlled\n     */\n    value?: string;\n};\n\nconst Input = forwardRef<InputRef, InputProps>(\n    (\n        {\n            iconElement,\n            inputMode,\n            isDisabled,\n            onBlur,\n            onChange,\n            onFocus,\n            onKeyDown,\n            placeholder,\n            placeholderElement,\n            rightElement,\n            shouldShowOnlyBottomBorder,\n            shouldShowClearIcon = false,\n            shouldShowCenteredContent = false,\n            type = 'text',\n            value,\n            shouldUseAutoFocus = false,\n            isInvalid = false,\n            id,\n        },\n        ref,\n    ) => {\n        const [hasValue, setHasValue] = useState(typeof value === 'string' && value !== '');\n\n        const theme = useTheme() as Theme;\n\n        const inputRef = useRef<HTMLInputElement>(null);\n\n        const handleClearIconClick = useCallback(() => {\n            if (inputRef.current) {\n                inputRef.current.value = '';\n\n                setHasValue(false);\n\n                if (typeof onChange === 'function') {\n                    onChange({ target: inputRef.current } as ChangeEvent<HTMLInputElement>);\n                }\n            }\n        }, [onChange]);\n\n        // 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) {\n                return shouldShowOnlyBottomBorder\n                    ? { bottom: -4, right: 3 }\n                    : { bottom: -8, right: -6 };\n            }\n\n            return { left: 0, top: 0 };\n        }, [hasValue, shouldShowOnlyBottomBorder]);\n\n        return (\n            <StyledInput className=\"beta-chayns-input\" $isDisabled={isDisabled}>\n                <StyledInputContentWrapper\n                    $isInvalid={isInvalid}\n                    $shouldRoundRightCorners={shouldShowBorder}\n                    $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                >\n                    {iconElement && <StyledInputIconWrapper>{iconElement}</StyledInputIconWrapper>}\n                    <StyledInputContent $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}>\n                        <StyledInputField\n                            id={id}\n                            disabled={isDisabled}\n                            onBlur={onBlur}\n                            onChange={handleInputFieldChange}\n                            onFocus={onFocus}\n                            onKeyDown={onKeyDown}\n                            ref={inputRef}\n                            type={type}\n                            value={value}\n                            autoFocus={shouldUseAutoFocus}\n                            inputMode={inputMode}\n                            $isInvalid={isInvalid}\n                            $shouldShowCenteredContent={shouldShowCenteredContent}\n                        />\n                        <StyledMotionInputLabelWrapper\n                            animate={{\n                                fontSize: hasValue ? '10px' : '16px',\n                            }}\n                            initial={false}\n                            layout\n                            style={{ ...labelPosition }}\n                            transition={{ type: 'tween', duration: 0.3 }}\n                        >\n                            {placeholderElement}\n                            <StyledInputLabel $isInvalid={isInvalid}>\n                                {placeholder}\n                            </StyledInputLabel>\n                        </StyledMotionInputLabelWrapper>\n                    </StyledInputContent>\n                    {shouldShowClearIcon && (\n                        <StyledMotionInputClearIcon\n                            $shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n                            animate={{ opacity: hasValue ? 1 : 0 }}\n                            initial={false}\n                            onClick={handleClearIconClick}\n                            transition={{ type: 'tween' }}\n                        >\n                            <Icon\n                                icons={['fa fa-times']}\n                                color={isInvalid ? theme.wrong : undefined}\n                            />\n                        </StyledMotionInputClearIcon>\n                    )}\n                    {rightElement && shouldShowBorder && rightElement}\n                </StyledInputContentWrapper>\n                {rightElement && !shouldShowBorder && (\n                    <StyledInputRightElement>{rightElement}</StyledInputRightElement>\n                )}\n            </StyledInput>\n        );\n    },\n);\n\nInput.displayName = 'Input';\n\nexport default Input;\n"],"mappings":"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"}

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

@@ -11,9 +11,13 @@ type StyledInputContentWrapperProps = WithTheme<{
     $isInvalid?: boolean;
 }>;
 export declare const StyledInputContentWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentWrapperProps>>;
-export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+type StyledInputContentProps = WithTheme<{
+    $shouldShowOnlyBottomBorder?: boolean;
+}>;
+export declare const StyledInputContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledInputContentProps>>;
 type StyledInputFieldProps = WithTheme<{
     $isInvalid?: boolean;
+    $shouldShowCenteredContent: boolean;
 }>;
 export declare const StyledInputField: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputFieldProps>>;
 export declare const StyledMotionInputLabelWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{

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

@@ -34,16 +34,24 @@ export const StyledInputContentWrapper = styled.div`
 }};
     display: flex;
     justify-content: space-between;
-    min-height: 42px;
     width: 100%;
     transition: opacity 0.3s ease;
 
     ${_ref5 => {
+  let {
+    $shouldShowOnlyBottomBorder
+  } = _ref5;
+  return !$shouldShowOnlyBottomBorder && css`
+            min-height: 42px;
+        `;
+}}
+
+    ${_ref6 => {
   let {
     $shouldRoundRightCorners,
     $shouldShowOnlyBottomBorder,
     theme
-  } = _ref5;
+  } = _ref6;
   if ($shouldShowOnlyBottomBorder) {
     return css`
                 border-top: none;
@@ -69,21 +77,35 @@ export const StyledInputContent = styled.div`
     display: flex;
     flex: 1 1 auto;
     min-width: 0;
-    margin: 8px 10px;
+    margin: ${_ref7 => {
+  let {
+    $shouldShowOnlyBottomBorder
+  } = _ref7;
+  return !$shouldShowOnlyBottomBorder ? '8px 10px' : '4px 0';
+}};
     position: relative;
 `;
 export const StyledInputField = styled.input`
     background: none;
     border: none;
-    color: ${_ref6 => {
+    color: ${_ref8 => {
   let {
     theme,
     $isInvalid
-  } = _ref6;
+  } = _ref8;
   return $isInvalid ? theme.wrong : theme.text;
 }};
     padding: 0;
     width: 100%;
+
+    ${_ref9 => {
+  let {
+    $shouldShowCenteredContent
+  } = _ref9;
+  return $shouldShowCenteredContent && css`
+            text-align: center;
+        `;
+}}
 `;
 export const StyledMotionInputLabelWrapper = styled(motion.label)`
     align-items: baseline;
@@ -103,20 +125,20 @@ export const StyledInputLabel = styled.label`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
-    color: ${_ref7 => {
+    color: ${_ref10 => {
   let {
     theme,
     $isInvalid
-  } = _ref7;
+  } = _ref10;
   return $isInvalid ? theme.wrong : undefined;
 }};
 `;
 export const StyledMotionInputClearIcon = styled(motion.div)`
     align-items: center;
-    border-left: ${_ref8 => {
+    border-left: ${_ref11 => {
   let {
     $shouldShowOnlyBottomBorder
-  } = _ref8;
+  } = _ref11;
   return $shouldShowOnlyBottomBorder ? 'none' : '1px solid rgba(160, 160, 160, 0.3)';
 }};
     cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldRoundRightCorners","$shouldShowOnlyBottomBorder","StyledInputContent","StyledInputField","input","_ref6","text","StyledMotionInputLabelWrapper","label","StyledInputLabel","_ref7","undefined","StyledMotionInputClearIcon","_ref8","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';\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}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' ? 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    min-height: 42px;\n    width: 100%;\n    transition: opacity 0.3s ease;\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\nexport const StyledInputContent = styled.div`\n    display: flex;\n    flex: 1 1 auto;\n    min-width: 0;\n    margin: 8px 10px;\n    position: relative;\n`;\n\ntype StyledInputFieldProps = WithTheme<{ $isInvalid?: boolean }>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\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 : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAK/C,OAAO,MAAMC,WAAW,GAAGF,MAAM,CAACG,GAAsB;AACxD,eAAeC,IAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,IAAA;EAAA,OAAMC,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAE;AAC5D;AACA;AACA,CAAC;AAQD,OAAO,MAAMC,yBAAyB,GAAGN,MAAM,CAACG,GAAoC;AACpF;AACA,wBAAwBI,KAAA;EAAA,IAAC;IAAEC;EAAsC,CAAC,GAAAD,KAAA;EAAA,OAC1DC,KAAK,CAACC,SAAS,KAAK,SAAS,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACpE;AACA,UAAUE,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpDC,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAG,0BAA0B;AAAA,CAAC;AAClE,aAAaC,KAAA;EAAA,IAAC;IAAEL;EAAsC,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AACzE;AACA;AACA;AACA;AACA;AACA;AACA,MAAMM,KAAA,IAAsE;EAAA,IAArE;IAAEC,wBAAwB;IAAEC,2BAA2B;IAAER;EAAM,CAAC,GAAAM,KAAA;EAC/D,IAAIE,2BAA2B,EAAE;IAC7B,OAAOf,GAAI;AACvB;AACA;AACA;AACA;AACA,gCAAgCO,KAAK,CAAC,KAAK,CAAE;AAC7C,aAAa;EACL;EAEA,IAAIO,wBAAwB,EAAE;IAC1B,OAAOd,GAAI;AACvB;AACA,aAAa;EACL;EAEA,OAAOA,GAAI;AACnB;AACA;AACA;AACA,SAAS;AACL,CAAE;AACN,CAAC;AAED,OAAO,MAAMgB,kBAAkB,GAAGjB,MAAM,CAACG,GAAI;AAC7C;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMe,gBAAgB,GAAGlB,MAAM,CAACmB,KAA6B;AACpE;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEZ,KAAK;IAAEG;EAAkC,CAAC,GAAAS,KAAA;EAAA,OAClDT,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGJ,KAAK,CAACa,IAAI;AAAA,CAAC;AAC9C;AACA;AACA,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAGtB,MAAM,CAACD,MAAM,CAACwB,KAAK,CAAE;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,gBAAgB,GAAGxB,MAAM,CAACuB,KAA6B;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,aAAaE,KAAA;EAAA,IAAC;IAAEjB,KAAK;IAAEG;EAAkC,CAAC,GAAAc,KAAA;EAAA,OAClDd,UAAU,GAAGH,KAAK,CAACI,KAAK,GAAGc,SAAS;AAAA,CAAC;AAC7C,CAAC;AAID,OAAO,MAAMC,0BAA0B,GAAG3B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAmC;AAC9F;AACA,mBAAmByB,KAAA;EAAA,IAAC;IAAEZ;EAA4B,CAAC,GAAAY,KAAA;EAAA,OAC3CZ,2BAA2B,GAAG,MAAM,GAAG,oCAAoC;AAAA,CAAC;AACpF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,sBAAsB,GAAG7B,MAAM,CAACG,GAAI;AACjD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,uBAAuB,GAAG9B,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"Input.styles.js","names":["motion","styled","css","StyledInput","div","_ref","$isDisabled","StyledInputContentWrapper","_ref2","theme","colorMode","_ref3","$isInvalid","wrong","_ref4","_ref5","$shouldShowOnlyBottomBorder","_ref6","$shouldRoundRightCorners","StyledInputContent","_ref7","StyledInputField","input","_ref8","text","_ref9","$shouldShowCenteredContent","StyledMotionInputLabelWrapper","label","StyledInputLabel","_ref10","undefined","StyledMotionInputClearIcon","_ref11","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';\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}>;\n\nexport const StyledInputContentWrapper = styled.div<StyledInputContentWrapperProps>`\n    align-items: center;\n    background-color: ${({ theme }: StyledInputContentWrapperProps) =>\n        theme.colorMode === 'classic' ? 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    ${({ $shouldShowOnlyBottomBorder }) =>\n        !$shouldShowOnlyBottomBorder &&\n        css`\n            min-height: 42px;\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}>;\n\nexport const StyledInputField = styled.input<StyledInputFieldProps>`\n    background: none;\n    border: none;\n    color: ${({ theme, $isInvalid }: StyledInputFieldProps) =>\n        $isInvalid ? theme.wrong : theme.text};\n    padding: 0;\n    width: 100%;\n\n    ${({ $shouldShowCenteredContent }) =>\n        $shouldShowCenteredContent &&\n        css`\n            text-align: center;\n        `}\n`;\n\nexport const StyledMotionInputLabelWrapper = styled(motion.label)`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    gap: 4px;\n    line-height: 1.3;\n    pointer-events: none;\n    position: absolute;\n    user-select: none;\n    max-width: 100%;\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 : undefined};\n`;\n\ntype StyledMotionInputClearIconProps = WithTheme<{ $shouldShowOnlyBottomBorder?: boolean }>;\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: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\nexport const StyledInputIconWrapper = styled.div`\n    align-items: baseline;\n    display: flex;\n    flex: 0 0 auto;\n    justify-content: center;\n    margin-left: 10px;\n`;\n\nexport const StyledInputRightElement = styled.div`\n    border-bottom-right-radius: 3px;\n    border-top-right-radius: 3px;\n    overflow: hidden;\n    flex: 0 0 auto;\n`;\n"],"mappings":"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"}

package/lib/components/list/list-item/list-item-head/ListItemHead.js

@@ -70,9 +70,9 @@ const ListItemHead = _ref => {
     $isIconOrImageGiven: iconOrImageElement !== undefined,
     $isOpen: isOpen
   }, /*#__PURE__*/React.createElement(StyledListItemHeadTitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadTitleText, {
-    className: "ellipsis"
+    $isOpen: isOpen
   }, title), rightElements && rightElements.length > 1 && rightElements[0] && /*#__PURE__*/React.createElement(StyledListItemHeadTopRightElement, null, rightElements[0])), subtitle && /*#__PURE__*/React.createElement(StyledListItemHeadSubtitle, null, /*#__PURE__*/React.createElement(StyledListItemHeadSubtitleText, {
-    className: "ellipsis"
+    $isOpen: isOpen
   }, subtitle), rightElements && rightElements.length > 1 && rightElements[1] && /*#__PURE__*/React.createElement(StyledListItemHeadBottomRightElement, null, rightElements[1]))), rightElements?.length === 1 && /*#__PURE__*/React.createElement(StyledListItemHeadRightElement, null, rightElements[0]), hoverItem && /*#__PURE__*/React.createElement(StyledMotionListItemHeadHoverItem, {
     animate: {
       marginLeft: shouldShowHoverItem ? 8 : 0,

package/lib/components/list/list-item/list-item-head/ListItemHead.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useMemo","useRef","useState","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleText","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","leftElements","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","animate","rotate","initial","transition","type","$isIconOrImageGiven","$isOpen","length","marginLeft","opacity","width","duration","displayName"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    leftElements?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n    leftElements,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            {isAnyItemExpandable && (\n                <StyledMotionListItemHeadIndicator\n                    animate={{ rotate: isOpen ? 90 : 0 }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                </StyledMotionListItemHeadIndicator>\n            )}\n            {leftElements}\n            {iconOrImageElement}\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleText className=\"ellipsis\">\n                        {title}\n                    </StyledListItemHeadTitleText>\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleText className=\"ellipsis\">\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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"}
+{"version":3,"file":"ListItemHead.js","names":["React","useCallback","useMemo","useRef","useState","Icon","ListItemIcon","ListItemImage","StyledListItemHead","StyledListItemHeadBottomRightElement","StyledListItemHeadContent","StyledListItemHeadRightElement","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTitle","StyledListItemHeadTitleText","StyledListItemHeadTopRightElement","StyledMotionListItemHeadHoverItem","StyledMotionListItemHeadIndicator","ListItemHead","_ref","hoverItem","icons","images","isAnyItemExpandable","isExpandable","isOpen","onClick","onLongPress","rightElements","subtitle","shouldShowRoundImage","title","leftElements","shouldShowHoverItem","setShouldShowHoverItem","longPressTimeoutRef","handleMouseEnter","handleMouseLeave","handleTouchStart","event","current","window","setTimeout","handleTouchEnd","clearTimeout","iconOrImageElement","createElement","undefined","className","$isClickable","$isAnyItemExpandable","onMouseEnter","onMouseLeave","onTouchStart","onTouchEnd","animate","rotate","initial","transition","type","$isIconOrImageGiven","$isOpen","length","marginLeft","opacity","width","duration","displayName"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.tsx"],"sourcesContent":["import React, {\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    TouchEventHandler,\n    useCallback,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../../../icon/Icon';\nimport ListItemIcon from './list-item-icon/ListItemIcon';\nimport ListItemImage from './list-item-image/ListItemImage';\nimport {\n    StyledListItemHead,\n    StyledListItemHeadBottomRightElement,\n    StyledListItemHeadContent,\n    StyledListItemHeadRightElement,\n    StyledListItemHeadSubtitle,\n    StyledListItemHeadSubtitleText,\n    StyledListItemHeadTitle,\n    StyledListItemHeadTitleText,\n    StyledListItemHeadTopRightElement,\n    StyledMotionListItemHeadHoverItem,\n    StyledMotionListItemHeadIndicator,\n} from './ListItemHead.styles';\n\ntype ListItemHeadProps = {\n    hoverItem?: ReactNode;\n    icons?: string[];\n    images?: string[];\n    isAnyItemExpandable: boolean;\n    isExpandable: boolean;\n    isOpen: boolean;\n    onClick?: MouseEventHandler<HTMLDivElement>;\n    onLongPress?: TouchEventHandler<HTMLDivElement>;\n    rightElements?: [ReactNode, ...ReactNode[]];\n    subtitle?: ReactNode;\n    leftElements?: ReactNode;\n    shouldShowRoundImage?: boolean;\n    title: ReactNode;\n};\n\nconst ListItemHead: FC<ListItemHeadProps> = ({\n    hoverItem,\n    icons,\n    images,\n    isAnyItemExpandable,\n    isExpandable,\n    isOpen,\n    onClick,\n    onLongPress,\n    rightElements,\n    subtitle,\n    shouldShowRoundImage,\n    title,\n    leftElements,\n}) => {\n    const [shouldShowHoverItem, setShouldShowHoverItem] = useState(false);\n\n    const longPressTimeoutRef = useRef<number>();\n\n    const handleMouseEnter = useCallback(() => setShouldShowHoverItem(true), []);\n\n    const handleMouseLeave = useCallback(() => setShouldShowHoverItem(false), []);\n\n    const handleTouchStart = useCallback<TouchEventHandler<HTMLDivElement>>(\n        (event) => {\n            longPressTimeoutRef.current = window.setTimeout(() => {\n                if (typeof onLongPress === 'function') {\n                    onLongPress(event);\n                }\n            }, 400);\n        },\n        [onLongPress],\n    );\n\n    const handleTouchEnd = useCallback(() => {\n        clearTimeout(longPressTimeoutRef.current);\n    }, []);\n\n    const iconOrImageElement = useMemo(() => {\n        if (icons) {\n            return <ListItemIcon icons={icons} />;\n        }\n\n        if (images) {\n            return <ListItemImage images={images} shouldShowRoundImage={!!shouldShowRoundImage} />;\n        }\n\n        return undefined;\n    }, [icons, images, shouldShowRoundImage]);\n\n    return (\n        <StyledListItemHead\n            className=\"beta-chayns-list-item-head\"\n            $isClickable={typeof onClick === 'function' || isExpandable}\n            $isAnyItemExpandable={isAnyItemExpandable}\n            onClick={onClick}\n            onMouseEnter={handleMouseEnter}\n            onMouseLeave={handleMouseLeave}\n            onTouchStart={typeof onLongPress === 'function' ? handleTouchStart : undefined}\n            onTouchEnd={typeof onLongPress === 'function' ? handleTouchEnd : undefined}\n        >\n            {isAnyItemExpandable && (\n                <StyledMotionListItemHeadIndicator\n                    animate={{ rotate: isOpen ? 90 : 0 }}\n                    initial={false}\n                    transition={{ type: 'tween' }}\n                >\n                    {isExpandable && <Icon icons={['fa fa-chevron-right']} />}\n                </StyledMotionListItemHeadIndicator>\n            )}\n            {leftElements}\n            {iconOrImageElement}\n            <StyledListItemHeadContent\n                $isIconOrImageGiven={iconOrImageElement !== undefined}\n                $isOpen={isOpen}\n            >\n                <StyledListItemHeadTitle>\n                    <StyledListItemHeadTitleText $isOpen={isOpen}>\n                        {title}\n                    </StyledListItemHeadTitleText>\n                    {rightElements && rightElements.length > 1 && rightElements[0] && (\n                        <StyledListItemHeadTopRightElement>\n                            {rightElements[0]}\n                        </StyledListItemHeadTopRightElement>\n                    )}\n                </StyledListItemHeadTitle>\n                {subtitle && (\n                    <StyledListItemHeadSubtitle>\n                        <StyledListItemHeadSubtitleText $isOpen={isOpen}>\n                            {subtitle}\n                        </StyledListItemHeadSubtitleText>\n                        {rightElements && rightElements.length > 1 && rightElements[1] && (\n                            <StyledListItemHeadBottomRightElement>\n                                {rightElements[1]}\n                            </StyledListItemHeadBottomRightElement>\n                        )}\n                    </StyledListItemHeadSubtitle>\n                )}\n            </StyledListItemHeadContent>\n            {rightElements?.length === 1 && (\n                <StyledListItemHeadRightElement>{rightElements[0]}</StyledListItemHeadRightElement>\n            )}\n            {hoverItem && (\n                <StyledMotionListItemHeadHoverItem\n                    animate={{\n                        marginLeft: shouldShowHoverItem ? 8 : 0,\n                        opacity: shouldShowHoverItem ? 1 : 0,\n                        width: shouldShowHoverItem ? 'auto' : 0,\n                    }}\n                    initial={false}\n                    transition={{ duration: 0.15, type: 'tween' }}\n                >\n                    {hoverItem}\n                </StyledMotionListItemHeadHoverItem>\n            )}\n        </StyledListItemHead>\n    );\n};\n\nListItemHead.displayName = 'ListItemHead';\n\nexport default ListItemHead;\n"],"mappings":"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"}

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.d.ts

@@ -277,9 +277,15 @@ type StyledListItemHeadContentProps = {
 };
 export declare const StyledListItemHeadContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledListItemHeadContentProps>>;
 export declare const StyledListItemHeadTitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const StyledListItemHeadTitleText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+type StyledListItemHeadTitleTextProps = WithTheme<{
+    $isOpen: boolean;
+}>;
+export declare const StyledListItemHeadTitleText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledListItemHeadTitleTextProps>>;
 export declare const StyledListItemHeadSubtitle: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const StyledListItemHeadSubtitleText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;
+type StyledListItemHeadSubtitleTextProps = WithTheme<{
+    $isOpen: boolean;
+}>;
+export declare const StyledListItemHeadSubtitleText: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, StyledListItemHeadSubtitleTextProps>>;
 export declare const StyledListItemHeadTopRightElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const StyledListItemHeadBottomRightElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const StyledListItemHeadRightElement: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js

@@ -64,6 +64,21 @@ export const StyledListItemHeadTitle = styled.div`
     justify-content: space-between;
 `;
 export const StyledListItemHeadTitleText = styled.span`
+    font-weight: ${_ref6 => {
+  let {
+    $isOpen
+  } = _ref6;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref7 => {
+  let {
+    $isOpen
+  } = _ref7;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
     flex: 1 1 auto;
     min-width: 0;
 `;
@@ -75,6 +90,21 @@ export const StyledListItemHeadSubtitle = styled.div`
     opacity: 0.75;
 `;
 export const StyledListItemHeadSubtitleText = styled.span`
+    font-weight: ${_ref8 => {
+  let {
+    $isOpen
+  } = _ref8;
+  return $isOpen ? 'bold' : 'normal';
+}};
+    white-space: ${_ref9 => {
+  let {
+    $isOpen
+  } = _ref9;
+  return $isOpen ? 'normal' : 'nowrap';
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+
     flex: 1 1 auto;
     font-size: 85%;
     min-width: 0;

package/lib/components/list/list-item/list-item-head/ListItemHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n\n    ${({ $isClickable }) =>\n        $isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    $isIconOrImageGiven: boolean;\n    $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledListItemHeadTitleText = styled.span`\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadSubtitleText = styled.span`\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGX,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBU,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,IAAK;AACvD;AACA;AACA,CAAC;AAED,OAAO,MAAMC,0BAA0B,GAAGrB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,8BAA8B,GAAGtB,MAAM,CAACoB,IAAK;AAC1D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMG,iCAAiC,GAAGvB,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,oCAAoC,GAAGxB,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,8BAA8B,GAAGzB,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAMuB,iCAAiC,GAAG1B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}
+{"version":3,"file":"ListItemHead.styles.js","names":["motion","styled","css","StyledListItemHead","div","_ref","theme","text","_ref2","$isAnyItemExpandable","_ref3","$isClickable","StyledMotionListItemHeadIndicator","StyledListItemHeadContent","_ref4","$isOpen","_ref5","$isIconOrImageGiven","undefined","StyledListItemHeadTitle","StyledListItemHeadTitleText","span","_ref6","_ref7","StyledListItemHeadSubtitle","StyledListItemHeadSubtitleText","_ref8","_ref9","StyledListItemHeadTopRightElement","StyledListItemHeadBottomRightElement","StyledListItemHeadRightElement","StyledMotionListItemHeadHoverItem"],"sources":["../../../../../src/components/list/list-item/list-item-head/ListItemHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type {\n    FramerMotionBugFix,\n    WithTheme,\n} from '../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemHeadProps = WithTheme<{\n    $isClickable: boolean;\n    $isAnyItemExpandable: boolean;\n}>;\n\nexport const StyledListItemHead = styled.div<StyledListItemHeadProps>`\n    align-items: center;\n    color: ${({ theme }: StyledListItemHeadProps) => theme.text};\n    display: flex;\n    height: 64px;\n    padding: 12px 9px;\n\n    ${({ $isAnyItemExpandable }) =>\n        !$isAnyItemExpandable &&\n        css`\n            padding-left: 12px;\n        `}\n\n    ${({ $isClickable }) =>\n        $isClickable &&\n        css`\n            cursor: pointer;\n        `}\n`;\n\nexport const StyledMotionListItemHeadIndicator = styled(motion.div)<FramerMotionBugFix>`\n    align-items: center;\n    display: flex;\n    flex: 0 0 auto;\n    height: 26px;\n    justify-content: center;\n    width: 26px;\n`;\n\ntype StyledListItemHeadContentProps = {\n    $isIconOrImageGiven: boolean;\n    $isOpen: boolean;\n};\n\nexport const StyledListItemHeadContent = styled.div<StyledListItemHeadContentProps>`\n    display: flex;\n    flex: 1 1 auto;\n    flex-direction: column;\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    justify-content: center;\n    line-height: normal;\n    margin-left: ${({ $isIconOrImageGiven }) => ($isIconOrImageGiven ? '10px' : undefined)};\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\ntype StyledListItemHeadTitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadTitleText = styled.span<StyledListItemHeadTitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadSubtitle = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n    margin-top: 2px;\n    opacity: 0.75;\n`;\n\ntype StyledListItemHeadSubtitleTextProps = WithTheme<{ $isOpen: boolean }>;\n\nexport const StyledListItemHeadSubtitleText = styled.span<StyledListItemHeadSubtitleTextProps>`\n    font-weight: ${({ $isOpen }) => ($isOpen ? 'bold' : 'normal')};\n    white-space: ${({ $isOpen }) => ($isOpen ? 'normal' : 'nowrap')};\n    overflow: hidden;\n    text-overflow: ellipsis;\n\n    flex: 1 1 auto;\n    font-size: 85%;\n    min-width: 0;\n`;\n\nexport const StyledListItemHeadTopRightElement = styled.div`\n    flex: 0 0 auto;\n    font-size: 85%;\n    margin-left: 8px;\n    opacity: 0.75;\n`;\n\nexport const StyledListItemHeadBottomRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n    font-size: 85%;\n`;\n\nexport const StyledListItemHeadRightElement = styled.div`\n    flex: 0 0 auto;\n    margin-left: 8px;\n`;\n\nexport const StyledMotionListItemHeadHoverItem = styled(motion.div)<FramerMotionBugFix>`\n    overflow: hidden;\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA6B;AACtE;AACA,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA,CAAC;AAChE;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OACvB,CAACC,oBAAoB,IACrBP,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV;AACA,MAAMQ,KAAA;EAAA,IAAC;IAAEC;EAAa,CAAC,GAAAD,KAAA;EAAA,OACfC,YAAY,IACZT,GAAI;AACZ;AACA,SAAS;AAAA,CAAC;AACV,CAAC;AAED,OAAO,MAAMU,iCAAiC,GAAGX,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,yBAAyB,GAAGZ,MAAM,CAACG,GAAoC;AACpF;AACA;AACA;AACA,mBAAmBU,KAAA;EAAA,IAAC;IAAEC;EAAQ,CAAC,GAAAD,KAAA;EAAA,OAAMC,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE;AACA;AACA,mBAAmBC,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OAAMC,mBAAmB,GAAG,MAAM,GAAGC,SAAS;AAAA,CAAE;AAC3F;AACA,CAAC;AAED,OAAO,MAAMC,uBAAuB,GAAGlB,MAAM,CAACG,GAAI;AAClD;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMgB,2BAA2B,GAAGnB,MAAM,CAACoB,IAAuC;AACzF,mBAAmBC,KAAA;EAAA,IAAC;IAAEP;EAAQ,CAAC,GAAAO,KAAA;EAAA,OAAMP,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBQ,KAAA;EAAA,IAAC;IAAER;EAAQ,CAAC,GAAAQ,KAAA;EAAA,OAAMR,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMS,0BAA0B,GAAGvB,MAAM,CAACG,GAAI;AACrD;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMqB,8BAA8B,GAAGxB,MAAM,CAACoB,IAA0C;AAC/F,mBAAmBK,KAAA;EAAA,IAAC;IAAEX;EAAQ,CAAC,GAAAW,KAAA;EAAA,OAAMX,OAAO,GAAG,MAAM,GAAG,QAAQ;AAAA,CAAE;AAClE,mBAAmBY,KAAA;EAAA,IAAC;IAAEZ;EAAQ,CAAC,GAAAY,KAAA;EAAA,OAAMZ,OAAO,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACpE;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMa,iCAAiC,GAAG3B,MAAM,CAACG,GAAI;AAC5D;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMyB,oCAAoC,GAAG5B,MAAM,CAACG,GAAI;AAC/D;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM0B,8BAA8B,GAAG7B,MAAM,CAACG,GAAI;AACzD;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,iCAAiC,GAAG9B,MAAM,CAACD,MAAM,CAACI,GAAG,CAAsB;AACxF;AACA,CAAC"}

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js

@@ -18,7 +18,6 @@ export const StyledListItemIcon = styled.div`
     flex: 0 0 auto;
     height: 40px;
     justify-content: center;
-    margin-right: 10px;
     width: 40px;
 `;
 //# sourceMappingURL=ListItemIcon.styles.js.map

package/lib/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListItemIcon.styles.js","names":["styled","StyledListItemIcon","div","_ref","theme","_ref2"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    margin-right: 10px;\n    width: 40px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAI;AAC7C;AACA,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAA+B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}
+{"version":3,"file":"ListItemIcon.styles.js","names":["styled","StyledListItemIcon","div","_ref","theme","_ref2"],"sources":["../../../../../../src/components/list/list-item/list-item-head/list-item-icon/ListItemIcon.styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledListItemIconProps = WithTheme<unknown>;\n\nexport const StyledListItemIcon = styled.div`\n    align-items: center;\n    background-color: rgba(${({ theme }: StyledListItemIconProps) => theme['text-rgb']}, 0.1);\n    box-shadow: 0 0 0 1px rgba(${({ theme }: StyledListItemIconProps) => theme['009-rgb']}, 0.08)\n        inset;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AAKtC,OAAO,MAAMC,kBAAkB,GAAGD,MAAM,CAACE,GAAI;AAC7C;AACA,6BAA6BC,IAAA;EAAA,IAAC;IAAEC;EAA+B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AACvF,iCAAiCC,KAAA;EAAA,IAAC;IAAED;EAA+B,CAAC,GAAAC,KAAA;EAAA,OAAKD,KAAK,CAAC,SAAS,CAAC;AAAA,CAAC;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA,CAAC"}

package/lib/components/number-input/NumberInput.js

@@ -26,9 +26,6 @@ const NumberInput = _ref => {
   const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);
   const onLocalChange = event => {
     const newValue = event.target.value;
-    if (newValue.replaceAll(':', '').length > 4) {
-      return;
-    }
     const sanitizedValueString = newValue
     // Removes everything except numbers, commas and points
     .replace(NUMBER_CLEAR_REGEX, '');
@@ -126,7 +123,8 @@ const NumberInput = _ref => {
     onBlur: onLocalBlur,
     onFocus: onLocalFocus,
     isDisabled: isDisabled,
-    isInvalid: typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid
+    isInvalid: typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid,
+    shouldShowCenteredContent: shouldShowOnlyBottomBorder
   });
 };
 NumberInput.displayName = 'NumberInput';

package/lib/components/number-input/NumberInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","replaceAll","length","sanitizedValueString","replace","valueToCheck","string","onLocalBlur","sanitizedValue","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","displayName"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the value is invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    isInvalid,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        if (newValue.replaceAll(':', '').length > 4) {\n            return;\n        }\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  }),\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}
+{"version":3,"file":"NumberInput.js","names":["React","useEffect","useState","NUMBER_CLEAR_REGEX","formateNumber","isValidString","parseFloatWithDecimals","Input","NumberInput","_ref","isDecimalInput","isMoneyInput","isTimeInput","isInvalid","maxNumber","Infinity","value","placeholder","onBlur","isDisabled","onChange","shouldShowOnlyBottomBorder","minNumber","plainText","setPlainText","formattedValue","setFormattedValue","hasFocus","setHasFocus","isValueInvalid","setIsValueInvalid","localPlaceholder","undefined","onLocalChange","event","newValue","target","sanitizedValueString","replace","valueToCheck","replaceAll","string","onLocalBlur","sanitizedValue","length","newIsInvalid","parsedNumber","stringValue","decimals","newStringValue","number","onLocalFocus","createElement","inputMode","onFocus","shouldShowCenteredContent","displayName"],"sources":["../../../src/components/number-input/NumberInput.tsx"],"sourcesContent":["import React, { ChangeEventHandler, FC, useEffect, useState } from 'react';\nimport { NUMBER_CLEAR_REGEX } from '../../constants/numberInput';\nimport { formateNumber, isValidString, parseFloatWithDecimals } from '../../utils/numberInput';\nimport Input from '../input/Input';\n\nexport type NumberInputProps = {\n    /**\n     * Applies rules for decimal input.\n     * Enables the user to input one zero as number before the comma\n     */\n    isDecimalInput?: boolean;\n    /**\n     * Whether the input is disabled\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the value is invalid.\n     */\n    isInvalid?: boolean;\n    /**\n     * Applies rules for money input.\n     * Rules: only two decimal places, one zero before the comma\n     */\n    isMoneyInput?: boolean;\n    /**\n     * Whether the value should be formatted as a time.\n     */\n    isTimeInput?: boolean;\n    /**\n     * Limits the number to this value\n     */\n    maxNumber?: number;\n    /**\n     * Limits the number to this value\n     */\n    minNumber?: number;\n    /**\n     * Callback function that is called when the input gets out of focus\n     */\n    onBlur?: (newNumber: number | string | null, isInvalid: boolean) => void;\n    /**\n     * Callback function that is called when the input changes\n     * It will pass the text from the input\n     */\n    onChange?: (newValue: string) => void;\n    /**\n     * Placeholder for the input field\n     */\n    placeholder?: string;\n    /**\n     * Whether only the bottom border should be displayed\n     */\n    shouldShowOnlyBottomBorder?: boolean;\n    /**\n     * The value, that should be displayed in the input, when it is in focus.\n     * You can also pass a stringified number as default value.\n     * NOTE: If you pass a stringified number, it will be formatted to the selected format\n     */\n    value?: string;\n};\n\nconst NumberInput: FC<NumberInputProps> = ({\n    isDecimalInput,\n    isMoneyInput,\n    isTimeInput,\n    isInvalid,\n    maxNumber = Infinity,\n    value,\n    placeholder,\n    onBlur,\n    isDisabled,\n    onChange,\n    shouldShowOnlyBottomBorder,\n    minNumber = -Infinity,\n}) => {\n    // the plainText will be shown in the input, when it is in focus\n    const [plainText, setPlainText] = useState<string>('');\n    // the formattedValue will be shown in the input, when it is not in focus\n    const [formattedValue, setFormattedValue] = useState<string>('');\n    const [hasFocus, setHasFocus] = useState<boolean>(false);\n\n    const [isValueInvalid, setIsValueInvalid] = useState(false);\n    const localPlaceholder = placeholder ?? (isMoneyInput ? '€' : undefined);\n\n    const onLocalChange: ChangeEventHandler<HTMLInputElement> = (event) => {\n        const newValue = event.target.value;\n\n        const sanitizedValueString = newValue\n            // Removes everything except numbers, commas and points\n            .replace(NUMBER_CLEAR_REGEX, '');\n\n        const valueToCheck = sanitizedValueString.replaceAll(',', '.');\n\n        if (!isValidString({ string: valueToCheck, isMoneyInput, isDecimalInput, isTimeInput })) {\n            return;\n        }\n\n        setPlainText(sanitizedValueString.replaceAll('.', ','));\n\n        if (typeof onChange === 'function') {\n            onChange(sanitizedValueString.replaceAll('.', ','));\n        }\n    };\n\n    const onLocalBlur = () => {\n        const sanitizedValue = plainText.length === 0 ? '0' : plainText;\n        let newIsInvalid = false;\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: sanitizedValue.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            if (parsedNumber !== 0 && (parsedNumber > maxNumber || parsedNumber < minNumber)) {\n                newIsInvalid = true;\n            }\n\n            setIsValueInvalid(newIsInvalid);\n        }\n\n        const newStringValue =\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? sanitizedValue : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  });\n\n        setFormattedValue(newStringValue);\n        setPlainText(newStringValue.replaceAll('.', ''));\n        setHasFocus(false);\n\n        if (typeof onChange === 'function') {\n            onChange(newStringValue.replaceAll('.', ''));\n        }\n\n        if (typeof onBlur === 'function') {\n            if (isTimeInput) {\n                onBlur(newStringValue, newIsInvalid);\n            } else {\n                onBlur(parsedNumber === 0 ? null : parsedNumber, newIsInvalid);\n            }\n        }\n    };\n\n    const onLocalFocus = () => {\n        // formattedValue will be a number string with german number format (e.g. 1.000,00)\n        // It will remove all dots, so that the user can type in the number\n        setPlainText(formattedValue.replaceAll('.', ''));\n\n        // This will update the external state\n        if (typeof onChange === 'function') {\n            onChange(formattedValue.replaceAll('.', ''));\n        }\n\n        setIsValueInvalid(false);\n        setHasFocus(true);\n    };\n\n    // updates the formattedValue, when the value changes\n    useEffect(() => {\n        let parsedNumber = null;\n\n        if (!isTimeInput) {\n            parsedNumber = parseFloatWithDecimals({\n                stringValue: plainText.replace(',', '.').replaceAll(':', ''),\n                decimals: isMoneyInput ? 2 : undefined,\n            });\n\n            // checks, if a given number is invalid, if the input is not in focus\n            if (!hasFocus) {\n                setIsValueInvalid(parsedNumber > maxNumber || parsedNumber < minNumber);\n            }\n        }\n\n        setFormattedValue(\n            plainText.length === 0\n                ? ''\n                : formateNumber({\n                      number: isTimeInput ? plainText : parsedNumber,\n                      isMoneyInput,\n                      isTimeInput,\n                  }),\n        );\n    }, [hasFocus, isMoneyInput, isTimeInput, maxNumber, minNumber, plainText]);\n\n    useEffect(() => {\n        if (typeof value === 'string') {\n            setPlainText(value);\n        }\n    }, [value]);\n\n    return (\n        <Input\n            shouldShowOnlyBottomBorder={shouldShowOnlyBottomBorder}\n            inputMode=\"decimal\"\n            onChange={onLocalChange}\n            value={hasFocus ? plainText : formattedValue}\n            placeholder={localPlaceholder}\n            onBlur={onLocalBlur}\n            onFocus={onLocalFocus}\n            isDisabled={isDisabled}\n            isInvalid={typeof isInvalid === 'boolean' ? isInvalid : isValueInvalid}\n            shouldShowCenteredContent={shouldShowOnlyBottomBorder}\n        />\n    );\n};\n\nNumberInput.displayName = 'NumberInput';\n\nexport default NumberInput;\n"],"mappings":"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"}

package/lib/components/search-box/SearchBox.d.ts

@@ -1,13 +1,13 @@
 import { ChangeEventHandler, FC, FocusEventHandler, KeyboardEventHandler } from 'react';
-import type { ISearchBoxItem } from '../../types/searchBox';
+import type { ISearchBoxItem, ISearchBoxItems } from '../../types/searchBox';
 export type SearchBoxRef = {
     clear: VoidFunction;
 };
 export type SearchBoxProps = {
     /**
-     * A list of items that can be searched.
+     * List of groups with items that can be searched. It is possible to give only one list; if multiple lists are provided, the 'group name' parameter becomes mandatory.
      */
-    list: ISearchBoxItem[];
+    lists: ISearchBoxItems[];
     /**
      * The placeholder that should be displayed.
      */
@@ -40,6 +40,10 @@ export type SearchBoxProps = {
      * If true, the images of the items are displayed in a round shape.
      */
     shouldShowRoundImage?: boolean;
+    /**
+     * If true, the value in the Input is displayed in the list.
+     */
+    shouldAddInputToList: boolean;
 };
 declare const SearchBox: FC<SearchBoxProps>;
 export default SearchBox;