npm - @chayns-components/core - Versions diffs - 5.0.0-beta.998 → 5.0.0 - Mend

@chayns-components/core 5.0.0-beta.998 → 5.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (961) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBox.styles.js","names":["motion","styled","css","ComboBoxDirection","StyledComboBox","div","_ref","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","_ref2","$isDisabled","_ref3","theme","$shouldChangeColor","colorMode","_ref4","_ref5","$shouldShowBigImage","_ref6","$isOpen","$direction","BOTTOM","_ref7","$isTouch","StyledComboBoxPlaceholder","_ref8","text","_ref9","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","StyledComboBoxInput","input","_ref10","StyledComboBoxPlaceholderImage","img","_ref11","_ref12","_ref13","_ref14","$shouldShowRoundImage","StyledComboBoxIconWrapper","StyledMotionComboBoxBody","_ref15","_ref16","$maxHeight","_ref17","$overflowY","_ref18","_ref19","_ref20","_ref21","$browser","StyledComboBoxTopic","_ref22","_ref23"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport { ComboBoxDirection } from '../../types/comboBox';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: ComboBoxDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\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-color: ${({ theme, $shouldChangeColor }: StyledComboBoxHeaderProps) =>\n theme.colorMode === 'classic' \|\| $shouldChangeColor ? theme['000'] : theme['100']};\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\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<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n`;\n\nexport const StyledComboBoxPrefix = styled.div`\n flex: 0 0 auto;\n min-width: 32px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['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: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\nexport const StyledComboBoxIconWrapper = styled.div`\n align-items: center;\n display: flex;\n margin-left: 5px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $overflowY: CSSProperties['overflowY'];\n $maxHeight: CSSProperties['maxHeight'];\n $direction: ComboBoxDirection;\n $browser: BrowserName;\n $minWidth: number;\n $shouldUseCurrentItemWidth: boolean;\n}>;\n\nexport const StyledMotionComboBoxBody = styled(motion.div)<StyledComboBoxBodyProps>`\n background: ${({ theme }: StyledComboBoxBodyProps) => theme['100']};\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 overflow-x: hidden;\n min-width: ${({ $minWidth, $overflowY }) => $minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n\n ${({ $minWidth, $overflowY, $shouldUseCurrentItemWidth }) =>\n !$shouldUseCurrentItemWidth &&\n css`\n max-width: ${$minWidth - ($overflowY === 'scroll' ? 5 : 0)}px;\n `}\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\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n position: sticky;\n top: 0;\n border: black 5px;\n cursor: default;\n font-weight: bold;\n display: flex;\n gap: 10px;\n z-index: 10;\n padding: 4px 10px;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-101']};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,eAAe;AAEtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAE/C,SAASC,iBAAiB,QAAQ,sBAAsB;AAUxD,OAAO,MAAMC,cAAc,GAAGH,MAAM,CAACI,GAAwB;AAC7D;AACA;AACA;AACA,MAAMC,IAAA,IAAoE;EAAA,IAAnE;IAAEC,mBAAmB;IAAEC,SAAS;IAAEC;EAA2B,CAAC,GAAAH,IAAA;EAC7D,IAAI,OAAOE,SAAS,KAAK,QAAQ,EAAE;IAC/B,OAAON,GAAG;AACtB;AACA,aAAa;EACL;EAEA,IAAIK,mBAAmB,EAAE;IACrB,OAAOL,GAAG;AACtB,6BAA6BM,SAAS;AACtC;AACA,aAAa;EACL;EAEA,IAAIC,0BAA0B,EAAE;IAC5B,OAAO,EAAE;EACb;EAEA,OAAOP,GAAG;AAClB,yBAAyBM,SAAS;AAClC,yBAAyBA,SAAS;AAClC,SAAS;AACL,CAAC;AACL,CAAC;AAWD,OAAO,MAAME,oBAAoB,GAAGT,MAAM,CAACI,GAA8B;AACzE;AACA;AACA;AACA;AACA,cAAcM,KAAA;EAAA,IAAC;IAAEC;EAAY,CAAC,GAAAD,KAAA;EAAA,OAAM,CAACC,WAAW,GAAG,SAAS,GAAG,SAAS;AAAA,CAAC;AACzE,wBAAwBC,KAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA8C,CAAC,GAAAF,KAAA;EAAA,OACzEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA;AACzF,eAAeG,KAAA;EAAA,IAAC;IAAEL;EAAY,CAAC,GAAAK,KAAA;EAAA,OAAML,WAAW,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC3D;AACA;AACA,MAAMM,KAAA;EAAA,IAAC;IAAEC;EAAoB,CAAC,GAAAD,KAAA;EAAA,OACtBC,mBAAmB,IACnBjB,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMkB,KAAA,IAA6B;EAAA,IAA5B;IAAEC,OAAO;IAAEC;EAAW,CAAC,GAAAF,KAAA;EACtB,IAAIC,OAAO,EAAE;IACT,OAAOC,UAAU,KAAKnB,iBAAiB,CAACoB,MAAM,GACxCrB,GAAG;AACrB;AACA;AACA,mBAAmB,GACDA,GAAG;AACrB;AACA;AACA,mBAAmB;EACX;EAEA,OAAOA,GAAG;AAClB;AACA,SAAS;AACL,CAAC;AACL;AACA,MAAMsB,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEb,WAAW;IAAEE;EAAiC,CAAC,GAAAU,KAAA;EAAA,OAC1D,CAACC,QAAQ,IACT,CAACb,WAAW,IACZV,GAAG;AACX;AACA,oCAAoCY,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AAAA;AACT,CAAC;AAID,OAAO,MAAMY,yBAAyB,GAAGzB,MAAM,CAACI,GAAmC;AACnF;AACA,aAAasB,KAAA;EAAA,IAAC;IAAEb;EAAsC,CAAC,GAAAa,KAAA;EAAA,OAAKb,KAAK,CAACc,IAAI;AAAA;AACtE;AACA;AACA;AACA;AACA,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAqB,CAAC,GAAAD,KAAA;EAAA,OAAMC,oBAAoB,GAAG,GAAG,GAAG,CAAC;AAAA,CAAC;AAC7E,CAAC;AAED,OAAO,MAAMC,6BAA6B,GAAG9B,MAAM,CAACI,GAAG;AACvD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM2B,yCAAyC,GAAG/B,MAAM,CAACI,GAAG;AACnE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM4B,oBAAoB,GAAGhC,MAAM,CAACI,GAAG;AAC9C;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAM6B,mBAAmB,GAAGjC,MAAM,CAACkC,KAAK;AAC/C,aAAaC,MAAA;EAAA,IAAC;IAAEtB;EAAwB,CAAC,GAAAsB,MAAA;EAAA,OAAKtB,KAAK,CAACc,IAAI;AAAA;AACxD;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMS,8BAA8B,GAAGpC,MAAM,CAACqC,GAAwC;AAC7F;AACA,eAAeC,MAAA;EAAA,IAAC;IAAEzB;EAA2C,CAAC,GAAAyB,MAAA;EAAA,OAAKzB,KAAK,CAAC,SAAS,CAAC;AAAA;AACnF,cAAc0B,MAAA;EAAA,IAAC;IAAErB;EAAoB,CAAC,GAAAqB,MAAA;EAAA,OAAMrB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AAClF,aAAasB,MAAA;EAAA,IAAC;IAAEtB;EAAoB,CAAC,GAAAsB,MAAA;EAAA,OAAMtB,mBAAmB,GAAG,MAAM,GAAG,MAAM;AAAA,CAAC;AACjF;AACA,MAAMuB,MAAA;EAAA,IAAC;IAAEC;EAAsB,CAAC,GAAAD,MAAA;EAAA,OACxBC,qBAAqB,IACrBzC,GAAG;AACX;AACA,SAAS;AAAA;AACT,CAAC;AAED,OAAO,MAAM0C,yBAAyB,GAAG3C,MAAM,CAACI,GAAG;AACnD;AACA;AACA;AACA,CAAC;AAWD,OAAO,MAAMwC,wBAAwB,GAAG5C,MAAM,CAACD,MAAM,CAACK,GAAG,CAA0B;AACnF,kBAAkByC,MAAA;EAAA,IAAC;IAAEhC;EAA+B,CAAC,GAAAgC,MAAA;EAAA,OAAKhC,KAAK,CAAC,KAAK,CAAC;AAAA;AACtE;AACA;AACA;AACA;AACA;AACA;AACA,kBAAkBiC,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD,kBAAkBC,MAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,MAAA;EAAA,OAAKC,UAAU;AAAA;AAChD;AACA,iBAAiBC,MAAA;EAAA,IAAC;IAAE3C,SAAS;IAAE0C;EAAW,CAAC,GAAAC,MAAA;EAAA,OAAK3C,SAAS,IAAI0C,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;AAAA;AAC7F;AACA,MAAME,MAAA;EAAA,IAAC;IAAE5C,SAAS;IAAE0C,UAAU;IAAEzC;EAA2B,CAAC,GAAA2C,MAAA;EAAA,OACpD,CAAC3C,0BAA0B,IAC3BP,GAAG;AACX,yBAAyBM,SAAS,IAAI0C,UAAU,KAAK,QAAQ,GAAG,CAAC,GAAG,CAAC,CAAC;AACtE,SAAS;AAAA;AACT;AACA,MAAMG,MAAA,IAAoB;EAAA,IAAnB;IAAE/B;EAAW,CAAC,GAAA+B,MAAA;EACb,IAAI/B,UAAU,KAAKnB,iBAAiB,CAACoB,MAAM,EAAE;IACzC,OAAOrB,GAAG;AACtB;AACA;AACA;AACA,aAAa;EACL;EAEA,OAAOA,GAAG;AAClB;AACA;AACA;AACA,SAAS;AACL,CAAC;AACL;AACA;AACA,MAAMoD,MAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEzC;EAA+B,CAAC,GAAAwC,MAAA;EAAA,OAC3CC,QAAQ,KAAK,SAAS,GAChBrD,GAAG;AACjB,0CAA0CY,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDZ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CY,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC;AAID,OAAO,MAAM0C,mBAAmB,GAAGvD,MAAM,CAACI,GAAG;AAC7C;AACA,kBAAkBoD,MAAA;EAAA,IAAC;IAAE3C;EAAgC,CAAC,GAAA2C,MAAA;EAAA,OAAK3C,KAAK,CAAC,UAAU,CAAC;AAAA;AAC5E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB4C,MAAA;EAAA,IAAC;IAAE5C;EAAgC,CAAC,GAAA4C,MAAA;EAAA,OAAK5C,KAAK,CAAC,eAAe,CAAC;AAAA;AACvF,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ComboBox.styles.js","names":["styled","css","DropdownDirection","StyledComboBox","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","StyledComboBoxHeader","$isDisabled","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","$prefixMinWidth","StyledComboBoxInput","input","StyledComboBoxPlaceholderImage","img","$shouldShowRoundImage","StyledComboBoxClearIconWrapper","StyledComboBoxIconWrapper","$shouldShowBorderLeft","StyledComboBoxBody","$maxHeight","$browser","StyledComboBoxTopic"],"sources":["../../../../src/components/combobox/ComboBox.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../types/chayns';\nimport type { Theme, WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\nimport type { ComboBoxProps } from './ComboBox';\nimport { DropdownDirection } from '../../types/dropdown';\n\ntype StyledComboBoxProps = WithTheme<{\n $minWidth?: number;\n $shouldUseFullWidth: ComboBoxProps['shouldUseFullWidth'];\n $shouldUseCurrentItemWidth: ComboBoxProps['shouldUseCurrentItemWidth'];\n}>;\n\nexport const StyledComboBox = styled.div<StyledComboBoxProps>`\n user-select: none;\n position: relative;\n\n ${({ $shouldUseFullWidth, $minWidth, $shouldUseCurrentItemWidth }) => {\n if (typeof $minWidth !== 'number') {\n return css`\n width: fit-content;\n `;\n }\n\n if ($shouldUseFullWidth) {\n return css`\n min-width: ${$minWidth}px;\n width: 100%;\n `;\n }\n\n if ($shouldUseCurrentItemWidth) {\n return '';\n }\n\n return css`\n min-width: ${$minWidth}px;\n max-width: ${$minWidth}px;\n `;\n }}\n`;\n\ntype StyledComboBoxHeaderProps = WithTheme<{\n $isTouch: boolean;\n $isOpen: boolean;\n $direction: DropdownDirection;\n $isDisabled?: boolean;\n $shouldChangeColor: boolean;\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowTransparentBackground: boolean;\n}>;\n\nexport const StyledComboBoxHeader = styled.div<StyledComboBoxHeaderProps>`\n display: flex;\n border: 1px solid transparent;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n justify-content: space-between;\n opacity: ${({ $isDisabled }) => ($isDisabled ? 0.5 : 1)};\n transition: background-color 0.2s ease-in-out;\n\n min-height: 42px;\n\n ${({ theme, $shouldShowTransparentBackground, $shouldChangeColor }) => {\n if ($shouldShowTransparentBackground) {\n if (theme.colorMode === 'dark') {\n return css`\n border-color: rgba(255, 255, 255, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(0, 0, 0, 0.5);\n background-color: transparent;\n `;\n }\n\n return css`\n border-color: rgba(160, 160, 160, 0.3);\n background-color: ${theme.colorMode === 'classic' \|\| $shouldChangeColor\n ? theme['000']\n : theme['100']};\n `;\n }}\n\n ${({ $shouldShowBigImage }) =>\n $shouldShowBigImage &&\n css`\n height: 42px;\n `}\n\n ${({ $isOpen, $direction }) => {\n if ($isOpen) {\n return [\n DropdownDirection.BOTTOM,\n DropdownDirection.BOTTOM_LEFT,\n DropdownDirection.BOTTOM_RIGHT,\n ].includes($direction)\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<{ $shouldReduceOpacity: boolean }>;\n\nexport const StyledComboBoxPlaceholder = styled.div<StyledComboBoxPlaceholderProps>`\n align-items: center;\n color: ${({ theme }: StyledComboBoxPlaceholderProps) => theme.text};\n display: flex;\n flex: 1 1 auto;\n gap: 10px;\n min-width: 0;\n opacity: ${({ $shouldReduceOpacity }) => ($shouldReduceOpacity ? 0.5 : 1)};\n`;\n\nexport const StyledComboBoxPlaceholderText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxPrefixAndPlaceholderWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n padding: 4px 10px;\n`;\n\ntype StyledComboBoxPrefixProps = {\n $prefixMinWidth?: number;\n};\n\nexport const StyledComboBoxPrefix = styled.div<StyledComboBoxPrefixProps>`\n flex: 0 0 auto;\n min-width: ${({ $prefixMinWidth }) => $prefixMinWidth ?? 0}px;\n padding-right: 5px;\n`;\n\nexport const StyledComboBoxInput = styled.input`\n color: ${({ theme }: { theme: Theme }) => theme.text};\n border: none;\n background-color: transparent;\n width: 100%;\n`;\n\ntype StyledComboBoxPlaceholderImageProps = WithTheme<{\n $shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n $shouldShowRoundImage: ComboBoxProps['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: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '32px' : '22px')};\n\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n`;\n\ntype StyledComboBoxClearIconWrapperProps = { $isDisabled: boolean };\n\nexport const StyledComboBoxClearIconWrapper = styled.div<StyledComboBoxClearIconWrapperProps>`\n align-items: center;\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = { $shouldShowBorderLeft: boolean; $isDisabled: boolean };\n\nexport const StyledComboBoxIconWrapper = styled.div<StyledComboBoxIconWrapperProps>`\n align-items: center;\n border-left: ${({ $shouldShowBorderLeft }) =>\n $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};\n cursor: ${({ $isDisabled }) => (!$isDisabled ? 'pointer' : 'default')};\n display: flex;\n flex: 0 0 auto;\n height: 40px;\n justify-content: center;\n width: 40px;\n`;\n\ntype StyledComboBoxBodyProps = WithTheme<{\n $shouldUseCurrentItemWidth: boolean;\n $browser: BrowserName;\n $maxHeight: number;\n $minWidth: number;\n}>;\n\nexport const StyledComboBoxBody = styled.div<StyledComboBoxBodyProps>`\n display: flex;\n flex-direction: column;\n cursor: pointer;\n\n overflow-x: hidden;\n overflow-y: auto;\n\n max-height: ${({ $maxHeight }) => $maxHeight}px;\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: 10px;\n height: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n width: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n\n &::-webkit-scrollbar-corner {\n background-color: transparent;\n }\n `}\n`;\n\ntype StyledComboBoxTopicProps = WithTheme<unknown>;\n\nexport const StyledComboBoxTopic = styled.div`\n align-items: center;\n background-color: ${({ theme }: StyledComboBoxTopicProps) => theme['secondary-102']};\n color: rgba(${({ theme }: StyledComboBoxTopicProps) => theme['text-rgb']}, 0.65);\n cursor: default;\n display: flex;\n flex: 0 0 auto;\n font-weight: bold;\n min-height: 38px;\n line-height: normal;\n padding: 8px 10px;\n position: sticky;\n top: 0;\n z-index: 10;\n`;\n"],"mappings":"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","ignoreList":[]}

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

@@ -1,25 +1,27 @@
 import React, { useCallback, useMemo } from 'react';
-import { getIsTouch } from '../../../utils/environment';
+import { useIsTouch } from '../../../utils/environment';
 import Icon from '../../icon/Icon';
-import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderWrapper, StyledComboBoxItemContentHeaderWrapperText, StyledComboBoxItemContentSubtext, StyledComboBoxItemImage } from './ComboBoxItem.styles';
-const ComboBoxItem = _ref => {
-  let {
+import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderWrapper, StyledComboBoxItemContentHeaderWrapperText, StyledComboBoxItemContentSubtext, StyledComboBoxItemIconsWrapper, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = ({
+  item,
+  isSelected,
+  onSelect,
+  shouldShowBigImage,
+  shouldShowRoundImage
+}) => {
+  const {
     icons,
-    id,
-    imageBackground,
     imageUrl,
     isDisabled,
-    isSelected,
-    onSelect,
-    rightElement,
-    shouldShowBigImage,
-    shouldShowRoundImage,
-    subtext,
+    imageBackground,
     suffixElement,
     textStyles,
+    rightElement,
     text,
-    value
-  } = _ref;
+    value,
+    subtext
+  } = item;
+  const id = value;
   const handleItemClick = useCallback(() => {
     if (!isDisabled) {
       onSelect({
@@ -31,9 +33,9 @@ const ComboBoxItem = _ref => {
       });
     }
   }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
-  const isTouch = getIsTouch();
+  const isTouch = useIsTouch();
   return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
-    id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`,
     onClick: handleItemClick,
     $isDisabled: isDisabled,
     $isSelected: isSelected,
@@ -43,15 +45,16 @@ const ComboBoxItem = _ref => {
     $background: imageBackground,
     $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
     $shouldShowRoundImage: shouldShowRoundImage
-  }), icons && /*#__PURE__*/React.createElement(Icon, {
+  }), icons && /*#__PURE__*/React.createElement(StyledComboBoxItemIconsWrapper, null, /*#__PURE__*/React.createElement(Icon, {
     icons: icons
-  }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, {
+  })), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, {
     $text: text,
     $subtext: subtext
   }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapper, {
     as: textStyles?.tagName,
-    style: textStyles?.styles
-  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapperText, null, text), suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageBackground, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text, textStyles?.styles, textStyles?.tagName]);
+    style: textStyles?.styles,
+    className: textStyles?.className
+  }, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderWrapperText, null, text), suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageBackground, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text, textStyles?.styles, textStyles?.tagName, textStyles?.className]);
 };
 ComboBoxItem.displayName = 'ComboBoxItem';
 export default ComboBoxItem;

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","~~getIsTouch~~","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentSubtext","StyledComboBoxItemImage","ComboBoxItem","~~_ref~~","~~icons~~","id","~~imageBackground~~","~~imageUrl~~","~~isDisabled~~","~~isSelected~~","~~onSelect~~","~~rightElement~~","~~shouldShowBigImage~~","~~shouldShowRoundImage~~","~~subtext~~","~~suffixElement~~","~~textStyles~~","~~text~~","~~value~~","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","$text","$subtext","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 StyledComboBoxItemContentHeaderWrapper,\n StyledComboBoxItemContentHeaderWrapperText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n ~~icons?: IComboBoxItem['icons'];\n id~~: IComboBoxItem~~['value']~~;\n ~~imageBackground?: IComboBoxItem['imageBackground'];\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 ~~imageBackground~~,\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 $background={imageBackground}\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 $text={text} $subtext={subtext}>\n <StyledComboBoxItemContentHeaderWrapper\n as={textStyles?.tagName}\n style={textStyles?.styles}\n >\n <StyledComboBoxItemContentHeaderWrapperText>\n {text}\n </StyledComboBoxItemContentHeaderWrapperText>\n {suffixElement}\n </StyledComboBoxItemContentHeaderWrapper>\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 imageBackground,\n imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n textStyles?.styles,\n textStyles?.tagName,\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,sCAAsC,EACtCC,0CAA0C,EAC1CC,gCAAgC,EAChCC,uBAAuB,QACpB,uBAAuB;~~AAoB9B~~,MAAMC,YAAmC,~~GAAGC~~,~~IAAA,IAgBtC~~;~~EAAA~~,~~IAhBuC~~;~~IACzCC~~,~~KAAK~~;~~IACLC~~,~~EAAE~~;~~IACFC~~,~~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,~~GAAAf~~,~~IAAA~~;~~EACG~~,~~MAAMgB~~,eAAe,~~GAAG7B~~,WAAW,CAAC,MAAM;IACtC,IAAI,~~CAACkB~~,UAAU,EAAE;~~MACbE~~,QAAQ,CAAC;~~QAAEO~~,IAAI;QAAEC,KAAK;~~QAAEH~~,aAAa;~~QAAER~~,QAAQ;~~QAAEH~~;MAAM,CAAC,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACA,KAAK,~~EAAEG~~,QAAQ,EAAEC,UAAU,~~EAAEE~~,QAAQ,~~EAAEK~~,aAAa,~~EAAEE~~,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEvE,~~MAAME~~,OAAO,~~GAAG5B~~,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,~~CAAAgC~~,aAAA,~~CAAC3B~~,kBAAkB;~~IACfW~~,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,~~GAAGiB~~,MAAM,~~CAACjB~~,EAAE,CAAC,GAAGA,EAAE,EAAG;~~IACjEkB~~,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,~~EAAEhB~~,UAAW;~~IACxBiB~~,WAAW,~~EAAEhB~~,UAAW;~~IACxBiB~~,QAAQ,EAAEN;EAAQ,~~GAEjBb~~,QAAQ,~~iBACLlB~~,KAAA,~~CAAAgC~~,aAAA,CAACpB,uBAAuB;IACpB0B,GAAG,~~EAAEpB~~,QAAS;~~IACdqB~~,WAAW,~~EAAEtB~~,eAAgB;~~IAC7BuB~~,mBAAmB,~~EACfjB~~,kBAAkB,IACjB,~~OAAOE~~,OAAO,KAAK,QAAQ,IAAIA,OAAO,~~CAACgB~~,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,~~EAAElB~~;EAAqB,CAC/C,CACJ,~~EACAT~~,KAAK,~~iBAAIf~~,KAAA,~~CAAAgC~~,aAAA,~~CAAC5B~~,IAAI;~~IAACW~~,KAAK,EAAEA;EAAM,CAAE,~~CAAC~~,~~eAChCf~~,KAAA,~~CAAAgC~~,aAAA,~~CAAC1B~~,yBAAyB,qBACtBN,KAAA,~~CAAAgC~~,aAAA,~~CAACzB~~,+BAA+B;~~IAACoC~~,KAAK,~~EAAEf~~,IAAK;~~IAACgB~~,QAAQ,~~EAAEnB~~;EAAQ,~~gBAC5DzB~~,KAAA,~~CAAAgC~~,aAAA,~~CAACvB~~,sCAAsC;~~IACnCoC~~,EAAE,~~EAAElB~~,UAAU,~~EAAEmB~~,OAAQ;IACxBC,KAAK,~~EAAEpB~~,UAAU,~~EAAEqB~~;~~EAAO~~,~~gBAE1BhD~~,KAAA,~~CAAAgC~~,aAAA,~~CAACtB~~,0CAA0C,~~QACtCkB~~,IACuC,CAAC,~~EAC5CF~~,aACmC,CAAC,~~EACxCJ~~,YAAY,~~iBACTtB~~,KAAA,~~CAAAgC~~,aAAA,~~CAACxB~~,2CAA2C,~~QACvCc~~,YACwC,CAEpB,CAAC,EACjCG,OAAO,~~iBACJzB~~,KAAA,~~CAAAgC~~,aAAA,~~CAACrB~~,gCAAgC,~~QAC5Bc~~,OAC6B,CAEf,CACX,CACvB,EACD,~~CACIK~~,eAAe,~~EACff~~,KAAK,~~EACLC~~,EAAE,~~EACFC~~,eAAe,~~EACfC~~,QAAQ,EACRC,UAAU,~~EACVC~~,UAAU,~~EACVW~~,OAAO,~~EACPT~~,YAAY,~~EACZC~~,kBAAkB,EAClBC,oBAAoB,~~EACpBC~~,OAAO,~~EACPC~~,aAAa,~~EACbE~~,IAAI,~~EACJD~~,UAAU,~~EAAEqB~~,MAAM,~~EAClBrB~~,UAAU,~~EAAEmB~~,OAAO,~~CAE3B~~,CAAC;AACL,CAAC;~~AAEDjC~~,YAAY,~~CAACoC~~,WAAW,GAAG,cAAc;AAEzC,~~eAAepC~~,YAAY","ignoreList":[]}
1	+ {"version":3,"file":"ComboBoxItem.js","names":["React","useCallback","useMemo","useIsTouch","Icon","StyledComboBoxItem","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentSubtext","StyledComboBoxItemIconsWrapper","StyledComboBoxItemImage","ComboBoxItem","item","isSelected","onSelect","shouldShowBigImage","shouldShowRoundImage","icons","imageUrl","isDisabled","imageBackground","suffixElement","textStyles","rightElement","text","value","subtext","id","handleItemClick","isTouch","createElement","String","onClick","$isDisabled","$isSelected","$isTouch","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","$text","$subtext","as","tagName","style","styles","className","displayName"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, useCallback, useMemo } from 'react';\nimport { useIsTouch } from '../../../utils/environment';\nimport Icon from '../../icon/Icon';\nimport type { ComboBoxProps, IComboBoxItem } from '../ComboBox';\nimport {\n StyledComboBoxItem,\n StyledComboBoxItemContent,\n StyledComboBoxItemContentHeader,\n StyledComboBoxItemContentHeaderRightElement,\n StyledComboBoxItemContentHeaderWrapper,\n StyledComboBoxItemContentHeaderWrapperText,\n StyledComboBoxItemContentSubtext,\n StyledComboBoxItemIconsWrapper,\n StyledComboBoxItemImage,\n} from './ComboBoxItem.styles';\n\nexport type ComboBoxItemProps = {\n item: IComboBoxItem;\n isSelected: boolean;\n onSelect: (itemToSelect: IComboBoxItem) => void;\n shouldShowBigImage: ComboBoxProps['shouldShowBigImage'];\n shouldShowRoundImage: ComboBoxProps['shouldShowRoundImage'];\n};\n\nconst ComboBoxItem: FC<ComboBoxItemProps> = ({\n item,\n isSelected,\n onSelect,\n shouldShowBigImage,\n shouldShowRoundImage,\n}) => {\n const {\n icons,\n imageUrl,\n isDisabled,\n imageBackground,\n suffixElement,\n textStyles,\n rightElement,\n text,\n value,\n subtext,\n } = item;\n const id = 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 = useIsTouch();\n\n return useMemo(\n () => (\n <StyledComboBoxItem\n id={`combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`}\n onClick={handleItemClick}\n $isDisabled={isDisabled}\n $isSelected={isSelected}\n $isTouch={isTouch}\n >\n {imageUrl && (\n <StyledComboBoxItemImage\n src={imageUrl}\n $background={imageBackground}\n $shouldShowBigImage={\n shouldShowBigImage \|\|\n (typeof subtext === 'string' && subtext.trim() !== '')\n }\n $shouldShowRoundImage={shouldShowRoundImage}\n />\n )}\n {icons && (\n <StyledComboBoxItemIconsWrapper>\n <Icon icons={icons} />\n </StyledComboBoxItemIconsWrapper>\n )}\n <StyledComboBoxItemContent>\n <StyledComboBoxItemContentHeader $text={text} $subtext={subtext}>\n <StyledComboBoxItemContentHeaderWrapper\n as={textStyles?.tagName}\n style={textStyles?.styles}\n className={textStyles?.className}\n >\n <StyledComboBoxItemContentHeaderWrapperText>\n {text}\n </StyledComboBoxItemContentHeaderWrapperText>\n {suffixElement}\n </StyledComboBoxItemContentHeaderWrapper>\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 imageBackground,\n imageUrl,\n isDisabled,\n isSelected,\n isTouch,\n rightElement,\n shouldShowBigImage,\n shouldShowRoundImage,\n subtext,\n suffixElement,\n text,\n textStyles?.styles,\n textStyles?.tagName,\n textStyles?.className,\n ],\n );\n};\n\nComboBoxItem.displayName = 'ComboBoxItem';\n\nexport default ComboBoxItem;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAQC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACvD,SAASC,UAAU,QAAQ,4BAA4B;AACvD,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,kBAAkB,EAClBC,yBAAyB,EACzBC,+BAA+B,EAC/BC,2CAA2C,EAC3CC,sCAAsC,EACtCC,0CAA0C,EAC1CC,gCAAgC,EAChCC,8BAA8B,EAC9BC,uBAAuB,QACpB,uBAAuB;AAU9B,MAAMC,YAAmC,GAAGA,CAAC;EACzCC,IAAI;EACJC,UAAU;EACVC,QAAQ;EACRC,kBAAkB;EAClBC;AACJ,CAAC,KAAK;EACF,MAAM;IACFC,KAAK;IACLC,QAAQ;IACRC,UAAU;IACVC,eAAe;IACfC,aAAa;IACbC,UAAU;IACVC,YAAY;IACZC,IAAI;IACJC,KAAK;IACLC;EACJ,CAAC,GAAGd,IAAI;EACR,MAAMe,EAAE,GAAGF,KAAK;EAEhB,MAAMG,eAAe,GAAG9B,WAAW,CAAC,MAAM;IACtC,IAAI,CAACqB,UAAU,EAAE;MACbL,QAAQ,CAAC;QAAEU,IAAI;QAAEC,KAAK;QAAEJ,aAAa;QAAEH,QAAQ;QAAED;MAAM,CAAC,CAAC;IAC7D;EACJ,CAAC,EAAE,CAACA,KAAK,EAAEC,QAAQ,EAAEC,UAAU,EAAEL,QAAQ,EAAEO,aAAa,EAAEG,IAAI,EAAEC,KAAK,CAAC,CAAC;EAEvE,MAAMI,OAAO,GAAG7B,UAAU,CAAC,CAAC;EAE5B,OAAOD,OAAO,CACV,mBACIF,KAAA,CAAAiC,aAAA,CAAC5B,kBAAkB;IACfyB,EAAE,EAAE,kBAAkB,OAAOA,EAAE,KAAK,QAAQ,GAAGI,MAAM,CAACJ,EAAE,CAAC,GAAGA,EAAE,GAAGR,UAAU,GAAG,iBAAiB,GAAG,EAAE,EAAG;IACvGa,OAAO,EAAEJ,eAAgB;IACzBK,WAAW,EAAEd,UAAW;IACxBe,WAAW,EAAErB,UAAW;IACxBsB,QAAQ,EAAEN;EAAQ,GAEjBX,QAAQ,iBACLrB,KAAA,CAAAiC,aAAA,CAACpB,uBAAuB;IACpB0B,GAAG,EAAElB,QAAS;IACdmB,WAAW,EAAEjB,eAAgB;IAC7BkB,mBAAmB,EACfvB,kBAAkB,IACjB,OAAOW,OAAO,KAAK,QAAQ,IAAIA,OAAO,CAACa,IAAI,CAAC,CAAC,KAAK,EACtD;IACDC,qBAAqB,EAAExB;EAAqB,CAC/C,CACJ,EACAC,KAAK,iBACFpB,KAAA,CAAAiC,aAAA,CAACrB,8BAA8B,qBAC3BZ,KAAA,CAAAiC,aAAA,CAAC7B,IAAI;IAACgB,KAAK,EAAEA;EAAM,CAAE,CACO,CACnC,eACDpB,KAAA,CAAAiC,aAAA,CAAC3B,yBAAyB,qBACtBN,KAAA,CAAAiC,aAAA,CAAC1B,+BAA+B;IAACqC,KAAK,EAAEjB,IAAK;IAACkB,QAAQ,EAAEhB;EAAQ,gBAC5D7B,KAAA,CAAAiC,aAAA,CAACxB,sCAAsC;IACnCqC,EAAE,EAAErB,UAAU,EAAEsB,OAAQ;IACxBC,KAAK,EAAEvB,UAAU,EAAEwB,MAAO;IAC1BC,SAAS,EAAEzB,UAAU,EAAEyB;EAAU,gBAEjClD,KAAA,CAAAiC,aAAA,CAACvB,0CAA0C,QACtCiB,IACuC,CAAC,EAC5CH,aACmC,CAAC,EACxCE,YAAY,iBACT1B,KAAA,CAAAiC,aAAA,CAACzB,2CAA2C,QACvCkB,YACwC,CAEpB,CAAC,EACjCG,OAAO,iBACJ7B,KAAA,CAAAiC,aAAA,CAACtB,gCAAgC,QAC5BkB,OAC6B,CAEf,CACX,CACvB,EACD,CACIE,eAAe,EACfX,KAAK,EACLU,EAAE,EACFP,eAAe,EACfF,QAAQ,EACRC,UAAU,EACVN,UAAU,EACVgB,OAAO,EACPN,YAAY,EACZR,kBAAkB,EAClBC,oBAAoB,EACpBU,OAAO,EACPL,aAAa,EACbG,IAAI,EACJF,UAAU,EAAEwB,MAAM,EAClBxB,UAAU,EAAEsB,OAAO,EACnBtB,UAAU,EAAEyB,SAAS,CAE7B,CAAC;AACL,CAAC;AAEDpC,YAAY,CAACqC,WAAW,GAAG,cAAc;AAEzC,eAAerC,YAAY","ignoreList":[]}

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

@@ -1,41 +1,32 @@
 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-102'];
-}};
-    color: ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.text;
-}};
+    background-color: ${({
+  theme,
+  $isSelected
+}) => $isSelected && theme['secondary-102']};
+    color: ${({
+  theme
+}) => theme.text};
     display: flex;
+    flex: 0 0 auto;
     gap: 10px;
-    padding: 4px 10px;
+    min-height: 38px;
+    padding: 8px 10px;
     transition: background-color 0.2s ease-in-out;
-    ${_ref3 => {
-  let {
-    $isDisabled
-  } = _ref3;
-  return $isDisabled && css`
+    ${({
+  $isDisabled
+}) => $isDisabled && css`
             opacity: 0.5;
             pointer-events: none;
-        `;
-}}
+        `}
-    ${_ref4 => {
-  let {
-    $isDisabled,
-    $isTouch,
-    theme
-  } = _ref4;
-  return !$isDisabled && !$isTouch && css`
+    ${({
+  $isDisabled,
+  $isTouch,
+  theme
+}) => !$isDisabled && !$isTouch && css`
             &:hover {
                 background-color: ${theme['secondary-101']};
             }
@@ -43,46 +34,39 @@ export const StyledComboBoxItem = styled.div`
             &:focus {
                 background-color: ${theme['secondary-101']};
             }
-        `;
-}}
+        `}
 `;
 export const StyledComboBoxItemImage = styled.img`
-    ${_ref5 => {
-  let {
-    $shouldShowRoundImage
-  } = _ref5;
-  return $shouldShowRoundImage && css`
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && css`
             border-radius: 50%;
-        `;
-}}
+        `}
-    background: ${_ref6 => {
-  let {
-    $background,
-    theme
-  } = _ref6;
-  return $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`;
-}};
+    background: ${({
+  $background,
+  theme
+}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
     box-shadow: 0 0 0 1px
-        rgba(${_ref7 => {
-  let {
-    theme
-  } = _ref7;
-  return theme['009-rgb'];
-}}, 0.15);
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    flex: 0 0 auto;
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+    object-fit: cover;
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+`;
+export const StyledComboBoxItemIconsWrapper = styled.div`
+    align-items: center;
+    display: flex;
     flex: 0 0 auto;
-    height: ${_ref8 => {
-  let {
-    $shouldShowBigImage
-  } = _ref8;
-  return $shouldShowBigImage ? '40px' : '22px';
-}};
-    width: ${_ref9 => {
-  let {
-    $shouldShowBigImage
-  } = _ref9;
-  return $shouldShowBigImage ? '40px' : '22px';
-}};
+    height: 100%;
+    justify-content: center;
+    width: 20px;
 `;
 export const StyledComboBoxItemContent = styled.div`
     display: flex;
@@ -96,20 +80,6 @@ export const StyledComboBoxItemContentHeader = styled.div`
     align-items: center;
     display: flex;
     justify-content: space-between;
-    font-weight: ${_ref10 => {
-  let {
-    $text,
-    $subtext
-  } = _ref10;
-  return $text && $subtext ? 'bold' : 'normal';
-}};
-    font-size: ${_ref11 => {
-  let {
-    $text,
-    $subtext
-  } = _ref11;
-  return $text && $subtext && '17px';
-}};
 `;
 export const StyledComboBoxItemContentHeaderWrapper = styled.div`
     display: flex;
@@ -127,7 +97,7 @@ export const StyledComboBoxItemContentHeaderRightElement = styled.div`
     display: flex;
 `;
 export const StyledComboBoxItemContentSubtext = styled.div`
-    font-size: 90%;
+    font-size: 85%;
     margin-top: 2px;
 `;
 //# sourceMappingURL=ComboBoxItem.styles.js.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","~~_ref","~~theme","$isSelected","~~_ref2","~~text","~~_ref3","~~$isDisabled","~~_ref4","~~$isTouch","StyledComboBoxItemImage","img","~~_ref5","~~$shouldShowRoundImage","~~_ref6","~~$background","~~_ref7","_ref8","~~$shouldShowBigImage","~~_ref9~~","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","~~_ref10","$text","$subtext","_ref11","~~StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isDisabled?: boolean;\n $isSelected: boolean;\n $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-102']};\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 ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n\n ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isDisabled &&\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-101']};\n }\n\n &:focus {\n background-color: ${theme['secondary-101']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowBigImage?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n\n background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n flex: 0 0 auto;\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n line-height: normal;\n min-width: 0;\n width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n $text?: string;\n $subtext?: string;\n};\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n ~~font-weight: ${({ $text, $subtext }) => ($text && $subtext ? 'bold' : 'normal')};\n font-size: ${({ $text, $subtext }) => $text && $subtext && '17px'};\n~~`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n display: flex;\n flex: 1 1 auto;\n gap: 4px;\n min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n font-size: 90%;\n margin-top: 2px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/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;EAAY~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OACdC,~~WAAW,~~IACXT~~,GAAG;AACX;AACA;AACA,SAAS;~~AAAA;~~AACT;AACA,~~MAAMU~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAED,~~WAAW;~~IAAEE~~,QAAQ;~~IAAEP~~;~~EAA~~+B,CAAC,~~GAAAM~~,~~KAAA;EAAA~~,~~OACxD,CAACD,~~WAAW,IACZ,~~CAACE~~,QAAQ,~~IACTX~~,GAAG;AACX;AACA,~~oCAAoCI~~,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;~~AAAA;~~AACT,CAAC;AAQD,OAAO,~~MAAMQ~~,uBAAuB,~~GAAGb~~,MAAM,~~CAACc~~,GAAiC;AAC/E,~~MAAMC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAsB~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OACxBC,~~qBAAqB,~~IACrBf~~,GAAG;AACX;AACA,SAAS;~~AAAA;~~AACT;AACA,~~kBAAkBgB~~,~~KAAA~~;~~EAAA~~,~~IAAC;IAAEC,~~WAAW;~~IAAEb~~;~~EAAoC~~,CAAC,~~GAAAY,KAAA;EAAA,OAC~~/DC,WAAW,IAAI,~~QAAQb~~,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;~~AAAA;~~AACnE;AACA,~~eAAec~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEd;EAAoC~~,CAAC,~~GAAAc~~,~~KAAA;EAAA,OAAKd,~~KAAK,CAAC,SAAS,CAAC;~~AAAA;~~AAC5E;AACA,~~cAAce~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAEC;EAAoB~~,CAAC,~~GAAAD~~,~~KAAA;EAAA,OAAMC,~~mBAAmB,GAAG,MAAM,GAAG,~~MAAM~~;~~AAAA,CAAC~~;~~AAClF~~,~~aAAaC~~,~~KAAA~~;~~EAAA,IAAC~~;~~IAAED;EAAoB~~,CAAC,~~GAAAC~~,~~KAAA;EAAA,OAAMD,~~mBAAmB,GAAG,MAAM,GAAG,~~MAAM~~;~~AAAA,CAAC;~~AACjF,CAAC;AAED,OAAO,~~MAAME~~,~~yBAAyB~~,~~GAAGvB~~,MAAM,CAACG,GAAG;~~AACnD~~;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;~~AAMD~~,OAAO,~~MAAMqB,+BAA+B~~,~~GAAGxB~~,MAAM,CAACG,~~GAAyC~~;~~AAC/F~~;AACA;AACA;AACA~~,mBAAmBsB,MAAA~~;~~EAAA,IAAC~~;~~IAAEC,KAAK~~;~~IAAEC;EAAS~~,CAAC~~,GAAAF,MAAA~~;~~EAAA~~,~~OAAMC~~,~~KAAK~~,~~IAAIC~~,~~QAAQ,GAAG,~~MAAM,~~GAAG~~,~~QAAQ~~;~~AAAA,CAAC~~;~~AACnF,iBAAiBC,MAAA~~;~~EAAA,IAAC~~;~~IAAEF~~,~~KAAK;IAAEC;EAAS,~~CAAC~~,GAAAC,MAAA~~;~~EAAA,OAAKF,KAAK,IAAIC,QAAQ,IAAI,MAAM;AAAA;AACrE,CAAC;~~AAED,OAAO,~~MAAME~~,sCAAsC,~~GAAG7B~~,MAAM,CAACG,GAAG;AAChE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAM2B~~,0CAA0C,~~GAAG9B~~,MAAM,CAACG,GAAG;AACpE;AACA;AACA;AACA,CAAC;AAED,OAAO,~~MAAM4B~~,2CAA2C,~~GAAG/B~~,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,~~MAAM6B~~,gCAAgC,~~GAAGhC~~,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}
1	+ {"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","theme","$isSelected","text","$isDisabled","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$background","$shouldShowBigImage","StyledComboBoxItemIconsWrapper","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderWrapper","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n $isDisabled?: boolean;\n $isSelected: boolean;\n $isTouch: boolean;\n}>;\n\nexport const StyledComboBoxItem = styled.div<StyledComboBoxItemProps>`\n align-items: center;\n background-color: ${({ theme, $isSelected }: StyledComboBoxItemProps) =>\n $isSelected && theme['secondary-102']};\n color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n display: flex;\n flex: 0 0 auto;\n gap: 10px;\n min-height: 38px;\n padding: 8px 10px;\n transition: background-color 0.2s ease-in-out;\n\n ${({ $isDisabled }) =>\n $isDisabled &&\n css`\n opacity: 0.5;\n pointer-events: none;\n `}\n\n ${({ $isDisabled, $isTouch, theme }: StyledComboBoxItemProps) =>\n !$isDisabled &&\n !$isTouch &&\n css`\n &:hover {\n background-color: ${theme['secondary-101']};\n }\n\n &:focus {\n background-color: ${theme['secondary-101']};\n }\n `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\n $background?: CSSProperties['background'];\n $shouldShowBigImage?: boolean;\n $shouldShowRoundImage?: boolean;\n}>;\n\nexport const StyledComboBoxItemImage = styled.img<StyledComboBoxItemImageProps>`\n ${({ $shouldShowRoundImage }) =>\n $shouldShowRoundImage &&\n css`\n border-radius: 50%;\n `}\n\n background: ${({ $background, theme }: StyledComboBoxItemImageProps) =>\n $background \|\| `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};\n box-shadow: 0 0 0 1px\n rgba(${({ theme }: StyledComboBoxItemImageProps) => theme['009-rgb']}, 0.15);\n flex: 0 0 auto;\n height: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n object-fit: cover;\n width: ${({ $shouldShowBigImage }) => ($shouldShowBigImage ? '40px' : '22px')};\n`;\n\nexport const StyledComboBoxItemIconsWrapper = styled.div`\n align-items: center;\n display: flex;\n flex: 0 0 auto;\n height: 100%;\n justify-content: center;\n width: 20px;\n`;\n\nexport const StyledComboBoxItemContent = styled.div`\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n line-height: normal;\n min-width: 0;\n width: 100%;\n`;\n\ntype StyledComboBoxItemContentHeaderProps = {\n $text?: string;\n $subtext?: string;\n};\n\nexport const StyledComboBoxItemContentHeader = styled.div<StyledComboBoxItemContentHeaderProps>`\n align-items: center;\n display: flex;\n justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapper = styled.div`\n display: flex;\n flex: 1 1 auto;\n gap: 4px;\n min-width: 0;\n`;\n\nexport const StyledComboBoxItemContentHeaderWrapperText = styled.div`\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n`;\n\nexport const StyledComboBoxItemContentHeaderRightElement = styled.div`\n align-items: center;\n display: flex;\n`;\n\nexport const StyledComboBoxItemContentSubtext = styled.div`\n font-size: 85%;\n margin-top: 2px;\n`;\n"],"mappings":"AACA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,kBAAkB,GAAGF,MAAM,CAACG,GAA4B;AACrE;AACA,wBAAwB,CAAC;EAAEC,KAAK;EAAEC;AAAqC,CAAC,KAChEA,WAAW,IAAID,KAAK,CAAC,eAAe,CAAC;AAC7C,aAAa,CAAC;EAAEA;AAA+B,CAAC,KAAKA,KAAK,CAACE,IAAI;AAC/D;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAY,CAAC,KACdA,WAAW,IACXN,GAAG;AACX;AACA;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM,WAAW;EAAEC,QAAQ;EAAEJ;AAA+B,CAAC,KACxD,CAACG,WAAW,IACZ,CAACC,QAAQ,IACTP,GAAG;AACX;AACA,oCAAoCG,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA;AACA;AACA,oCAAoCA,KAAK,CAAC,eAAe,CAAC;AAC1D;AACA,SAAS;AACT,CAAC;AAQD,OAAO,MAAMK,uBAAuB,GAAGT,MAAM,CAACU,GAAiC;AAC/E,MAAM,CAAC;EAAEC;AAAsB,CAAC,KACxBA,qBAAqB,IACrBV,GAAG;AACX;AACA,SAAS;AACT;AACA,kBAAkB,CAAC;EAAEW,WAAW;EAAER;AAAoC,CAAC,KAC/DQ,WAAW,IAAI,QAAQR,KAAK,CAAC,UAAU,CAAC,IAAI,OAAO,QAAQ;AACnE;AACA,eAAe,CAAC;EAAEA;AAAoC,CAAC,KAAKA,KAAK,CAAC,SAAS,CAAC;AAC5E;AACA,cAAc,CAAC;EAAES;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AAClF;AACA,aAAa,CAAC;EAAEA;AAAoB,CAAC,KAAMA,mBAAmB,GAAG,MAAM,GAAG,MAAO;AACjF,CAAC;AAED,OAAO,MAAMC,8BAA8B,GAAGd,MAAM,CAACG,GAAG;AACxD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMY,yBAAyB,GAAGf,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAOD,OAAO,MAAMa,+BAA+B,GAAGhB,MAAM,CAACG,GAAyC;AAC/F;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMc,sCAAsC,GAAGjB,MAAM,CAACG,GAAG;AAChE;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMe,0CAA0C,GAAGlB,MAAM,CAACG,GAAG;AACpE;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMgB,2CAA2C,GAAGnB,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAMiB,gCAAgC,GAAGpB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}

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

@@ -2,12 +2,11 @@ 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 ContentCard = ({
+  children,
+  onClick,
+  type = ContentCardType.Default
+}) => {
   const areaProvider = useContext(AreaContext);
   const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
   return /*#__PURE__*/React.createElement(StyledContentCard, {
@@ -15,6 +14,7 @@ const ContentCard = _ref => {
     $type: type,
     $shouldChangeColor: shouldChangeColor
   }, /*#__PURE__*/React.createElement(AreaContextProvider, {
+    contentCardType: type,
     shouldChangeColor: !shouldChangeColor
   }, children));
 };

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

	@@ -1 +1 @@
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":[]}
1	+ {"version":3,"file":"ContentCard.js","names":["React","useContext","useMemo","ContentCardType","AreaContextProvider","AreaContext","StyledContentCard","ContentCard","children","onClick","type","Default","areaProvider","shouldChangeColor","createElement","$type","$shouldChangeColor","contentCardType","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 contentCardType={type} 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,GAAGA,CAAC;EACvCC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAGP,eAAe,CAACQ;AAC3B,CAAC,KAAK;EACF,MAAMC,YAAY,GAAGX,UAAU,CAACI,WAAW,CAAC;EAE5C,MAAMQ,iBAAiB,GAAGX,OAAO,CAC7B,MAAMU,YAAY,CAACC,iBAAiB,IAAI,KAAK,EAC7C,CAACD,YAAY,CAACC,iBAAiB,CACnC,CAAC;EAED,oBACIb,KAAA,CAAAc,aAAA,CAACR,iBAAiB;IAACG,OAAO,EAAEA,OAAQ;IAACM,KAAK,EAAEL,IAAK;IAACM,kBAAkB,EAAEH;EAAkB,gBACpFb,KAAA,CAAAc,aAAA,CAACV,mBAAmB;IAACa,eAAe,EAAEP,IAAK;IAACG,iBAAiB,EAAE,CAACA;EAAkB,GAC7EL,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACW,WAAW,GAAG,aAAa;AAEvC,eAAeX,WAAW","ignoreList":[]}

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

@@ -1,45 +1,38 @@
 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;
+    border-radius: ${({
+  theme
+}) => theme.cardBorderRadius}px;
-    ${_ref2 => {
-  let {
-    theme,
-    $shouldChangeColor
-  } = _ref2;
-  return !$shouldChangeColor && css`
+    ${({
+  theme,
+  $shouldChangeColor
+}) => !$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;
-}};
+    color: ${({
+  theme
+}) => theme.text};
     &:not(:last-child) {
-        margin-bottom: 8px;
+        margin-bottom: 10px;
     }
-    ${_ref4 => {
-  let {
-    $type,
-    theme,
-    $shouldChangeColor
-  } = _ref4;
+    ${({
+  $type,
+  theme,
+  $shouldChangeColor
+}) => {
   if ($type === ContentCardType.Default && $shouldChangeColor) {
     return css`
-                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+                background-color: rgba(
+                    ${theme.colorMode === 'classic' ? theme['101-rgb'] : theme['000-rgb']},
+                    ${theme.cardBackgroundOpacity}
+                );
             `;
   }
   switch ($type) {
@@ -51,6 +44,10 @@ export const StyledContentCard = styled.div`
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+                    label {
+                        color: #555 !important;
+                    }
                 `;
     case ContentCardType.Success:
       return css`
@@ -60,6 +57,10 @@ export const StyledContentCard = styled.div`
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+                    label {
+                        color: #555 !important;
+                    }
                 `;
     case ContentCardType.Warning:
       return css`
@@ -69,6 +70,23 @@ export const StyledContentCard = styled.div`
                     --chayns-color--text: #222;
                     --chayns-color-rgb--text: rgb(34, 34, 34);
+                    label {
+                        color: #555 !important;
+                    }
+                `;
+    case ContentCardType.SiteColor:
+      return css`
+                    background-color: ${theme['103']};
+                    border: 1px solid ${theme['104']};
+                    color: ${theme['text-rgb']};
+                    --chayns-color--text: ${theme['text-rgb']};
+                    --chayns-color-rgb--text: ${theme['text-rgb']};
+                    label {
+                        color: ${theme['text-rgb']} !important;
+                    }
                 `;
     default:
       return css`

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

	@@ -1 +1 @@
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":[]}
1	+ {"version":3,"file":"ContentCard.styles.js","names":["styled","css","ContentCardType","StyledContentCard","div","theme","cardBorderRadius","$shouldChangeColor","cardShadow","text","$type","Default","colorMode","cardBackgroundOpacity","Error","Success","Warning","SiteColor"],"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: 10px;\n }\n\n ${({ $type, theme, $shouldChangeColor }: StyledContentCardProps) => {\n if ($type === ContentCardType.Default && $shouldChangeColor) {\n return css`\n background-color: rgba(\n ${theme.colorMode === 'classic' ? theme['101-rgb'] : theme['000-rgb']},\n ${theme.cardBackgroundOpacity}\n );\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 label {\n color: #555 !important;\n }\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 label {\n color: #555 !important;\n }\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 label {\n color: #555 !important;\n }\n `;\n case ContentCardType.SiteColor:\n return css`\n background-color: ${theme['103']};\n border: 1px solid ${theme['104']};\n color: ${theme['text-rgb']};\n\n --chayns-color--text: ${theme['text-rgb']};\n --chayns-color-rgb--text: ${theme['text-rgb']};\n\n label {\n color: ${theme['text-rgb']} !important;\n }\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,qBAAqB,CAAC;EAAEC;AAA8B,CAAC,KAAKA,KAAK,CAACC,gBAAgB;AAClF;AACA,MAAM,CAAC;EAAED,KAAK;EAAEE;AAA2C,CAAC,KACpD,CAACA,kBAAkB,IACnBN,GAAG;AACX,oDAAoDI,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA;AACA;AACA,aAAa,CAAC;EAAEH;AAA8B,CAAC,KAAKA,KAAK,CAACI,IAAI;AAC9D;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EAAEC,KAAK;EAAEL,KAAK;EAAEE;AAA2C,CAAC,KAAK;EAChE,IAAIG,KAAK,KAAKR,eAAe,CAACS,OAAO,IAAIJ,kBAAkB,EAAE;IACzD,OAAON,GAAG;AACtB;AACA,sBAAsBI,KAAK,CAACO,SAAS,KAAK,SAAS,GAAGP,KAAK,CAAC,SAAS,CAAC,GAAGA,KAAK,CAAC,SAAS,CAAC;AACzF,sBAAsBA,KAAK,CAACQ,qBAAqB;AACjD;AACA,aAAa;EACL;EAEA,QAAQH,KAAK;IACT,KAAKR,eAAe,CAACY,KAAK;MACtB,OAAOb,GAAG;AAC1B,wCAAwCI,KAAK,CAAC,OAAO,CAAC;AACtD,wCAAwCA,KAAK,CAAC,OAAO,CAAC;AACtD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;IACL,KAAKH,eAAe,CAACa,OAAO;MACxB,OAAOd,GAAG;AAC1B,wCAAwCI,KAAK,CAAC,SAAS,CAAC;AACxD,wCAAwCA,KAAK,CAAC,SAAS,CAAC;AACxD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;IACL,KAAKH,eAAe,CAACc,OAAO;MACxB,OAAOf,GAAG;AAC1B,wCAAwCI,KAAK,CAAC,UAAU,CAAC;AACzD,wCAAwCA,KAAK,CAAC,UAAU,CAAC;AACzD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,iBAAiB;IACL,KAAKH,eAAe,CAACe,SAAS;MAC1B,OAAOhB,GAAG;AAC1B,wCAAwCI,KAAK,CAAC,KAAK,CAAC;AACpD,wCAAwCA,KAAK,CAAC,KAAK,CAAC;AACpD,6BAA6BA,KAAK,CAAC,UAAU,CAAC;AAC9C;AACA,4CAA4CA,KAAK,CAAC,UAAU,CAAC;AAC7D,gDAAgDA,KAAK,CAAC,UAAU,CAAC;AACjE;AACA;AACA,iCAAiCA,KAAK,CAAC,UAAU,CAAC;AAClD;AACA,iBAAiB;IACL;MACI,OAAOJ,GAAG;AAC1B;AACA,0BAA0BI,KAAK,CAAC,mBAAmB,CAAC;AACpD,0BAA0BA,KAAK,CAACQ,qBAAqB;AACrD;AACA,iBAAiB;EACT;AACJ,CAAC;AACL,CAAC","ignoreList":[]}