@chayns-components/core 5.0.0-beta.13 → 5.0.0-beta.1300

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

@@ -0,0 +1,250 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComboBoxTopic = exports.StyledComboBoxPrefixAndPlaceholderWrapper = exports.StyledComboBoxPrefix = exports.StyledComboBoxPlaceholderText = exports.StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholder = exports.StyledComboBoxInput = exports.StyledComboBoxIconWrapper = exports.StyledComboBoxHeader = exports.StyledComboBoxClearIconWrapper = exports.StyledComboBoxBody = exports.StyledComboBox = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _dropdown = require("../../types/dropdown");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledComboBox = exports.StyledComboBox = _styledComponents.default.div`
+    user-select: none;
+    position: relative;
+
+    ${({
+  $shouldUseFullWidth,
+  $minWidth,
+  $shouldUseCurrentItemWidth
+}) => {
+  if (typeof $minWidth !== 'number') {
+    return (0, _styledComponents.css)`
+                width: fit-content;
+            `;
+  }
+  if ($shouldUseFullWidth) {
+    return (0, _styledComponents.css)`
+                min-width: ${$minWidth}px;
+                width: 100%;
+            `;
+  }
+  if ($shouldUseCurrentItemWidth) {
+    return '';
+  }
+  return (0, _styledComponents.css)`
+            min-width: ${$minWidth}px;
+            max-width: ${$minWidth}px;
+        `;
+}}
+`;
+const StyledComboBoxHeader = exports.StyledComboBoxHeader = _styledComponents.default.div`
+    display: flex;
+    border: 1px solid transparent;
+    cursor: ${({
+  $isDisabled
+}) => !$isDisabled ? 'pointer' : 'default'};
+    justify-content: space-between;
+    opacity: ${({
+  $isDisabled
+}) => $isDisabled ? 0.5 : 1};
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  theme,
+  $shouldShowTransparentBackground,
+  $shouldChangeColor
+}) => {
+  if ($shouldShowTransparentBackground) {
+    if (theme.colorMode === 'dark') {
+      return (0, _styledComponents.css)`
+                    border-color: rgba(255, 255, 255, 0.5);
+                    background-color: transparent;
+                `;
+    }
+    return (0, _styledComponents.css)`
+                border-color: rgba(0, 0, 0, 0.5);
+                background-color: transparent;
+            `;
+  }
+  return (0, _styledComponents.css)`
+            border-color: rgba(160, 160, 160, 0.3);
+            background-color: ${theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
+        `;
+}}
+
+    ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage && (0, _styledComponents.css)`
+            height: 42px;
+        `}
+
+    ${({
+  $isOpen,
+  $direction
+}) => {
+  if ($isOpen) {
+    return [_dropdown.DropdownDirection.BOTTOM, _dropdown.DropdownDirection.BOTTOM_LEFT, _dropdown.DropdownDirection.BOTTOM_RIGHT].includes($direction) ? (0, _styledComponents.css)`
+                      border-top-left-radius: 3px;
+                      border-top-right-radius: 3px;
+                  ` : (0, _styledComponents.css)`
+                      border-bottom-left-radius: 3px;
+                      border-bottom-right-radius: 3px;
+                  `;
+  }
+  return (0, _styledComponents.css)`
+            border-radius: 3px;
+        `;
+}}
+
+    ${({
+  $isTouch,
+  $isDisabled,
+  theme
+}) => !$isTouch && !$isDisabled && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+        `}
+`;
+const StyledComboBoxPlaceholder = exports.StyledComboBoxPlaceholder = _styledComponents.default.div`
+    align-items: center;
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    flex: 1 1 auto;
+    gap: 10px;
+    min-width: 0;
+    opacity: ${({
+  $shouldReduceOpacity
+}) => $shouldReduceOpacity ? 0.5 : 1};
+`;
+const StyledComboBoxPlaceholderText = exports.StyledComboBoxPlaceholderText = _styledComponents.default.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledComboBoxPrefixAndPlaceholderWrapper = exports.StyledComboBoxPrefixAndPlaceholderWrapper = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    flex: 1 1 auto;
+    min-width: 0;
+    padding: 4px 10px;
+`;
+const StyledComboBoxPrefix = exports.StyledComboBoxPrefix = _styledComponents.default.div`
+    flex: 0 0 auto;
+    min-width: 32px;
+    padding-right: 5px;
+`;
+const StyledComboBoxInput = exports.StyledComboBoxInput = _styledComponents.default.input`
+    color: ${({
+  theme
+}) => theme.text};
+    border: none;
+    background-color: transparent;
+    width: 100%;
+`;
+const StyledComboBoxPlaceholderImage = exports.StyledComboBoxPlaceholderImage = _styledComponents.default.img`
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '32px' : '22px'};
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '32px' : '22px'};
+
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `}
+`;
+const StyledComboBoxClearIconWrapper = exports.StyledComboBoxClearIconWrapper = _styledComponents.default.div`
+    align-items: center;
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+const StyledComboBoxIconWrapper = exports.StyledComboBoxIconWrapper = _styledComponents.default.div`
+    align-items: center;
+    border-left: ${({
+  $shouldShowBorderLeft
+}) => $shouldShowBorderLeft ? '1px solid rgba(160, 160, 160, 0.3)' : 'none'};
+    cursor: pointer;
+    display: flex;
+    flex: 0 0 auto;
+    height: 40px;
+    justify-content: center;
+    width: 40px;
+`;
+const StyledComboBoxBody = exports.StyledComboBoxBody = _styledComponents.default.div`
+    display: flex;
+    flex-direction: column;
+    cursor: pointer;
+
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    max-height: ${({
+  $maxHeight
+}) => $maxHeight}px;
+
+    // Styles for custom scrollbar
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? (0, _styledComponents.css)`
+                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
+                  scrollbar-width: thin;
+              ` : (0, _styledComponents.css)`
+                  &::-webkit-scrollbar {
+                      width: 10px;
+                      height: 10px;
+                  }
+
+                  &::-webkit-scrollbar-track {
+                      background-color: transparent;
+                  }
+
+                  &::-webkit-scrollbar-button {
+                      background-color: transparent;
+                      height: 5px;
+                      width: 5px;
+                  }
+
+                  &::-webkit-scrollbar-thumb {
+                      background-color: rgba(${theme['text-rgb']}, 0.15);
+                      border-radius: 20px;
+                      background-clip: padding-box;
+                      border: solid 3px transparent;
+                  }
+
+                  &::-webkit-scrollbar-corner {
+                      background-color: transparent;
+                  }
+              `}
+`;
+const StyledComboBoxTopic = exports.StyledComboBoxTopic = _styledComponents.default.div`
+    align-items: center;
+    color: rgba(${({
+  theme
+}) => theme['text-rgb']}, 0.65);
+    position: sticky;
+    top: 0;
+    border: black 5px;
+    cursor: default;
+    font-weight: bold;
+    display: flex;
+    gap: 10px;
+    z-index: 10;
+    padding: 4px 10px;
+    background-color: ${({
+  theme
+}) => theme['secondary-101']};
+`;
+//# sourceMappingURL=ComboBox.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBox.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_dropdown","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBox","exports","styled","div","$shouldUseFullWidth","$minWidth","$shouldUseCurrentItemWidth","css","StyledComboBoxHeader","$isDisabled","theme","$shouldShowTransparentBackground","$shouldChangeColor","colorMode","$shouldShowBigImage","$isOpen","$direction","DropdownDirection","BOTTOM","BOTTOM_LEFT","BOTTOM_RIGHT","includes","$isTouch","StyledComboBoxPlaceholder","text","$shouldReduceOpacity","StyledComboBoxPlaceholderText","StyledComboBoxPrefixAndPlaceholderWrapper","StyledComboBoxPrefix","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    ${({ 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\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 StyledComboBoxClearIconWrapper = styled.div`\n    align-items: center;\n    cursor: pointer;\n    display: flex;\n    flex: 0 0 auto;\n    height: 40px;\n    justify-content: center;\n    width: 40px;\n`;\n\ntype StyledComboBoxIconWrapperProps = { $shouldShowBorderLeft: 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: pointer;\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    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":"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","ignoreList":[]}

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

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _environment = require("../../../utils/environment");
+var _Icon = _interopRequireDefault(require("../../icon/Icon"));
+var _ComboBoxItem = require("./ComboBoxItem.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ComboBoxItem = ({
+  item,
+  isSelected,
+  onSelect,
+  shouldShowBigImage,
+  shouldShowRoundImage
+}) => {
+  const {
+    icons,
+    imageUrl,
+    isDisabled,
+    imageBackground,
+    suffixElement,
+    textStyles,
+    rightElement,
+    text,
+    value,
+    subtext
+  } = item;
+  const id = value;
+  const handleItemClick = (0, _react.useCallback)(() => {
+    if (!isDisabled) {
+      onSelect({
+        text,
+        value,
+        suffixElement,
+        imageUrl,
+        icons
+      });
+    }
+  }, [icons, imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  const isTouch = (0, _environment.getIsTouch)();
+  return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItem, {
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}${isDisabled ? '--disabled-item' : ''}`,
+    onClick: handleItemClick,
+    $isDisabled: isDisabled,
+    $isSelected: isSelected,
+    $isTouch: isTouch
+  }, imageUrl && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemImage, {
+    src: imageUrl,
+    $background: imageBackground,
+    $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), icons && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: icons
+  }), /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContent, null, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeader, {
+    $text: text,
+    $subtext: subtext
+  }, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderWrapper, {
+    as: textStyles === null || textStyles === void 0 ? void 0 : textStyles.tagName,
+    style: textStyles === null || textStyles === void 0 ? void 0 : textStyles.styles
+  }, /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderWrapperText, null, text), suffixElement), rightElement && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/_react.default.createElement(_ComboBoxItem.StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageBackground, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text, textStyles === null || textStyles === void 0 ? void 0 : textStyles.styles, textStyles === null || textStyles === void 0 ? void 0 : textStyles.tagName]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+var _default = exports.default = ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.js","names":["_react","_interopRequireWildcard","require","_environment","_Icon","_interopRequireDefault","_ComboBoxItem","e","__esModule","default","t","WeakMap","r","n","o","i","f","__proto__","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ComboBoxItem","item","isSelected","onSelect","shouldShowBigImage","shouldShowRoundImage","icons","imageUrl","isDisabled","imageBackground","suffixElement","textStyles","rightElement","text","value","subtext","id","handleItemClick","useCallback","isTouch","getIsTouch","useMemo","createElement","StyledComboBoxItem","String","onClick","$isDisabled","$isSelected","$isTouch","StyledComboBoxItemImage","src","$background","$shouldShowBigImage","trim","$shouldShowRoundImage","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","$text","$subtext","StyledComboBoxItemContentHeaderWrapper","as","tagName","style","styles","StyledComboBoxItemContentHeaderWrapperText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext","displayName","_default","exports"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.tsx"],"sourcesContent":["import React, { FC, 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    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 = getIsTouch();\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 && <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":"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","ignoreList":[]}

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

@@ -0,0 +1,100 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledComboBoxItemImage = exports.StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentHeaderWrapperText = exports.StyledComboBoxItemContentHeaderWrapper = exports.StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContent = exports.StyledComboBoxItem = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledComboBoxItem = exports.StyledComboBoxItem = _styledComponents.default.div`
+    align-items: center;
+    background-color: ${({
+  theme,
+  $isSelected
+}) => $isSelected && theme['secondary-102']};
+    color: ${({
+  theme
+}) => theme.text};
+    display: flex;
+    gap: 10px;
+    padding: 8px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${({
+  $isDisabled
+}) => $isDisabled && (0, _styledComponents.css)`
+            opacity: 0.5;
+            pointer-events: none;
+        `}
+
+    ${({
+  $isDisabled,
+  $isTouch,
+  theme
+}) => !$isDisabled && !$isTouch && (0, _styledComponents.css)`
+            &:hover {
+                background-color: ${theme['secondary-101']};
+            }
+
+            &:focus {
+                background-color: ${theme['secondary-101']};
+            }
+        `}
+`;
+const StyledComboBoxItemImage = exports.StyledComboBoxItemImage = _styledComponents.default.img`
+    ${({
+  $shouldShowRoundImage
+}) => $shouldShowRoundImage && (0, _styledComponents.css)`
+            border-radius: 50%;
+        `}
+
+    background: ${({
+  $background,
+  theme
+}) => $background || `rgba(${theme['text-rgb'] ?? '0,0,0'}, 0.1)`};
+    box-shadow: 0 0 0 1px
+        rgba(${({
+  theme
+}) => theme['009-rgb']}, 0.15);
+    flex: 0 0 auto;
+    height: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+    object-fit: cover;
+    width: ${({
+  $shouldShowBigImage
+}) => $shouldShowBigImage ? '40px' : '22px'};
+`;
+const StyledComboBoxItemContent = exports.StyledComboBoxItemContent = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+    min-width: 0;
+    width: 100%;
+`;
+const StyledComboBoxItemContentHeader = exports.StyledComboBoxItemContentHeader = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+const StyledComboBoxItemContentHeaderWrapper = exports.StyledComboBoxItemContentHeaderWrapper = _styledComponents.default.div`
+    display: flex;
+    flex: 1 1 auto;
+    gap: 4px;
+    min-width: 0;
+`;
+const StyledComboBoxItemContentHeaderWrapperText = exports.StyledComboBoxItemContentHeaderWrapperText = _styledComponents.default.div`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+const StyledComboBoxItemContentHeaderRightElement = exports.StyledComboBoxItemContentHeaderRightElement = _styledComponents.default.div`
+    align-items: center;
+    display: flex;
+`;
+const StyledComboBoxItemContentSubtext = exports.StyledComboBoxItemContentSubtext = _styledComponents.default.div`
+    font-size: 85%;
+    margin-top: 2px;
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["_styledComponents","_interopRequireWildcard","require","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledComboBoxItem","exports","styled","div","theme","$isSelected","text","$isDisabled","css","$isTouch","StyledComboBoxItemImage","img","$shouldShowRoundImage","$background","$shouldShowBigImage","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    gap: 10px;\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 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":"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","ignoreList":[]}

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

@@ -0,0 +1,30 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _contentCard = require("../../types/contentCard");
+var _AreaContextProvider = _interopRequireWildcard(require("../area-provider/AreaContextProvider"));
+var _ContentCard = require("./ContentCard.styles");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const ContentCard = ({
+  children,
+  onClick,
+  type = _contentCard.ContentCardType.Default
+}) => {
+  const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
+  const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
+  return /*#__PURE__*/_react.default.createElement(_ContentCard.StyledContentCard, {
+    onClick: onClick,
+    $type: type,
+    $shouldChangeColor: shouldChangeColor
+  }, /*#__PURE__*/_react.default.createElement(_AreaContextProvider.default, {
+    contentCardType: type,
+    shouldChangeColor: !shouldChangeColor
+  }, children));
+};
+ContentCard.displayName = 'ContentCard';
+var _default = exports.default = ContentCard;
+//# sourceMappingURL=ContentCard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.js","names":["_react","_interopRequireWildcard","require","_contentCard","_AreaContextProvider","_ContentCard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","ContentCard","children","onClick","type","ContentCardType","Default","areaProvider","useContext","AreaContext","shouldChangeColor","useMemo","createElement","StyledContentCard","$type","$shouldChangeColor","contentCardType","displayName","_default","exports"],"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,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,oBAAA,GAAAH,uBAAA,CAAAC,OAAA;AACA,IAAAG,YAAA,GAAAH,OAAA;AAAyD,SAAAD,wBAAAK,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAP,uBAAA,YAAAA,CAAAK,CAAA,EAAAC,CAAA,SAAAA,CAAA,IAAAD,CAAA,IAAAA,CAAA,CAAAK,UAAA,SAAAL,CAAA,MAAAM,CAAA,EAAAC,CAAA,EAAAC,CAAA,KAAAC,SAAA,QAAAC,OAAA,EAAAV,CAAA,iBAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,SAAAQ,CAAA,MAAAF,CAAA,GAAAL,CAAA,GAAAG,CAAA,GAAAD,CAAA,QAAAG,CAAA,CAAAK,GAAA,CAAAX,CAAA,UAAAM,CAAA,CAAAM,GAAA,CAAAZ,CAAA,GAAAM,CAAA,CAAAO,GAAA,CAAAb,CAAA,EAAAQ,CAAA,gBAAAP,CAAA,IAAAD,CAAA,gBAAAC,CAAA,OAAAa,cAAA,CAAAC,IAAA,CAAAf,CAAA,EAAAC,CAAA,OAAAM,CAAA,IAAAD,CAAA,GAAAU,MAAA,CAAAC,cAAA,KAAAD,MAAA,CAAAE,wBAAA,CAAAlB,CAAA,EAAAC,CAAA,OAAAM,CAAA,CAAAK,GAAA,IAAAL,CAAA,CAAAM,GAAA,IAAAP,CAAA,CAAAE,CAAA,EAAAP,CAAA,EAAAM,CAAA,IAAAC,CAAA,CAAAP,CAAA,IAAAD,CAAA,CAAAC,CAAA,WAAAO,CAAA,KAAAR,CAAA,EAAAC,CAAA;AAiBzD,MAAMkB,WAAiC,GAAGA,CAAC;EACvCC,QAAQ;EACRC,OAAO;EACPC,IAAI,GAAGC,4BAAe,CAACC;AAC3B,CAAC,KAAK;EACF,MAAMC,YAAY,GAAG,IAAAC,iBAAU,EAACC,gCAAW,CAAC;EAE5C,MAAMC,iBAAiB,GAAG,IAAAC,cAAO,EAC7B,MAAMJ,YAAY,CAACG,iBAAiB,IAAI,KAAK,EAC7C,CAACH,YAAY,CAACG,iBAAiB,CACnC,CAAC;EAED,oBACIlC,MAAA,CAAAgB,OAAA,CAAAoB,aAAA,CAAC/B,YAAA,CAAAgC,iBAAiB;IAACV,OAAO,EAAEA,OAAQ;IAACW,KAAK,EAAEV,IAAK;IAACW,kBAAkB,EAAEL;EAAkB,gBACpFlC,MAAA,CAAAgB,OAAA,CAAAoB,aAAA,CAAChC,oBAAA,CAAAY,OAAmB;IAACwB,eAAe,EAAEZ,IAAK;IAACM,iBAAiB,EAAE,CAACA;EAAkB,GAC7ER,QACgB,CACN,CAAC;AAE5B,CAAC;AAEDD,WAAW,CAACgB,WAAW,GAAG,aAAa;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAA3B,OAAA,GAEzBS,WAAW","ignoreList":[]}

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

@@ -0,0 +1,105 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledContentCard = void 0;
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _contentCard = require("../../types/contentCard");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const StyledContentCard = exports.StyledContentCard = _styledComponents.default.div`
+    border-radius: ${({
+  theme
+}) => theme.cardBorderRadius}px;
+
+    ${({
+  theme,
+  $shouldChangeColor
+}) => !$shouldChangeColor && (0, _styledComponents.css)`
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `};
+
+    padding: 8px 12px;
+
+    color: ${({
+  theme
+}) => theme.text};
+
+    &:not(:last-child) {
+        margin-bottom: 10px;
+    }
+
+    ${({
+  $type,
+  theme,
+  $shouldChangeColor
+}) => {
+  if ($type === _contentCard.ContentCardType.Default && $shouldChangeColor) {
+    return (0, _styledComponents.css)`
+                background-color: rgba(${theme['000-rgb']}, ${theme.cardBackgroundOpacity});
+            `;
+  }
+  switch ($type) {
+    case _contentCard.ContentCardType.Error:
+      return (0, _styledComponents.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);
+
+                    label {
+                        color: #555 !important;
+                    }
+                `;
+    case _contentCard.ContentCardType.Success:
+      return (0, _styledComponents.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);
+
+                    label {
+                        color: #555 !important;
+                    }
+                `;
+    case _contentCard.ContentCardType.Warning:
+      return (0, _styledComponents.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);
+
+                    label {
+                        color: #555 !important;
+                    }
+                `;
+    case _contentCard.ContentCardType.SiteColor:
+      return (0, _styledComponents.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 (0, _styledComponents.css)`
+                    background-color: rgba(
+                        ${theme['secondary-100-rgb']},
+                        ${theme.cardBackgroundOpacity}
+                    );
+                `;
+  }
+}}
+`;
+//# sourceMappingURL=ContentCard.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ContentCard.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_contentCard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledContentCard","exports","styled","div","theme","cardBorderRadius","$shouldChangeColor","css","cardShadow","text","$type","ContentCardType","Default","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(${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                    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":"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","ignoreList":[]}