@chayns-components/core 5.0.0-beta.7 → 5.0.0-beta.700

package/lib/esm/components/combobox/ComboBox.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.js","names":["getDevice","AnimatePresence","React","useCallback","useEffect","useMemo","useRef","useState","createPortal","ComboBoxDirection","calculateContentHeight","calculateContentWidth","getMaxHeightInPixels","getIsTouch","Icon","ComboBoxItem","StyledComboBox","StyledComboBoxHeader","StyledComboBoxIconWrapper","StyledComboBoxPlaceholder","StyledComboBoxPlaceholderImage","StyledMotionComboBoxBody","ComboBox","_ref","direction","BOTTOM","isDisabled","list","maxHeight","onSelect","placeholder","container","document","body","selectedItem","shouldShowRoundImage","shouldUseFullWidth","item","setItem","isAnimating","setIsAnimating","minWidth","setMinWidth","focusedIndex","setFocusedIndex","overflowY","setOverflowY","portal","setPortal","internalCoordinates","setInternalCoordinates","x","y","styledComboBoxElementRef","contentRef","browser","isTouch","handleClick","event","current","contains","target","handleOpen","height","getBoundingClientRect","TOP","handleClose","addEventListener","removeEventListener","handleSetSelectedItem","itemToSelect","handleKeyDown","e","key","preventDefault","children","length","newIndex","prevElement","tabIndex","newElement","focus","element","id","newSelectedItem","find","_ref2","value","String","replace","isAtLeastOneItemWithImageGiven","some","_ref3","imageUrl","isAtLeastOneItemWithIconGiven","_ref4","icons","textArray","map","_ref5","text","contentHeight","maxHeightInPixels","push","width","placeholderImageUrl","undefined","placeholderIcon","placeholderText","handleHeaderClick","comboBoxItems","_ref6","suffixElement","createElement","isSelected","bodyStyles","styles","left","top","transform","initial","$browser","name","animate","opacity","$overflowY","exit","$maxHeight","$minWidth","style","$direction","transition","duration","ref","$shouldUseFullWidth","onClick","$isOpen","$isTouch","$isDisabled","src","displayName"],"sources":["../../../../src/components/combobox/ComboBox.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport { AnimatePresence } from 'framer-motion';\nimport React, {\n    FC,\n    ReactPortal,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n    type CSSProperties,\n    type ReactNode,\n} from 'react';\nimport { createPortal } from 'react-dom';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport {\n    calculateContentHeight,\n    calculateContentWidth,\n    getMaxHeightInPixels,\n} from '../../utils/calculate';\nimport { getIsTouch } from '../../utils/environment';\nimport type { ContextMenuCoordinates } from '../context-menu/ContextMenu';\nimport Icon from '../icon/Icon';\nimport ComboBoxItem from './combobox-item/ComboBoxItem';\nimport {\n    StyledComboBox,\n    StyledComboBoxHeader,\n    StyledComboBoxIconWrapper,\n    StyledComboBoxPlaceholder,\n    StyledComboBoxPlaceholderImage,\n    StyledMotionComboBoxBody,\n} from './ComboBox.styles';\n\nexport interface IComboBoxItem {\n    icons?: string[];\n    imageUrl?: string;\n    suffixElement?: ReactNode;\n    text: string;\n    value: string | number;\n}\n\nexport type ComboBoxProps = {\n    /**\n     * The element where the content of the `ComboBox` should be rendered via React Portal.\n     */\n    container?: Element;\n    /**\n     * The direction in which the combobox should open.\n     */\n    direction?: ComboBoxDirection;\n    /**\n     * Whether the combobox should be disabled.\n     */\n    isDisabled?: boolean;\n    /**\n     * The list of the items that should be displayed.\n     */\n    list: IComboBoxItem[];\n    /**\n     * The maximum height of the combobox content.\n     */\n    maxHeight?: CSSProperties['maxHeight'];\n    /**\n     * Function that should be executed when an item is selected.\n     */\n    onSelect?: (comboboxItem: IComboBoxItem) => void;\n    /**\n     * A text that should be displayed when no item is selected.\n     */\n    placeholder: string;\n    /**\n     * An item that should be preselected.\n     */\n    selectedItem?: IComboBoxItem;\n    /**\n     * If true, the images of the items are displayed in a round shape.\n     */\n    shouldShowRoundImage?: boolean;\n    /**\n     * Whether the width of the 'ComboBox' should be the width of the parent or of the widest item.\n     */\n    shouldUseFullWidth?: boolean;\n};\n\nconst ComboBox: FC<ComboBoxProps> = ({\n    direction = ComboBoxDirection.BOTTOM,\n    isDisabled = false,\n    list,\n    maxHeight = '280px',\n    onSelect,\n    placeholder,\n    container = document.body,\n    selectedItem,\n    shouldShowRoundImage,\n    shouldUseFullWidth = false,\n}) => {\n    const [item, setItem] = useState<IComboBoxItem>();\n    const [isAnimating, setIsAnimating] = useState(false);\n    const [minWidth, setMinWidth] = useState(0);\n    const [focusedIndex, setFocusedIndex] = useState<number | null>(null);\n    const [overflowY, setOverflowY] = useState<CSSProperties['overflowY']>('hidden');\n    const [portal, setPortal] = useState<ReactPortal>();\n    const [internalCoordinates, setInternalCoordinates] = useState<ContextMenuCoordinates>({\n        x: 0,\n        y: 0,\n    });\n\n    const styledComboBoxElementRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement | null>(null);\n\n    const { browser } = getDevice();\n\n    const isTouch = getIsTouch();\n\n    const handleClick = useCallback(\n        (event: MouseEvent) => {\n            if (\n                styledComboBoxElementRef.current &&\n                !styledComboBoxElementRef.current.contains(event.target as Node)\n            ) {\n                setIsAnimating(false);\n            }\n        },\n        [styledComboBoxElementRef],\n    );\n\n    const handleOpen = useCallback(() => {\n        if (styledComboBoxElementRef.current) {\n            const { x, y, height } = styledComboBoxElementRef.current.getBoundingClientRect();\n\n            setInternalCoordinates({\n                x,\n                y: direction === ComboBoxDirection.TOP ? y : y + height,\n            });\n\n            setIsAnimating(true);\n        }\n    }, [direction]);\n\n    const handleClose = useCallback(() => {\n        setIsAnimating(false);\n    }, []);\n\n    /**\n     * This function adds an event listener to the document to close the combobox when the user clicks outside of it\n     */\n    useEffect(() => {\n        document.addEventListener('click', handleClick);\n\n        return () => {\n            document.removeEventListener('click', handleClick);\n        };\n    }, [handleClick, styledComboBoxElementRef]);\n\n    /**\n     * This function sets the selected item\n     */\n    const handleSetSelectedItem = useCallback(\n        (itemToSelect: IComboBoxItem) => {\n            setItem(itemToSelect);\n            setIsAnimating(false);\n\n            if (onSelect) {\n                onSelect(itemToSelect);\n            }\n        },\n        [onSelect],\n    );\n\n    useEffect(() => {\n        const handleKeyDown = (e: KeyboardEvent) => {\n            if (!isAnimating) {\n                return;\n            }\n\n            if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {\n                e.preventDefault();\n                const children = contentRef.current?.children;\n                if (children && children.length > 0) {\n                    const newIndex =\n                        focusedIndex !== null\n                            ? (focusedIndex + (e.key === 'ArrowUp' ? -1 : 1) + children.length) %\n                              children.length\n                            : 0;\n\n                    if (focusedIndex !== null) {\n                        const prevElement = children[focusedIndex] as HTMLDivElement;\n                        prevElement.tabIndex = -1;\n                    }\n\n                    setFocusedIndex(newIndex);\n\n                    const newElement = children[newIndex] as HTMLDivElement;\n                    newElement.tabIndex = 0;\n                    newElement.focus();\n                }\n            } else if (e.key === 'Enter' && focusedIndex !== null) {\n                const element = contentRef.current?.children[focusedIndex];\n\n                if (!element) {\n                    return;\n                }\n\n                const { id } = element;\n\n                const newSelectedItem = list.find(\n                    ({ value }) => String(value) === id.replace('combobox-item__', ''),\n                );\n\n                if (!newSelectedItem) {\n                    return;\n                }\n\n                handleSetSelectedItem(newSelectedItem);\n            }\n        };\n\n        document.addEventListener('keydown', handleKeyDown);\n\n        return () => {\n            document.removeEventListener('keydown', handleKeyDown);\n        };\n    }, [focusedIndex, handleSetSelectedItem, isAnimating, list]);\n\n    /**\n     * This function calculates the greatest width\n     */\n    useEffect(() => {\n        const isAtLeastOneItemWithImageGiven = list.some(({ imageUrl }) => imageUrl);\n        const isAtLeastOneItemWithIconGiven = list.some(({ icons }) => icons);\n\n        const textArray = list.map(({ text }) => text);\n\n        const contentHeight = calculateContentHeight(textArray);\n\n        const maxHeightInPixels = getMaxHeightInPixels(\n            maxHeight,\n            styledComboBoxElementRef.current ?? document.body,\n        );\n\n        setOverflowY(contentHeight > maxHeightInPixels ? 'scroll' : 'hidden');\n\n        textArray.push(placeholder);\n\n        const width = styledComboBoxElementRef.current?.getBoundingClientRect().width ?? 0;\n\n        // 45px = padding left + padding right + border left + border right + arrow icon width + arrow icon margin left\n        // 32px = image width + flex gap\n        // 40px = icon width + flex gap\n        setMinWidth(\n            shouldUseFullWidth\n                ? width\n                : calculateContentWidth([...list, { text: placeholder, value: 'placeholder' }]) +\n                      45 +\n                      (isAtLeastOneItemWithImageGiven ? 32 : 0) +\n                      (isAtLeastOneItemWithIconGiven ? 40 : 0),\n        );\n    }, [list, maxHeight, placeholder, shouldUseFullWidth]);\n\n    /**\n     * This function sets the external selected item\n     */\n    useEffect(() => {\n        setIsAnimating(false);\n        setItem(selectedItem);\n    }, [selectedItem]);\n\n    const placeholderImageUrl = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.imageUrl;\n        }\n\n        if (item) {\n            return item.imageUrl;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    const placeholderIcon = useMemo(() => {\n        if (selectedItem) {\n            return selectedItem.icons;\n        }\n\n        if (item) {\n            return item.icons;\n        }\n\n        return undefined;\n    }, [item, selectedItem]);\n\n    /**\n     * This function resets the placeholder\n     */\n    const placeholderText = useMemo(() => {\n        let text = placeholder;\n\n        if (selectedItem) {\n            text = selectedItem.text;\n        } else if (item) {\n            text = item.text;\n        }\n\n        return text;\n    }, [item, placeholder, selectedItem]);\n\n    /**\n     * This function opens the content of the combobox\n     */\n    const handleHeaderClick = useCallback(() => {\n        if (!isDisabled) {\n            if (isAnimating) {\n                handleClose();\n            } else {\n                handleOpen();\n            }\n        }\n    }, [handleClose, handleOpen, isAnimating, isDisabled]);\n\n    const comboBoxItems = useMemo(\n        () =>\n            list.map(({ imageUrl, icons, suffixElement, text, value }) => (\n                <ComboBoxItem\n                    imageUrl={imageUrl}\n                    icons={icons}\n                    isSelected={selectedItem ? value === selectedItem.value : false}\n                    key={value}\n                    id={value}\n                    onSelect={handleSetSelectedItem}\n                    shouldShowRoundImage={shouldShowRoundImage}\n                    suffixElement={suffixElement}\n                    text={text}\n                    value={value}\n                />\n            )),\n        [handleSetSelectedItem, list, selectedItem, shouldShowRoundImage],\n    );\n\n    const bodyStyles = useMemo(() => {\n        let styles: CSSProperties = { left: internalCoordinates.x, top: internalCoordinates.y };\n\n        if (direction === ComboBoxDirection.TOP) {\n            styles = { ...styles, transform: 'translateY(-100%)' };\n        }\n\n        return styles;\n    }, [direction, internalCoordinates.x, internalCoordinates.y]);\n\n    useEffect(() => {\n        setPortal(() =>\n            createPortal(\n                <AnimatePresence initial={false}>\n                    {isAnimating && (\n                        <StyledMotionComboBoxBody\n                            $browser={browser?.name}\n                            animate={{ height: 'fit-content', opacity: 1 }}\n                            $overflowY={overflowY}\n                            initial={{ height: 0, opacity: 0 }}\n                            exit={{ height: 0, opacity: 0 }}\n                            $maxHeight={maxHeight}\n                            $minWidth={minWidth}\n                            style={bodyStyles}\n                            $direction={direction}\n                            transition={{ duration: 0.2 }}\n                            tabIndex={0}\n                            ref={contentRef}\n                        >\n                            {comboBoxItems}\n                        </StyledMotionComboBoxBody>\n                    )}\n                </AnimatePresence>,\n                container,\n            ),\n        );\n    }, [\n        bodyStyles,\n        browser?.name,\n        comboBoxItems,\n        container,\n        direction,\n        isAnimating,\n        maxHeight,\n        minWidth,\n        overflowY,\n    ]);\n\n    return useMemo(\n        () => (\n            <StyledComboBox\n                ref={styledComboBoxElementRef}\n                $shouldUseFullWidth={shouldUseFullWidth}\n                $minWidth={minWidth}\n            >\n                <StyledComboBoxHeader\n                    $direction={direction}\n                    onClick={handleHeaderClick}\n                    $isOpen={isAnimating}\n                    $isTouch={isTouch}\n                    $isDisabled={isDisabled}\n                >\n                    <StyledComboBoxPlaceholder>\n                        {placeholderImageUrl && (\n                            <StyledComboBoxPlaceholderImage\n                                src={placeholderImageUrl}\n                                shouldShowRoundImage={shouldShowRoundImage}\n                            />\n                        )}\n                        {placeholderIcon && <Icon icons={placeholderIcon} />}\n                        {placeholderText}\n                        {item && item.suffixElement && item.suffixElement}\n                    </StyledComboBoxPlaceholder>\n                    <StyledComboBoxIconWrapper>\n                        <Icon icons={['fa fa-chevron-down']} />\n                    </StyledComboBoxIconWrapper>\n                </StyledComboBoxHeader>\n                {portal}\n            </StyledComboBox>\n        ),\n        [\n            direction,\n            handleHeaderClick,\n            isAnimating,\n            isDisabled,\n            isTouch,\n            item,\n            minWidth,\n            placeholderIcon,\n            placeholderImageUrl,\n            placeholderText,\n            portal,\n            shouldShowRoundImage,\n            shouldUseFullWidth,\n        ],\n    );\n};\n\nComboBox.displayName = 'ComboBox';\n\nexport default ComboBox;\n"],"mappings":"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","ignoreList":[]}

package/lib/esm/components/combobox/ComboBox.styles.js

@@ -0,0 +1,200 @@
+import { motion } from 'framer-motion';
+import styled, { css } from 'styled-components';
+import { ComboBoxDirection } from '../../types/comboBox';
+export const StyledComboBox = styled.div`
+    user-select: none;
+    position: relative;
+
+    ${_ref => {
+  let {
+    $shouldUseFullWidth,
+    $minWidth
+  } = _ref;
+  return $shouldUseFullWidth ? css`
+                  min-width: ${$minWidth}px;
+                  width: 100%;
+              ` : css`
+                  min-width: ${$minWidth}px;
+                  max-width: ${$minWidth}px;
+              `;
+}}
+`;
+export const StyledComboBoxHeader = styled.div`
+    display: flex;
+    justify-content: space-between;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    padding: 4px 10px;
+    cursor: ${_ref2 => {
+  let {
+    $isDisabled
+  } = _ref2;
+  return !$isDisabled ? 'pointer' : 'default';
+}};
+    background: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme['001'];
+}};
+    opacity: ${_ref4 => {
+  let {
+    $isDisabled
+  } = _ref4;
+  return $isDisabled ? 0.5 : 1;
+}};
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref5 => {
+  let {
+    $isOpen,
+    $direction
+  } = _ref5;
+  if ($isOpen) {
+    return $direction === ComboBoxDirection.BOTTOM ? css`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : css`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return css`
+            border-radius: 3px;
+        `;
+}}
+
+    ${_ref6 => {
+  let {
+    $isTouch,
+    $isDisabled,
+    theme
+  } = _ref6;
+  return !$isTouch && !$isDisabled && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxPlaceholder = styled.div`
+    align-items: center;
+    color: ${_ref7 => {
+  let {
+    theme
+  } = _ref7;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+`;
+export const StyledComboBoxPlaceholderImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref8 => {
+  let {
+    theme
+  } = _ref8;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref9 => {
+  let {
+    shouldShowRoundImage
+  } = _ref9;
+  return shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+export const StyledComboBoxIconWrapper = styled.div`
+    margin-left: 5px;
+`;
+export const StyledMotionComboBoxBody = styled(motion.div)`
+    background: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme['101'];
+}};
+    display: flex;
+    position: absolute;
+    z-index: 4;
+    flex-direction: column;
+    border: 1px solid rgba(160, 160, 160, 0.3);
+    cursor: pointer;
+    max-height: ${_ref11 => {
+  let {
+    $maxHeight
+  } = _ref11;
+  return $maxHeight;
+}};
+    overflow-y: ${_ref12 => {
+  let {
+    $overflowY
+  } = _ref12;
+  return $overflowY;
+}};
+
+    min-width: ${_ref13 => {
+  let {
+    $minWidth
+  } = _ref13;
+  return $minWidth - 2;
+}}px;
+    max-width: ${_ref14 => {
+  let {
+    $minWidth
+  } = _ref14;
+  return $minWidth - 2;
+}}px;
+
+    ${_ref15 => {
+  let {
+    $direction
+  } = _ref15;
+  if ($direction === ComboBoxDirection.BOTTOM) {
+    return css`
+                border-bottom-left-radius: 3px;
+                border-bottom-right-radius: 3px;
+                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);
+            `;
+  }
+  return css`
+            border-top-left-radius: 3px;
+            border-top-right-radius: 3px;
+            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);
+        `;
+}}
+
+    // Styles for custom scrollbar
+    ${_ref16 => {
+  let {
+    $browser,
+    theme
+  } = _ref16;
+  return $browser === 'firefox' ? css`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : css`
+                  &::-webkit-scrollbar {
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                  }
+              `;
+}}
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

package/lib/esm/components/combobox/ComboBox.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","_ref4","_ref5","$isOpen","$direction","BOTTOM","_ref6","$isTouch","StyledComboBoxPlaceholder","_ref7","text","StyledComboBoxPlaceholderImage","img","_ref8","_ref9","shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref10","_ref11","$maxHeight","_ref12","$overflowY","_ref13","_ref14","_ref15","_ref16","$browser"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxItemProps } from './combobox-item/ComboBoxItem';\n\ntype StyledComboBoxProps = WithTheme<{\n    $shouldUseFullWidth: boolean;\n    $minWidth: number;\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n    user-select: none;\n    position: relative;\n\n    ${({ $shouldUseFullWidth, $minWidth }) =>\n        $shouldUseFullWidth\n            ? css`\n                  min-width: ${$minWidth}px;\n                  width: 100%;\n              `\n            : css`\n                  min-width: ${$minWidth}px;\n                  max-width: ${$minWidth}px;\n              `}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n    $isTouch: boolean;\n    $isOpen: boolean;\n    $direction: ComboBoxDirection;\n    $isDisabled?: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n    display: flex;\n    justify-content: space-between;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    padding: 4px 10px;\n    cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n    background: ${({ theme }: StyledComboBoxHeaderProps) => theme['001']};\n    opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isOpen, $direction }) => {\n        if ($isOpen) {\n            return $direction === ComboBoxDirection.BOTTOM\n                ? css`\n                      border-top-left-radius: 3px;\n                      border-top-right-radius: 3px;\n                  `\n                : css`\n                      border-bottom-left-radius: 3px;\n                      border-bottom-right-radius: 3px;\n                  `;\n        }\n\n        return css`\n            border-radius: 3px;\n        `;\n    }}\n\n    ${({ $isTouch, $isDisabled, theme }: StyledComboBoxHeaderProps) =>\n        !$isTouch &&\n        !$isDisabled &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxPlaceholderProps = WithTheme<unknown>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n    align-items: center;\n    color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n    display: flex;\n    gap: 10px;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<\n    Pick<ComboBoxItemProps, 'shouldShowRoundImage'>\n>;\n\nexport const StyledComboBoxPlaceholderImage = styled.img<StyledComboBoxPlaceholderImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxPlaceholderImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ shouldShowRoundImage }) =>\n        shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n    margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n    $overflowY: CSSProperties['overflowY'];\n    $maxHeight: CSSProperties['maxHeight'];\n    $direction: ComboBoxDirection;\n    $browser: Browser | 'bot' | null | undefined;\n    $minWidth: number;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n    background: ${({ theme }: StyledComboBoxBodyProps) => theme['101']};\n    display: flex;\n    position: absolute;\n    z-index: 4;\n    flex-direction: column;\n    border: 1px solid rgba(160, 160, 160, 0.3);\n    cursor: pointer;\n    max-height: ${({ $maxHeight }) => $maxHeight};\n    overflow-y: ${({ $overflowY }) => $overflowY};\n\n    min-width: ${({ $minWidth }) => $minWidth - 2}px;\n    max-width: ${({ $minWidth }) => $minWidth - 2}px;\n\n    ${({ $direction }) => {\n        if ($direction === ComboBoxDirection.BOTTOM) {\n            return css`\n                border-bottom-left-radius: 3px;\n                border-bottom-right-radius: 3px;\n                box-shadow: 0 3px 10px 0 rgba(0, 0, 0, 0.2);\n            `;\n        }\n\n        return css`\n            border-top-left-radius: 3px;\n            border-top-right-radius: 3px;\n            box-shadow: 0 -3px 10px 0 rgba(0, 0, 0, 0.2);\n        `;\n    }}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledComboBoxBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -0,0 +1,40 @@
+import React, { useCallback, useMemo } from 'react';
+import { Icon } from '../../../index';
+import { getIsTouch } from '../../../utils/environment';
+import { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = _ref => {
+  let {
+    imageUrl,
+    isSelected,
+    icons,
+    onSelect,
+    shouldShowRoundImage,
+    suffixElement,
+    text,
+    id,
+    value
+  } = _ref;
+  const handleItemClick = useCallback(() => {
+    onSelect({
+      text,
+      value,
+      suffixElement,
+      imageUrl
+    });
+  }, [imageUrl, onSelect, suffixElement, text, value]);
+  const isTouch = getIsTouch();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,
+    onClick: handleItemClick,
+    $isTouch: isTouch,
+    $isSelected: isSelected
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
+    src: imageUrl,
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), text, suffixElement), [handleItemClick, icons, id, imageUrl, isSelected, isTouch, shouldShowRoundImage, suffixElement, text]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+export default ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","Icon","getIsTouch","StyledComboBoxItem","StyledComboBoxItemImage","ComboBoxItem","_ref","imageUrl","isSelected","icons","onSelect","shouldShowRoundImage","suffixElement","text","id","value","handleItemClick","isTouch","createElement","String","onClick","$isTouch","$isSelected","src","$shouldShowRoundImage","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, ReactNode, useCallback, useMemo } from 'react';\nimport { Icon } from '../../../index';\nimport { getIsTouch } from '../../../utils/environment';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport { StyledComboBoxItem, StyledComboBoxItemImage } from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n    imageUrl: IComboBoxItem['imageUrl'];\n    isSelected: boolean;\n    onSelect: (itemToSelect: IComboBoxItem) => void;\n    shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n    icons?: IComboBoxItem['icons'];\n    suffixElement?: ReactNode;\n    text: IComboBoxItem['text'];\n    value: IComboBoxItem['value'];\n    id: IComboBoxItem['value'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n    imageUrl,\n    isSelected,\n    icons,\n    onSelect,\n    shouldShowRoundImage,\n    suffixElement,\n    text,\n    id,\n    value,\n}) => {\n    const handleItemClick = useCallback(() => {\n        onSelect({ text, value, suffixElement, imageUrl });\n    }, [imageUrl, 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                $isTouch={isTouch}\n                $isSelected={isSelected}\n            >\n                {imageUrl && (\n                    <StyledComboBoxItemImage\n                        src={imageUrl}\n                        $shouldShowRoundImage={shouldShowRoundImage}\n                    />\n                )}\n                {icons && <Icon icons={icons} />}\n                {text}\n                {suffixElement}\n            </StyledComboBoxItem>\n        ),\n        [\n            handleItemClick,\n            icons,\n            id,\n            imageUrl,\n            isSelected,\n            isTouch,\n            shouldShowRoundImage,\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,IAAI,QAAQ,gBAAgB;AACrC,SAASC,UAAU,QAAQ,4BAA4B;AAEvD,SAASC,kBAAkB,EAAEC,uBAAuB,QAAQ,uBAAuB;AAcnF,MAAMC,YAAmC,GAAGC,IAAA,IAUtC;EAAA,IAVuC;IACzCC,QAAQ;IACRC,UAAU;IACVC,KAAK;IACLC,QAAQ;IACRC,oBAAoB;IACpBC,aAAa;IACbC,IAAI;IACJC,EAAE;IACFC;EACJ,CAAC,GAAAT,IAAA;EACG,MAAMU,eAAe,GAAGjB,WAAW,CAAC,MAAM;IACtCW,QAAQ,CAAC;MAAEG,IAAI;MAAEE,KAAK;MAAEH,aAAa;MAAEL;IAAS,CAAC,CAAC;EACtD,CAAC,EAAE,CAACA,QAAQ,EAAEG,QAAQ,EAAEE,aAAa,EAAEC,IAAI,EAAEE,KAAK,CAAC,CAAC;EAEpD,MAAME,OAAO,GAAGf,UAAU,CAAC,CAAC;EAE5B,OAAOF,OAAO,CACV,mBACIF,KAAA,CAAAoB,aAAA,CAACf,kBAAkB;IACfW,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGK,MAAM,CAACL,EAAE,CAAC,GAAGA,EAAE,EAAG;IACjEM,OAAO,EAAEJ,eAAgB;IACzBK,QAAQ,EAAEJ,OAAQ;IAClBK,WAAW,EAAEd;EAAW,GAEvBD,QAAQ,iBACLT,KAAA,CAAAoB,aAAA,CAACd,uBAAuB;IACpBmB,GAAG,EAAEhB,QAAS;IACdiB,qBAAqB,EAAEb;EAAqB,CAC/C,CACJ,EACAF,KAAK,iBAAIX,KAAA,CAAAoB,aAAA,CAACjB,IAAI;IAACQ,KAAK,EAAEA;EAAM,CAAE,CAAC,EAC/BI,IAAI,EACJD,aACe,CACvB,EACD,CACII,eAAe,EACfP,KAAK,EACLK,EAAE,EACFP,QAAQ,EACRC,UAAU,EACVS,OAAO,EACPN,oBAAoB,EACpBC,aAAa,EACbC,IAAI,CAEZ,CAAC;AACL,CAAC;AAEDR,YAAY,CAACoB,WAAW,GAAG,cAAc;AAEzC,eAAepB,YAAY","ignoreList":[]}

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

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+export const StyledComboBoxItem = styled.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme,
+    $isSelected
+  } = _ref;
+  return $isSelected && theme['secondary-103'];
+}};
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+    padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref3 => {
+  let {
+    $isTouch,
+    theme
+  } = _ref3;
+  return !$isTouch && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+
+            &:focus {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxItemImage = styled.img`
+    box-shadow: 0 0 0 1px
+        rgba(${_ref4 => {
+  let {
+    theme
+  } = _ref4;
+  return theme['009-rgb'];
+}}, 0.15);
+    height: 22px;
+    width: 22px;
+
+    ${_ref5 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref5;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isTouch","StyledComboBoxItemImage","img","_ref4","_ref5","$shouldShowRoundImage"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $isTouch: boolean;\n    $isSelected: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n    align-items: center;\n    background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n        $isSelected && theme['secondary-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $isTouch, theme }: StyledComboBoxItemProps) =>\n        !$isTouch &&\n        css`\n            &:hover {\n                background-color: ${theme['secondary-102']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{ $shouldShowRoundImage?: boolean }>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n    box-shadow: 0 0 0 1px\n        rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n    height: 22px;\n    width: 22px;\n\n    ${({ $shouldShowRoundImage }) =>\n        $shouldShowRoundImage &&\n        css`\n            border-radius: 50%;\n        `}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAQ/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAAqC,CAAC,GAAAF,IAAA;EAAA,OAChEE,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAAA;AAC7C,aAAaE,KAAA;EAAA,IAAC;IAAEF;EAA+B,CAAC,GAAAE,KAAA;EAAA,OAAKF,KAAK,CAACG,IAAI;AAAA;AAC/D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEL;EAA+B,CAAC,GAAAI,KAAA;EAAA,OAC3C,CAACC,QAAQ,IACTT,GAAG;AACX;AACA,oCAAoCI,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMM,uBAAuB,GAAGX,MAAM,CAACY,GAAiC;AAC/E;AACA,eAAeC,KAAA;EAAA,IAAC;IAAER;EAAoC,CAAC,GAAAQ,KAAA;EAAA,OAAKR,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA;AACA;AACA,MAAMS,KAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,KAAA;EAAA,OACxBC,qBAAqB,IACrBd,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC","ignoreList":[]}

package/lib/esm/components/content-card/ContentCard.js

@@ -0,0 +1,23 @@
+import React, { useContext, useMemo } from 'react';
+import { ContentCardType } from '../../types/contentCard';
+import AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';
+import { StyledContentCard } from './ContentCard.styles';
+const ContentCard = _ref => {
+  let {
+    children,
+    onClick,
+    type = ContentCardType.Default
+  } = _ref;
+  const areaProvider = useContext(AreaContext);
+  const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  return /*#__PURE__*/React.createElement(StyledContentCard, {
+    onClick: onClick,
+    $type: type,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+    shouldChangeColor: !shouldChangeColor
+  }, children));
+};
+ContentCard.displayName = 'ContentCard';
+export default ContentCard;
+//# sourceMappingURL=ContentCard.js.map

package/lib/esm/components/content-card/ContentCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.js","names":["React","useContext","useMemo","ContentCardType","AreaContextProvider","AreaContext","StyledContentCard","ContentCard","_ref","children","onClick","type","Default","areaProvider","shouldChangeColor","createElement","$type","$shouldChangeColor","displayName"],"sources":["../../../../src/components/content-card/ContentCard.tsx"],"sourcesContent":["import React, { FC, ReactNode, useContext, useMemo } from 'react';\nimport { ContentCardType } from '../../types/contentCard';\nimport AreaContextProvider, { AreaContext } from '../area-provider/AreaContextProvider';\nimport { StyledContentCard } from './ContentCard.styles';\n\nexport type ContentCardProps = {\n    /**\n     * The content of the content card\n     */\n    children?: ReactNode;\n    /**\n     * The onClick event handler\n     */\n    onClick?: () => void;\n    /**\n     * The type of the content card\n     */\n    type?: ContentCardType;\n};\n\nconst ContentCard: FC<ContentCardProps> = ({\n    children,\n    onClick,\n    type = ContentCardType.Default,\n}) => {\n    const areaProvider = useContext(AreaContext);\n\n    const shouldChangeColor = useMemo(\n        () => areaProvider.shouldChangeColor ?? false,\n        [areaProvider.shouldChangeColor],\n    );\n\n    return (\n        <StyledContentCard onClick={onClick} $type={type} $shouldChangeColor={shouldChangeColor}>\n            <AreaContextProvider shouldChangeColor={!shouldChangeColor}>\n                {children}\n            </AreaContextProvider>\n        </StyledContentCard>\n    );\n};\n\nContentCard.displayName = 'ContentCard';\n\nexport default ContentCard;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,UAAU,EAAEC,OAAO,QAAQ,OAAO;AACjE,SAASC,eAAe,QAAQ,yBAAyB;AACzD,OAAOC,mBAAmB,IAAIC,WAAW,QAAQ,sCAAsC;AACvF,SAASC,iBAAiB,QAAQ,sBAAsB;AAiBxD,MAAMC,WAAiC,GAAGC,IAAA,IAIpC;EAAA,IAJqC;IACvCC,QAAQ;IACRC,OAAO;IACPC,IAAI,GAAGR,eAAe,CAACS;EAC3B,CAAC,GAAAJ,IAAA;EACG,MAAMK,YAAY,GAAGZ,UAAU,CAACI,WAAW,CAAC;EAE5C,MAAMS,iBAAiB,GAAGZ,OAAO,CAC7B,MAAMW,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACT,iBAAiB;IAACI,OAAO,EAAEA,OAAQ;IAACM,KAAK,EAAEL,IAAK;IAACM,kBAAkB,EAAEH;EAAkB,gBACpFd,KAAA,CAAAe,aAAA,CAACX,mBAAmB;IAACU,iBAAiB,EAAE,CAACA;EAAkB,GACtDL,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDF,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}

package/lib/esm/components/content-card/ContentCard.styles.js

@@ -0,0 +1,83 @@
+import styled, { css } from 'styled-components';
+import { ContentCardType } from '../../types/contentCard';
+export const StyledContentCard = styled.div`
+    border-radius: ${_ref => {
+  let {
+    theme
+  } = _ref;
+  return theme.cardBorderRadius;
+}}px;
+
+    ${_ref2 => {
+  let {
+    theme,
+    $shouldChangeColor
+  } = _ref2;
+  return !$shouldChangeColor && css`
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `;
+}};
+
+    padding: 8px 12px;
+
+    color: ${_ref3 => {
+  let {
+    theme
+  } = _ref3;
+  return theme.text;
+}};
+
+    &:not(:last-child) {
+        margin-bottom: 8px;
+    }
+
+    ${_ref4 => {
+  let {
+    $type,
+    theme,
+    $shouldChangeColor
+  } = _ref4;
+  if ($type === ContentCardType.Default && $shouldChangeColor) {
+    return css`
+                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+            `;
+  }
+  switch ($type) {
+    case ContentCardType.Error:
+      return css`
+                    background-color: ${theme['red-4']};
+                    border: 1px solid ${theme['red-1']};
+                    color: #222;
+
+                    --chayns-color--text: #222;
+                    --chayns-color-rgb--text: rgb(34, 34, 34);
+                `;
+    case ContentCardType.Success:
+      return css`
+                    background-color: ${theme['green-4']};
+                    border: 1px solid ${theme['green-1']};
+                    color: #222;
+
+                    --chayns-color--text: #222;
+                    --chayns-color-rgb--text: rgb(34, 34, 34);
+                `;
+    case ContentCardType.Warning:
+      return css`
+                    background-color: ${theme['yellow-4']};
+                    border: 1px solid ${theme['yellow-1']};
+                    color: #222;
+
+                    --chayns-color--text: #222;
+                    --chayns-color-rgb--text: rgb(34, 34, 34);
+                `;
+    default:
+      return css`
+                    background-color: rgba(
+                        ${theme['secondary-100-rgb']},
+                        ${theme.cardBackgroundOpacity}
+                    );
+                `;
+  }
+}}
+`;
+//# sourceMappingURL=ContentCard.styles.js.map

package/lib/esm/components/content-card/ContentCard.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","_ref","theme","cardBorderRadius","_ref2","$shouldChangeColor","cardShadow","_ref3","text","_ref4","$type","Default","cardBackgroundOpacity","Error","Success","Warning"],"sources":["../../../../src/components/content-card/ContentCard.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { ContentCardType } from '../../types/contentCard';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledContentCardProps = WithTheme<{\n    $type: ContentCardType;\n    $shouldChangeColor: boolean;\n}>;\n\nexport const StyledContentCard = styled.div<StyledContentCardProps>`\n    border-radius: ${({ theme }: StyledContentCardProps) => theme.cardBorderRadius}px;\n\n    ${({ theme, $shouldChangeColor }: StyledContentCardProps) =>\n        !$shouldChangeColor &&\n        css`\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `};\n\n    padding: 8px 12px;\n\n    color: ${({ theme }: StyledContentCardProps) => theme.text};\n\n    &:not(:last-child) {\n        margin-bottom: 8px;\n    }\n\n    ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n        if ($type === ContentCardType.Default && $shouldChangeColor) {\n            return css`\n                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});\n            `;\n        }\n\n        switch ($type) {\n            case ContentCardType.Error:\n                return css`\n                    background-color: ${theme['red-4']};\n                    border: 1px solid ${theme['red-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            case ContentCardType.Success:\n                return css`\n                    background-color: ${theme['green-4']};\n                    border: 1px solid ${theme['green-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            case ContentCardType.Warning:\n                return css`\n                    background-color: ${theme['yellow-4']};\n                    border: 1px solid ${theme['yellow-1']};\n                    color: #222;\n\n                    --chayns-color--text: #222;\n                    --chayns-color-rgb--text: rgb(34, 34, 34);\n                `;\n            default:\n                return css`\n                    background-color: rgba(\n                        ${theme['secondary-100-rgb']},\n                        ${theme.cardBackgroundOpacity}\n                    );\n                `;\n        }\n    }}\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAC/C,SAASC,eAAe,QAAQ,yBAAyB;AAQzD,OAAO,MAAMC,iBAAiB,GAAGH,MAAM,CAACI,GAA2B;AACnE,qBAAqBC,IAAA;EAAA,IAAC;IAAEC;EAA8B,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,gBAAgB;AAAA;AAClF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEF,KAAK;IAAEG;EAA2C,CAAC,GAAAD,KAAA;EAAA,OACpD,CAACC,kBAAkB,IACnBR,GAAG;AACX,oDAAoDK,KAAK,CAACI,UAAU;AACpE,SAAS;AAAA;AACT;AACA;AACA;AACA,aAAaC,KAAA;EAAA,IAAC;IAAEL;EAA8B,CAAC,GAAAK,KAAA;EAAA,OAAKL,KAAK,CAACM,IAAI;AAAA;AAC9D;AACA;AACA;AACA;AACA;AACA,MAAMC,KAAA,IAAkE;EAAA,IAAjE;IAAEC,KAAK;IAAER,KAAK;IAAEG;EAA2C,CAAC,GAAAI,KAAA;EAC3D,IAAIC,KAAK,KAAKZ,eAAe,CAACa,OAAO,IAAIN,kBAAkB,EAAE;IACzD,OAAOR,GAAG;AACtB,yCAAyCK,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACU,qBAAqB;AACzF,aAAa;EACL;EAEA,QAAQF,KAAK;IACT,KAAKZ,eAAe,CAACe,KAAK;MACtB,OAAOhB,GAAG;AAC1B,wCAAwCK,KAAK,CAAC,OAAO,CAAC;AACtD,wCAAwCA,KAAK,CAAC,OAAO,CAAC;AACtD;AACA;AACA;AACA;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACgB,OAAO;MACxB,OAAOjB,GAAG;AAC1B,wCAAwCK,KAAK,CAAC,SAAS,CAAC;AACxD,wCAAwCA,KAAK,CAAC,SAAS,CAAC;AACxD;AACA;AACA;AACA;AACA,iBAAiB;IACL,KAAKJ,eAAe,CAACiB,OAAO;MACxB,OAAOlB,GAAG;AAC1B,wCAAwCK,KAAK,CAAC,UAAU,CAAC;AACzD,wCAAwCA,KAAK,CAAC,UAAU,CAAC;AACzD;AACA;AACA;AACA;AACA,iBAAiB;IACL;MACI,OAAOL,GAAG;AAC1B;AACA,0BAA0BK,KAAK,CAAC,mBAAmB,CAAC;AACpD,0BAA0BA,KAAK,CAACU,qBAAqB;AACrD;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}