@chayns-components/core 5.0.24 → 5.0.26

package/lib/cjs/components/accordion/accordion-body/AccordionBody.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _AccordionGroup = require("../accordion-group/AccordionGroup");
 var _AccordionBody = require("./AccordionBody.styles");
@@ -17,9 +16,6 @@ const AccordionBody = ({
   shouldSkipAnimation,
   onAnimationComplete
 }) => {
-  const {
-    browser
-  } = (0, _chaynsApi.getDevice)();
   const AccordionGroupContextProviderValue = (0, _react.useMemo)(() => ({
     openAccordionUuid: undefined
   }), []);
@@ -52,9 +48,8 @@ const AccordionBody = ({
         duration: 0.25
       }
     },
-    className: "beta-chayns-accordion-body",
+    className: "beta-chayns-accordion-body chayns-scrollbar",
     $maxHeight: maxHeight,
-    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
     onAnimationComplete: onAnimationComplete,
     onScroll: onScroll
   }, /*#__PURE__*/_react.default.createElement(_AccordionGroup.AccordionGroupContext.Provider, {

package/lib/cjs/components/accordion/accordion-body/AccordionBody.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AccordionGroup","_AccordionBody","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionBody","children","maxHeight","onScroll","shouldHideBody","shouldSkipAnimation","onAnimationComplete","browser","getDevice","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","initial","height","opacity","animate","exit","transition","duration","ease","className","$maxHeight","$browser","name","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n    /**\n     * The elements that should be shown inside the body.\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight: AccordionProps['bodyMaxHeight'];\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the body should be shown.\n     */\n    shouldHideBody: boolean;\n    /**\n     * Whether the animation should be skipped.\n     */\n    shouldSkipAnimation?: boolean;\n\n    onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldHideBody,\n    shouldSkipAnimation,\n    onAnimationComplete,\n}) => {\n    const { browser } = getDevice();\n\n    const AccordionGroupContextProviderValue = useMemo(\n        () => ({ openAccordionUuid: undefined }),\n        [],\n    );\n\n    return (\n        <StyledMotionAccordionBody\n            initial={\n                shouldSkipAnimation ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }\n            }\n            animate={{ height: shouldHideBody ? 0 : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{\n                height: shouldSkipAnimation ? { duration: 0, ease: 'linear' } : { duration: 0.25 },\n                opacity: shouldSkipAnimation ? { duration: 0 } : { duration: 0.25 },\n            }}\n            className=\"beta-chayns-accordion-body\"\n            $maxHeight={maxHeight}\n            $browser={browser?.name as BrowserName}\n            onAnimationComplete={onAnimationComplete}\n            onScroll={onScroll}\n        >\n            <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n                {children}\n            </AccordionGroupContext.Provider>\n        </StyledMotionAccordionBody>\n    );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionBody.js","names":["_react","_interopRequireWildcard","require","_AccordionGroup","_AccordionBody","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","AccordionBody","children","maxHeight","onScroll","shouldHideBody","shouldSkipAnimation","onAnimationComplete","AccordionGroupContextProviderValue","useMemo","openAccordionUuid","undefined","createElement","StyledMotionAccordionBody","initial","height","opacity","animate","exit","transition","duration","ease","className","$maxHeight","AccordionGroupContext","Provider","value","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, UIEvent, useMemo } from 'react';\nimport type { AccordionProps } from '../Accordion';\nimport { AccordionGroupContext } from '../accordion-group/AccordionGroup';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nexport type AccordionBodyProps = {\n    /**\n     * The elements that should be shown inside the body.\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight: AccordionProps['bodyMaxHeight'];\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the body should be shown.\n     */\n    shouldHideBody: boolean;\n    /**\n     * Whether the animation should be skipped.\n     */\n    shouldSkipAnimation?: boolean;\n\n    onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldHideBody,\n    shouldSkipAnimation,\n    onAnimationComplete,\n}) => {\n    const AccordionGroupContextProviderValue = useMemo(\n        () => ({ openAccordionUuid: undefined }),\n        [],\n    );\n\n    return (\n        <StyledMotionAccordionBody\n            initial={\n                shouldSkipAnimation ? { height: 'auto', opacity: 1 } : { height: 0, opacity: 0 }\n            }\n            animate={{ height: shouldHideBody ? 0 : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n            exit={{ height: 0, opacity: 0 }}\n            transition={{\n                height: shouldSkipAnimation ? { duration: 0, ease: 'linear' } : { duration: 0.25 },\n                opacity: shouldSkipAnimation ? { duration: 0 } : { duration: 0.25 },\n            }}\n            className=\"beta-chayns-accordion-body chayns-scrollbar\"\n            $maxHeight={maxHeight}\n            onAnimationComplete={onAnimationComplete}\n            onScroll={onScroll}\n        >\n            <AccordionGroupContext.Provider value={AccordionGroupContextProviderValue}>\n                {children}\n            </AccordionGroupContext.Provider>\n        </StyledMotionAccordionBody>\n    );\n};\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AAEA,IAAAC,eAAA,GAAAD,OAAA;AACA,IAAAE,cAAA,GAAAF,OAAA;AAAmE,SAAAD,wBAAAI,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAN,uBAAA,YAAAA,CAAAI,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;AA2BnE,MAAMkB,aAAqC,GAAGA,CAAC;EAC3CC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,mBAAmB;EACnBC;AACJ,CAAC,KAAK;EACF,MAAMC,kCAAkC,GAAG,IAAAC,cAAO,EAC9C,OAAO;IAAEC,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACIlC,MAAA,CAAAe,OAAA,CAAAoB,aAAA,CAAC/B,cAAA,CAAAgC,yBAAyB;IACtBC,OAAO,EACHR,mBAAmB,GAAG;MAAES,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAC,GAAG;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAClF;IACDC,OAAO,EAAE;MAAEF,MAAM,EAAEV,cAAc,GAAG,CAAC,GAAG,MAAM;MAAEW,OAAO,EAAEX,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IAClFa,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,UAAU,EAAE;MACRJ,MAAM,EAAET,mBAAmB,GAAG;QAAEc,QAAQ,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAS,CAAC,GAAG;QAAED,QAAQ,EAAE;MAAK,CAAC;MAClFJ,OAAO,EAAEV,mBAAmB,GAAG;QAAEc,QAAQ,EAAE;MAAE,CAAC,GAAG;QAAEA,QAAQ,EAAE;MAAK;IACtE,CAAE;IACFE,SAAS,EAAC,6CAA6C;IACvDC,UAAU,EAAEpB,SAAU;IACtBI,mBAAmB,EAAEA,mBAAoB;IACzCH,QAAQ,EAAEA;EAAS,gBAEnB3B,MAAA,CAAAe,OAAA,CAAAoB,aAAA,CAAChC,eAAA,CAAA4C,qBAAqB,CAACC,QAAQ;IAACC,KAAK,EAAElB;EAAmC,GACrEN,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDD,aAAa,CAAC0B,WAAW,GAAG,eAAe;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAArC,OAAA,GAE7BS,aAAa","ignoreList":[]}

package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js

@@ -17,32 +17,5 @@ const StyledMotionAccordionBody = exports.StyledMotionAccordionBody = (0, _style
             max-height: ${$maxHeight}px;
             overflow-y: scroll;
         `}
-
-    // 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: 5px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                  }
-              `}
 `;
 //# sourceMappingURL=AccordionBody.styles.js.map

package/lib/cjs/components/accordion/accordion-body/AccordionBody.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionBody","exports","styled","motion","div","$maxHeight","css","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n    $maxHeight?: number;\n    $browser: BrowserName;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    overflow: hidden;\n    transition: none !important;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledMotionAccordionBodyProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AASzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAC,qBAAG;AACX,0BAA0BD,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEE,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChB,IAAAD,qBAAG;AACjB,0CAA0CE,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAF,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CE,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"AccordionBody.styles.js","names":["_react","require","_styledComponents","_interopRequireWildcard","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","StyledMotionAccordionBody","exports","styled","motion","div","$maxHeight","css"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionBodyProps = WithTheme<{\n    $maxHeight?: number;\n}>;\n\nexport const StyledMotionAccordionBody = styled(motion.div)<StyledMotionAccordionBodyProps>`\n    overflow: hidden;\n    transition: none !important;\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAC,uBAAA,CAAAF,OAAA;AAAgD,SAAAE,wBAAAC,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAH,uBAAA,YAAAA,CAAAC,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;AAOzC,MAAMkB,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAG,IAAAE,yBAAM,EAACC,aAAM,CAACC,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAC,qBAAG;AACX,0BAA0BD,UAAU;AACpC;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/accordion/accordion-content/AccordionContent.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _chaynsApi = require("chayns-api");
 var _react = _interopRequireDefault(require("react"));
 var _AccordionContent = require("./AccordionContent.styles");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -13,18 +12,12 @@ const AccordionContent = ({
   maxHeight,
   onScroll,
   shouldPreventBottomSpace = false
-}) => {
-  const {
-    browser
-  } = (0, _chaynsApi.getDevice)();
-  return /*#__PURE__*/_react.default.createElement(_AccordionContent.StyledAccordionContent, {
-    className: "beta-chayns-accordion-content",
-    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
-    $maxHeight: maxHeight,
-    onScroll: onScroll,
-    $shouldPreventBottomSpace: shouldPreventBottomSpace
-  }, children);
-};
+}) => /*#__PURE__*/_react.default.createElement(_AccordionContent.StyledAccordionContent, {
+  className: "beta-chayns-accordion-content chayns-scrollbar",
+  $maxHeight: maxHeight,
+  onScroll: onScroll,
+  $shouldPreventBottomSpace: shouldPreventBottomSpace
+}, children);
 AccordionContent.displayName = 'AccordionContent';
 var _default = exports.default = AccordionContent;
 //# sourceMappingURL=AccordionContent.js.map

package/lib/cjs/components/accordion/accordion-content/AccordionContent.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":["_chaynsApi","require","_react","_interopRequireDefault","_AccordionContent","e","__esModule","default","AccordionContent","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","getDevice","createElement","StyledAccordionContent","className","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, { FC, ReactNode, UIEvent } from 'react';\nimport { BrowserName } from '../../../types/chayns';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight?: number;\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the bottom space should be removed.\n     */\n    shouldPreventBottomSpace?: boolean;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldPreventBottomSpace = false,\n}) => {\n    const { browser } = getDevice();\n\n    return (\n        <StyledAccordionContent\n            className=\"beta-chayns-accordion-content\"\n            $browser={browser?.name as BrowserName}\n            $maxHeight={maxHeight}\n            onScroll={onScroll}\n            $shouldPreventBottomSpace={shouldPreventBottomSpace}\n        >\n            {children}\n        </StyledAccordionContent>\n    );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA,IAAAA,UAAA,GAAAC,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AAEA,IAAAG,iBAAA,GAAAH,OAAA;AAAmE,SAAAE,uBAAAE,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAqBnE,MAAMG,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,wBAAwB,GAAG;AAC/B,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAG,IAAAC,oBAAS,EAAC,CAAC;EAE/B,oBACIZ,MAAA,CAAAK,OAAA,CAAAQ,aAAA,CAACX,iBAAA,CAAAY,sBAAsB;IACnBC,SAAS,EAAC,+BAA+B;IACzCC,QAAQ,EAAEL,OAAO,aAAPA,OAAO,uBAAPA,OAAO,CAAEM,IAAoB;IACvCC,UAAU,EAAEV,SAAU;IACtBC,QAAQ,EAAEA,QAAS;IACnBU,yBAAyB,EAAET;EAAyB,GAEnDH,QACmB,CAAC;AAEjC,CAAC;AAEDD,gBAAgB,CAACc,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAjB,OAAA,GAEnCC,gBAAgB","ignoreList":[]}
+{"version":3,"file":"AccordionContent.js","names":["_react","_interopRequireDefault","require","_AccordionContent","e","__esModule","default","AccordionContent","children","maxHeight","onScroll","shouldPreventBottomSpace","createElement","StyledAccordionContent","className","$maxHeight","$shouldPreventBottomSpace","displayName","_default","exports"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"sourcesContent":["import React, { FC, ReactNode, UIEvent } from 'react';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nexport type AccordionContentProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n    /**\n     * Maximum height of the element. This automatically makes the content of the element scrollable.\n     */\n    maxHeight?: number;\n    /**\n     * Function that is executed when the element will be scrolled\n     */\n    onScroll?: (event: UIEvent<HTMLDivElement>) => void;\n    /**\n     * Whether the bottom space should be removed.\n     */\n    shouldPreventBottomSpace?: boolean;\n};\n\nconst AccordionContent: FC<AccordionContentProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldPreventBottomSpace = false,\n}) => (\n    <StyledAccordionContent\n        className=\"beta-chayns-accordion-content chayns-scrollbar\"\n        $maxHeight={maxHeight}\n        onScroll={onScroll}\n        $shouldPreventBottomSpace={shouldPreventBottomSpace}\n    >\n        {children}\n    </StyledAccordionContent>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAAmE,SAAAD,uBAAAG,CAAA,WAAAA,CAAA,IAAAA,CAAA,CAAAC,UAAA,GAAAD,CAAA,KAAAE,OAAA,EAAAF,CAAA;AAqBnE,MAAMG,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,wBAAwB,GAAG;AAC/B,CAAC,kBACGX,MAAA,CAAAM,OAAA,CAAAM,aAAA,CAACT,iBAAA,CAAAU,sBAAsB;EACnBC,SAAS,EAAC,gDAAgD;EAC1DC,UAAU,EAAEN,SAAU;EACtBC,QAAQ,EAAEA,QAAS;EACnBM,yBAAyB,EAAEL;AAAyB,GAEnDH,QACmB,CAC3B;AAEDD,gBAAgB,CAACU,WAAW,GAAG,kBAAkB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAb,OAAA,GAEnCC,gBAAgB","ignoreList":[]}

package/lib/cjs/components/accordion/accordion-content/AccordionContent.styles.js

@@ -24,32 +24,5 @@ const StyledAccordionContent = exports.StyledAccordionContent = _styledComponent
             max-height: ${$maxHeight}px;
             overflow-y: scroll;
         `}
-
-    // 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: 5px;
-                  }
-
-                  &::-webkit-scrollbar-track {
-                      background-color: transparent;
-                  }
-
-                  &::-webkit-scrollbar-button {
-                      background-color: transparent;
-                      height: 5px;
-                  }
-
-                  &::-webkit-scrollbar-thumb {
-                      background-color: rgba(${theme['text-rgb']}, 0.15);
-                      border-radius: 20px;
-                  }
-              `}
 `;
 //# sourceMappingURL=AccordionContent.styles.js.map

package/lib/cjs/components/accordion/accordion-content/AccordionContent.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.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","StyledAccordionContent","exports","styled","div","theme","text","$shouldPreventBottomSpace","css","$maxHeight","$browser"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { BrowserName } from '../../../types/chayns';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAccordionContentProps = WithTheme<{\n    $maxHeight?: number;\n    $browser: BrowserName;\n    $shouldPreventBottomSpace: boolean;\n}>;\n\nexport const StyledAccordionContent = styled.div<StyledAccordionContentProps>`\n    color: ${({ theme }: StyledAccordionContentProps) => theme.text};\n    padding: 0 9px 18px 26px;\n\n    ${({ $shouldPreventBottomSpace }) =>\n        $shouldPreventBottomSpace &&\n        css`\n            padding-bottom: 0;\n        `}\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n\n    // Styles for custom scrollbar\n    ${({ $browser, theme }: StyledAccordionContentProps) =>\n        $browser === 'firefox'\n            ? css`\n                  scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n                  scrollbar-width: thin;\n              `\n            : css`\n                  &::-webkit-scrollbar {\n                      width: 5px;\n                  }\n\n                  &::-webkit-scrollbar-track {\n                      background-color: transparent;\n                  }\n\n                  &::-webkit-scrollbar-button {\n                      background-color: transparent;\n                      height: 5px;\n                  }\n\n                  &::-webkit-scrollbar-thumb {\n                      background-color: rgba(${theme['text-rgb']}, 0.15);\n                      border-radius: 20px;\n                  }\n              `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAUzC,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAgC;AAC7E,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA;AACA,MAAM,CAAC;EAAEC;AAA0B,CAAC,KAC5BA,yBAAyB,IACzB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAD,qBAAG;AACX,0BAA0BC,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEL;AAAmC,CAAC,KAC/CK,QAAQ,KAAK,SAAS,GAChB,IAAAF,qBAAG;AACjB,0CAA0CH,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACD,IAAAG,qBAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CH,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"AccordionContent.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","StyledAccordionContent","exports","styled","div","theme","text","$shouldPreventBottomSpace","css","$maxHeight"],"sources":["../../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAccordionContentProps = WithTheme<{\n    $maxHeight?: number;\n    $shouldPreventBottomSpace: boolean;\n}>;\n\nexport const StyledAccordionContent = styled.div<StyledAccordionContentProps>`\n    color: ${({ theme }: StyledAccordionContentProps) => theme.text};\n    padding: 0 9px 18px 26px;\n\n    ${({ $shouldPreventBottomSpace }) =>\n        $shouldPreventBottomSpace &&\n        css`\n            padding-bottom: 0;\n        `}\n\n    ${({ $maxHeight }) =>\n        typeof $maxHeight === 'number' &&\n        css`\n            max-height: ${$maxHeight}px;\n            overflow-y: scroll;\n        `}\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,uBAAA,CAAAC,OAAA;AAAgD,SAAAD,wBAAAE,CAAA,EAAAC,CAAA,6BAAAC,OAAA,MAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAJ,uBAAA,YAAAA,CAAAE,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;AAQzC,MAAMkB,sBAAsB,GAAAC,OAAA,CAAAD,sBAAA,GAAGE,yBAAM,CAACC,GAAgC;AAC7E,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA;AACA,MAAM,CAAC;EAAEC;AAA0B,CAAC,KAC5BA,yBAAyB,IACzB,IAAAC,qBAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9B,IAAAD,qBAAG;AACX,0BAA0BC,UAAU;AACpC;AACA,SAAS;AACT,CAAC","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js

@@ -47,6 +47,9 @@ const ColorSchemeProvider = ({
     color: internalColor,
     colorMode: internalColorMode
   } = (0, _chaynsApi.useSite)();
+  const {
+    browser
+  } = (0, _chaynsApi.useDevice)();
   const color = colorProp ?? (context === null || context === void 0 || (_context$designSettin = context.designSettings) === null || _context$designSettin === void 0 ? void 0 : _context$designSettin.color) ?? internalColor;
   const colorMode = colorModeProp ?? (context === null || context === void 0 || (_context$designSettin2 = context.designSettings) === null || _context$designSettin2 === void 0 ? void 0 : _context$designSettin2.colorMode) ?? internalColorMode;
   const overrideParagraphFormat = color && color !== internalColor || colorMode !== internalColorMode;
@@ -67,7 +70,8 @@ const ColorSchemeProvider = ({
     value: contextValue
   }, /*#__PURE__*/_react.default.createElement(_ColorSchemeProvider.StyledColorSchemeProvider, {
     className: "color-scheme-provider",
-    style: style
+    style: style,
+    $browser: browser === null || browser === void 0 ? void 0 : browser.name
   }, children), /*#__PURE__*/_react.default.createElement(GlobalStyle, null)));
 };
 ColorSchemeProvider.displayName = 'ColorSchemeProvider';

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","_context$designSettin","_context$designSettin2","context","internalColor","internalColorMode","useSite","designSettings","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import { ChaynsDesignSettings, ChaynsParagraphFormat, ColorMode, useSite } from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider className=\"color-scheme-provider\" style={style}>\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_styledComponents","_ColorSchemeProvider","_useChaynsTheme","e","t","WeakMap","r","n","__esModule","o","i","f","__proto__","default","has","get","set","hasOwnProperty","call","Object","defineProperty","getOwnPropertyDescriptor","GlobalStyle","createGlobalStyle","ColorSchemeContext","exports","createContext","undefined","useColorScheme","useContext","ColorSchemeProvider","children","color","colorProp","colorMode","colorModeProp","secondaryColor","siteId","style","iconColor","customVariables","_context$designSettin","_context$designSettin2","context","internalColor","internalColorMode","useSite","browser","useDevice","designSettings","overrideParagraphFormat","paragraphFormat","useMemo","contextValue","useChaynsTheme","createElement","ThemeProvider","theme","Provider","value","StyledColorSchemeProvider","className","$browser","name","displayName","_default"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.tsx"],"sourcesContent":["import {\n    ChaynsDesignSettings,\n    ChaynsParagraphFormat,\n    ColorMode,\n    useDevice,\n    useSite,\n} from 'chayns-api';\nimport React, { createContext, FC, ReactNode, useContext, useMemo } from 'react';\nimport { createGlobalStyle, ThemeProvider } from 'styled-components';\nimport { StyledColorSchemeProvider } from './ColorSchemeProvider.styles';\nimport { useChaynsTheme } from './hooks/useChaynsTheme';\nimport { BrowserName } from '../../types/chayns';\n\nexport type ColorSchemeProviderProps = {\n    /**\n     * The content of the application or the components for which the styles should be set\n     */\n    children: ReactNode;\n    /**\n     * The hex color to be used for the children\n     */\n    color?: string;\n    /**\n     * The color mode to be used for the children\n     */\n    colorMode?: ColorMode;\n    /**\n     * The secondary hex color to be used for the children\n     */\n    secondaryColor?: string;\n    /**\n     * The site id of the page for which the design settings should be fetched\n     */\n    siteId?: string;\n    /**\n     * Additional styles set on the root element\n     */\n    style?: { [key: string]: string | number };\n    /**\n     * Additional variables to extend the theme\n     */\n    customVariables?: Record<string, string>;\n    /**\n     * An optional color for all icons\n     */\n    iconColor?: string;\n};\n\nexport interface Theme {\n    [key: string]: string;\n}\n\nexport type WithTheme<T> = T & {\n    theme: Theme;\n};\n\nconst GlobalStyle = createGlobalStyle`\n    .ellipsis {\n        overflow: hidden;\n        text-overflow: ellipsis;\n        white-space: nowrap;\n    }\n\n    footer {\n        font-size: 0.85rem;\n        color: #888;\n        margin: 10px 0 0;\n\n        & a {\n            color: #888;\n            letter-spacing: -0.3px;\n        }\n    }\n`;\n\nexport interface ColorSchemeContextProps {\n    designSettings?: ChaynsDesignSettings;\n    paragraphFormat: ChaynsParagraphFormat[];\n    theme: Theme;\n}\n\nexport const ColorSchemeContext = createContext<ColorSchemeContextProps | undefined>(undefined);\n\nexport const useColorScheme = () => useContext(ColorSchemeContext);\n\nconst ColorSchemeProvider: FC<ColorSchemeProviderProps> = ({\n    children,\n    color: colorProp,\n    colorMode: colorModeProp,\n    secondaryColor,\n    siteId,\n    style = {},\n    iconColor,\n    customVariables,\n}) => {\n    const context = useContext(ColorSchemeContext);\n\n    const { color: internalColor, colorMode: internalColorMode } = useSite();\n\n    const { browser } = useDevice();\n\n    const color = colorProp ?? context?.designSettings?.color ?? internalColor;\n    const colorMode = colorModeProp ?? context?.designSettings?.colorMode ?? internalColorMode;\n\n    const overrideParagraphFormat =\n        (color && color !== internalColor) || colorMode !== internalColorMode;\n\n    const paragraphFormat = useMemo(\n        () => (overrideParagraphFormat ? [] : undefined),\n        [overrideParagraphFormat],\n    );\n\n    const contextValue = useChaynsTheme({\n        color,\n        iconColor,\n        colorMode,\n        secondaryColor,\n        siteId,\n        customVariables,\n        // Overrides the paragraphFormat on changed color or colorMode\n        paragraphFormat,\n    });\n\n    return (\n        <ThemeProvider theme={contextValue.theme}>\n            <ColorSchemeContext.Provider value={contextValue}>\n                <StyledColorSchemeProvider\n                    className=\"color-scheme-provider\"\n                    style={style}\n                    $browser={browser?.name as BrowserName}\n                >\n                    {children}\n                </StyledColorSchemeProvider>\n                <GlobalStyle />\n            </ColorSchemeContext.Provider>\n        </ThemeProvider>\n    );\n};\n\nColorSchemeProvider.displayName = 'ColorSchemeProvider';\n\nexport default ColorSchemeProvider;\n"],"mappings":"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","ignoreList":[]}

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js

@@ -27,5 +27,42 @@ const StyledColorSchemeProvider = exports.StyledColorSchemeProvider = _styledCom
     .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {
         margin-top: 0;
     }
+
+    // Styles for custom scrollbar
+    .chayns-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;
+                      }
+                  `}
+    }
 `;
 //# sourceMappingURL=ColorSchemeProvider.styles.js.map

package/lib/cjs/components/color-scheme-provider/ColorSchemeProvider.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","map","colorName","colorNameRgb","primary"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\n\ntype ColorSchemeProviderProps = WithTheme<unknown>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\n    `}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAKA;AACO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEJ;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACK,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
+{"version":3,"file":"ColorSchemeProvider.styles.js","names":["_colors","require","_styledComponents","StyledColorSchemeProvider","exports","styled","div","theme","getAvailableColorList","map","colorName","colorNameRgb","primary","$browser","css"],"sources":["../../../../src/components/color-scheme-provider/ColorSchemeProvider.styles.ts"],"sourcesContent":["import { getAvailableColorList } from '@chayns/colors';\nimport { css, styled } from 'styled-components';\nimport type { WithTheme } from './ColorSchemeProvider';\nimport { BrowserName } from '../../types/chayns';\n\ntype ColorSchemeProviderProps = WithTheme<{ $browser: BrowserName }>;\n\n// noinspection CssUnresolvedCustomProperty\nexport const StyledColorSchemeProvider = styled.div<ColorSchemeProviderProps>`\n    color: var(--chayns-color--text);\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        getAvailableColorList().map((colorName: string) => {\n            const colorNameRgb = `${colorName}-rgb`;\n            return [\n                `--chayns-color--${colorName}: ${theme[colorName]};`,\n                `--chayns-color-rgb--${colorName}: ${theme[colorNameRgb]};`,\n            ];\n        })}\n\n    ${({ theme }: ColorSchemeProviderProps) =>\n        `\n        --chayns-color--header-bar: ${theme['header-bar'] ?? theme.primary};\n    `}\n\n    // ToDo: Remove .h1...\n    .color-scheme-provider :is(h1,.h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6):first-child {\n        margin-top: 0;\n    }\n\n    // Styles for custom scrollbar\n    .chayns-scrollbar {\n        ${({ $browser, theme }: ColorSchemeProviderProps) =>\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`;\n"],"mappings":";;;;;;AAAA,IAAAA,OAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AAMA;AACO,MAAME,yBAAyB,GAAAC,OAAA,CAAAD,yBAAA,GAAGE,wBAAM,CAACC,GAA6B;AAC7E;AACA;AACA,MAAM,CAAC;EAAEC;AAAgC,CAAC,KAClC,IAAAC,6BAAqB,EAAC,CAAC,CAACC,GAAG,CAAEC,SAAiB,IAAK;EAC/C,MAAMC,YAAY,GAAG,GAAGD,SAAS,MAAM;EACvC,OAAO,CACH,mBAAmBA,SAAS,KAAKH,KAAK,CAACG,SAAS,CAAC,GAAG,EACpD,uBAAuBA,SAAS,KAAKH,KAAK,CAACI,YAAY,CAAC,GAAG,CAC9D;AACL,CAAC,CAAC;AACV;AACA,MAAM,CAAC;EAAEJ;AAAgC,CAAC,KAClC;AACR,sCAAsCA,KAAK,CAAC,YAAY,CAAC,IAAIA,KAAK,CAACK,OAAO;AAC1E,KAAK;AACL;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,UAAU,CAAC;EAAEC,QAAQ;EAAEN;AAAgC,CAAC,KAC5CM,QAAQ,KAAK,SAAS,GAChB,IAAAC,qBAAG;AACrB,8CAA8CP,KAAK,CAAC,UAAU,CAAC;AAC/D;AACA,mBAAmB,GACD,IAAAO,qBAAG;AACrB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mDAAmDP,KAAK,CAAC,UAAU,CAAC;AACpE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAmB;AACnB;AACA,CAAC","ignoreList":[]}

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.ComboBoxSize = void 0;
+exports.default = void 0;
 var _chaynsApi = require("chayns-api");
 var _react = _interopRequireWildcard(require("react"));
 var _calculate = require("../../utils/calculate");
@@ -15,13 +15,9 @@ var _ComboBox = require("./ComboBox.styles");
 var _DropdownBodyWrapper = _interopRequireDefault(require("../dropdown-body-wrapper/DropdownBodyWrapper"));
 var _dropdown = require("../../types/dropdown");
 var _element = require("../../hooks/element");
+var _ComboBox2 = require("./ComboBox.types");
 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); }
-let ComboBoxSize = exports.ComboBoxSize = /*#__PURE__*/function (ComboBoxSize) {
-  ComboBoxSize["NORMAL"] = "normal";
-  ComboBoxSize["SMALL"] = "small";
-  return ComboBoxSize;
-}({});
 const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
   bodyWidth,
   direction = _dropdown.DropdownDirection.RIGHT,
@@ -41,7 +37,7 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
   shouldShowRoundImage,
   onInputFocus,
   prefixMinWidth,
-  size = ComboBoxSize.NORMAL,
+  size = _ComboBox2.ComboBoxSize.NORMAL,
   shouldUseFullWidth = false,
   onInputChange,
   shouldUseCurrentItemWidth = false,
@@ -64,9 +60,6 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
   const functions = (0, _chaynsApi.useFunctions)();
   const values = (0, _chaynsApi.useValues)();
   const isTouch = (0, _environment.useIsTouch)();
-  const {
-    browser
-  } = (0, _chaynsApi.useDevice)();
   const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
   (0, _react.useEffect)(() => {
     if (shouldUseFullWidth && parentSize) {
@@ -136,7 +129,7 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
     }
     setInternalSelectedItem(itemToSelect);
     handleClose();
-  }, [onSelect]);
+  }, [handleClose, onSelect]);
   const handleClear = (0, _react.useCallback)(event => {
     event.preventDefault();
     event.stopPropagation();
@@ -398,10 +391,10 @@ const ComboBox = /*#__PURE__*/(0, _react.forwardRef)(({
     $shouldUseCurrentItemWidth: shouldUseCurrentItemWidth,
     $maxHeight: maxHeight,
     $minWidth: bodyWidth ?? bodyMinWidth,
-    $browser: browser === null || browser === void 0 ? void 0 : browser.name,
+    className: "chayns-scrollbar",
     ref: contentRef,
     tabIndex: 0
-  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, size, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, prefixMinWidth, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, handleClose, container, bodyMinWidth, maxHeight, browser === null || browser === void 0 ? void 0 : browser.name, comboBoxGroups]);
+  }, comboBoxGroups))), [minWidth, shouldUseFullWidth, shouldUseCurrentItemWidth, direction, handleHeaderClick, isAnimating, isTouch, size, shouldShowTransparentBackground, isDisabled, shouldChangeColor, shouldShowBigImage, prefix, prefixMinWidth, selectedItem, internalSelectedItem, placeholderImageUrl, shouldShowRoundPlaceholderImage, placeholderIcon, inputValue, onInputChange, handleInputBlur, handleInputFocus, placeholderText, shouldShowClearIcon, handleClear, shouldDisableActions, bodyWidth, contentHeight, shouldCaptureEvents, handleClose, container, bodyMinWidth, maxHeight, comboBoxGroups]);
 });
 ComboBox.displayName = 'ComboBox';
 var _default = exports.default = ComboBox;