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

package/lib/esm/components/accordion/Accordion.styles.js

@@ -1,95 +1,82 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledMotionAccordion = styled(motion.div)`
-    ${_ref => {
-  let {
-    $isOpen,
-    $isWrapped,
-    $shouldForceBackground,
-    $shouldHideBackground,
-    theme
-  } = _ref;
-  return ($isOpen || $shouldForceBackground) && !$isWrapped && !$shouldHideBackground && css`
-                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-                border-radius: ${theme.cardBorderRadius}px;
-                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
-            `;
-}}
+    ${({
+  $isOpen,
+  $isWrapped,
+  $shouldForceBackground,
+  $shouldHideBackground,
+  theme
+}) => ($isOpen || $shouldForceBackground) && !$isWrapped && !$shouldHideBackground && css`
+            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            border-radius: ${theme.cardBorderRadius}px;
+            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});
+        `}
 
-    ${_ref2 => {
-  let {
-    theme
-  } = _ref2;
-  return theme.accordionLines && css`
-                border-bottom: 1px solid transparent;
-            `;
-}}
+    ${({
+  theme
+}) => theme.accordionLines && css`
+            border-bottom: 1px solid transparent;
+        `}
 
-    margin-bottom: ${_ref3 => {
-  let {
-    $isOpen,
-    $isWrapped
-  } = _ref3;
-  return $isOpen && !$isWrapped ? '30px' : '0px';
-}};
-    transition: background-color 0.3s ease,
-    border-bottom-color 0.3s ease,
-    border-radius 0.3s ease,
-    box-shadow 0.3s ease,
-    margin-bottom 0.3s ease;
+    margin-bottom: ${({
+  $isOpen,
+  $isWrapped
+}) => $isOpen && !$isWrapped ? '30px' : '0px'};
+    transition:
+        background-color 0.3s ease,
+        border-bottom-color 0.3s ease,
+        border-radius 0.3s ease,
+        box-shadow 0.3s ease,
+        margin-bottom 0.3s ease;
     will-change: unset !important;
 
-    ${_ref4 => {
-  let {
-    $isOpen,
-    $isWrapped,
-    $shouldForceBackground,
-    $shouldShowLines,
-    $shouldHideBottomLine,
-    theme
-  } = _ref4;
+    margin-top: 10px;
+
+    ${({
+  $isOpen,
+  $isWrapped,
+  $shouldForceBackground,
+  $shouldShowLines,
+  $shouldHideBottomLine,
+  theme
+}) => {
   if ($shouldForceBackground || $shouldHideBottomLine) return undefined;
   if (theme.accordionLines) {
     if ($isWrapped && $shouldShowLines) {
       return css`
-                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
+                    border-bottom-color: rgba(${theme['headline-rgb']}, 1);
                 `;
     }
     if (!$isOpen && $shouldShowLines) {
       return css`
-                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);
+                    border-bottom-color: rgba(${theme['headline-rgb']}, 1);
                 `;
     }
   }
   return undefined;
 }}
-    ${_ref5 => {
-  let {
-    $isParentWrapped
-  } = _ref5;
-  return $isParentWrapped && css`
-                padding-left: 17px;
-            `;
-}}
-    ${_ref6 => {
-  let {
-    $isWrapped
-  } = _ref6;
-  return !$isWrapped && css`
-                margin-top: 10px;
-            `;
-}}
-    ${_ref7 => {
-  let {
-    $isWrapped,
-    $shouldHideBackground,
-    theme
-  } = _ref7;
-  return !$isWrapped && !$shouldHideBackground && css`
-                &:hover {
-                    background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
-                }
-            `;
-}};
+    ${({
+  $isParentWrapped
+}) => $isParentWrapped && css`
+            padding-left: 17px;
+        `}
+    ${({
+  $isWrapped
+}) => !$isWrapped ? css`
+                  margin-top: 5px;
+              ` : css`
+                  margin: 0;
+              `}
+    ${({
+  $isWrapped,
+  $shouldHideBackground,
+  theme
+}) => !$isWrapped && !$shouldHideBackground && css`
+            &:hover,
+            &:focus-visible {
+                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});
+            }
+        `};
 `;
 //# sourceMappingURL=Accordion.styles.js.map

package/lib/esm/components/accordion/Accordion.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","_ref","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","_ref2","accordionLines","_ref3","_ref4","$shouldShowLines","$shouldHideBottomLine","undefined","_ref5","$isParentWrapped","_ref6","_ref7"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import {motion} from 'framer-motion';\nimport styled, {css} from 'styled-components';\nimport type {WithTheme} from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    $isOpen: boolean;\n    $isParentWrapped?: boolean;\n    $isWrapped?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldHideBackground?: boolean;\n    $shouldShowLines?: boolean;\n    $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n    ${({\n           $isOpen,\n           $isWrapped,\n           $shouldForceBackground,\n           $shouldHideBackground,\n           theme,\n       }: StyledMotionAccordionProps) =>\n            ($isOpen || $shouldForceBackground) &&\n            !$isWrapped &&\n            !$shouldHideBackground &&\n            css`\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n                border-radius: ${theme.cardBorderRadius}px;\n                box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n            `}\n\n    ${({theme}: StyledMotionAccordionProps) =>\n            theme.accordionLines &&\n            css`\n                border-bottom: 1px solid transparent;\n            `}\n\n    margin-bottom: ${({$isOpen, $isWrapped}: StyledMotionAccordionProps) =>\n            $isOpen && !$isWrapped ? '30px' : '0px'};\n    transition: background-color 0.3s ease,\n    border-bottom-color 0.3s ease,\n    border-radius 0.3s ease,\n    box-shadow 0.3s ease,\n    margin-bottom 0.3s ease;\n    will-change: unset !important;\n\n    ${({\n           $isOpen,\n           $isWrapped,\n           $shouldForceBackground,\n           $shouldShowLines,\n           $shouldHideBottomLine,\n           theme,\n       }: StyledMotionAccordionProps) => {\n        if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n\n        if (theme.accordionLines) {\n            if ($isWrapped && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n\n            if (!$isOpen && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 0.5);\n                `;\n            }\n        }\n\n        return undefined;\n    }}\n    ${({$isParentWrapped}: StyledMotionAccordionProps) =>\n            $isParentWrapped &&\n            css`\n                padding-left: 17px;\n            `}\n    ${({$isWrapped}: StyledMotionAccordionProps) =>\n            !$isWrapped &&\n            css`\n                margin-top: 10px;\n            `}\n    ${({$isWrapped, $shouldHideBackground, theme}: StyledMotionAccordionProps) =>\n            !$isWrapped &&\n            !$shouldHideBackground &&\n            css`\n                &:hover {\n                    background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n                }\n            `};\n`;\n"],"mappings":"AAAA,SAAQA,MAAM,QAAO,eAAe;AACpC,OAAOC,MAAM,IAAGC,GAAG,QAAO,mBAAmB;AAa7C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAMC,IAAA;EAAA,IAAC;IACIC,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBC,qBAAqB;IACrBC;EACwB,CAAC,GAAAL,IAAA;EAAA,OACxB,CAACC,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACf,yCAAyCQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF,iCAAiCD,KAAK,CAACE,gBAAgB;AACvD,wDAAwDF,KAAK,CAACG,UAAU;AACxE,aAAa;AAAA;AACb;AACA,MAAMC,KAAA;EAAA,IAAC;IAACJ;EAAiC,CAAC,GAAAI,KAAA;EAAA,OAC9BJ,KAAK,CAACK,cAAc,IACpBb,GAAG;AACf;AACA,aAAa;AAAA;AACb;AACA,qBAAqBc,KAAA;EAAA,IAAC;IAACV,OAAO;IAAEC;EAAsC,CAAC,GAAAS,KAAA;EAAA,OAC3DV,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAAA;AACnD;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAMU,KAAA,IAOmC;EAAA,IAPlC;IACIX,OAAO;IACPC,UAAU;IACVC,sBAAsB;IACtBU,gBAAgB;IAChBC,qBAAqB;IACrBT;EACwB,CAAC,GAAAO,KAAA;EAC5B,IAAIT,sBAAsB,IAAIW,qBAAqB,EAAE,OAAOC,SAAS;EAErE,IAAIV,KAAK,CAACK,cAAc,EAAE;IACtB,IAAIR,UAAU,IAAIW,gBAAgB,EAAE;MAChC,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;IAEA,IAAI,CAACJ,OAAO,IAAIY,gBAAgB,EAAE;MAC9B,OAAOhB,GAAG;AAC1B,gDAAgDQ,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;EACJ;EAEA,OAAOU,SAAS;AACpB,CAAC;AACL,MAAMC,KAAA;EAAA,IAAC;IAACC;EAA4C,CAAC,GAAAD,KAAA;EAAA,OACzCC,gBAAgB,IAChBpB,GAAG;AACf;AACA,aAAa;AAAA;AACb,MAAMqB,KAAA;EAAA,IAAC;IAAChB;EAAsC,CAAC,GAAAgB,KAAA;EAAA,OACnC,CAAChB,UAAU,IACXL,GAAG;AACf;AACA,aAAa;AAAA;AACb,MAAMsB,KAAA;EAAA,IAAC;IAACjB,UAAU;IAAEE,qBAAqB;IAAEC;EAAiC,CAAC,GAAAc,KAAA;EAAA,OACjE,CAACjB,UAAU,IACX,CAACE,qBAAqB,IACtBP,GAAG;AACf;AACA,6CAA6CQ,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AAC7F;AACA,aAAa;AAAA;AACb,CAAC","ignoreList":[]}
+{"version":3,"file":"Accordion.styles.js","names":["motion","styled","css","StyledMotionAccordion","div","$isOpen","$isWrapped","$shouldForceBackground","$shouldHideBackground","theme","cardBackgroundOpacity","cardBorderRadius","cardShadow","accordionLines","$shouldShowLines","$shouldHideBottomLine","undefined","$isParentWrapped"],"sources":["../../../../src/components/accordion/Accordion.styles.ts"],"sourcesContent":["import { motion } from 'motion/react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    $isOpen: boolean;\n    $isParentWrapped?: boolean;\n    $isWrapped?: boolean;\n    $shouldForceBackground?: boolean;\n    $shouldHideBackground?: boolean;\n    $shouldShowLines?: boolean;\n    $shouldHideBottomLine: boolean;\n}>;\n\nexport const StyledMotionAccordion = styled(motion.div)<StyledMotionAccordionProps>`\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldHideBackground,\n        theme,\n    }: StyledMotionAccordionProps) =>\n        ($isOpen || $shouldForceBackground) &&\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            border-radius: ${theme.cardBorderRadius}px;\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, ${theme.cardShadow});\n        `}\n\n    ${({ theme }: StyledMotionAccordionProps) =>\n        theme.accordionLines &&\n        css`\n            border-bottom: 1px solid transparent;\n        `}\n\n    margin-bottom: ${({ $isOpen, $isWrapped }: StyledMotionAccordionProps) =>\n        $isOpen && !$isWrapped ? '30px' : '0px'};\n    transition:\n        background-color 0.3s ease,\n        border-bottom-color 0.3s ease,\n        border-radius 0.3s ease,\n        box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n    will-change: unset !important;\n\n    margin-top: 10px;\n\n    ${({\n        $isOpen,\n        $isWrapped,\n        $shouldForceBackground,\n        $shouldShowLines,\n        $shouldHideBottomLine,\n        theme,\n    }: StyledMotionAccordionProps) => {\n        if ($shouldForceBackground || $shouldHideBottomLine) return undefined;\n\n        if (theme.accordionLines) {\n            if ($isWrapped && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n\n            if (!$isOpen && $shouldShowLines) {\n                return css`\n                    border-bottom-color: rgba(${theme['headline-rgb']}, 1);\n                `;\n            }\n        }\n\n        return undefined;\n    }}\n    ${({ $isParentWrapped }: StyledMotionAccordionProps) =>\n        $isParentWrapped &&\n        css`\n            padding-left: 17px;\n        `}\n    ${({ $isWrapped }: StyledMotionAccordionProps) =>\n        !$isWrapped\n            ? css`\n                  margin-top: 5px;\n              `\n            : css`\n                  margin: 0;\n              `}\n    ${({ $isWrapped, $shouldHideBackground, theme }: StyledMotionAccordionProps) =>\n        !$isWrapped &&\n        !$shouldHideBackground &&\n        css`\n            &:hover,\n            &:focus-visible {\n                background-color: rgba(${theme['100-rgb']}, ${theme.cardBackgroundOpacity});\n            }\n        `};\n`;\n"],"mappings":"AAAA,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAa/C,OAAO,MAAMC,qBAAqB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAA6B;AACnF,MAAM,CAAC;EACCC,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBC,qBAAqB;EACrBC;AACwB,CAAC,KACzB,CAACJ,OAAO,IAAIE,sBAAsB,KAClC,CAACD,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX,qCAAqCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACrF,6BAA6BD,KAAK,CAACE,gBAAgB;AACnD,oDAAoDF,KAAK,CAACG,UAAU;AACpE,SAAS;AACT;AACA,MAAM,CAAC;EAAEH;AAAkC,CAAC,KACpCA,KAAK,CAACI,cAAc,IACpBX,GAAG;AACX;AACA,SAAS;AACT;AACA,qBAAqB,CAAC;EAAEG,OAAO;EAAEC;AAAuC,CAAC,KACjED,OAAO,IAAI,CAACC,UAAU,GAAG,MAAM,GAAG,KAAK;AAC/C;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,MAAM,CAAC;EACCD,OAAO;EACPC,UAAU;EACVC,sBAAsB;EACtBO,gBAAgB;EAChBC,qBAAqB;EACrBN;AACwB,CAAC,KAAK;EAC9B,IAAIF,sBAAsB,IAAIQ,qBAAqB,EAAE,OAAOC,SAAS;EAErE,IAAIP,KAAK,CAACI,cAAc,EAAE;IACtB,IAAIP,UAAU,IAAIQ,gBAAgB,EAAE;MAChC,OAAOZ,GAAG;AAC1B,gDAAgDO,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;IAEA,IAAI,CAACJ,OAAO,IAAIS,gBAAgB,EAAE;MAC9B,OAAOZ,GAAG;AAC1B,gDAAgDO,KAAK,CAAC,cAAc,CAAC;AACrE,iBAAiB;IACL;EACJ;EAEA,OAAOO,SAAS;AACpB,CAAC;AACL,MAAM,CAAC;EAAEC;AAA6C,CAAC,KAC/CA,gBAAgB,IAChBf,GAAG;AACX;AACA,SAAS;AACT,MAAM,CAAC;EAAEI;AAAuC,CAAC,KACzC,CAACA,UAAU,GACLJ,GAAG;AACjB;AACA,eAAe,GACDA,GAAG;AACjB;AACA,eAAe;AACf,MAAM,CAAC;EAAEI,UAAU;EAAEE,qBAAqB;EAAEC;AAAkC,CAAC,KACvE,CAACH,UAAU,IACX,CAACE,qBAAqB,IACtBN,GAAG;AACX;AACA;AACA,yCAAyCO,KAAK,CAAC,SAAS,CAAC,KAAKA,KAAK,CAACC,qBAAqB;AACzF;AACA,SAAS;AACT,CAAC","ignoreList":[]}

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

@@ -2,14 +2,14 @@ import { getDevice } from 'chayns-api';
 import React, { useMemo } from 'react';
 import { AccordionGroupContext } from '../accordion-group/AccordionGroup';
 import { StyledMotionAccordionBody } from './AccordionBody.styles';
-const AccordionBody = _ref => {
-  let {
-    children,
-    maxHeight,
-    onScroll,
-    shouldHideBody,
-    onAnimationComplete
-  } = _ref;
+const AccordionBody = ({
+  children,
+  maxHeight,
+  onScroll,
+  shouldHideBody,
+  shouldSkipAnimation,
+  onAnimationComplete
+}) => {
   const {
     browser
   } = getDevice();
@@ -17,28 +17,39 @@ const AccordionBody = _ref => {
     openAccordionUuid: undefined
   }), []);
   return /*#__PURE__*/React.createElement(StyledMotionAccordionBody, {
+    initial: shouldSkipAnimation ? {
+      height: 'auto',
+      opacity: 1
+    } : {
+      height: 0,
+      opacity: 0
+    },
     animate: {
-      height: shouldHideBody ? '0' : 'auto',
+      height: shouldHideBody ? 0 : 'auto',
       opacity: shouldHideBody ? 0 : 1
     },
-    className: "beta-chayns-accordion-body",
     exit: {
       height: 0,
       opacity: 0
     },
-    initial: {
-      height: 0,
-      opacity: 0
+    transition: {
+      height: shouldSkipAnimation ? {
+        duration: 0,
+        ease: 'linear'
+      } : {
+        duration: 0.25
+      },
+      opacity: shouldSkipAnimation ? {
+        duration: 0
+      } : {
+        duration: 0.25
+      }
     },
+    className: "beta-chayns-accordion-body",
     $maxHeight: maxHeight,
     $browser: browser?.name,
     onAnimationComplete: onAnimationComplete,
-    onScroll: onScroll,
-    transition: {
-      opacity: {
-        duration: 0.1
-      }
-    }
+    onScroll: onScroll
   }, /*#__PURE__*/React.createElement(AccordionGroupContext.Provider, {
     value: AccordionGroupContextProviderValue
   }, children));

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","_ref","children","maxHeight","onScroll","shouldHideBody","onAnimationComplete","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","animate","height","opacity","className","exit","initial","$maxHeight","$browser","name","transition","duration","Provider","value","displayName"],"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    onAnimationComplete?: VoidFunction;\n};\n\nconst AccordionBody: FC<AccordionBodyProps> = ({\n    children,\n    maxHeight,\n    onScroll,\n    shouldHideBody,\n    onAnimationComplete,\n}) => {\n    const { browser } = getDevice();\n\n    const AccordionGroupContextProviderValue = useMemo(\n        () => ({ openAccordionUuid: undefined }),\n        [],\n    );\n\n    return (\n        <StyledMotionAccordionBody\n            animate={{ height: shouldHideBody ? '0' : 'auto', opacity: shouldHideBody ? 0 : 1 }}\n            className=\"beta-chayns-accordion-body\"\n            exit={{ height: 0, opacity: 0 }}\n            initial={{ height: 0, opacity: 0 }}\n            $maxHeight={maxHeight}\n            $browser={browser?.name as BrowserName}\n            onAnimationComplete={onAnimationComplete}\n            onScroll={onScroll}\n            transition={{ opacity: { duration: 0.1 } }}\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,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAA4BC,OAAO,QAAQ,OAAO;AAG9D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,yBAAyB,QAAQ,wBAAwB;AAuBlE,MAAMC,aAAqC,GAAGC,IAAA,IAMxC;EAAA,IANyC;IAC3CC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,cAAc;IACdC;EACJ,CAAC,GAAAL,IAAA;EACG,MAAM;IAAEM;EAAQ,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE/B,MAAMa,kCAAkC,GAAGX,OAAO,CAC9C,OAAO;IAAEY,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACZ,yBAAyB;IACtBa,OAAO,EAAE;MAAEC,MAAM,EAAER,cAAc,GAAG,GAAG,GAAG,MAAM;MAAES,OAAO,EAAET,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IACpFU,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEJ,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAEf,SAAU;IACtBgB,QAAQ,EAAEZ,OAAO,EAAEa,IAAoB;IACvCd,mBAAmB,EAAEA,mBAAoB;IACzCF,QAAQ,EAAEA,QAAS;IACnBiB,UAAU,EAAE;MAAEP,OAAO,EAAE;QAAEQ,QAAQ,EAAE;MAAI;IAAE;EAAE,gBAE3C1B,KAAA,CAAAe,aAAA,CAACb,qBAAqB,CAACyB,QAAQ;IAACC,KAAK,EAAEhB;EAAmC,GACrEN,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDF,aAAa,CAACyB,WAAW,GAAG,eAAe;AAE3C,eAAezB,aAAa","ignoreList":[]}
+{"version":3,"file":"AccordionBody.js","names":["getDevice","React","useMemo","AccordionGroupContext","StyledMotionAccordionBody","AccordionBody","children","maxHeight","onScroll","shouldHideBody","shouldSkipAnimation","onAnimationComplete","browser","AccordionGroupContextProviderValue","openAccordionUuid","undefined","createElement","initial","height","opacity","animate","exit","transition","duration","ease","className","$maxHeight","$browser","name","Provider","value","displayName"],"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":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAA4BC,OAAO,QAAQ,OAAO;AAG9D,SAASC,qBAAqB,QAAQ,mCAAmC;AACzE,SAASC,yBAAyB,QAAQ,wBAAwB;AA2BlE,MAAMC,aAAqC,GAAGA,CAAC;EAC3CC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,cAAc;EACdC,mBAAmB;EACnBC;AACJ,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAGZ,SAAS,CAAC,CAAC;EAE/B,MAAMa,kCAAkC,GAAGX,OAAO,CAC9C,OAAO;IAAEY,iBAAiB,EAAEC;EAAU,CAAC,CAAC,EACxC,EACJ,CAAC;EAED,oBACId,KAAA,CAAAe,aAAA,CAACZ,yBAAyB;IACtBa,OAAO,EACHP,mBAAmB,GAAG;MAAEQ,MAAM,EAAE,MAAM;MAAEC,OAAO,EAAE;IAAE,CAAC,GAAG;MAAED,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAClF;IACDC,OAAO,EAAE;MAAEF,MAAM,EAAET,cAAc,GAAG,CAAC,GAAG,MAAM;MAAEU,OAAO,EAAEV,cAAc,GAAG,CAAC,GAAG;IAAE,CAAE;IAClFY,IAAI,EAAE;MAAEH,MAAM,EAAE,CAAC;MAAEC,OAAO,EAAE;IAAE,CAAE;IAChCG,UAAU,EAAE;MACRJ,MAAM,EAAER,mBAAmB,GAAG;QAAEa,QAAQ,EAAE,CAAC;QAAEC,IAAI,EAAE;MAAS,CAAC,GAAG;QAAED,QAAQ,EAAE;MAAK,CAAC;MAClFJ,OAAO,EAAET,mBAAmB,GAAG;QAAEa,QAAQ,EAAE;MAAE,CAAC,GAAG;QAAEA,QAAQ,EAAE;MAAK;IACtE,CAAE;IACFE,SAAS,EAAC,4BAA4B;IACtCC,UAAU,EAAEnB,SAAU;IACtBoB,QAAQ,EAAEf,OAAO,EAAEgB,IAAoB;IACvCjB,mBAAmB,EAAEA,mBAAoB;IACzCH,QAAQ,EAAEA;EAAS,gBAEnBP,KAAA,CAAAe,aAAA,CAACb,qBAAqB,CAAC0B,QAAQ;IAACC,KAAK,EAAEjB;EAAmC,GACrEP,QAC2B,CACT,CAAC;AAEpC,CAAC;AAEDD,aAAa,CAAC0B,WAAW,GAAG,eAAe;AAE3C,eAAe1B,aAAa","ignoreList":[]}

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

@@ -1,25 +1,21 @@
-import { motion } from 'framer-motion';
+import { motion } from 'motion/react';
 import styled, { css } from 'styled-components';
 export const StyledMotionAccordionBody = styled(motion.div)`
     overflow: hidden;
+    transition: none !important;
 
-    ${_ref => {
-  let {
-    $maxHeight
-  } = _ref;
-  return typeof $maxHeight === 'number' && css`
+    ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' && css`
             max-height: ${$maxHeight}px;
             overflow-y: scroll;
-        `;
-}}
+        `}
 
     // Styles for custom scrollbar
-    ${_ref2 => {
-  let {
-    $browser,
-    theme
-  } = _ref2;
-  return $browser === 'firefox' ? css`
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
@@ -40,7 +36,6 @@ export const StyledMotionAccordionBody = styled(motion.div)`
                       background-color: rgba(${theme['text-rgb']}, 0.15);
                       border-radius: 20px;
                   }
-              `;
-}}
+              `}
 `;
 //# sourceMappingURL=AccordionBody.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","_ref","$maxHeight","_ref2","$browser","theme"],"sources":["../../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\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\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,SAASA,MAAM,QAAQ,eAAe;AACtC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA,MAAMC,IAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,IAAA;EAAA,OACb,OAAOC,UAAU,KAAK,QAAQ,IAC9BJ,GAAG;AACX,0BAA0BI,UAAU;AACpC;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEC;EAAsC,CAAC,GAAAF,KAAA;EAAA,OAClDC,QAAQ,KAAK,SAAS,GAChBN,GAAG;AACjB,0CAA0CO,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDP,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CO,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"AccordionBody.styles.js","names":["motion","styled","css","StyledMotionAccordionBody","div","$maxHeight","$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,SAASA,MAAM,QAAQ,cAAc;AACrC,OAAOC,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAS/C,OAAO,MAAMC,yBAAyB,GAAGF,MAAM,CAACD,MAAM,CAACI,GAAG,CAAiC;AAC3F;AACA;AACA;AACA,MAAM,CAAC;EAAEC;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BH,GAAG;AACX,0BAA0BG,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEC;AAAsC,CAAC,KAClDD,QAAQ,KAAK,SAAS,GAChBJ,GAAG;AACjB,0CAA0CK,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDL,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CK,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

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

@@ -1,30 +1,22 @@
 import { getDevice } from 'chayns-api';
 import React from 'react';
-import { AccordionContext } from '../Accordion';
 import { StyledAccordionContent } from './AccordionContent.styles';
-const AccordionContent = _ref => {
-  let {
-    children,
-    maxHeight,
-    onScroll,
-    shouldPreventBottomSpace = false
-  } = _ref;
+const AccordionContent = ({
+  children,
+  maxHeight,
+  onScroll,
+  shouldPreventBottomSpace = false
+}) => {
   const {
     browser
   } = getDevice();
-  return /*#__PURE__*/React.createElement(AccordionContext.Consumer, null, _ref2 => {
-    let {
-      isWrapped
-    } = _ref2;
-    return /*#__PURE__*/React.createElement(StyledAccordionContent, {
-      className: "beta-chayns-accordion-content",
-      $isWrapped: isWrapped,
-      $browser: browser?.name,
-      $maxHeight: maxHeight,
-      onScroll: onScroll,
-      $shouldPreventBottomSpace: shouldPreventBottomSpace
-    }, children);
-  });
+  return /*#__PURE__*/React.createElement(StyledAccordionContent, {
+    className: "beta-chayns-accordion-content",
+    $browser: browser?.name,
+    $maxHeight: maxHeight,
+    onScroll: onScroll,
+    $shouldPreventBottomSpace: shouldPreventBottomSpace
+  }, children);
 };
 AccordionContent.displayName = 'AccordionContent';
 export default AccordionContent;

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.js","names":["getDevice","React","AccordionContext","StyledAccordionContent","AccordionContent","_ref","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","createElement","Consumer","_ref2","isWrapped","className","$isWrapped","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName"],"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 { AccordionContext } from '../Accordion';\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        <AccordionContext.Consumer>\n            {({ isWrapped }) => (\n                <StyledAccordionContent\n                    className=\"beta-chayns-accordion-content\"\n                    $isWrapped={isWrapped}\n                    $browser={browser?.name as BrowserName}\n                    $maxHeight={maxHeight}\n                    onScroll={onScroll}\n                    $shouldPreventBottomSpace={shouldPreventBottomSpace}\n                >\n                    {children}\n                </StyledAccordionContent>\n            )}\n        </AccordionContext.Consumer>\n    );\n};\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,MAAkC,OAAO;AAErD,SAASC,gBAAgB,QAAQ,cAAc;AAC/C,SAASC,sBAAsB,QAAQ,2BAA2B;AAqBlE,MAAMC,gBAA2C,GAAGC,IAAA,IAK9C;EAAA,IAL+C;IACjDC,QAAQ;IACRC,SAAS;IACTC,QAAQ;IACRC,wBAAwB,GAAG;EAC/B,CAAC,GAAAJ,IAAA;EACG,MAAM;IAAEK;EAAQ,CAAC,GAAGV,SAAS,CAAC,CAAC;EAE/B,oBACIC,KAAA,CAAAU,aAAA,CAACT,gBAAgB,CAACU,QAAQ,QACrBC,KAAA;IAAA,IAAC;MAAEC;IAAU,CAAC,GAAAD,KAAA;IAAA,oBACXZ,KAAA,CAAAU,aAAA,CAACR,sBAAsB;MACnBY,SAAS,EAAC,+BAA+B;MACzCC,UAAU,EAAEF,SAAU;MACtBG,QAAQ,EAAEP,OAAO,EAAEQ,IAAoB;MACvCC,UAAU,EAAEZ,SAAU;MACtBC,QAAQ,EAAEA,QAAS;MACnBY,yBAAyB,EAAEX;IAAyB,GAEnDH,QACmB,CAAC;EAAA,CAEN,CAAC;AAEpC,CAAC;AAEDF,gBAAgB,CAACiB,WAAW,GAAG,kBAAkB;AAEjD,eAAejB,gBAAgB","ignoreList":[]}
+{"version":3,"file":"AccordionContent.js","names":["getDevice","React","StyledAccordionContent","AccordionContent","children","maxHeight","onScroll","shouldPreventBottomSpace","browser","createElement","className","$browser","name","$maxHeight","$shouldPreventBottomSpace","displayName"],"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 { AccordionContext } from '../Accordion';\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,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,MAAkC,OAAO;AAGrD,SAASC,sBAAsB,QAAQ,2BAA2B;AAqBlE,MAAMC,gBAA2C,GAAGA,CAAC;EACjDC,QAAQ;EACRC,SAAS;EACTC,QAAQ;EACRC,wBAAwB,GAAG;AAC/B,CAAC,KAAK;EACF,MAAM;IAAEC;EAAQ,CAAC,GAAGR,SAAS,CAAC,CAAC;EAE/B,oBACIC,KAAA,CAAAQ,aAAA,CAACP,sBAAsB;IACnBQ,SAAS,EAAC,+BAA+B;IACzCC,QAAQ,EAAEH,OAAO,EAAEI,IAAoB;IACvCC,UAAU,EAAER,SAAU;IACtBC,QAAQ,EAAEA,QAAS;IACnBQ,yBAAyB,EAAEP;EAAyB,GAEnDH,QACmB,CAAC;AAEjC,CAAC;AAEDD,gBAAgB,CAACY,WAAW,GAAG,kBAAkB;AAEjD,eAAeZ,gBAAgB","ignoreList":[]}

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

@@ -1,44 +1,28 @@
 import styled, { css } from 'styled-components';
 export const StyledAccordionContent = styled.div`
-    color: ${_ref => {
-  let {
-    theme
-  } = _ref;
-  return theme.text;
-}};
-    padding: ${_ref2 => {
-  let {
-    $isWrapped
-  } = _ref2;
-  return $isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px';
-}};
+    color: ${({
+  theme
+}) => theme.text};
+    padding: 0 9px 18px 26px;
 
-    ${_ref3 => {
-  let {
-    $shouldPreventBottomSpace
-  } = _ref3;
-  return $shouldPreventBottomSpace && css`
+    ${({
+  $shouldPreventBottomSpace
+}) => $shouldPreventBottomSpace && css`
             padding-bottom: 0;
-        `;
-}}
+        `}
 
-    ${_ref4 => {
-  let {
-    $maxHeight
-  } = _ref4;
-  return typeof $maxHeight === 'number' && css`
+    ${({
+  $maxHeight
+}) => typeof $maxHeight === 'number' && css`
             max-height: ${$maxHeight}px;
             overflow-y: scroll;
-        `;
-}}
+        `}
 
     // Styles for custom scrollbar
-    ${_ref5 => {
-  let {
-    $browser,
-    theme
-  } = _ref5;
-  return $browser === 'firefox' ? css`
+    ${({
+  $browser,
+  theme
+}) => $browser === 'firefox' ? css`
                   scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;
                   scrollbar-width: thin;
               ` : css`
@@ -59,7 +43,6 @@ export const StyledAccordionContent = styled.div`
                       background-color: rgba(${theme['text-rgb']}, 0.15);
                       border-radius: 20px;
                   }
-              `;
-}}
+              `}
 `;
 //# sourceMappingURL=AccordionContent.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"AccordionContent.styles.js","names":["styled","css","StyledAccordionContent","div","_ref","theme","text","_ref2","$isWrapped","_ref3","$shouldPreventBottomSpace","_ref4","$maxHeight","_ref5","$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    $isWrapped?: boolean;\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: ${({ $isWrapped }) => ($isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px')};\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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAW/C,OAAO,MAAMC,sBAAsB,GAAGF,MAAM,CAACG,GAAgC;AAC7E,aAAaC,IAAA;EAAA,IAAC;IAAEC;EAAmC,CAAC,GAAAD,IAAA;EAAA,OAAKC,KAAK,CAACC,IAAI;AAAA;AACnE,eAAeC,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OAAMC,UAAU,GAAG,iBAAiB,GAAG,gBAAgB;AAAA,CAAC;AACtF;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC;EAA0B,CAAC,GAAAD,KAAA;EAAA,OAC5BC,yBAAyB,IACzBT,GAAG;AACX;AACA,SAAS;AAAA;AACT;AACA,MAAMU,KAAA;EAAA,IAAC;IAAEC;EAAW,CAAC,GAAAD,KAAA;EAAA,OACb,OAAOC,UAAU,KAAK,QAAQ,IAC9BX,GAAG;AACX,0BAA0BW,UAAU;AACpC;AACA,SAAS;AAAA;AACT;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAET;EAAmC,CAAC,GAAAQ,KAAA;EAAA,OAC/CC,QAAQ,KAAK,SAAS,GAChBb,GAAG;AACjB,0CAA0CI,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDJ,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CI,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AAAA;AACf,CAAC","ignoreList":[]}
+{"version":3,"file":"AccordionContent.styles.js","names":["styled","css","StyledAccordionContent","div","theme","text","$shouldPreventBottomSpace","$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,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAU/C,OAAO,MAAMC,sBAAsB,GAAGF,MAAM,CAACG,GAAgC;AAC7E,aAAa,CAAC;EAAEC;AAAmC,CAAC,KAAKA,KAAK,CAACC,IAAI;AACnE;AACA;AACA,MAAM,CAAC;EAAEC;AAA0B,CAAC,KAC5BA,yBAAyB,IACzBL,GAAG;AACX;AACA,SAAS;AACT;AACA,MAAM,CAAC;EAAEM;AAAW,CAAC,KACb,OAAOA,UAAU,KAAK,QAAQ,IAC9BN,GAAG;AACX,0BAA0BM,UAAU;AACpC;AACA,SAAS;AACT;AACA;AACA,MAAM,CAAC;EAAEC,QAAQ;EAAEJ;AAAmC,CAAC,KAC/CI,QAAQ,KAAK,SAAS,GAChBP,GAAG;AACjB,0CAA0CG,KAAK,CAAC,UAAU,CAAC;AAC3D;AACA,eAAe,GACDH,GAAG;AACjB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CG,KAAK,CAAC,UAAU,CAAC;AAChE;AACA;AACA,eAAe;AACf,CAAC","ignoreList":[]}

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js

@@ -1,4 +1,4 @@
-import { AnimatePresence, MotionConfig } from 'framer-motion';
+import { AnimatePresence, MotionConfig } from 'motion/react';
 import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useUuid } from '../../../hooks/uuid';
 import { AreaContext } from '../../area-provider/AreaContextProvider';
@@ -12,13 +12,12 @@ export const AccordionGroupContext = /*#__PURE__*/React.createContext({
   accordionGroupUuid: undefined
 });
 AccordionGroupContext.displayName = 'AccordionGroupContext';
-const AccordionGroup = _ref => {
-  let {
-    children,
-    isWrapped,
-    onClose,
-    onOpen
-  } = _ref;
+const AccordionGroup = ({
+  children,
+  isWrapped,
+  onClose,
+  onOpen
+}) => {
   const [openAccordionUuid, setOpenAccordionUuid] = useState(undefined);
   const [accordionUuids, setAccordionUuids] = useState();
   const accordionGroupId = useUuid();
@@ -29,10 +28,9 @@ const AccordionGroup = _ref => {
   const areaProvider = useContext(AreaContext);
   const childrenCount = React.Children.count(children);
   const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;
-  const updateOpenAccordionUuid = useCallback(function (uuid) {
-    let {
-      shouldOnlyOpen
-    } = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  const updateOpenAccordionUuid = useCallback((uuid, {
+    shouldOnlyOpen
+  } = {}) => {
     setOpenAccordionUuid(currentOpenAccordionUuid => {
       if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {
         return undefined;

package/lib/esm/components/accordion/accordion-group/AccordionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionGroup.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","_ref","children","onClose","onOpen","setAccordionUuids","accordionGroupId","isInitialRenderRef","uuids","areaProvider","childrenCount","Children","count","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","arguments","length","currentOpenAccordionUuid","elements","document","querySelectorAll","elementUuids","Array","from","map","el","getAttribute","result","forEach","elementUuid","groupUuid","accordionUuid","split","push","current","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    Dispatch,\n    FC,\n    ReactNode,\n    SetStateAction,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n    isWrapped?: boolean;\n    openAccordionUuid?: string;\n    setOpenAccordionUuid?: Dispatch<SetStateAction<string | undefined>>;\n    updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n    accordionUuids?: string[];\n    updateAccordionUuids?: IUpdateAccordionUuids;\n    accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n    isWrapped: undefined,\n    openAccordionUuid: undefined,\n    setOpenAccordionUuid: undefined,\n    updateOpenAccordionUuid: undefined,\n    accordionUuids: undefined,\n    updateAccordionUuids: undefined,\n    accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n    /**\n     * The Accordions that should be grouped. Accordions with the same group are\n     * automatically closed when an `Accordion` of the group is opened.\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when all accordions in group are closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when any accordion in group will be opened.\n     */\n    onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n    const [openAccordionUuid, setOpenAccordionUuid] =\n        useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n    const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n    const accordionGroupId = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const updateAccordionUuids = useCallback((uuids: string[]) => {\n        setAccordionUuids(uuids);\n    }, []);\n\n    const areaProvider = useContext(AreaContext);\n\n    const childrenCount = React.Children.count(children);\n\n    const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n    const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenAccordionUuid((currentOpenAccordionUuid) => {\n                if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenAccordionUuid],\n    );\n\n    useEffect(() => {\n        if (childrenCount === 0) return;\n\n        const elements = document.querySelectorAll('[data-uuid]');\n        const elementUuids = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n        const result: string[] = [];\n\n        elementUuids.forEach((elementUuid) => {\n            const [groupUuid, accordionUuid] = (elementUuid ?? '').split('---');\n\n            if (groupUuid === accordionGroupId && typeof accordionUuid === 'string') {\n                result.push(accordionUuid);\n            }\n        });\n\n        updateAccordionUuids(result);\n    }, [accordionGroupId, childrenCount, updateAccordionUuids]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (typeof openAccordionUuid === 'string') {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose, onOpen, openAccordionUuid]);\n\n    const providerValue = useMemo<IAccordionGroupContext>(\n        () => ({\n            isWrapped: shouldWrap,\n            openAccordionUuid,\n            setOpenAccordionUuid,\n            updateOpenAccordionUuid,\n            updateAccordionUuids,\n            accordionUuids,\n            accordionGroupUuid: accordionGroupId,\n        }),\n        [\n            accordionGroupId,\n            accordionUuids,\n            shouldWrap,\n            openAccordionUuid,\n            updateAccordionUuids,\n            updateOpenAccordionUuid,\n        ],\n    );\n\n    return (\n        <AccordionGroupContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </AccordionGroupContext.Provider>\n    );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"AccordionGroup.js","names":["AnimatePresence","MotionConfig","React","useCallback","useContext","useEffect","useMemo","useRef","useState","useUuid","AreaContext","AccordionGroupContext","createContext","isWrapped","undefined","openAccordionUuid","setOpenAccordionUuid","updateOpenAccordionUuid","accordionUuids","updateAccordionUuids","accordionGroupUuid","displayName","AccordionGroup","children","onClose","onOpen","setAccordionUuids","accordionGroupId","isInitialRenderRef","uuids","areaProvider","childrenCount","Children","count","shouldWrap","shouldChangeColor","uuid","shouldOnlyOpen","currentOpenAccordionUuid","elements","document","querySelectorAll","elementUuids","Array","from","map","el","getAttribute","result","forEach","elementUuid","groupUuid","accordionUuid","split","push","current","providerValue","createElement","Provider","value","transition","type","initial"],"sources":["../../../../../src/components/accordion/accordion-group/AccordionGroup.tsx"],"sourcesContent":["import { AnimatePresence, MotionConfig } from 'motion/react';\nimport React, {\n    Dispatch,\n    FC,\n    ReactNode,\n    SetStateAction,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../../hooks/uuid';\nimport { AreaContext } from '../../area-provider/AreaContextProvider';\n\ntype IUpdateOpenAccordionUuid = (uuid: string, options?: { shouldOnlyOpen?: boolean }) => void;\ntype IUpdateAccordionUuids = (uuids: string[]) => void;\n\ninterface IAccordionGroupContext {\n    isWrapped?: boolean;\n    openAccordionUuid?: string;\n    setOpenAccordionUuid?: Dispatch<SetStateAction<string | undefined>>;\n    updateOpenAccordionUuid?: IUpdateOpenAccordionUuid;\n    accordionUuids?: string[];\n    updateAccordionUuids?: IUpdateAccordionUuids;\n    accordionGroupUuid?: string;\n}\n\nexport const AccordionGroupContext = React.createContext<IAccordionGroupContext>({\n    isWrapped: undefined,\n    openAccordionUuid: undefined,\n    setOpenAccordionUuid: undefined,\n    updateOpenAccordionUuid: undefined,\n    accordionUuids: undefined,\n    updateAccordionUuids: undefined,\n    accordionGroupUuid: undefined,\n});\n\nAccordionGroupContext.displayName = 'AccordionGroupContext';\n\ntype AccordionGroupProps = {\n    /**\n     * The Accordions that should be grouped. Accordions with the same group are\n     * automatically closed when an `Accordion` of the group is opened.\n     */\n    children: ReactNode;\n    /**\n     * This value must be set for nested AccordionGroup components. This adjusts the style of\n     * the head and the padding of the content accordions.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when all accordions in group are closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when any accordion in group will be opened.\n     */\n    onOpen?: VoidFunction;\n};\n\nconst AccordionGroup: FC<AccordionGroupProps> = ({ children, isWrapped, onClose, onOpen }) => {\n    const [openAccordionUuid, setOpenAccordionUuid] =\n        useState<IAccordionGroupContext['openAccordionUuid']>(undefined);\n    const [accordionUuids, setAccordionUuids] = useState<string[]>();\n\n    const accordionGroupId = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const updateAccordionUuids = useCallback((uuids: string[]) => {\n        setAccordionUuids(uuids);\n    }, []);\n\n    const areaProvider = useContext(AreaContext);\n\n    const childrenCount = React.Children.count(children);\n\n    const shouldWrap = areaProvider.shouldChangeColor ? true : isWrapped;\n\n    const updateOpenAccordionUuid = useCallback<IUpdateOpenAccordionUuid>(\n        (uuid, { shouldOnlyOpen } = {}) => {\n            setOpenAccordionUuid((currentOpenAccordionUuid) => {\n                if (currentOpenAccordionUuid === uuid && shouldOnlyOpen !== true) {\n                    return undefined;\n                }\n\n                return uuid;\n            });\n        },\n        [setOpenAccordionUuid],\n    );\n\n    useEffect(() => {\n        if (childrenCount === 0) return;\n\n        const elements = document.querySelectorAll('[data-uuid]');\n        const elementUuids = Array.from(elements).map((el) => el.getAttribute('data-uuid'));\n\n        const result: string[] = [];\n\n        elementUuids.forEach((elementUuid) => {\n            const [groupUuid, accordionUuid] = (elementUuid ?? '').split('---');\n\n            if (groupUuid === accordionGroupId && typeof accordionUuid === 'string') {\n                result.push(accordionUuid);\n            }\n        });\n\n        updateAccordionUuids(result);\n    }, [accordionGroupId, childrenCount, updateAccordionUuids]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (typeof openAccordionUuid === 'string') {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [onClose, onOpen, openAccordionUuid]);\n\n    const providerValue = useMemo<IAccordionGroupContext>(\n        () => ({\n            isWrapped: shouldWrap,\n            openAccordionUuid,\n            setOpenAccordionUuid,\n            updateOpenAccordionUuid,\n            updateAccordionUuids,\n            accordionUuids,\n            accordionGroupUuid: accordionGroupId,\n        }),\n        [\n            accordionGroupId,\n            accordionUuids,\n            shouldWrap,\n            openAccordionUuid,\n            updateAccordionUuids,\n            updateOpenAccordionUuid,\n        ],\n    );\n\n    return (\n        <AccordionGroupContext.Provider value={providerValue}>\n            <MotionConfig transition={{ type: 'tween' }}>\n                <AnimatePresence initial={false}>{children}</AnimatePresence>\n            </MotionConfig>\n        </AccordionGroupContext.Provider>\n    );\n};\n\nAccordionGroup.displayName = 'AccordionGroup';\n\nexport default AccordionGroup;\n"],"mappings":"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","ignoreList":[]}