@chayns-components/core 5.0.0-beta.20 → 5.0.0-beta.200

package/lib/components/accordion/accordion-head/AccordionHead.js

@@ -1,66 +1,43 @@
 "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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _framerMotion = require("framer-motion");
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _Icon = _interopRequireDefault(require("../../icon/Icon"));
-
 var _utils = require("../utils");
-
 var _AccordionHead = require("./AccordionHead.styles");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-var AccordionHead = function AccordionHead(_ref) {
-  var icon = _ref.icon,
-      isOpen = _ref.isOpen,
-      isFixed = _ref.isFixed,
-      isTitleGreyed = _ref.isTitleGreyed,
-      isWrapped = _ref.isWrapped,
-      onClick = _ref.onClick,
-      rightElement = _ref.rightElement,
-      title = _ref.title,
-      titleElement = _ref.titleElement;
-
-  var _useState = (0, _react.useState)({
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const AccordionHead = _ref => {
+  let {
+    icon,
+    isOpen,
+    isFixed,
+    isTitleGreyed,
+    isWrapped,
+    onClick,
+    onSearchChange,
+    rightElement,
+    searchIcon,
+    searchPlaceholder,
+    title,
+    titleElement
+  } = _ref;
+  const [headHeight, setHeadHeight] = (0, _react.useState)({
     closed: isWrapped ? 40 : 33,
     open: isWrapped ? 40 : 33
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      headHeight = _useState2[0],
-      setHeadHeight = _useState2[1];
-
-  var titleWrapperRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
+  });
+  const titleWrapperRef = (0, _react.useRef)(null);
+  const hasSearchIcon = Array.isArray(searchIcon);
+  (0, _react.useEffect)(() => {
     var _titleWrapperRef$curr, _titleWrapperRef$curr2;
-
     setHeadHeight((0, _utils.getAccordionHeadHeight)({
-      isWrapped: isWrapped,
-      title: title,
+      isWrapped,
+      title,
       width: ((_titleWrapperRef$curr = (_titleWrapperRef$curr2 = titleWrapperRef.current) === null || _titleWrapperRef$curr2 === void 0 ? void 0 : _titleWrapperRef$curr2.clientWidth) !== null && _titleWrapperRef$curr !== void 0 ? _titleWrapperRef$curr : 0) - 10
     }));
   }, [isWrapped, title]);
@@ -69,56 +46,83 @@ var AccordionHead = function AccordionHead(_ref) {
       height: isOpen ? headHeight.open : headHeight.closed
     },
     className: "beta-chayns-accordion-head",
-    initial: false,
-    transition: {
-      type: 'tween'
-    }
+    initial: false
   }, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionIconWrapper, {
     animate: {
       rotate: isOpen || isFixed ? 90 : 0
     },
     initial: false,
-    onClick: !isFixed ? onClick : undefined,
-    transition: {
-      type: 'tween'
-    }
+    onClick: !isFixed ? onClick : undefined
   }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icons: [isFixed ? 'fa fa-horizontal-rule' : icon !== null && icon !== void 0 ? icon : 'fa fa-chevron-right']
-  })), /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionTitleWrapper, {
+  })), /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionContentWrapper, {
     animate: {
       opacity: isTitleGreyed ? 0.5 : 1
     },
     initial: false,
     onClick: !isFixed ? onClick : undefined,
-    ref: titleWrapperRef,
-    transition: {
-      type: 'tween'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    ref: titleWrapperRef
+  }, /*#__PURE__*/_react.default.createElement(_framerMotion.LayoutGroup, null, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionTitleWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
     initial: false
   }, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionTitle, {
     animate: {
-      opacity: 1,
       scale: 1
     },
+    initial: {
+      scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3
+    },
+    isOpen: isOpen,
+    isWrapped: isWrapped,
+    key: isOpen && !isWrapped ? 'accordionHeadTitleBig' : 'accordionHeadTitle'
+  }, title))), titleElement && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionTitleElementWrapper, {
+    layout: true
+  }, titleElement))), (typeof onSearchChange === 'function' || rightElement) && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledRightWrapper, null, /*#__PURE__*/_react.default.createElement(_framerMotion.AnimatePresence, {
+    initial: false
+  }, typeof onSearchChange === 'function' && isOpen ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInput, {
+    animate: {
+      opacity: 1,
+      width: '165px'
+    },
+    autoComplete: "off",
     exit: {
       opacity: 0,
-      position: 'absolute',
-      scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3
+      width: 0
     },
+    hasIcon: hasSearchIcon,
     initial: {
       opacity: 0,
-      scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3
+      width: 0
     },
-    isOpen: isOpen,
-    isWrapped: isWrapped,
-    key: isOpen && !isWrapped ? 'accordionHeadTitleBig' : 'accordionHeadTitle',
-    transition: {
-      type: 'tween'
-    }
-  }, title)), titleElement && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledTitleElementWrapper, null, titleElement)), rightElement && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledRightWrapper, null, rightElement));
+    key: "rightInput",
+    onChange: onSearchChange,
+    placeholder: searchPlaceholder,
+    type: "text"
+  }), hasSearchIcon && /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightInputIconWrapper, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    key: "rightInputIcon"
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icons: searchIcon
+  }))) : /*#__PURE__*/_react.default.createElement(_AccordionHead.StyledMotionRightElementWrapper, {
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0
+    },
+    initial: {
+      opacity: 0
+    },
+    key: "rightElementWrapper"
+  }, rightElement))));
 };
-
 AccordionHead.displayName = 'AccordionHead';
 var _default = AccordionHead;
 exports.default = _default;

package/lib/components/accordion/accordion-head/AccordionHead.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"names":["AccordionHead","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","rightElement","title","titleElement","closed","open","headHeight","setHeadHeight","titleWrapperRef","width","current","clientWidth","height","type","rotate","undefined","opacity","scale","position","displayName"],"mappings":"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","sourcesContent":["import { AnimatePresence } from 'framer-motion';\nimport React, { FC, MouseEventHandler, ReactNode, useEffect, useRef, useState } from 'react';\nimport Icon from '../../icon/Icon';\nimport { getAccordionHeadHeight } from '../utils';\nimport {\n    StyledMotionAccordionHead,\n    StyledMotionIconWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n    StyledTitleElementWrapper,\n} from './AccordionHead.styles';\n\ntype AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    rightElement?: ReactNode;\n    title: string;\n    titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    rightElement,\n    title,\n    titleElement,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n        setHeadHeight(\n            getAccordionHeadHeight({\n                isWrapped,\n                title,\n                width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n            })\n        );\n    }, [isWrapped, title]);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n            transition={{ type: 'tween' }}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: isOpen || isFixed ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                transition={{ type: 'tween' }}\n            >\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            </StyledMotionIconWrapper>\n            <StyledMotionTitleWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n                transition={{ type: 'tween' }}\n            >\n                <AnimatePresence initial={false}>\n                    <StyledMotionTitle\n                        animate={{ opacity: 1, scale: 1 }}\n                        exit={{\n                            opacity: 0,\n                            position: 'absolute',\n                            scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3,\n                        }}\n                        initial={{ opacity: 0, scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                        isOpen={isOpen}\n                        isWrapped={isWrapped}\n                        key={isOpen && !isWrapped ? 'accordionHeadTitleBig' : 'accordionHeadTitle'}\n                        transition={{ type: 'tween' }}\n                    >\n                        {title}\n                    </StyledMotionTitle>\n                </AnimatePresence>\n                {titleElement && (\n                    <StyledTitleElementWrapper>{titleElement}</StyledTitleElementWrapper>\n                )}\n            </StyledMotionTitleWrapper>\n            {rightElement && <StyledRightWrapper>{rightElement}</StyledRightWrapper>}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"file":"AccordionHead.js"}
+{"version":3,"file":"AccordionHead.js","names":["_framerMotion","require","_react","_interopRequireWildcard","_Icon","_interopRequireDefault","_utils","_AccordionHead","obj","__esModule","default","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","AccordionHead","_ref","icon","isOpen","isFixed","isTitleGreyed","isWrapped","onClick","onSearchChange","rightElement","searchIcon","searchPlaceholder","title","titleElement","headHeight","setHeadHeight","useState","closed","open","titleWrapperRef","useRef","hasSearchIcon","Array","isArray","useEffect","_titleWrapperRef$curr","_titleWrapperRef$curr2","getAccordionHeadHeight","width","current","clientWidth","createElement","StyledMotionAccordionHead","animate","height","className","initial","StyledMotionIconWrapper","rotate","undefined","icons","StyledMotionContentWrapper","opacity","ref","LayoutGroup","StyledMotionTitleWrapper","AnimatePresence","StyledMotionTitle","scale","StyledMotionTitleElementWrapper","layout","StyledRightWrapper","Fragment","StyledMotionRightInput","autoComplete","exit","hasIcon","onChange","placeholder","type","StyledMotionRightInputIconWrapper","StyledMotionRightElementWrapper","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.tsx"],"sourcesContent":["import { AnimatePresence, LayoutGroup } from 'framer-motion';\nimport React, {\n    ChangeEventHandler,\n    FC,\n    MouseEventHandler,\n    ReactNode,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\nimport Icon from '../../icon/Icon';\nimport { getAccordionHeadHeight } from '../utils';\nimport {\n    StyledMotionAccordionHead,\n    StyledMotionContentWrapper,\n    StyledMotionIconWrapper,\n    StyledMotionRightElementWrapper,\n    StyledMotionRightInput,\n    StyledMotionRightInputIconWrapper,\n    StyledMotionTitle,\n    StyledMotionTitleElementWrapper,\n    StyledMotionTitleWrapper,\n    StyledRightWrapper,\n} from './AccordionHead.styles';\n\ntype AccordionHeadProps = {\n    icon?: string;\n    isOpen: boolean;\n    isFixed: boolean;\n    isTitleGreyed: boolean;\n    isWrapped: boolean;\n    onClick: MouseEventHandler<HTMLDivElement>;\n    onSearchChange?: ChangeEventHandler<HTMLInputElement>;\n    rightElement?: ReactNode;\n    searchIcon?: string[];\n    searchPlaceholder?: string;\n    title: string;\n    titleElement?: ReactNode;\n};\n\ninterface HeadHeight {\n    closed: number;\n    open: number;\n}\n\nconst AccordionHead: FC<AccordionHeadProps> = ({\n    icon,\n    isOpen,\n    isFixed,\n    isTitleGreyed,\n    isWrapped,\n    onClick,\n    onSearchChange,\n    rightElement,\n    searchIcon,\n    searchPlaceholder,\n    title,\n    titleElement,\n}) => {\n    const [headHeight, setHeadHeight] = useState<HeadHeight>({\n        closed: isWrapped ? 40 : 33,\n        open: isWrapped ? 40 : 33,\n    });\n\n    const titleWrapperRef = useRef<HTMLDivElement>(null);\n\n    const hasSearchIcon = Array.isArray(searchIcon);\n\n    useEffect(() => {\n        setHeadHeight(\n            getAccordionHeadHeight({\n                isWrapped,\n                title,\n                width: (titleWrapperRef.current?.clientWidth ?? 0) - 10,\n            })\n        );\n    }, [isWrapped, title]);\n\n    return (\n        <StyledMotionAccordionHead\n            animate={{ height: isOpen ? headHeight.open : headHeight.closed }}\n            className=\"beta-chayns-accordion-head\"\n            initial={false}\n        >\n            <StyledMotionIconWrapper\n                animate={{ rotate: isOpen || isFixed ? 90 : 0 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n            >\n                <Icon icons={[isFixed ? 'fa fa-horizontal-rule' : icon ?? 'fa fa-chevron-right']} />\n            </StyledMotionIconWrapper>\n            <StyledMotionContentWrapper\n                animate={{ opacity: isTitleGreyed ? 0.5 : 1 }}\n                initial={false}\n                onClick={!isFixed ? onClick : undefined}\n                ref={titleWrapperRef}\n            >\n                <LayoutGroup>\n                    <StyledMotionTitleWrapper>\n                        <AnimatePresence initial={false}>\n                            <StyledMotionTitle\n                                animate={{ scale: 1 }}\n                                initial={{ scale: isOpen && !isWrapped ? 1 / 1.3 : 1.3 }}\n                                isOpen={isOpen}\n                                isWrapped={isWrapped}\n                                key={\n                                    isOpen && !isWrapped\n                                        ? 'accordionHeadTitleBig'\n                                        : 'accordionHeadTitle'\n                                }\n                            >\n                                {title}\n                            </StyledMotionTitle>\n                        </AnimatePresence>\n                    </StyledMotionTitleWrapper>\n                    {titleElement && (\n                        <StyledMotionTitleElementWrapper layout>\n                            {titleElement}\n                        </StyledMotionTitleElementWrapper>\n                    )}\n                </LayoutGroup>\n            </StyledMotionContentWrapper>\n            {(typeof onSearchChange === 'function' || rightElement) && (\n                <StyledRightWrapper>\n                    <AnimatePresence initial={false}>\n                        {typeof onSearchChange === 'function' && isOpen ? (\n                            <>\n                                <StyledMotionRightInput\n                                    animate={{ opacity: 1, width: '165px' }}\n                                    autoComplete=\"off\"\n                                    exit={{ opacity: 0, width: 0 }}\n                                    hasIcon={hasSearchIcon}\n                                    initial={{ opacity: 0, width: 0 }}\n                                    key=\"rightInput\"\n                                    onChange={onSearchChange}\n                                    placeholder={searchPlaceholder}\n                                    type=\"text\"\n                                />\n                                {hasSearchIcon && (\n                                    <StyledMotionRightInputIconWrapper\n                                        animate={{ opacity: 1 }}\n                                        exit={{ opacity: 0 }}\n                                        initial={{ opacity: 0 }}\n                                        key=\"rightInputIcon\"\n                                    >\n                                        <Icon icons={searchIcon} />\n                                    </StyledMotionRightInputIconWrapper>\n                                )}\n                            </>\n                        ) : (\n                            <StyledMotionRightElementWrapper\n                                animate={{ opacity: 1 }}\n                                exit={{ opacity: 0 }}\n                                initial={{ opacity: 0 }}\n                                key=\"rightElementWrapper\"\n                            >\n                                {rightElement}\n                            </StyledMotionRightElementWrapper>\n                        )}\n                    </AnimatePresence>\n                </StyledRightWrapper>\n            )}\n        </StyledMotionAccordionHead>\n    );\n};\n\nAccordionHead.displayName = 'AccordionHead';\n\nexport default AccordionHead;\n"],"mappings":"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"}

package/lib/components/accordion/accordion-head/AccordionHead.styles.d.ts

@@ -1,11 +1,19 @@
 export declare const StyledMotionAccordionHead: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const StyledMotionIconWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledMotionContentWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const StyledMotionTitleWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 interface StyledMotionTitleProps {
     isOpen: boolean;
     isWrapped: boolean;
 }
 export declare const StyledMotionTitle: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, StyledMotionTitleProps, never>;
-export declare const StyledTitleElementWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionTitleElementWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export declare const StyledRightWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledMotionRightElementWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
+export declare const StyledMotionRightInput: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLInputElement, import("framer-motion").HTMLMotionProps<"input">>, any, {
+    hasIcon: boolean;
+} & {
+    theme: import("../../color-scheme-provider/ColorSchemeProvider").Theme;
+}, never>;
+export declare const StyledMotionRightInputIconWrapper: import("styled-components").StyledComponent<import("framer-motion").ForwardRefComponent<HTMLDivElement, import("framer-motion").HTMLMotionProps<"div">>, any, {}, never>;
 export {};

package/lib/components/accordion/accordion-head/AccordionHead.styles.js

@@ -1,65 +1,164 @@
 "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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.StyledTitleElementWrapper = exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitle = exports.StyledMotionIconWrapper = exports.StyledMotionAccordionHead = void 0;
-
+exports.StyledRightWrapper = exports.StyledMotionTitleWrapper = exports.StyledMotionTitleElementWrapper = exports.StyledMotionTitle = exports.StyledMotionRightInputIconWrapper = exports.StyledMotionRightInput = exports.StyledMotionRightElementWrapper = exports.StyledMotionIconWrapper = exports.StyledMotionContentWrapper = exports.StyledMotionAccordionHead = void 0;
 var _framerMotion = require("framer-motion");
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
-
-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 StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    color: ", ";\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n"])), function (_ref) {
-  var theme = _ref.theme;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const StyledMotionAccordionHead = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    color: ${_ref => {
+  let {
+    theme
+  } = _ref;
   return theme.text;
-});
+}};
+    display: flex;
+    overflow: hidden;
+    padding: 4px 0;
+`;
 exports.StyledMotionAccordionHead = StyledMotionAccordionHead;
-var StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    align-items: center;\n    cursor: ", ";\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n"])), function (_ref2) {
-  var onClick = _ref2.onClick;
+const StyledMotionIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    cursor: ${_ref2 => {
+  let {
+    onClick
+  } = _ref2;
   return typeof onClick === 'function' ? 'pointer' : 'default';
-});
+}};
+    display: flex;
+    flex: 0 0 auto;
+    height: 25px;
+    justify-content: center;
+    width: 25px;
+`;
 exports.StyledMotionIconWrapper = StyledMotionIconWrapper;
-var StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    align-self: flex-start;\n    cursor: ", ";\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n"])), function (_ref3) {
-  var onClick = _ref3.onClick;
+const StyledMotionContentWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-self: flex-start;
+    cursor: ${_ref3 => {
+  let {
+    onClick
+  } = _ref3;
   return typeof onClick === 'function' ? 'pointer' : 'default';
-});
+}};
+    display: flex;
+    flex: 1 1 auto;
+    height: 100%;
+    overflow: hidden;
+    margin-right: 10px;
+`;
+exports.StyledMotionContentWrapper = StyledMotionContentWrapper;
+const StyledMotionTitleWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    display: grid;
+    flex: 0 1 auto;
+    grid-template-areas: 'header';
+`;
 exports.StyledMotionTitleWrapper = StyledMotionTitleWrapper;
-var StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n    font-size: ", ";\n    font-weight: ", ";\n    height: ", ";\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ", ";\n\n    ", "\n"])), function (_ref4) {
-  var isOpen = _ref4.isOpen,
-      isWrapped = _ref4.isWrapped;
+const StyledMotionTitle = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    font-size: ${_ref4 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref4;
   return isOpen && !isWrapped ? '1.3rem' : undefined;
-}, function (_ref5) {
-  var isOpen = _ref5.isOpen,
-      isWrapped = _ref5.isWrapped;
+}};
+    font-weight: ${_ref5 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref5;
   return isOpen && isWrapped ? 700 : 'normal';
-}, function (_ref6) {
-  var isWrapped = _ref6.isWrapped;
+}};
+    grid-area: header;
+    height: ${_ref6 => {
+  let {
+    isWrapped
+  } = _ref6;
   return isWrapped ? '100%' : undefined;
-}, function (_ref7) {
-  var isOpen = _ref7.isOpen,
-      isWrapped = _ref7.isWrapped;
+}};
+    overflow: hidden;
+    text-overflow: ellipsis;
+    transform-origin: top left;
+    user-select: none;
+    white-space: ${_ref7 => {
+  let {
+    isOpen,
+    isWrapped
+  } = _ref7;
   return isOpen && !isWrapped ? 'normal' : 'nowrap';
-}, function (_ref8) {
-  var isWrapped = _ref8.isWrapped;
-  return isWrapped && (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n            align-items: center;\n            display: flex;\n        "])));
-});
-exports.StyledMotionTitle = StyledMotionTitle;
-
-var StyledTitleElementWrapper = _styledComponents.default.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n"])));
-
-exports.StyledTitleElementWrapper = StyledTitleElementWrapper;
-
-var StyledRightWrapper = _styledComponents.default.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n"])));
+}};
 
+    ${_ref8 => {
+  let {
+    isWrapped
+  } = _ref8;
+  return isWrapped && (0, _styledComponents.css)`
+            align-items: center;
+            display: flex;
+        `;
+}}
+`;
+exports.StyledMotionTitle = StyledMotionTitle;
+const StyledMotionTitleElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    margin-left: 8px;
+`;
+exports.StyledMotionTitleElementWrapper = StyledMotionTitleElementWrapper;
+const StyledRightWrapper = _styledComponents.default.div`
+    display: grid;
+    flex: 0 0 auto;
+    grid-template-areas: 'right';
+    margin-right: 5px;
+    overflow: hidden;
+    position: relative;
+`;
 exports.StyledRightWrapper = StyledRightWrapper;
+const StyledMotionRightElementWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    grid-area: header;
+    justify-content: flex-end;
+`;
+exports.StyledMotionRightElementWrapper = StyledMotionRightElementWrapper;
+const StyledMotionRightInput = (0, _styledComponents.default)(_framerMotion.motion.input)`
+    background-color: transparent;
+    border: 1px solid transparent;
+    border-bottom-color: rgba(
+        ${_ref9 => {
+  let {
+    theme
+  } = _ref9;
+  return theme['headline-rgb'];
+}},
+        0.45
+    );
+    color: ${_ref10 => {
+  let {
+    theme
+  } = _ref10;
+  return theme.text;
+}};
+    grid-area: header;
+    padding: ${_ref11 => {
+  let {
+    hasIcon
+  } = _ref11;
+  return hasIcon ? '5px 23px 5px 1px' : '5px 1px';
+}};
+`;
+exports.StyledMotionRightInput = StyledMotionRightInput;
+const StyledMotionRightInputIconWrapper = (0, _styledComponents.default)(_framerMotion.motion.div)`
+    align-items: center;
+    display: flex;
+    height: 100%;
+    justify-content: center;
+    position: absolute;
+    right: 4px;
+    top: 0;
+`;
+exports.StyledMotionRightInputIconWrapper = StyledMotionRightInputIconWrapper;
 //# sourceMappingURL=AccordionHead.styles.js.map

package/lib/components/accordion/accordion-head/AccordionHead.styles.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"names":["StyledMotionAccordionHead","motion","div","theme","text","StyledMotionIconWrapper","onClick","StyledMotionTitleWrapper","StyledMotionTitle","isOpen","isWrapped","undefined","css","StyledTitleElementWrapper","styled","StyledRightWrapper"],"mappings":";;;;;;;;;AAAA;;AACA;;;;;;;;;;AAKO,IAAMA,yBAAyB,GAAG,+BAAOC,qBAAOC,GAAd,CAAH,oLAEzB;AAAA,MAAGC,KAAH,QAAGA,KAAH;AAAA,SAA+CA,KAAK,CAACC,IAArD;AAAA,CAFyB,CAA/B;;AAQA,IAAMC,uBAAuB,GAAG,+BAAOJ,qBAAOC,GAAd,CAAH,mOAEtB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFsB,CAA7B;;AAUA,IAAMC,wBAAwB,GAAG,+BAAON,qBAAOC,GAAd,CAAH,+PAEvB;AAAA,MAAGI,OAAH,SAAGA,OAAH;AAAA,SAAkB,OAAOA,OAAP,KAAmB,UAAnB,GAAgC,SAAhC,GAA4C,SAA9D;AAAA,CAFuB,CAA9B;;AAgBA,IAAME,iBAAiB,GAAG,+BAAOP,qBAAOC,GAAd,CAAH,6RACb;AAAA,MAAGO,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkCC,SAA9D;AAAA,CADa,EAEX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAIC,SAAV,GAAsB,GAAtB,GAA4B,QAAxD;AAAA,CAFW,EAGhB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SAAoBA,SAAS,GAAG,MAAH,GAAYC,SAAzC;AAAA,CAHgB,EAQX;AAAA,MAAGF,MAAH,SAAGA,MAAH;AAAA,MAAWC,SAAX,SAAWA,SAAX;AAAA,SAA4BD,MAAM,IAAI,CAACC,SAAX,GAAuB,QAAvB,GAAkC,QAA9D;AAAA,CARW,EAUxB;AAAA,MAAGA,SAAH,SAAGA,SAAH;AAAA,SACEA,SAAS,QACTE,qBADS,gJADX;AAAA,CAVwB,CAAvB;;;AAkBA,IAAMC,yBAAyB,GAAGC,0BAAOZ,GAAV,8IAA/B;;;;AAMA,IAAMa,kBAAkB,GAAGD,0BAAOZ,GAAV,4NAAxB","sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n    position: relative;\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledTitleElementWrapper = styled.div`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: flex;\n    flex: 0 0 auto;\n    flex-direction: column;\n    justify-content: center;\n    margin-right: 5px;\n    overflow: hidden;\n`;\n"],"file":"AccordionHead.styles.js"}
+{"version":3,"file":"AccordionHead.styles.js","names":["_framerMotion","require","_styledComponents","_interopRequireWildcard","_getRequireWildcardCache","nodeInterop","WeakMap","cacheBabelInterop","cacheNodeInterop","obj","__esModule","default","cache","has","get","newObj","hasPropertyDescriptor","Object","defineProperty","getOwnPropertyDescriptor","key","prototype","hasOwnProperty","call","desc","set","StyledMotionAccordionHead","styled","motion","div","_ref","theme","text","exports","StyledMotionIconWrapper","_ref2","onClick","StyledMotionContentWrapper","_ref3","StyledMotionTitleWrapper","StyledMotionTitle","_ref4","isOpen","isWrapped","undefined","_ref5","_ref6","_ref7","_ref8","css","StyledMotionTitleElementWrapper","StyledRightWrapper","StyledMotionRightElementWrapper","StyledMotionRightInput","input","_ref9","_ref10","_ref11","hasIcon","StyledMotionRightInputIconWrapper"],"sources":["../../../../src/components/accordion/accordion-head/AccordionHead.styles.ts"],"sourcesContent":["import { motion } from 'framer-motion';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../../color-scheme-provider/ColorSchemeProvider';\n\ntype StyledMotionAccordionHeadProps = WithTheme<unknown>;\n\nexport const StyledMotionAccordionHead = styled(motion.div)`\n    align-items: center;\n    color: ${({ theme }: StyledMotionAccordionHeadProps) => theme.text};\n    display: flex;\n    overflow: hidden;\n    padding: 4px 0;\n`;\n\nexport const StyledMotionIconWrapper = styled(motion.div)`\n    align-items: center;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 0 0 auto;\n    height: 25px;\n    justify-content: center;\n    width: 25px;\n`;\n\nexport const StyledMotionContentWrapper = styled(motion.div)`\n    align-self: flex-start;\n    cursor: ${({ onClick }) => (typeof onClick === 'function' ? 'pointer' : 'default')};\n    display: flex;\n    flex: 1 1 auto;\n    height: 100%;\n    overflow: hidden;\n    margin-right: 10px;\n`;\n\nexport const StyledMotionTitleWrapper = styled(motion.div)`\n    display: grid;\n    flex: 0 1 auto;\n    grid-template-areas: 'header';\n`;\n\ninterface StyledMotionTitleProps {\n    isOpen: boolean;\n    isWrapped: boolean;\n}\n\nexport const StyledMotionTitle = styled(motion.div)<StyledMotionTitleProps>`\n    font-size: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? '1.3rem' : undefined)};\n    font-weight: ${({ isOpen, isWrapped }) => (isOpen && isWrapped ? 700 : 'normal')};\n    grid-area: header;\n    height: ${({ isWrapped }) => (isWrapped ? '100%' : undefined)};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    transform-origin: top left;\n    user-select: none;\n    white-space: ${({ isOpen, isWrapped }) => (isOpen && !isWrapped ? 'normal' : 'nowrap')};\n\n    ${({ isWrapped }) =>\n        isWrapped &&\n        css`\n            align-items: center;\n            display: flex;\n        `}\n`;\n\nexport const StyledMotionTitleElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    margin-left: 8px;\n`;\n\nexport const StyledRightWrapper = styled.div`\n    display: grid;\n    flex: 0 0 auto;\n    grid-template-areas: 'right';\n    margin-right: 5px;\n    overflow: hidden;\n    position: relative;\n`;\n\nexport const StyledMotionRightElementWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    grid-area: header;\n    justify-content: flex-end;\n`;\n\ntype StyledMotionRightInputProps = WithTheme<{\n    hasIcon: boolean;\n}>;\n\nexport const StyledMotionRightInput = styled(motion.input)<StyledMotionRightInputProps>`\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-bottom-color: rgba(\n        ${({ theme }: StyledMotionRightInputProps) => theme['headline-rgb']},\n        0.45\n    );\n    color: ${({ theme }: StyledMotionRightInputProps) => theme.text};\n    grid-area: header;\n    padding: ${({ hasIcon }) => (hasIcon ? '5px 23px 5px 1px' : '5px 1px')};\n`;\n\nexport const StyledMotionRightInputIconWrapper = styled(motion.div)`\n    align-items: center;\n    display: flex;\n    height: 100%;\n    justify-content: center;\n    position: absolute;\n    right: 4px;\n    top: 0;\n`;\n"],"mappings":"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"}

package/lib/components/accordion/accordion-intro/AccordionIntro.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export type AccordionIntroProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionIntro: FC<AccordionIntroProps>;
+export default AccordionIntro;

package/lib/components/accordion/accordion-intro/AccordionIntro.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _AccordionIntro = require("./AccordionIntro.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AccordionIntro = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_AccordionIntro.StyledAccordionIntro, {
+    className: "beta-chayns-accordion-intro"
+  }, children);
+};
+AccordionIntro.displayName = 'AccordionIntro';
+var _default = AccordionIntro;
+exports.default = _default;
+//# sourceMappingURL=AccordionIntro.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.js","names":["_react","_interopRequireDefault","require","_AccordionIntro","obj","__esModule","default","AccordionIntro","_ref","children","createElement","StyledAccordionIntro","className","displayName","_default","exports"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.tsx"],"sourcesContent":["import React, { FC, ReactNode } from 'react';\nimport { StyledAccordionIntro } from './AccordionIntro.styles';\n\nexport type AccordionIntroProps = {\n    /**\n     * The content of the accordion content element\n     */\n    children: ReactNode;\n};\n\nconst AccordionIntro: FC<AccordionIntroProps> = ({ children }) => (\n    <StyledAccordionIntro className=\"beta-chayns-accordion-intro\">{children}</StyledAccordionIntro>\n);\n\nAccordionIntro.displayName = 'AccordionIntro';\n\nexport default AccordionIntro;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,eAAA,GAAAD,OAAA;AAA+D,SAAAD,uBAAAG,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAS/D,MAAMG,cAAuC,GAAGC,IAAA;EAAA,IAAC;IAAEC;EAAS,CAAC,GAAAD,IAAA;EAAA,oBACzDR,MAAA,CAAAM,OAAA,CAAAI,aAAA,CAACP,eAAA,CAAAQ,oBAAoB;IAACC,SAAS,EAAC;EAA6B,GAAEH,QAA+B,CAAC;AAAA,CAClG;AAEDF,cAAc,CAACM,WAAW,GAAG,gBAAgB;AAAC,IAAAC,QAAA,GAE/BP,cAAc;AAAAQ,OAAA,CAAAT,OAAA,GAAAQ,QAAA"}

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledAccordionIntro: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledAccordionIntro = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const StyledAccordionIntro = _styledComponents.default.div`
+    padding: 0 9px 6px;
+`;
+exports.StyledAccordionIntro = StyledAccordionIntro;
+//# sourceMappingURL=AccordionIntro.styles.js.map

package/lib/components/accordion/accordion-intro/AccordionIntro.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"AccordionIntro.styles.js","names":["_styledComponents","_interopRequireDefault","require","obj","__esModule","default","StyledAccordionIntro","styled","div","exports"],"sources":["../../../../src/components/accordion/accordion-intro/AccordionIntro.styles.ts"],"sourcesContent":["import styled from 'styled-components';\n\nexport const StyledAccordionIntro = styled.div`\n    padding: 0 9px 6px;\n`;\n"],"mappings":";;;;;;AAAA,IAAAA,iBAAA,GAAAC,sBAAA,CAAAC,OAAA;AAAuC,SAAAD,uBAAAE,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAEhC,MAAMG,oBAAoB,GAAGC,yBAAM,CAACC,GAAI;AAC/C;AACA,CAAC;AAACC,OAAA,CAAAH,oBAAA,GAAAA,oBAAA"}

package/lib/components/accordion/accordion-item/AccordionItem.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactNode } from 'react';
+export type AccordionItemProps = {
+    /**
+     * The content of the accordion content element
+     */
+    children: ReactNode;
+};
+declare const AccordionItem: FC<AccordionItemProps>;
+export default AccordionItem;

package/lib/components/accordion/accordion-item/AccordionItem.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Accordion = require("../Accordion");
+var _AccordionItem = require("./AccordionItem.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const AccordionItem = _ref => {
+  let {
+    children
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_Accordion.AccordionContext.Consumer, null, _ref2 => {
+    let {
+      isWrapped
+    } = _ref2;
+    return /*#__PURE__*/_react.default.createElement(_AccordionItem.StyledAccordionItem, {
+      className: "beta-chayns-accordion-item",
+      isWrapped: isWrapped
+    }, children);
+  });
+};
+AccordionItem.displayName = 'AccordionItem';
+var _default = AccordionItem;
+exports.default = _default;
+//# sourceMappingURL=AccordionItem.js.map