@chayns-components/core 5.0.0-beta.3 → 5.0.0-beta.30

package/lib/components/accordion/Accordion.d.ts

@@ -1,10 +1,12 @@
-import { FC, ReactNode } from 'react';
+import React, { ChangeEventHandler, FC, ReactNode } from 'react';
+export declare const AccordionContext: React.Context<{
+    isWrapped: boolean;
+}>;
 declare type AccordionProps = {
     /**
-     * Defines the group of the Accordion. Accordions with the same group are
-     * automatically closed when an Accordion of the group is opened.
+     * The content of the accordion body
      */
-    group?: string;
+    children: ReactNode;
     /**
      * The icon that is displayed in front of the title
      */
@@ -13,19 +15,58 @@ declare type AccordionProps = {
      * This can be used to automatically expand the Accordion during the first render.
      */
     isDefaultOpen?: boolean;
+    /**
+     * This will disable the Accordion so that it cannot be opened and will gray out the title.
+     */
+    isDisabled?: boolean;
+    /**
+     * This can be used so that the Accordion cannot be opened or closed.
+     * In addition, in this case the icon is exchanged to mark the Accordions.
+     */
+    isFixed?: boolean;
+    /**
+     * This will gray out the title of the Accordion to indicate hidden content, for example.
+     */
+    isTitleGreyed?: boolean;
     /**
      * This value must be set for nested Accordions. This adjusts the style of
      * the head and the padding of the content.
      */
     isWrapped?: boolean;
+    /**
+     * Function that is executed when the accordion will be closed.
+     */
+    onClose?: VoidFunction;
+    /**
+     * Function that is executed when the accordion will be opened.
+     */
+    onOpen?: VoidFunction;
+    /**
+     * Function that is executed when the text of the search in the accordion
+     * head changes. When this function is given, the search field is displayed
+     * in the Accordion Head.
+     */
+    onSearchChange?: ChangeEventHandler<HTMLInputElement>;
     /**
      * Content to be displayed on the right side in the head of the Accordion
      */
-    right?: ReactNode;
+    rightElement?: ReactNode;
+    /**
+     * Icon to be displayed on the right side in the search input
+     */
+    searchIcon?: string[];
+    /**
+     * The placeholder to be used for the search
+     */
+    searchPlaceholder?: string;
     /**
      * Title of the Accordion displayed in the head
      */
     title: string;
+    /**
+     * Additional elements to be displayed in the header next to the title.
+     */
+    titleElement?: ReactNode;
 };
 declare const Accordion: FC<AccordionProps>;
 export default Accordion;

package/lib/components/accordion/Accordion.js

@@ -1,25 +1,25 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.AccordionContext = void 0;
 
 var _framerMotion = require("framer-motion");
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _uuid = require("../../hooks/uuid");
 
 var _AccordionBody = _interopRequireDefault(require("./accordion-body/AccordionBody"));
 
-var _AccordionContent = _interopRequireDefault(require("./accordion-content/AccordionContent"));
+var _AccordionGroup = require("./accordion-group/AccordionGroup");
 
 var _AccordionHead = _interopRequireDefault(require("./accordion-head/AccordionHead"));
 
-var _templateObject, _templateObject2, _templateObject3;
+var _Accordion = require("./Accordion.styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -39,155 +39,110 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledAccordion = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n\n    margin-bottom: ", ";\n\n    transition: background-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease,\n        margin-bottom 0.2s ease;\n\n    ", "\n"])), function (_ref) {
-  var isOpen = _ref.isOpen,
-      isWrapped = _ref.isWrapped;
-  return isOpen && !isWrapped && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: rgba(", ", 0.85);\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        "])), function (_ref2) {
-    var theme = _ref2.theme;
-    return theme['100-rgb'];
-  });
-}, function (_ref3) {
-  var isOpen = _ref3.isOpen,
-      isWrapped = _ref3.isWrapped;
-  return isOpen && !isWrapped ? '30px' : '0px';
-}, function (_ref4) {
-  var isWrapped = _ref4.isWrapped;
-  return !isWrapped && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(", ", 0.85);\n            }\n        "])), function (_ref5) {
-    var theme = _ref5.theme;
-    return theme['100-rgb'];
-  });
+var AccordionContext = /*#__PURE__*/_react.default.createContext({
+  isWrapped: false
 });
 
-var Accordion = function Accordion(_ref6) {
-  var children = _ref6.children,
-      group = _ref6.group,
-      icon = _ref6.icon,
-      _ref6$isDefaultOpen = _ref6.isDefaultOpen,
-      isDefaultOpen = _ref6$isDefaultOpen === void 0 ? false : _ref6$isDefaultOpen,
-      isWrapped = _ref6.isWrapped,
-      right = _ref6.right,
-      title = _ref6.title;
+exports.AccordionContext = AccordionContext;
+AccordionContext.displayName = 'AccordionContext';
+
+var Accordion = function Accordion(_ref) {
+  var children = _ref.children,
+      icon = _ref.icon,
+      _ref$isDefaultOpen = _ref.isDefaultOpen,
+      isDefaultOpen = _ref$isDefaultOpen === void 0 ? false : _ref$isDefaultOpen,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      _ref$isFixed = _ref.isFixed,
+      isFixed = _ref$isFixed === void 0 ? false : _ref$isFixed,
+      _ref$isTitleGreyed = _ref.isTitleGreyed,
+      isTitleGreyed = _ref$isTitleGreyed === void 0 ? false : _ref$isTitleGreyed,
+      _ref$isWrapped = _ref.isWrapped,
+      isWrapped = _ref$isWrapped === void 0 ? false : _ref$isWrapped,
+      onClose = _ref.onClose,
+      onOpen = _ref.onOpen,
+      onSearchChange = _ref.onSearchChange,
+      rightElement = _ref.rightElement,
+      searchIcon = _ref.searchIcon,
+      searchPlaceholder = _ref.searchPlaceholder,
+      title = _ref.title,
+      titleElement = _ref.titleElement;
+
+  var _useContext = (0, _react.useContext)(_AccordionGroup.AccordionGroupContext),
+      openAccordionUuid = _useContext.openAccordionUuid,
+      updateOpenAccordionUuid = _useContext.updateOpenAccordionUuid;
 
   var _useState = (0, _react.useState)(isDefaultOpen),
       _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
+      isAccordionOpen = _useState2[0],
+      setIsAccordionOpen = _useState2[1];
 
-  var accordionRef = (0, _react.useRef)(null);
+  var uuid = (0, _uuid.useUuid)();
+  var isInitialRenderRef = (0, _react.useRef)(true);
+  var isInGroup = typeof updateOpenAccordionUuid === 'function';
+  var isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;
   var handleHeadClick = (0, _react.useCallback)(function () {
-    if (!isOpen && typeof group === 'string') {
-      var customEvent = new CustomEvent('accordionOpen', {
-        detail: {
-          group: group,
-          ref: accordionRef
-        }
-      });
-      document.body.dispatchEvent(customEvent);
+    if (isDisabled) {
+      return;
     }
 
-    setIsOpen(!isOpen);
-  }, [group, isOpen]);
-  var handleAccordionOpen = (0, _react.useCallback)(function (_ref7) {
-    var detail = _ref7.detail;
+    if (typeof updateOpenAccordionUuid === 'function') {
+      updateOpenAccordionUuid(uuid);
+    }
 
-    if (isOpen && group === detail.group && accordionRef.current !== detail.ref.current) {
-      setIsOpen(false);
+    setIsAccordionOpen(function (currentIsAccordionOpen) {
+      return !currentIsAccordionOpen;
+    });
+  }, [isDisabled, updateOpenAccordionUuid, uuid]);
+  (0, _react.useEffect)(function () {
+    if (isInitialRenderRef.current) {
+      isInitialRenderRef.current = false;
+    } else if (isOpen) {
+      if (typeof onOpen === 'function') {
+        onOpen();
+      }
+    } else if (typeof onClose === 'function') {
+      onClose();
     }
-  }, [group, isOpen]);
+  }, [isOpen, onClose, onOpen]);
   (0, _react.useEffect)(function () {
-    // @ts-expect-error: Type is correct here because its a custom event
-    document.body.addEventListener('accordionOpen', handleAccordionOpen);
-    return function () {
-      // @ts-expect-error: Type is correct here because its a custom event
-      document.body.removeEventListener('accordionOpen', handleAccordionOpen);
-    };
-  }, [handleAccordionOpen]);
-  var items = (0, _react.useMemo)(function () {
-    return getBodyItems(children, {
-      isWrapped: isWrapped
-    });
-  }, [children, isWrapped]);
-  return /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
-    transition: {
-      duration: 0.25
+    if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {
+      updateOpenAccordionUuid(uuid, {
+        shouldOnlyOpen: true
+      });
     }
-  }, /*#__PURE__*/_react.default.createElement(StyledAccordion, {
+  }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);
+  return /*#__PURE__*/_react.default.createElement(_Accordion.StyledAccordion, {
     className: "beta-chayns-accordion",
     isOpen: isOpen,
-    isWrapped: isWrapped,
-    ref: accordionRef
+    isWrapped: isWrapped
+  }, /*#__PURE__*/_react.default.createElement(AccordionContext.Provider, {
+    value: {
+      isWrapped: isWrapped
+    }
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.MotionConfig, {
+    transition: {
+      type: 'tween'
+    }
   }, /*#__PURE__*/_react.default.createElement(_AccordionHead.default, {
     icon: icon,
     isOpen: isOpen,
+    isFixed: isFixed,
+    isTitleGreyed: isTitleGreyed || isDisabled,
     isWrapped: isWrapped,
     onClick: handleHeadClick,
-    right: right,
-    title: title
+    onSearchChange: onSearchChange,
+    rightElement: rightElement,
+    searchIcon: searchIcon,
+    searchPlaceholder: searchPlaceholder,
+    title: title,
+    titleElement: titleElement
   }), /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, null, items))));
+  }, isOpen && /*#__PURE__*/_react.default.createElement(_AccordionBody.default, null, children)))));
 };
 
 Accordion.displayName = 'Accordion';
-var _default = Accordion; //region Utils
-
+var _default = Accordion;
 exports.default = _default;
-
-var isAccordion = function isAccordion(maybeAccordion) {
-  return maybeAccordion !== null && maybeAccordion !== undefined && typeof maybeAccordion !== 'boolean' && typeof maybeAccordion !== 'string' && typeof maybeAccordion !== 'number' && 'type' in maybeAccordion && (maybeAccordion === null || maybeAccordion === void 0 ? void 0 : maybeAccordion.type) === Accordion;
-};
-
-var getBodyItems = function getBodyItems(children, _ref8) {
-  var _children;
-
-  var isWrapped = _ref8.isWrapped;
-  var items = [];
-  var contentItems = [];
-
-  if (children && typeof children !== 'boolean' && typeof children !== 'string' && typeof children !== 'number' && 'type' in children && ((_children = children) === null || _children === void 0 ? void 0 : _children.type) === _react.default.Fragment) {
-    children = children.props.children;
-  }
-
-  if (Array.isArray(children)) {
-    children.forEach(function (child) {
-      if (!child) {
-        return;
-      }
-
-      if (isAccordion(child)) {
-        if (contentItems.length > 0) {
-          items.push( /*#__PURE__*/_react.default.createElement(_AccordionContent.default, {
-            key: "accordionContent__".concat(items.length),
-            isWrapped: isWrapped
-          }, contentItems));
-          contentItems = [];
-        }
-
-        items.push(child);
-      } else {
-        contentItems.push(child);
-      }
-    });
-
-    if (contentItems.length > 0) {
-      items.push( /*#__PURE__*/_react.default.createElement(_AccordionContent.default, {
-        key: "accordionContent__".concat(items.length),
-        isWrapped: isWrapped
-      }, contentItems));
-    }
-  } else {
-    if (isAccordion(children)) {
-      items.push(children);
-    } else {
-      items.push( /*#__PURE__*/_react.default.createElement(_AccordionContent.default, {
-        key: "accordionContent",
-        isWrapped: isWrapped
-      }, children));
-    }
-  }
-
-  return items;
-}; //endregion
 //# sourceMappingURL=Accordion.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["StyledAccordion","styled","div","isOpen","isWrapped","css","theme","Accordion","children","group","icon","isDefaultOpen","right","title","setIsOpen","accordionRef","handleHeadClick","customEvent","CustomEvent","detail","ref","document","body","dispatchEvent","handleAccordionOpen","current","addEventListener","removeEventListener","items","getBodyItems","duration","displayName","isAccordion","maybeAccordion","undefined","type","contentItems","React","Fragment","props","Array","isArray","forEach","child","length","push"],"mappings":"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","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, { FC, ReactNode, useCallback, useEffect, useMemo, useRef, useState } from 'react';\nimport styled, { css } from 'styled-components';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport AccordionContent from './accordion-content/AccordionContent';\nimport AccordionHead from './accordion-head/AccordionHead';\n\ntype AccordionProps = {\n    /**\n     * Defines the group of the Accordion. Accordions with the same group are\n     * automatically closed when an Accordion of the group is opened.\n     */\n    group?: string;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    right?: ReactNode;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n};\n\ninterface AccordionOpenData {\n    group: string;\n    ref: React.RefObject<HTMLDivElement>;\n}\n\ntype StyledMotionAccordionProps = Omit<AccordionProps, 'title'> & {\n    isOpen: boolean;\n};\n\nconst StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({ isOpen, isWrapped }) =>\n        isOpen &&\n        !isWrapped &&\n        css`\n            background-color: rgba(${({ theme }) => theme['100-rgb']}, 0.85);\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        `}\n\n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n\n    transition: background-color 0.2s ease, border-radius 0.2s ease, box-shadow 0.2s ease,\n        margin-bottom 0.2s ease;\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(${({ theme }) => theme['100-rgb']}, 0.85);\n            }\n        `}\n`;\n\nconst Accordion: FC<AccordionProps> = ({\n    children,\n    group,\n    icon,\n    isDefaultOpen = false,\n    isWrapped,\n    right,\n    title,\n}) => {\n    const [isOpen, setIsOpen] = useState(isDefaultOpen);\n\n    const accordionRef = useRef<HTMLDivElement>(null);\n\n    const handleHeadClick = useCallback(() => {\n        if (!isOpen && typeof group === 'string') {\n            const customEvent = new CustomEvent<AccordionOpenData>('accordionOpen', {\n                detail: { group, ref: accordionRef },\n            });\n\n            document.body.dispatchEvent(customEvent);\n        }\n\n        setIsOpen(!isOpen);\n    }, [group, isOpen]);\n\n    const handleAccordionOpen = useCallback(\n        ({ detail }: CustomEvent<AccordionOpenData>) => {\n            if (isOpen && group === detail.group && accordionRef.current !== detail.ref.current) {\n                setIsOpen(false);\n            }\n        },\n        [group, isOpen]\n    );\n\n    useEffect(() => {\n        // @ts-expect-error: Type is correct here because its a custom event\n        document.body.addEventListener('accordionOpen', handleAccordionOpen);\n\n        return () => {\n            // @ts-expect-error: Type is correct here because its a custom event\n            document.body.removeEventListener('accordionOpen', handleAccordionOpen);\n        };\n    }, [handleAccordionOpen]);\n\n    const items = useMemo(() => getBodyItems(children, { isWrapped }), [children, isWrapped]);\n\n    return (\n        <MotionConfig transition={{ duration: 0.25 }}>\n            <StyledAccordion\n                className=\"beta-chayns-accordion\"\n                isOpen={isOpen}\n                isWrapped={isWrapped}\n                ref={accordionRef}\n            >\n                <AccordionHead\n                    icon={icon}\n                    isOpen={isOpen}\n                    isWrapped={isWrapped}\n                    onClick={handleHeadClick}\n                    right={right}\n                    title={title}\n                />\n                <AnimatePresence initial={false}>\n                    {isOpen && <AccordionBody>{items}</AccordionBody>}\n                </AnimatePresence>\n            </StyledAccordion>\n        </MotionConfig>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n\n//region Utils\nconst isAccordion = (maybeAccordion: ReactNode): boolean =>\n    maybeAccordion !== null &&\n    maybeAccordion !== undefined &&\n    typeof maybeAccordion !== 'boolean' &&\n    typeof maybeAccordion !== 'string' &&\n    typeof maybeAccordion !== 'number' &&\n    'type' in maybeAccordion &&\n    maybeAccordion?.type === Accordion;\n\ninterface GetBodyItemsOptions {\n    isWrapped?: boolean;\n}\n\nconst getBodyItems = (children: ReactNode, { isWrapped }: GetBodyItemsOptions) => {\n    const items: ReactNode[] = [];\n    let contentItems: ReactNode[] = [];\n\n    if (\n        children &&\n        typeof children !== 'boolean' &&\n        typeof children !== 'string' &&\n        typeof children !== 'number' &&\n        'type' in children &&\n        children?.type === React.Fragment\n    ) {\n        children = children.props.children;\n    }\n\n    if (Array.isArray(children)) {\n        children.forEach((child) => {\n            if (!child) {\n                return;\n            }\n\n            if (isAccordion(child)) {\n                if (contentItems.length > 0) {\n                    items.push(\n                        <AccordionContent\n                            key={`accordionContent__${items.length}`}\n                            isWrapped={isWrapped}\n                        >\n                            {contentItems}\n                        </AccordionContent>\n                    );\n\n                    contentItems = [];\n                }\n                items.push(child);\n            } else {\n                contentItems.push(child as JSX.Element);\n            }\n        });\n\n        if (contentItems.length > 0) {\n            items.push(\n                <AccordionContent key={`accordionContent__${items.length}`} isWrapped={isWrapped}>\n                    {contentItems}\n                </AccordionContent>\n            );\n        }\n    } else {\n        if (isAccordion(children)) {\n            items.push(children);\n        } else {\n            items.push(\n                <AccordionContent key=\"accordionContent\" isWrapped={isWrapped}>\n                    {children}\n                </AccordionContent>\n            );\n        }\n    }\n\n    return items;\n};\n//endregion\n"],"file":"Accordion.js"}
+{"version":3,"sources":["../../../src/components/accordion/Accordion.tsx"],"names":["AccordionContext","React","createContext","isWrapped","displayName","Accordion","children","icon","isDefaultOpen","isDisabled","isFixed","isTitleGreyed","onClose","onOpen","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","AccordionGroupContext","openAccordionUuid","updateOpenAccordionUuid","isAccordionOpen","setIsAccordionOpen","uuid","isInitialRenderRef","isInGroup","isOpen","handleHeadClick","currentIsAccordionOpen","current","shouldOnlyOpen","type"],"mappings":"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","sourcesContent":["import { AnimatePresence, MotionConfig } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    ReactNode,\n    useCallback,\n    useContext,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport { useUuid } from '../../hooks/uuid';\nimport AccordionBody from './accordion-body/AccordionBody';\nimport { AccordionGroupContext } from './accordion-group/AccordionGroup';\nimport AccordionHead from './accordion-head/AccordionHead';\nimport { StyledAccordion } from './Accordion.styles';\n\nexport const AccordionContext = React.createContext({ isWrapped: false });\n\nAccordionContext.displayName = 'AccordionContext';\n\ntype AccordionProps = {\n    /**\n     * The content of the accordion body\n     */\n    children: ReactNode;\n    /**\n     * The icon that is displayed in front of the title\n     */\n    icon?: string;\n    /**\n     * This can be used to automatically expand the Accordion during the first render.\n     */\n    isDefaultOpen?: boolean;\n    /**\n     * This will disable the Accordion so that it cannot be opened and will gray out the title.\n     */\n    isDisabled?: boolean;\n    /**\n     * This can be used so that the Accordion cannot be opened or closed.\n     * In addition, in this case the icon is exchanged to mark the Accordions.\n     */\n    isFixed?: boolean;\n    /**\n     * This will gray out the title of the Accordion to indicate hidden content, for example.\n     */\n    isTitleGreyed?: boolean;\n    /**\n     * This value must be set for nested Accordions. This adjusts the style of\n     * the head and the padding of the content.\n     */\n    isWrapped?: boolean;\n    /**\n     * Function that is executed when the accordion will be closed.\n     */\n    onClose?: VoidFunction;\n    /**\n     * Function that is executed when the accordion will be opened.\n     */\n    onOpen?: VoidFunction;\n    /**\n     * Function that is executed when the text of the search in the accordion\n     * head changes. When this function is given, the search field is displayed\n     * in the Accordion Head.\n     */\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    /**\n     * Content to be displayed on the right side in the head of the Accordion\n     */\n    rightElement?: ReactNode;\n    /**\n     * Icon to be displayed on the right side in the search input\n     */\n    searchIcon?: string[];\n    /**\n     * The placeholder to be used for the search\n     */\n    searchPlaceholder?: string;\n    /**\n     * Title of the Accordion displayed in the head\n     */\n    title: string;\n    /**\n     * Additional elements to be displayed in the header next to the title.\n     */\n    titleElement?: ReactNode;\n};\n\nconst Accordion: FC<AccordionProps> = ({\n    children,\n    icon,\n    isDefaultOpen = false,\n    isDisabled = false,\n    isFixed = false,\n    isTitleGreyed = false,\n    isWrapped = false,\n    onClose,\n    onOpen,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    title,\n    titleElement,\n}) => {\n    const { openAccordionUuid, updateOpenAccordionUuid } = useContext(AccordionGroupContext);\n\n    const [isAccordionOpen, setIsAccordionOpen] = useState<boolean>(isDefaultOpen);\n\n    const uuid = useUuid();\n\n    const isInitialRenderRef = useRef(true);\n\n    const isInGroup = typeof updateOpenAccordionUuid === 'function';\n\n    const isOpen = isInGroup ? openAccordionUuid === uuid : isAccordionOpen;\n\n    const handleHeadClick = useCallback(() => {\n        if (isDisabled) {\n            return;\n        }\n\n        if (typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid);\n        }\n\n        setIsAccordionOpen((currentIsAccordionOpen) => !currentIsAccordionOpen);\n    }, [isDisabled, updateOpenAccordionUuid, uuid]);\n\n    useEffect(() => {\n        if (isInitialRenderRef.current) {\n            isInitialRenderRef.current = false;\n        } else if (isOpen) {\n            if (typeof onOpen === 'function') {\n                onOpen();\n            }\n        } else if (typeof onClose === 'function') {\n            onClose();\n        }\n    }, [isOpen, onClose, onOpen]);\n\n    useEffect(() => {\n        if (isDefaultOpen && typeof updateOpenAccordionUuid === 'function') {\n            updateOpenAccordionUuid(uuid, { shouldOnlyOpen: true });\n        }\n    }, [isDefaultOpen, updateOpenAccordionUuid, uuid]);\n\n    return (\n        <StyledAccordion className=\"beta-chayns-accordion\" isOpen={isOpen} isWrapped={isWrapped}>\n            <AccordionContext.Provider value={{ isWrapped }}>\n                <MotionConfig transition={{ type: 'tween' }}>\n                    <AccordionHead\n                        icon={icon}\n                        isOpen={isOpen}\n                        isFixed={isFixed}\n                        isTitleGreyed={isTitleGreyed || isDisabled}\n                        isWrapped={isWrapped}\n                        onClick={handleHeadClick}\n                        onSearchChange={onSearchChange}\n                        rightElement={rightElement}\n                        searchIcon={searchIcon}\n                        searchPlaceholder={searchPlaceholder}\n                        title={title}\n                        titleElement={titleElement}\n                    />\n                    <AnimatePresence initial={false}>\n                        {isOpen && <AccordionBody>{children}</AccordionBody>}\n                    </AnimatePresence>\n                </MotionConfig>\n            </AccordionContext.Provider>\n        </StyledAccordion>\n    );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"file":"Accordion.js"}

package/lib/components/accordion/Accordion.styles.d.ts

@@ -0,0 +1,6 @@
+export declare const StyledAccordion: import("styled-components").StyledComponent<"div", any, {
+    isOpen: boolean;
+    isWrapped: boolean;
+} & {
+    theme: import("../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,40 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordion = void 0;
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _templateObject, _templateObject2, _templateObject3;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledAccordion = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", "\n\n    margin-bottom: ", ";\n    transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n\n    ", "\n"])), function (_ref) {
+  var isOpen = _ref.isOpen,
+      isWrapped = _ref.isWrapped;
+  return isOpen && !isWrapped && (0, _styledComponents.css)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n            background-color: rgba(\n                ", ",\n                0.85\n            );\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        "])), function (_ref2) {
+    var theme = _ref2.theme;
+    return theme['100-rgb'];
+  });
+}, function (_ref3) {
+  var isOpen = _ref3.isOpen,
+      isWrapped = _ref3.isWrapped;
+  return isOpen && !isWrapped ? '30px' : '0px';
+}, function (_ref4) {
+  var isWrapped = _ref4.isWrapped;
+  return !isWrapped && (0, _styledComponents.css)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(\n                    ", ",\n                    0.85\n                );\n            }\n        "])), function (_ref5) {
+    var theme = _ref5.theme;
+    return theme['100-rgb'];
+  });
+});
+
+exports.StyledAccordion = StyledAccordion;
+//# sourceMappingURL=Accordion.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/accordion/Accordion.styles.ts"],"names":["StyledAccordion","styled","div","isOpen","isWrapped","css","theme"],"mappings":";;;;;;;;;AAAA;;;;;;;;;;AAQO,IAAMA,eAAe,GAAGC,0BAAOC,GAAV,wPACtB;AAAA,MAAGC,MAAH,QAAGA,MAAH;AAAA,MAAWC,SAAX,QAAWA,SAAX;AAAA,SACED,MAAM,IACN,CAACC,SADD,QAEAC,qBAFA,6VAIU;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,WAA2CA,KAAK,CAAC,SAAD,CAAhD;AAAA,GAJV,CADF;AAAA,CADsB,EAaP;AAAA,MAAGH,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,MAAvB,GAAgC,KAA5D;AAAA,CAbO,EAiBtB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACE,CAACA,SAAD,QACAC,qBADA,4QAMc;AAAA,QAAGC,KAAH,SAAGA,KAAH;AAAA,WAA2CA,KAAK,CAAC,SAAD,CAAhD;AAAA,GANd,CADF;AAAA,CAjBsB,CAArB","sourcesContent":["import styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionProps = WithTheme<{\n    isOpen: boolean;\n    isWrapped: boolean;\n}>;\n\nexport const StyledAccordion = styled.div<StyledMotionAccordionProps>`\n    ${({ isOpen, isWrapped }) =>\n        isOpen &&\n        !isWrapped &&\n        css`\n            background-color: rgba(\n                ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n                0.85\n            );\n            border-radius: 3px; // ToDo: Add correct border-radius here\n            box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.15); // ToDo: Add correct box-shadow here\n        `}\n\n    margin-bottom: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '30px' : '0px')};\n    transition: background-color 0.3s ease, border-radius 0.3s ease, box-shadow 0.3s ease,\n        margin-bottom 0.3s ease;\n\n    ${({ isWrapped }) =>\n        !isWrapped &&\n        css`\n            margin-top: 10px;\n\n            &:hover {\n                background-color: rgba(\n                    ${({ theme }: StyledMotionAccordionProps) => theme['100-rgb']},\n                    0.85\n                );\n            }\n        `}\n`;\n"],"file":"Accordion.styles.js"}

package/lib/components/accordion/accordion-body/AccordionBody.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
-declare type AccordionBodyProps = {};
-declare const AccordionBody: FC<AccordionBodyProps>;
+declare const AccordionBody: FC;
 export default AccordionBody;

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

@@ -5,23 +5,15 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _framerMotion = require("framer-motion");
-
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _templateObject;
+var _AccordionBody = require("./AccordionBody.styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledMotionAccordionBody = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n"])));
-
 var AccordionBody = function AccordionBody(_ref) {
   var children = _ref.children;
-  return /*#__PURE__*/_react.default.createElement(StyledMotionAccordionBody, {
+  return /*#__PURE__*/_react.default.createElement(_AccordionBody.StyledMotionAccordionBody, {
     animate: {
       height: 'auto',
       opacity: 1

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"names":["StyledMotionAccordionBody","motion","div","AccordionBody","children","height","opacity","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;;;;;AAIA,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,8FAA/B;;AAIA,IAAMC,aAAqC,GAAG,SAAxCA,aAAwC;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBAC1C,6BAAC,yBAAD;AACI,IAAA,OAAO,EAAE;AAAEC,MAAAA,MAAM,EAAE,MAAV;AAAkBC,MAAAA,OAAO,EAAE;AAA3B,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,IAAI,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAHV;AAII,IAAA,OAAO,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB;AAJb,KAMKF,QANL,CAD0C;AAAA,CAA9C;;AAWAD,aAAa,CAACI,WAAd,GAA4B,eAA5B;eAEeJ,a","sourcesContent":["import { motion } from 'framer-motion';\nimport React, { FC } from 'react';\nimport styled from 'styled-components';\n\ntype AccordionBodyProps = {};\n\nconst StyledMotionAccordionBody = styled(motion.div)`\n    overflow: hidden;\n`;\n\nconst AccordionBody: FC<AccordionBodyProps> = ({ children }) => (\n    <StyledMotionAccordionBody\n        animate={{ height: 'auto', opacity: 1 }}\n        className=\"beta-chayns-accordion-body\"\n        exit={{ height: 0, opacity: 0 }}\n        initial={{ height: 0, opacity: 0 }}\n    >\n        {children}\n    </StyledMotionAccordionBody>\n);\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"file":"AccordionBody.js"}
+{"version":3,"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.tsx"],"names":["AccordionBody","children","height","opacity","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;AAEA,IAAMA,aAAiB,GAAG,SAApBA,aAAoB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACtB,6BAAC,wCAAD;AACI,IAAA,OAAO,EAAE;AAAEC,MAAAA,MAAM,EAAE,MAAV;AAAkBC,MAAAA,OAAO,EAAE;AAA3B,KADb;AAEI,IAAA,SAAS,EAAC,4BAFd;AAGI,IAAA,IAAI,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB,KAHV;AAII,IAAA,OAAO,EAAE;AAAED,MAAAA,MAAM,EAAE,CAAV;AAAaC,MAAAA,OAAO,EAAE;AAAtB;AAJb,KAMKF,QANL,CADsB;AAAA,CAA1B;;AAWAD,aAAa,CAACI,WAAd,GAA4B,eAA5B;eAEeJ,a","sourcesContent":["import React, { FC } from 'react';\nimport { StyledMotionAccordionBody } from './AccordionBody.styles';\n\nconst AccordionBody: FC = ({ children }) => (\n    <StyledMotionAccordionBody\n        animate={{ height: 'auto', opacity: 1 }}\n        className=\"beta-chayns-accordion-body\"\n        exit={{ height: 0, opacity: 0 }}\n        initial={{ height: 0, opacity: 0 }}\n    >\n        {children}\n    </StyledMotionAccordionBody>\n);\n\nAccordionBody.displayName = 'AccordionBody';\n\nexport default AccordionBody;\n"],"file":"AccordionBody.js"}

package/lib/components/accordion/accordion-body/AccordionBody.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledMotionAccordionBody: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;

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

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledMotionAccordionBody = void 0;
+
+var _framerMotion = require("framer-motion");
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledMotionAccordionBody = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    overflow: hidden;\n"])));
+exports.StyledMotionAccordionBody = StyledMotionAccordionBody;
+//# sourceMappingURL=AccordionBody.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/accordion/accordion-body/AccordionBody.styles.ts"],"names":["StyledMotionAccordionBody","motion","div"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAEO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,8FAA/B","sourcesContent":["import { motion } from 'framer-motion';\nimport styled from 'styled-components';\n\nexport const StyledMotionAccordionBody = styled(motion.div)`\n    overflow: hidden;\n`;\n"],"file":"AccordionBody.styles.js"}

package/lib/components/accordion/accordion-content/AccordionContent.d.ts

@@ -1,6 +1,3 @@
 import { FC } from 'react';
-declare type AccordionContentProps = {
-    isWrapped?: boolean;
-};
-declare const AccordionContent: FC<AccordionContentProps>;
+declare const AccordionContent: FC;
 export default AccordionContent;

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

@@ -7,26 +7,21 @@ exports.default = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Accordion = require("../Accordion");
 
-var _templateObject;
+var _AccordionContent = require("./AccordionContent.styles");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
-var StyledAccordionContent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    padding: ", ";\n"])), function (_ref) {
-  var isWrapped = _ref.isWrapped;
-  return isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px';
-});
-
-var AccordionContent = function AccordionContent(_ref2) {
-  var children = _ref2.children,
-      isWrapped = _ref2.isWrapped;
-  return /*#__PURE__*/_react.default.createElement(StyledAccordionContent, {
-    className: "beta-chayns-accordion-content",
-    isWrapped: isWrapped
-  }, children);
+var AccordionContent = function AccordionContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionContext.Consumer, null, function (_ref2) {
+    var isWrapped = _ref2.isWrapped;
+    return /*#__PURE__*/_react.default.createElement(_AccordionContent.StyledAccordionContent, {
+      className: "beta-chayns-accordion-content",
+      isWrapped: isWrapped
+    }, children);
+  });
 };
 
 AccordionContent.displayName = 'AccordionContent';

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"names":["StyledAccordionContent","styled","div","isWrapped","AccordionContent","children","displayName"],"mappings":";;;;;;;AAAA;;AACA;;;;;;;;AAMA,IAAMA,sBAAsB,GAAGC,0BAAOC,GAAV,4FACb;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,iBAAH,GAAuB,gBAApD;AAAA,CADa,CAA5B;;AAIA,IAAMC,gBAA2C,GAAG,SAA9CA,gBAA8C;AAAA,MAAGC,QAAH,SAAGA,QAAH;AAAA,MAAaF,SAAb,SAAaA,SAAb;AAAA,sBAChD,6BAAC,sBAAD;AAAwB,IAAA,SAAS,EAAC,+BAAlC;AAAkE,IAAA,SAAS,EAAEA;AAA7E,KACKE,QADL,CADgD;AAAA,CAApD;;AAMAD,gBAAgB,CAACE,WAAjB,GAA+B,kBAA/B;eAEeF,gB","sourcesContent":["import React, { FC } from 'react';\nimport styled from 'styled-components';\n\ntype AccordionContentProps = {\n    isWrapped?: boolean;\n};\n\nconst StyledAccordionContent = styled.div<AccordionContentProps>`\n    padding: ${({ isWrapped }) => (isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px')};\n`;\n\nconst AccordionContent: FC<AccordionContentProps> = ({ children, isWrapped }) => (\n    <StyledAccordionContent className=\"beta-chayns-accordion-content\" isWrapped={isWrapped}>\n        {children}\n    </StyledAccordionContent>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"file":"AccordionContent.js"}
+{"version":3,"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.tsx"],"names":["AccordionContent","children","isWrapped","displayName"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;;;AAEA,IAAMA,gBAAoB,GAAG,SAAvBA,gBAAuB;AAAA,MAAGC,QAAH,QAAGA,QAAH;AAAA,sBACzB,6BAAC,2BAAD,CAAkB,QAAlB,QACK;AAAA,QAAGC,SAAH,SAAGA,SAAH;AAAA,wBACG,6BAAC,wCAAD;AAAwB,MAAA,SAAS,EAAC,+BAAlC;AAAkE,MAAA,SAAS,EAAEA;AAA7E,OACKD,QADL,CADH;AAAA,GADL,CADyB;AAAA,CAA7B;;AAUAD,gBAAgB,CAACG,WAAjB,GAA+B,kBAA/B;eAEeH,gB","sourcesContent":["import React, { FC } from 'react';\nimport { AccordionContext } from '../Accordion';\nimport { StyledAccordionContent } from './AccordionContent.styles';\n\nconst AccordionContent: FC = ({ children }) => (\n    <AccordionContext.Consumer>\n        {({ isWrapped }) => (\n            <StyledAccordionContent className=\"beta-chayns-accordion-content\" isWrapped={isWrapped}>\n                {children}\n            </StyledAccordionContent>\n        )}\n    </AccordionContext.Consumer>\n);\n\nAccordionContent.displayName = 'AccordionContent';\n\nexport default AccordionContent;\n"],"file":"AccordionContent.js"}

package/lib/components/accordion/accordion-content/AccordionContent.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const StyledAccordionContent: import("styled-components").StyledComponent<"div", any, {
+    isWrapped: boolean;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;

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

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordionContent = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var StyledAccordionContent = _styledComponents.default.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    color: ", ";\n    padding: ", ";\n"])), function (_ref) {
+  var theme = _ref.theme;
+  return theme.text;
+}, function (_ref2) {
+  var isWrapped = _ref2.isWrapped;
+  return isWrapped ? '0 9px 18px 26px' : '0 9px 9px 10px';
+});
+
+exports.StyledAccordionContent = StyledAccordionContent;
+//# sourceMappingURL=AccordionContent.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/accordion/accordion-content/AccordionContent.styles.ts"],"names":["StyledAccordionContent","styled","div","theme","text","isWrapped"],"mappings":";;;;;;;AAAA;;;;;;;;AAOO,IAAMA,sBAAsB,GAAGC,0BAAOC,GAAV,8GACtB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAA4CA,KAAK,CAACC,IAAlD;AAAA,CADsB,EAEpB;AAAA,MAAGC,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,iBAAH,GAAuB,gBAApD;AAAA,CAFoB,CAA5B","sourcesContent":["import styled from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledAccordionContentProps = WithTheme<{\n    isWrapped: 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"],"file":"AccordionContent.styles.js"}