@chayns-components/core 5.0.0-beta.89 → 5.0.0-beta.890

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

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

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

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

@@ -0,0 +1,52 @@
+import React, { useCallback, useMemo } from 'react';
+import { getIsTouch } from '../../../utils/environment';
+import Icon from '../../icon/Icon';
+import { StyledComboBoxItem, StyledComboBoxItemContent, StyledComboBoxItemContentHeader, StyledComboBoxItemContentHeaderRightElement, StyledComboBoxItemContentHeaderText, StyledComboBoxItemContentSubtext, StyledComboBoxItemImage } from './ComboBoxItem.styles';
+const ComboBoxItem = _ref => {
+  let {
+    icons,
+    id,
+    imageUrl,
+    isDisabled,
+    isSelected,
+    onSelect,
+    rightElement,
+    shouldShowBigImage,
+    shouldShowRoundImage,
+    subtext,
+    suffixElement,
+    textStyles,
+    text,
+    value
+  } = _ref;
+  const handleItemClick = useCallback(() => {
+    if (!isDisabled) {
+      onSelect({
+        text,
+        value,
+        suffixElement,
+        imageUrl
+      });
+    }
+  }, [imageUrl, isDisabled, onSelect, suffixElement, text, value]);
+  const isTouch = getIsTouch();
+  return useMemo(() => /*#__PURE__*/React.createElement(StyledComboBoxItem, {
+    id: `combobox-item__${typeof id === 'number' ? String(id) : id}`,
+    onClick: handleItemClick,
+    $isDisabled: isDisabled,
+    $isSelected: isSelected,
+    $isTouch: isTouch
+  }, imageUrl && /*#__PURE__*/React.createElement(StyledComboBoxItemImage, {
+    src: imageUrl,
+    $shouldShowBigImage: shouldShowBigImage || typeof subtext === 'string' && subtext.trim() !== '',
+    $shouldShowRoundImage: shouldShowRoundImage
+  }), icons && /*#__PURE__*/React.createElement(Icon, {
+    icons: icons
+  }), /*#__PURE__*/React.createElement(StyledComboBoxItemContent, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeader, null, /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderText, {
+    as: textStyles?.tagName,
+    style: textStyles?.styles
+  }, text, suffixElement), rightElement && /*#__PURE__*/React.createElement(StyledComboBoxItemContentHeaderRightElement, null, rightElement)), subtext && /*#__PURE__*/React.createElement(StyledComboBoxItemContentSubtext, null, subtext))), [handleItemClick, icons, id, imageUrl, isDisabled, isSelected, isTouch, rightElement, shouldShowBigImage, shouldShowRoundImage, subtext, suffixElement, text]);
+};
+ComboBoxItem.displayName = 'ComboBoxItem';
+export default ComboBoxItem;
+//# sourceMappingURL=ComboBoxItem.js.map

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

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

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

@@ -0,0 +1,103 @@
+import styled, { css } from 'styled-components';
+export const StyledComboBoxItem = styled.div`
+    align-items: center;
+    background-color: ${_ref => {
+  let {
+    theme,
+    $isSelected
+  } = _ref;
+  return $isSelected && theme['secondary-103'];
+}};
+    color: ${_ref2 => {
+  let {
+    theme
+  } = _ref2;
+  return theme.text;
+}};
+    display: flex;
+    gap: 10px;
+    padding: 4px 10px;
+    transition: background-color 0.2s ease-in-out;
+
+    ${_ref3 => {
+  let {
+    $isDisabled
+  } = _ref3;
+  return $isDisabled && css`
+            opacity: 0.5;
+            pointer-events: none;
+        `;
+}}
+
+    ${_ref4 => {
+  let {
+    $isDisabled,
+    $isTouch,
+    theme
+  } = _ref4;
+  return !$isDisabled && !$isTouch && css`
+            &:hover {
+                background-color: ${theme['secondary-102']};
+            }
+
+            &:focus {
+                background-color: ${theme['secondary-102']};
+            }
+        `;
+}}
+`;
+export const StyledComboBoxItemImage = styled.img`
+    ${_ref5 => {
+  let {
+    $shouldShowRoundImage
+  } = _ref5;
+  return $shouldShowRoundImage && css`
+            border-radius: 50%;
+        `;
+}}
+
+    box-shadow: 0 0 0 1px
+        rgba(${_ref6 => {
+  let {
+    theme
+  } = _ref6;
+  return theme['009-rgb'];
+}}, 0.15);
+    flex: 0 0 auto;
+    height: ${_ref7 => {
+  let {
+    $shouldShowBigImage
+  } = _ref7;
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+    width: ${_ref8 => {
+  let {
+    $shouldShowBigImage
+  } = _ref8;
+  return $shouldShowBigImage ? '40px' : '22px';
+}};
+`;
+export const StyledComboBoxItemContent = styled.div`
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    line-height: normal;
+`;
+export const StyledComboBoxItemContentHeader = styled.div`
+    align-items: center;
+    display: flex;
+    justify-content: space-between;
+`;
+export const StyledComboBoxItemContentHeaderText = styled.div`
+    display: flex;
+    gap: 4px;
+`;
+export const StyledComboBoxItemContentHeaderRightElement = styled.div`
+    align-items: center;
+    display: flex;
+`;
+export const StyledComboBoxItemContentSubtext = styled.div`
+    font-size: 90%;
+    margin-top: 2px;
+`;
+//# sourceMappingURL=ComboBoxItem.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ComboBoxItem.styles.js","names":["styled","css","StyledComboBoxItem","div","_ref","theme","$isSelected","_ref2","text","_ref3","$isDisabled","_ref4","$isTouch","StyledComboBoxItemImage","img","_ref5","$shouldShowRoundImage","_ref6","_ref7","$shouldShowBigImage","_ref8","StyledComboBoxItemContent","StyledComboBoxItemContentHeader","StyledComboBoxItemContentHeaderText","StyledComboBoxItemContentHeaderRightElement","StyledComboBoxItemContentSubtext"],"sources":["../../../../../src/components/combobox/combobox-item/ComboBoxItem.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledComboBoxItemProps = WithTheme<{\n    $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-103']};\n    color: ${({ theme }: StyledComboBoxItemProps) => theme.text};\n    display: flex;\n    gap: 10px;\n    padding: 4px 10px;\n    transition: background-color 0.2s ease-in-out;\n\n    ${({ $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-102']};\n            }\n\n            &:focus {\n                background-color: ${theme['secondary-102']};\n            }\n        `}\n`;\n\ntype StyledComboBoxItemImageProps = WithTheme<{\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    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`;\n\nexport const StyledComboBoxItemContentHeader = styled.div`\n    align-items: center;\n    display: flex;\n    justify-content: space-between;\n`;\n\nexport const StyledComboBoxItemContentHeaderText = styled.div`\n    display: flex;\n    gap: 4px;\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":"AAAA,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;AAOD,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;AACA,eAAegB,KAAA;EAAA,IAAC;IAAEZ;EAAoC,CAAC,GAAAY,KAAA;EAAA,OAAKZ,KAAK,CAAC,SAAS,CAAC;AAAA;AAC5E;AACA,cAAca,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,GAAGrB,MAAM,CAACG,GAAG;AACnD;AACA;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMmB,+BAA+B,GAAGtB,MAAM,CAACG,GAAG;AACzD;AACA;AACA;AACA,CAAC;AAED,OAAO,MAAMoB,mCAAmC,GAAGvB,MAAM,CAACG,GAAG;AAC7D;AACA;AACA,CAAC;AAED,OAAO,MAAMqB,2CAA2C,GAAGxB,MAAM,CAACG,GAAG;AACrE;AACA;AACA,CAAC;AAED,OAAO,MAAMsB,gCAAgC,GAAGzB,MAAM,CAACG,GAAG;AAC1D;AACA;AACA,CAAC","ignoreList":[]}

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

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

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

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

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

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

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

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