@chayns-components/core 5.0.0-beta.912 → 5.0.0-beta.913

package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js

@@ -33,10 +33,11 @@ const ComboBoxItem = ({
         text,
         value,
         suffixElement,
-        imageUrl
+        imageUrl,
+        icons
       });
     }
-  }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
   const isTouch = (0, _environment.getIsTouch)();
   return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItem, {
     id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,

package/lib/cjs/components/combobox/combobox-item/ComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isDisabled","$isSelected","$isTouch","StyledComboBoxItemImage","src","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","as","tagName","style","styles","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl });\n        }\n    }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader>\n                        <StyledComboBoxItemContentHeaderText\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            {text}\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderText>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ComboBoxItem","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isDisabled","$isSelected","$isTouch","StyledComboBoxItemImage","src","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","as","tagName","style","styles","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader>\n                        <StyledComboBoxItemContentHeaderText\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            {text}\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderText>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/tooltip/Tooltip.js

@@ -41,7 +41,7 @@ const Tooltip = ({
     content: content,
     ref: tooltipRef,
     container: container,
-    shouldUseChildrenWidth: false
+    shouldUseChildrenWidth: shouldUseChildrenWidth
   }, /*#__PURE__*/_react.default.createElement(_Tooltip.StyledTooltipChildren, {
     $isOnlyText: (0, _tooltip.isTextOnlyElement)(children),
     $shouldUseChildrenWidth: shouldUseChildrenWidth

package/lib/cjs/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={false}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["_react","_interopRequireWildcard","require","_tooltip","_Popup","_interopRequireDefault","_TooltipItem","_Tooltip","e","__esModule","default","_getRequireWildcardCache","WeakMap","r","t","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","Tooltip","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","useRef","content","useMemo","isValidElement","createElement","width","text","headline","imageUrl","button","StyledTooltip","StyledTooltipChildren","$isOnlyText","isTextOnlyElement","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName","_default","exports"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/utils/slider.js

@@ -44,7 +44,7 @@ const calculateGradientOffset = ({
 }) => {
   const percentage = (value - min) / (max - min);
   const adjustedWidth = containerWidth - thumbWidth / 2;
-  return percentage * adjustedWidth + thumbWidth / 2;
+  return percentage * adjustedWidth + thumbWidth / 2 + 5;
 };
 exports.calculateGradientOffset = calculateGradientOffset;
 const calculatePopupPosition = ({

package/lib/cjs/utils/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","fromValue","toValue","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    fromValue?: number;\n    toValue?: number;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme, fromValue, toValue }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromValue ?? fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toValue ?? toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth / 2;\n\n    return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n    sliderValue: number;\n    min: number;\n    max: number;\n    popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n    sliderValue,\n    min,\n    max,\n    popupWidth,\n}: CalculatePopupPositionOptions) => {\n    // Berechnung des Prozentwerts des Sliders zwischen min und max\n    const percentage = (sliderValue - min) / (max - min);\n\n    // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n    const leftAtMin = -10;\n    const leftAtMax = -popupWidth + 25;\n\n    // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n    return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '16px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"slider.js","names":["fillSlider","fromSlider","toSlider","theme","fromValue","toValue","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","exports","calculateGradientOffset","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    fromValue?: number;\n    toValue?: number;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme, fromValue, toValue }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromValue ?? fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toValue ?? toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth / 2;\n\n    return percentage * adjustedWidth + thumbWidth / 2 + 5;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n    sliderValue: number;\n    min: number;\n    max: number;\n    popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n    sliderValue,\n    min,\n    max,\n    popupWidth,\n}: CalculatePopupPositionOptions) => {\n    // Berechnung des Prozentwerts des Sliders zwischen min und max\n    const percentage = (sliderValue - min) / (max - min);\n\n    // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n    const leftAtMin = -10;\n    const leftAtMax = -popupWidth + 25;\n\n    // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n    return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '16px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js

@@ -25,10 +25,11 @@ const ComboBoxItem = _ref => {
         text,
         value,
         suffixElement,
-        imageUrl
+        imageUrl,
+        icons
       });
     }
-  }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
   const isTouch = getIsTouch();
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
     id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,

package/lib/esm/components/combobox/combobox-item/ComboBoxItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$shouldShowBigImage","trim","$shouldShowRoundImage","as","tagName","style","styles","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl });\n        }\n    }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader>\n                        <StyledComboBoxItemContentHeaderText\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            {text}\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderText>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAmB9B,MAAMC,YAAmC,GAAGC,IAAA,IAetC;EAAA,IAfuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,IAAI;IACJC;EACJ,CAAC,GAAAd,IAAA;EACG,MAAMe,eAAe,GAAG3B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACgB,UAAU,EAAE;MACbE,QAAQ,CAAC;QAAEO,IAAI;QAAEC,KAAK;QAAEH,aAAa;QAAER;MAAS,CAAC,CAAC;IACtD;EACJ,CAAC,EAAE,CAACA,QAAQ,EAAEC,UAAU,EAAEE,QAAQ,EAAEK,aAAa,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEhE,MAAME,OAAO,GAAG1B,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGgB,MAAM,CAAChB,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEiB,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEhB,UAAW;IACxBiB,WAAW,EAAEhB,UAAW;IACxBiB,QAAQ,EAAEN;EAAQ,GAEjBb,QAAQ,iBACLhB,KAAA,CAAA8B,aAAA,CAACnB,uBAAuB;IACpByB,GAAG,EAAEpB,QAAS;IACdqB,mBAAmB,EACfhB,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACe,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEjB;EAAqB,CAC/C,CACJ,EACAR,KAAK,iBAAId,KAAA,CAAA8B,aAAA,CAAC1B,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB,qBACtBN,KAAA,CAAA8B,aAAA,CAACvB,+BAA+B,qBAC5BP,KAAA,CAAA8B,aAAA,CAACrB,mCAAmC;IAChC+B,EAAE,EAAEf,UAAU,EAAEgB,OAAQ;IACxBC,KAAK,EAAEjB,UAAU,EAAEkB;EAAO,GAEzBjB,IAAI,EACJF,aACgC,CAAC,EACrCJ,YAAY,iBACTpB,KAAA,CAAA8B,aAAA,CAACtB,2CAA2C,QACvCY,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJvB,KAAA,CAAA8B,aAAA,CAACpB,gCAAgC,QAC5Ba,OAC6B,CAEf,CACX,CACvB,EACD,CACIK,eAAe,EACfd,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVC,UAAU,EACVW,OAAO,EACPT,YAAY,EACZC,kBAAkB,EAClBC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbE,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDd,YAAY,CAACgC,WAAW,GAAG,cAAc;AAEzC,eAAehC,YAAY","ignoreList":[]}
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","getIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","_ref","icons","id","imageUrl","isDisabled","isSelected","onSelect","rightElement","shouldShowBigImage","shouldShowRoundImage","subtext","suffixElement","textStyles","text","value","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$shouldShowBigImage","trim","$shouldShowRoundImage","as","tagName","style","styles","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { getIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n    StyledComboBoxItem,\n    StyledComboBoxItemContent,\n    StyledComboBoxItemContentHeader,\n    StyledComboBoxItemContentHeaderRightElement,\n    StyledComboBoxItemContentHeaderText,\n    StyledComboBoxItemContentSubtext,\n    StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    icons?: IComboBoxItem['icons'];\n    id: IComboBoxItem['value'];\n    imageUrl: IComboBoxItem['imageUrl'];\n    isDisabled?: IComboBoxItem['isDisabled'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    rightElement: IComboBoxItem['rightElement'];\n    shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    subtext: IComboBoxItem['subtext'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    textStyles?: IComboBoxItem['textStyles'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    icons,\n    id,\n    imageUrl,\n    isDisabled,\n    isSelected,\n    onSelect,\n    rightElement,\n    shouldShowBigImage,\n    shouldShowRoundImage,\n    subtext,\n    suffixElement,\n    textStyles,\n    text,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        if (!isDisabled) {\n            onSelect({ text, value, suffixElement, imageUrl, icons });\n        }\n    }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);\n\n    const isTouch = getIsTouch();\n\n    return useMemo(\n        () => (\n            <StyledComboBoxItem\n                id={`combobox-item__${typeof id === 'number' ? String(id) : id}`}\n                onClick={handleItemClick}\n                $isDisabled={isDisabled}\n                $isSelected={isSelected}\n                $isTouch={isTouch}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowBigImage={\n                            shouldShowBigImage ||\n                            (typeof subtext === 'string' && subtext.trim() !== '')\n                        }\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                <StyledComboBoxItemContent>\n                    <StyledComboBoxItemContentHeader>\n                        <StyledComboBoxItemContentHeaderText\n                            as={textStyles?.tagName}\n                            style={textStyles?.styles}\n                        >\n                            {text}\n                            {suffixElement}\n                        </StyledComboBoxItemContentHeaderText>\n                        {rightElement && (\n                            <StyledComboBoxItemContentHeaderRightElement>\n                                {rightElement}\n                            </StyledComboBoxItemContentHeaderRightElement>\n                        )}\n                    </StyledComboBoxItemContentHeader>\n                    {subtext && (\n                        <StyledComboBoxItemContentSubtext>\n                            {subtext}\n                        </StyledComboBoxItemContentSubtext>\n                    )}\n                </StyledComboBoxItemContent>\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isDisabled,\n            isSelected,\n            isTouch,\n            rightElement,\n            shouldShowBigImage,\n            shouldShowRoundImage,\n            subtext,\n            suffixElement,\n            text,\n        ],\n    );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AAClE,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,mCAAmC,EACnCC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;AAmB9B,MAAMC,YAAmC,GAAGC,IAAA,IAetC;EAAA,IAfuC;IACzCC,KAAK;IACLC,EAAE;IACFC,QAAQ;IACRC,UAAU;IACVC,UAAU;IACVC,QAAQ;IACRC,YAAY;IACZC,kBAAkB;IAClBC,oBAAoB;IACpBC,OAAO;IACPC,aAAa;IACbC,UAAU;IACVC,IAAI;IACJC;EACJ,CAAC,GAAAd,IAAA;EACG,MAAMe,eAAe,GAAG3B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACgB,UAAU,EAAE;MACbE,QAAQ,CAAC;QAAEO,IAAI;QAAEC,KAAK;QAAEH,aAAa;QAAER,QAAQ;QAAEF;MAAM,CAAC,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACA,KAAK,EAAEE,QAAQ,EAAEC,UAAU,EAAEE,QAAQ,EAAEK,aAAa,EAAEE,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEvE,MAAME,OAAO,GAAG1B,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAA8B,aAAA,CAACzB,kBAAkB;IACfU,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGgB,MAAM,CAAChB,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEiB,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEhB,UAAW;IACxBiB,WAAW,EAAEhB,UAAW;IACxBiB,QAAQ,EAAEN;EAAQ,GAEjBb,QAAQ,iBACLhB,KAAA,CAAA8B,aAAA,CAACnB,uBAAuB;IACpByB,GAAG,EAAEpB,QAAS;IACdqB,mBAAmB,EACfhB,kBAAkB,IACjB,OAAOE,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACe,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAEjB;EAAqB,CAC/C,CACJ,EACAR,KAAK,iBAAId,KAAA,CAAA8B,aAAA,CAAC1B,IAAI;IAACU,KAAK,EAAEA;EAAM,CAAE,CAAC,eAChCd,KAAA,CAAA8B,aAAA,CAACxB,yBAAyB,qBACtBN,KAAA,CAAA8B,aAAA,CAACvB,+BAA+B,qBAC5BP,KAAA,CAAA8B,aAAA,CAACrB,mCAAmC;IAChC+B,EAAE,EAAEf,UAAU,EAAEgB,OAAQ;IACxBC,KAAK,EAAEjB,UAAU,EAAEkB;EAAO,GAEzBjB,IAAI,EACJF,aACgC,CAAC,EACrCJ,YAAY,iBACTpB,KAAA,CAAA8B,aAAA,CAACtB,2CAA2C,QACvCY,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJvB,KAAA,CAAA8B,aAAA,CAACpB,gCAAgC,QAC5Ba,OAC6B,CAEf,CACX,CACvB,EACD,CACIK,eAAe,EACfd,KAAK,EACLC,EAAE,EACFC,QAAQ,EACRC,UAAU,EACVC,UAAU,EACVW,OAAO,EACPT,YAAY,EACZC,kBAAkB,EAClBC,oBAAoB,EACpBC,OAAO,EACPC,aAAa,EACbE,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDd,YAAY,CAACgC,WAAW,GAAG,cAAc;AAEzC,eAAehC,YAAY","ignoreList":[]}

package/lib/esm/components/tooltip/Tooltip.js

@@ -33,7 +33,7 @@ const Tooltip = _ref => {
     content: content,
     ref: tooltipRef,
     container: container,
-    shouldUseChildrenWidth: false
+    shouldUseChildrenWidth: shouldUseChildrenWidth
   }, /*#__PURE__*/React.createElement(StyledTooltipChildren, {
     $isOnlyText: isTextOnlyElement(children),
     $shouldUseChildrenWidth: shouldUseChildrenWidth

package/lib/esm/components/tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={false}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,iBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA,SAAU;IACrBG,sBAAsB,EAAE;EAAM,gBAE9BhB,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}
+{"version":3,"file":"Tooltip.js","names":["React","isValidElement","useMemo","useRef","isTextOnlyElement","Popup","TooltipItem","StyledTooltip","StyledTooltipChildren","Tooltip","_ref","item","children","container","isDisabled","itemWidth","shouldUseChildrenWidth","tooltipRef","content","createElement","width","text","headline","imageUrl","button","$isOnlyText","$shouldUseChildrenWidth","shouldShowOnHover","ref","displayName"],"sources":["../../../../src/components/tooltip/Tooltip.tsx"],"sourcesContent":["import React, { FC, isValidElement, ReactNode, useMemo, useRef, type CSSProperties } from 'react';\nimport type { PopupRef } from '../../types/popup';\nimport type { ITooltipItem } from '../../types/tooltip';\nimport { isTextOnlyElement } from '../../utils/tooltip';\nimport Popup from '../popup/Popup';\nimport TooltipItem from './tooltip-item/TooltipItem';\nimport { StyledTooltip, StyledTooltipChildren } from './Tooltip.styles';\n\nexport type TooltipProps = {\n    /**\n     * The elements that the tooltip should surround.\n     */\n    children: ReactNode;\n    /**\n     * The element where the content of the `Tooltip` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The content that should be displayed.\n     */\n    item: ITooltipItem | ReactNode;\n    /**\n     * The width of an item.\n     */\n    itemWidth?: CSSProperties['width'];\n    /**\n     * whether the tooltip should be shown.\n     */\n    isDisabled?: boolean;\n    /**\n     * Whether the width of the children should be used.\n     */\n    shouldUseChildrenWidth?: boolean;\n};\n\nconst Tooltip: FC<TooltipProps> = ({\n    item,\n    children,\n    container,\n    isDisabled,\n    itemWidth,\n    shouldUseChildrenWidth = true,\n}) => {\n    const tooltipRef = useRef<PopupRef>(null);\n\n    const content = useMemo(() => {\n        if (isValidElement(item)) {\n            return item;\n        }\n\n        return (\n            <TooltipItem\n                width={itemWidth}\n                text={(item as ITooltipItem).text}\n                headline={(item as ITooltipItem).headline}\n                imageUrl={(item as ITooltipItem).imageUrl}\n                button={(item as ITooltipItem).button}\n            />\n        );\n    }, [item, itemWidth]);\n\n    return useMemo(\n        () => (\n            <StyledTooltip>\n                {isDisabled ? (\n                    <StyledTooltipChildren\n                        $isOnlyText={isTextOnlyElement(children)}\n                        $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        {children}\n                    </StyledTooltipChildren>\n                ) : (\n                    <Popup\n                        shouldShowOnHover\n                        content={content}\n                        ref={tooltipRef}\n                        container={container}\n                        shouldUseChildrenWidth={shouldUseChildrenWidth}\n                    >\n                        <StyledTooltipChildren\n                            $isOnlyText={isTextOnlyElement(children)}\n                            $shouldUseChildrenWidth={shouldUseChildrenWidth}\n                        >\n                            {children}\n                        </StyledTooltipChildren>\n                    </Popup>\n                )}\n            </StyledTooltip>\n        ),\n        [isDisabled, children, shouldUseChildrenWidth, content, container],\n    );\n};\n\nTooltip.displayName = 'Tooltip';\n\nexport default Tooltip;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,cAAc,EAAaC,OAAO,EAAEC,MAAM,QAA4B,OAAO;AAGjG,SAASC,iBAAiB,QAAQ,qBAAqB;AACvD,OAAOC,KAAK,MAAM,gBAAgB;AAClC,OAAOC,WAAW,MAAM,4BAA4B;AACpD,SAASC,aAAa,EAAEC,qBAAqB,QAAQ,kBAAkB;AA6BvE,MAAMC,OAAyB,GAAGC,IAAA,IAO5B;EAAA,IAP6B;IAC/BC,IAAI;IACJC,QAAQ;IACRC,SAAS;IACTC,UAAU;IACVC,SAAS;IACTC,sBAAsB,GAAG;EAC7B,CAAC,GAAAN,IAAA;EACG,MAAMO,UAAU,GAAGd,MAAM,CAAW,IAAI,CAAC;EAEzC,MAAMe,OAAO,GAAGhB,OAAO,CAAC,MAAM;IAC1B,iBAAID,cAAc,CAACU,IAAI,CAAC,EAAE;MACtB,OAAOA,IAAI;IACf;IAEA,oBACIX,KAAA,CAAAmB,aAAA,CAACb,WAAW;MACRc,KAAK,EAAEL,SAAU;MACjBM,IAAI,EAAGV,IAAI,CAAkBU,IAAK;MAClCC,QAAQ,EAAGX,IAAI,CAAkBW,QAAS;MAC1CC,QAAQ,EAAGZ,IAAI,CAAkBY,QAAS;MAC1CC,MAAM,EAAGb,IAAI,CAAkBa;IAAO,CACzC,CAAC;EAEV,CAAC,EAAE,CAACb,IAAI,EAAEI,SAAS,CAAC,CAAC;EAErB,OAAOb,OAAO,CACV,mBACIF,KAAA,CAAAmB,aAAA,CAACZ,aAAa,QACTO,UAAU,gBACPd,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CAAC,gBAExBZ,KAAA,CAAAmB,aAAA,CAACd,KAAK;IACFsB,iBAAiB;IACjBT,OAAO,EAAEA,OAAQ;IACjBU,GAAG,EAAEX,UAAW;IAChBJ,SAAS,EAAEA,SAAU;IACrBG,sBAAsB,EAAEA;EAAuB,gBAE/ChB,KAAA,CAAAmB,aAAA,CAACX,qBAAqB;IAClBiB,WAAW,EAAErB,iBAAiB,CAACQ,QAAQ,CAAE;IACzCc,uBAAuB,EAAEV;EAAuB,GAE/CJ,QACkB,CACpB,CAEA,CAClB,EACD,CAACE,UAAU,EAAEF,QAAQ,EAAEI,sBAAsB,EAAEE,OAAO,EAAEL,SAAS,CACrE,CAAC;AACL,CAAC;AAEDJ,OAAO,CAACoB,WAAW,GAAG,SAAS;AAE/B,eAAepB,OAAO","ignoreList":[]}

package/lib/esm/utils/slider.js

@@ -39,7 +39,7 @@ export const calculateGradientOffset = _ref2 => {
   } = _ref2;
   const percentage = (value - min) / (max - min);
   const adjustedWidth = containerWidth - thumbWidth / 2;
-  return percentage * adjustedWidth + thumbWidth / 2;
+  return percentage * adjustedWidth + thumbWidth / 2 + 5;
 };
 export const calculatePopupPosition = _ref3 => {
   let {

package/lib/esm/utils/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","names":["fillSlider","_ref","fromSlider","toSlider","theme","fromValue","toValue","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","calculateGradientOffset","_ref2","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","_ref3","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","_ref4","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    fromValue?: number;\n    toValue?: number;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme, fromValue, toValue }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromValue ?? fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toValue ?? toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth / 2;\n\n    return percentage * adjustedWidth + thumbWidth / 2;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n    sliderValue: number;\n    min: number;\n    max: number;\n    popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n    sliderValue,\n    min,\n    max,\n    popupWidth,\n}: CalculatePopupPositionOptions) => {\n    // Berechnung des Prozentwerts des Sliders zwischen min und max\n    const percentage = (sliderValue - min) / (max - min);\n\n    // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n    const leftAtMin = -10;\n    const leftAtMax = -popupWidth + 25;\n\n    // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n    return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '16px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"slider.js","names":["fillSlider","_ref","fromSlider","toSlider","theme","fromValue","toValue","rangeDistance","Number","max","min","fromPosition","value","toPosition","backgroundColor","trackColor","gradient","style","background","calculateGradientOffset","_ref2","thumbWidth","containerWidth","percentage","adjustedWidth","calculatePopupPosition","_ref3","sliderValue","popupWidth","leftAtMin","leftAtMax","getThumbMaxWidth","_ref4","maxNumber","thumbLabelFormatter","element","document","createElement","height","display","padding","whiteSpace","minWidth","opacity","position","textContent","String","body","appendChild","width","offsetWidth","removeChild"],"sources":["../../../src/utils/slider.ts"],"sourcesContent":["import type { Theme } from '../components/color-scheme-provider/ColorSchemeProvider';\n\nexport interface FillSlider {\n    fromSlider: HTMLInputElement;\n    toSlider: HTMLInputElement;\n    fromValue?: number;\n    toValue?: number;\n    theme: Theme;\n}\n\nexport const fillSlider = ({ fromSlider, toSlider, theme, fromValue, toValue }: FillSlider) => {\n    const rangeDistance = Number(toSlider.max) - Number(toSlider.min);\n    const fromPosition = Number(fromValue ?? fromSlider.value) - Number(toSlider.min);\n    const toPosition = Number(toValue ?? toSlider.value) - Number(toSlider.min);\n\n    const backgroundColor = theme['403'];\n    const trackColor = theme['409'];\n\n    if (!backgroundColor || !trackColor) {\n        return;\n    }\n\n    const gradient = `linear-gradient(\n      to right,\n      ${backgroundColor} 0%,\n      ${backgroundColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(fromPosition / rangeDistance) * 100}%,\n      ${trackColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} ${(toPosition / rangeDistance) * 100}%,\n      ${backgroundColor} 100%)`;\n\n    // Apply the gradient to the appropriate slider\n    // eslint-disable-next-line no-param-reassign\n    toSlider.style.background = gradient;\n    // eslint-disable-next-line no-param-reassign\n    fromSlider.style.background = gradient;\n};\n\ninterface CalculateGradientOffset {\n    value: number;\n    min: number;\n    max: number;\n    thumbWidth: number;\n    containerWidth: number;\n}\n\nexport const calculateGradientOffset = ({\n    value,\n    min,\n    max,\n    thumbWidth,\n    containerWidth,\n}: CalculateGradientOffset): number => {\n    const percentage = (value - min) / (max - min);\n\n    const adjustedWidth = containerWidth - thumbWidth / 2;\n\n    return percentage * adjustedWidth + thumbWidth / 2 + 5;\n};\n\ninterface GetThumbMaxWidthOptions {\n    maxNumber: number;\n    thumbLabelFormatter?: (value: number) => string;\n}\n\ninterface CalculatePopupPositionOptions {\n    sliderValue: number;\n    min: number;\n    max: number;\n    popupWidth: number;\n}\n\nexport const calculatePopupPosition = ({\n    sliderValue,\n    min,\n    max,\n    popupWidth,\n}: CalculatePopupPositionOptions) => {\n    // Berechnung des Prozentwerts des Sliders zwischen min und max\n    const percentage = (sliderValue - min) / (max - min);\n\n    // Berechnung des linken Versatzes bei 0% (-10px) und bei 100% (-popupWidth + 20px)\n    const leftAtMin = -10;\n    const leftAtMax = -popupWidth + 25;\n\n    // Berechnung des dynamischen Left-Werts basierend auf dem Slider-Prozentwert\n    return leftAtMin + percentage * (leftAtMax - leftAtMin);\n};\n\nexport const getThumbMaxWidth = ({ maxNumber, thumbLabelFormatter }: GetThumbMaxWidthOptions) => {\n    const element = document.createElement('span');\n\n    element.style.height = '20px';\n    element.style.display = 'flex';\n    element.style.padding = '16px';\n    element.style.whiteSpace = 'nowrap';\n    element.style.minWidth = '20px';\n    element.style.opacity = '0';\n    element.style.position = 'absolute';\n\n    element.textContent =\n        typeof thumbLabelFormatter === 'function'\n            ? thumbLabelFormatter(maxNumber)\n            : String(maxNumber);\n\n    document.body.appendChild(element);\n\n    const width = element.offsetWidth;\n\n    document.body.removeChild(element);\n\n    return width;\n};\n"],"mappings":"AAUA,OAAO,MAAMA,UAAU,GAAGC,IAAA,IAAqE;EAAA,IAApE;IAAEC,UAAU;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,SAAS;IAAEC;EAAoB,CAAC,GAAAL,IAAA;EACtF,MAAMM,aAAa,GAAGC,MAAM,CAACL,QAAQ,CAACM,GAAG,CAAC,GAAGD,MAAM,CAACL,QAAQ,CAACO,GAAG,CAAC;EACjE,MAAMC,YAAY,GAAGH,MAAM,CAACH,SAAS,IAAIH,UAAU,CAACU,KAAK,CAAC,GAAGJ,MAAM,CAACL,QAAQ,CAACO,GAAG,CAAC;EACjF,MAAMG,UAAU,GAAGL,MAAM,CAACF,OAAO,IAAIH,QAAQ,CAACS,KAAK,CAAC,GAAGJ,MAAM,CAACL,QAAQ,CAACO,GAAG,CAAC;EAE3E,MAAMI,eAAe,GAAGV,KAAK,CAAC,KAAK,CAAC;EACpC,MAAMW,UAAU,GAAGX,KAAK,CAAC,KAAK,CAAC;EAE/B,IAAI,CAACU,eAAe,IAAI,CAACC,UAAU,EAAE;IACjC;EACJ;EAEA,MAAMC,QAAQ,GAAG;AACrB;AACA,QAAQF,eAAe;AACvB,QAAQA,eAAe,IAAKH,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC/D,QAAQQ,UAAU,IAAKJ,YAAY,GAAGJ,aAAa,GAAI,GAAG;AAC1D,QAAQQ,UAAU,IAAKF,UAAU,GAAGN,aAAa,GAAI,GAAG;AACxD,QAAQO,eAAe,IAAKD,UAAU,GAAGN,aAAa,GAAI,GAAG;AAC7D,QAAQO,eAAe,QAAQ;;EAE3B;EACA;EACAX,QAAQ,CAACc,KAAK,CAACC,UAAU,GAAGF,QAAQ;EACpC;EACAd,UAAU,CAACe,KAAK,CAACC,UAAU,GAAGF,QAAQ;AAC1C,CAAC;AAUD,OAAO,MAAMG,uBAAuB,GAAGC,KAAA,IAMA;EAAA,IANC;IACpCR,KAAK;IACLF,GAAG;IACHD,GAAG;IACHY,UAAU;IACVC;EACqB,CAAC,GAAAF,KAAA;EACtB,MAAMG,UAAU,GAAG,CAACX,KAAK,GAAGF,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;EAE9C,MAAMc,aAAa,GAAGF,cAAc,GAAGD,UAAU,GAAG,CAAC;EAErD,OAAOE,UAAU,GAAGC,aAAa,GAAGH,UAAU,GAAG,CAAC,GAAG,CAAC;AAC1D,CAAC;AAcD,OAAO,MAAMI,sBAAsB,GAAGC,KAAA,IAKD;EAAA,IALE;IACnCC,WAAW;IACXjB,GAAG;IACHD,GAAG;IACHmB;EAC2B,CAAC,GAAAF,KAAA;EAC5B;EACA,MAAMH,UAAU,GAAG,CAACI,WAAW,GAAGjB,GAAG,KAAKD,GAAG,GAAGC,GAAG,CAAC;;EAEpD;EACA,MAAMmB,SAAS,GAAG,CAAC,EAAE;EACrB,MAAMC,SAAS,GAAG,CAACF,UAAU,GAAG,EAAE;;EAElC;EACA,OAAOC,SAAS,GAAGN,UAAU,IAAIO,SAAS,GAAGD,SAAS,CAAC;AAC3D,CAAC;AAED,OAAO,MAAME,gBAAgB,GAAGC,KAAA,IAAiE;EAAA,IAAhE;IAAEC,SAAS;IAAEC;EAA6C,CAAC,GAAAF,KAAA;EACxF,MAAMG,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,MAAM,CAAC;EAE9CF,OAAO,CAAClB,KAAK,CAACqB,MAAM,GAAG,MAAM;EAC7BH,OAAO,CAAClB,KAAK,CAACsB,OAAO,GAAG,MAAM;EAC9BJ,OAAO,CAAClB,KAAK,CAACuB,OAAO,GAAG,MAAM;EAC9BL,OAAO,CAAClB,KAAK,CAACwB,UAAU,GAAG,QAAQ;EACnCN,OAAO,CAAClB,KAAK,CAACyB,QAAQ,GAAG,MAAM;EAC/BP,OAAO,CAAClB,KAAK,CAAC0B,OAAO,GAAG,GAAG;EAC3BR,OAAO,CAAClB,KAAK,CAAC2B,QAAQ,GAAG,UAAU;EAEnCT,OAAO,CAACU,WAAW,GACf,OAAOX,mBAAmB,KAAK,UAAU,GACnCA,mBAAmB,CAACD,SAAS,CAAC,GAC9Ba,MAAM,CAACb,SAAS,CAAC;EAE3BG,QAAQ,CAACW,IAAI,CAACC,WAAW,CAACb,OAAO,CAAC;EAElC,MAAMc,KAAK,GAAGd,OAAO,CAACe,WAAW;EAEjCd,QAAQ,CAACW,IAAI,CAACI,WAAW,CAAChB,OAAO,CAAC;EAElC,OAAOc,KAAK;AAChB,CAAC","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@chayns-components/core",
-    "version": "5.0.0-beta.912",
+    "version": "5.0.0-beta.913",
     "description": "A set of beautiful React components for developing your own applications with chayns.",
     "sideEffects": false,
     "browserslist": [
@@ -87,5 +87,5 @@
     "publishConfig": {
         "access": "public"
     },
-    "gitHead": "355b8f94975f612c923b0080b487ddf7b865e8e5"
+    "gitHead": "cbb05bba8d18477b92474269c86ee738f8a85dd2"
 }