\n \n {children}\n \n
\n )\n },\n)\n\nCAccordionItem.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n itemKey: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n}\n\nCAccordionItem.displayName = 'CAccordionItem'\n","export default function _extends() {\n _extends = Object.assign ? Object.assign.bind() : function (target) {\n for (var i = 1; i < arguments.length; i++) {\n var source = arguments[i];\n for (var key in source) {\n if (Object.prototype.hasOwnProperty.call(source, key)) {\n target[key] = source[key];\n }\n }\n }\n return target;\n };\n return _extends.apply(this, arguments);\n}","export default function _objectWithoutPropertiesLoose(source, excluded) {\n if (source == null) return {};\n var target = {};\n var sourceKeys = Object.keys(source);\n var key, i;\n for (i = 0; i < sourceKeys.length; i++) {\n key = sourceKeys[i];\n if (excluded.indexOf(key) >= 0) continue;\n target[key] = source[key];\n }\n return target;\n}","export default function _setPrototypeOf(o, p) {\n _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {\n o.__proto__ = p;\n return o;\n };\n return _setPrototypeOf(o, p);\n}","import setPrototypeOf from \"./setPrototypeOf.js\";\nexport default function _inheritsLoose(subClass, superClass) {\n subClass.prototype = Object.create(superClass.prototype);\n subClass.prototype.constructor = subClass;\n setPrototypeOf(subClass, superClass);\n}","function replaceClassName(origClass, classToRemove) {\n return origClass.replace(new RegExp(\"(^|\\\\s)\" + classToRemove + \"(?:\\\\s|$)\", 'g'), '$1').replace(/\\s+/g, ' ').replace(/^\\s*|\\s*$/g, '');\n}\n/**\n * Removes a CSS class from a given element.\n * \n * @param element the element\n * @param className the CSS class name\n */\n\n\nexport default function removeClass(element, className) {\n if (element.classList) {\n element.classList.remove(className);\n } else if (typeof element.className === 'string') {\n element.className = replaceClassName(element.className, className);\n } else {\n element.setAttribute('class', replaceClassName(element.className && element.className.baseVal || '', className));\n }\n}","export default {\n disabled: false\n};","import React from 'react';\nexport default React.createContext(null);","export var forceReflow = function forceReflow(node) {\n return node.scrollTop;\n};","import _objectWithoutPropertiesLoose from \"@babel/runtime/helpers/esm/objectWithoutPropertiesLoose\";\nimport _inheritsLoose from \"@babel/runtime/helpers/esm/inheritsLoose\";\nimport PropTypes from 'prop-types';\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport config from './config';\nimport { timeoutsShape } from './utils/PropTypes';\nimport TransitionGroupContext from './TransitionGroupContext';\nimport { forceReflow } from './utils/reflow';\nexport var UNMOUNTED = 'unmounted';\nexport var EXITED = 'exited';\nexport var ENTERING = 'entering';\nexport var ENTERED = 'entered';\nexport var EXITING = 'exiting';\n/**\n * The Transition component lets you describe a transition from one component\n * state to another _over time_ with a simple declarative API. Most commonly\n * it's used to animate the mounting and unmounting of a component, but can also\n * be used to describe in-place transition states as well.\n *\n * ---\n *\n * **Note**: `Transition` is a platform-agnostic base component. If you're using\n * transitions in CSS, you'll probably want to use\n * [`CSSTransition`](https://reactcommunity.org/react-transition-group/css-transition)\n * instead. It inherits all the features of `Transition`, but contains\n * additional features necessary to play nice with CSS transitions (hence the\n * name of the component).\n *\n * ---\n *\n * By default the `Transition` component does not alter the behavior of the\n * component it renders, it only tracks \"enter\" and \"exit\" states for the\n * components. It's up to you to give meaning and effect to those states. For\n * example we can add styles to a component when it enters or exits:\n *\n * ```jsx\n * import { Transition } from 'react-transition-group';\n *\n * const duration = 300;\n *\n * const defaultStyle = {\n * transition: `opacity ${duration}ms ease-in-out`,\n * opacity: 0,\n * }\n *\n * const transitionStyles = {\n * entering: { opacity: 1 },\n * entered: { opacity: 1 },\n * exiting: { opacity: 0 },\n * exited: { opacity: 0 },\n * };\n *\n * const Fade = ({ in: inProp }) => (\n * \n * I'm a fade Transition!\n *
\n * )}\n * \n * \n * {state => (\n * // ...\n * )}\n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the button is clicked the component will shift to the `'entering'` state\n * and stay there for 500ms (the value of `timeout`) before it finally switches\n * to `'entered'`.\n *\n * When `in` is `false` the same thing happens except the state moves from\n * `'exiting'` to `'exited'`.\n */\n\nvar Transition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(Transition, _React$Component);\n\n function Transition(props, context) {\n var _this;\n\n _this = _React$Component.call(this, props, context) || this;\n var parentGroup = context; // In the context of a TransitionGroup all enters are really appears\n\n var appear = parentGroup && !parentGroup.isMounting ? props.enter : props.appear;\n var initialStatus;\n _this.appearStatus = null;\n\n if (props.in) {\n if (appear) {\n initialStatus = EXITED;\n _this.appearStatus = ENTERING;\n } else {\n initialStatus = ENTERED;\n }\n } else {\n if (props.unmountOnExit || props.mountOnEnter) {\n initialStatus = UNMOUNTED;\n } else {\n initialStatus = EXITED;\n }\n }\n\n _this.state = {\n status: initialStatus\n };\n _this.nextCallback = null;\n return _this;\n }\n\n Transition.getDerivedStateFromProps = function getDerivedStateFromProps(_ref, prevState) {\n var nextIn = _ref.in;\n\n if (nextIn && prevState.status === UNMOUNTED) {\n return {\n status: EXITED\n };\n }\n\n return null;\n } // getSnapshotBeforeUpdate(prevProps) {\n // let nextStatus = null\n // if (prevProps !== this.props) {\n // const { status } = this.state\n // if (this.props.in) {\n // if (status !== ENTERING && status !== ENTERED) {\n // nextStatus = ENTERING\n // }\n // } else {\n // if (status === ENTERING || status === ENTERED) {\n // nextStatus = EXITING\n // }\n // }\n // }\n // return { nextStatus }\n // }\n ;\n\n var _proto = Transition.prototype;\n\n _proto.componentDidMount = function componentDidMount() {\n this.updateStatus(true, this.appearStatus);\n };\n\n _proto.componentDidUpdate = function componentDidUpdate(prevProps) {\n var nextStatus = null;\n\n if (prevProps !== this.props) {\n var status = this.state.status;\n\n if (this.props.in) {\n if (status !== ENTERING && status !== ENTERED) {\n nextStatus = ENTERING;\n }\n } else {\n if (status === ENTERING || status === ENTERED) {\n nextStatus = EXITING;\n }\n }\n }\n\n this.updateStatus(false, nextStatus);\n };\n\n _proto.componentWillUnmount = function componentWillUnmount() {\n this.cancelNextCallback();\n };\n\n _proto.getTimeouts = function getTimeouts() {\n var timeout = this.props.timeout;\n var exit, enter, appear;\n exit = enter = appear = timeout;\n\n if (timeout != null && typeof timeout !== 'number') {\n exit = timeout.exit;\n enter = timeout.enter; // TODO: remove fallback for next major\n\n appear = timeout.appear !== undefined ? timeout.appear : enter;\n }\n\n return {\n exit: exit,\n enter: enter,\n appear: appear\n };\n };\n\n _proto.updateStatus = function updateStatus(mounting, nextStatus) {\n if (mounting === void 0) {\n mounting = false;\n }\n\n if (nextStatus !== null) {\n // nextStatus will always be ENTERING or EXITING.\n this.cancelNextCallback();\n\n if (nextStatus === ENTERING) {\n if (this.props.unmountOnExit || this.props.mountOnEnter) {\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this); // https://github.com/reactjs/react-transition-group/pull/749\n // With unmountOnExit or mountOnEnter, the enter animation should happen at the transition between `exited` and `entering`.\n // To make the animation happen, we have to separate each rendering and avoid being processed as batched.\n\n if (node) forceReflow(node);\n }\n\n this.performEnter(mounting);\n } else {\n this.performExit();\n }\n } else if (this.props.unmountOnExit && this.state.status === EXITED) {\n this.setState({\n status: UNMOUNTED\n });\n }\n };\n\n _proto.performEnter = function performEnter(mounting) {\n var _this2 = this;\n\n var enter = this.props.enter;\n var appearing = this.context ? this.context.isMounting : mounting;\n\n var _ref2 = this.props.nodeRef ? [appearing] : [ReactDOM.findDOMNode(this), appearing],\n maybeNode = _ref2[0],\n maybeAppearing = _ref2[1];\n\n var timeouts = this.getTimeouts();\n var enterTimeout = appearing ? timeouts.appear : timeouts.enter; // no enter animation skip right to ENTERED\n // if we are mounting and running this it means appear _must_ be set\n\n if (!mounting && !enter || config.disabled) {\n this.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode);\n });\n return;\n }\n\n this.props.onEnter(maybeNode, maybeAppearing);\n this.safeSetState({\n status: ENTERING\n }, function () {\n _this2.props.onEntering(maybeNode, maybeAppearing);\n\n _this2.onTransitionEnd(enterTimeout, function () {\n _this2.safeSetState({\n status: ENTERED\n }, function () {\n _this2.props.onEntered(maybeNode, maybeAppearing);\n });\n });\n });\n };\n\n _proto.performExit = function performExit() {\n var _this3 = this;\n\n var exit = this.props.exit;\n var timeouts = this.getTimeouts();\n var maybeNode = this.props.nodeRef ? undefined : ReactDOM.findDOMNode(this); // no exit animation skip right to EXITED\n\n if (!exit || config.disabled) {\n this.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n return;\n }\n\n this.props.onExit(maybeNode);\n this.safeSetState({\n status: EXITING\n }, function () {\n _this3.props.onExiting(maybeNode);\n\n _this3.onTransitionEnd(timeouts.exit, function () {\n _this3.safeSetState({\n status: EXITED\n }, function () {\n _this3.props.onExited(maybeNode);\n });\n });\n });\n };\n\n _proto.cancelNextCallback = function cancelNextCallback() {\n if (this.nextCallback !== null) {\n this.nextCallback.cancel();\n this.nextCallback = null;\n }\n };\n\n _proto.safeSetState = function safeSetState(nextState, callback) {\n // This shouldn't be necessary, but there are weird race conditions with\n // setState callbacks and unmounting in testing, so always make sure that\n // we can cancel any pending setState callbacks after we unmount.\n callback = this.setNextCallback(callback);\n this.setState(nextState, callback);\n };\n\n _proto.setNextCallback = function setNextCallback(callback) {\n var _this4 = this;\n\n var active = true;\n\n this.nextCallback = function (event) {\n if (active) {\n active = false;\n _this4.nextCallback = null;\n callback(event);\n }\n };\n\n this.nextCallback.cancel = function () {\n active = false;\n };\n\n return this.nextCallback;\n };\n\n _proto.onTransitionEnd = function onTransitionEnd(timeout, handler) {\n this.setNextCallback(handler);\n var node = this.props.nodeRef ? this.props.nodeRef.current : ReactDOM.findDOMNode(this);\n var doesNotHaveTimeoutOrListener = timeout == null && !this.props.addEndListener;\n\n if (!node || doesNotHaveTimeoutOrListener) {\n setTimeout(this.nextCallback, 0);\n return;\n }\n\n if (this.props.addEndListener) {\n var _ref3 = this.props.nodeRef ? [this.nextCallback] : [node, this.nextCallback],\n maybeNode = _ref3[0],\n maybeNextCallback = _ref3[1];\n\n this.props.addEndListener(maybeNode, maybeNextCallback);\n }\n\n if (timeout != null) {\n setTimeout(this.nextCallback, timeout);\n }\n };\n\n _proto.render = function render() {\n var status = this.state.status;\n\n if (status === UNMOUNTED) {\n return null;\n }\n\n var _this$props = this.props,\n children = _this$props.children,\n _in = _this$props.in,\n _mountOnEnter = _this$props.mountOnEnter,\n _unmountOnExit = _this$props.unmountOnExit,\n _appear = _this$props.appear,\n _enter = _this$props.enter,\n _exit = _this$props.exit,\n _timeout = _this$props.timeout,\n _addEndListener = _this$props.addEndListener,\n _onEnter = _this$props.onEnter,\n _onEntering = _this$props.onEntering,\n _onEntered = _this$props.onEntered,\n _onExit = _this$props.onExit,\n _onExiting = _this$props.onExiting,\n _onExited = _this$props.onExited,\n _nodeRef = _this$props.nodeRef,\n childProps = _objectWithoutPropertiesLoose(_this$props, [\"children\", \"in\", \"mountOnEnter\", \"unmountOnExit\", \"appear\", \"enter\", \"exit\", \"timeout\", \"addEndListener\", \"onEnter\", \"onEntering\", \"onEntered\", \"onExit\", \"onExiting\", \"onExited\", \"nodeRef\"]);\n\n return (\n /*#__PURE__*/\n // allows for nested Transitions\n React.createElement(TransitionGroupContext.Provider, {\n value: null\n }, typeof children === 'function' ? children(status, childProps) : React.cloneElement(React.Children.only(children), childProps))\n );\n };\n\n return Transition;\n}(React.Component);\n\nTransition.contextType = TransitionGroupContext;\nTransition.propTypes = process.env.NODE_ENV !== \"production\" ? {\n /**\n * A React reference to DOM element that need to transition:\n * https://stackoverflow.com/a/51127130/4671932\n *\n * - When `nodeRef` prop is used, `node` is not passed to callback functions\n * (e.g. `onEnter`) because user already has direct access to the node.\n * - When changing `key` prop of `Transition` in a `TransitionGroup` a new\n * `nodeRef` need to be provided to `Transition` with changed `key` prop\n * (see\n * [test/CSSTransition-test.js](https://github.com/reactjs/react-transition-group/blob/13435f897b3ab71f6e19d724f145596f5910581c/test/CSSTransition-test.js#L362-L437)).\n */\n nodeRef: PropTypes.shape({\n current: typeof Element === 'undefined' ? PropTypes.any : function (propValue, key, componentName, location, propFullName, secret) {\n var value = propValue[key];\n return PropTypes.instanceOf(value && 'ownerDocument' in value ? value.ownerDocument.defaultView.Element : Element)(propValue, key, componentName, location, propFullName, secret);\n }\n }),\n\n /**\n * A `function` child can be used instead of a React element. This function is\n * called with the current transition status (`'entering'`, `'entered'`,\n * `'exiting'`, `'exited'`), which can be used to apply context\n * specific props to a component.\n *\n * ```jsx\n * \n * \n * \n * \n *
\n * );\n * }\n * ```\n *\n * When the `in` prop is set to `true`, the child component will first receive\n * the class `example-enter`, then the `example-enter-active` will be added in\n * the next tick. `CSSTransition` [forces a\n * reflow](https://github.com/reactjs/react-transition-group/blob/5007303e729a74be66a21c3e2205e4916821524b/src/CSSTransition.js#L208-L215)\n * between before adding the `example-enter-active`. This is an important trick\n * because it allows us to transition between `example-enter` and\n * `example-enter-active` even though they were added immediately one after\n * another. Most notably, this is what makes it possible for us to animate\n * _appearance_.\n *\n * ```css\n * .my-node-enter {\n * opacity: 0;\n * }\n * .my-node-enter-active {\n * opacity: 1;\n * transition: opacity 200ms;\n * }\n * .my-node-exit {\n * opacity: 1;\n * }\n * .my-node-exit-active {\n * opacity: 0;\n * transition: opacity 200ms;\n * }\n * ```\n *\n * `*-active` classes represent which styles you want to animate **to**, so it's\n * important to add `transition` declaration only to them, otherwise transitions\n * might not behave as intended! This might not be obvious when the transitions\n * are symmetrical, i.e. when `*-enter-active` is the same as `*-exit`, like in\n * the example above (minus `transition`), but it becomes apparent in more\n * complex transitions.\n *\n * **Note**: If you're using the\n * [`appear`](http://reactcommunity.org/react-transition-group/transition#Transition-prop-appear)\n * prop, make sure to define styles for `.appear-*` classes as well.\n */\n\n\nvar CSSTransition = /*#__PURE__*/function (_React$Component) {\n _inheritsLoose(CSSTransition, _React$Component);\n\n function CSSTransition() {\n var _this;\n\n for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {\n args[_key] = arguments[_key];\n }\n\n _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;\n _this.appliedClasses = {\n appear: {},\n enter: {},\n exit: {}\n };\n\n _this.onEnter = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument[0],\n appearing = _this$resolveArgument[1];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, appearing ? 'appear' : 'enter', 'base');\n\n if (_this.props.onEnter) {\n _this.props.onEnter(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntering = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument2 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument2[0],\n appearing = _this$resolveArgument2[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.addClass(node, type, 'active');\n\n if (_this.props.onEntering) {\n _this.props.onEntering(maybeNode, maybeAppearing);\n }\n };\n\n _this.onEntered = function (maybeNode, maybeAppearing) {\n var _this$resolveArgument3 = _this.resolveArguments(maybeNode, maybeAppearing),\n node = _this$resolveArgument3[0],\n appearing = _this$resolveArgument3[1];\n\n var type = appearing ? 'appear' : 'enter';\n\n _this.removeClasses(node, type);\n\n _this.addClass(node, type, 'done');\n\n if (_this.props.onEntered) {\n _this.props.onEntered(maybeNode, maybeAppearing);\n }\n };\n\n _this.onExit = function (maybeNode) {\n var _this$resolveArgument4 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument4[0];\n\n _this.removeClasses(node, 'appear');\n\n _this.removeClasses(node, 'enter');\n\n _this.addClass(node, 'exit', 'base');\n\n if (_this.props.onExit) {\n _this.props.onExit(maybeNode);\n }\n };\n\n _this.onExiting = function (maybeNode) {\n var _this$resolveArgument5 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument5[0];\n\n _this.addClass(node, 'exit', 'active');\n\n if (_this.props.onExiting) {\n _this.props.onExiting(maybeNode);\n }\n };\n\n _this.onExited = function (maybeNode) {\n var _this$resolveArgument6 = _this.resolveArguments(maybeNode),\n node = _this$resolveArgument6[0];\n\n _this.removeClasses(node, 'exit');\n\n _this.addClass(node, 'exit', 'done');\n\n if (_this.props.onExited) {\n _this.props.onExited(maybeNode);\n }\n };\n\n _this.resolveArguments = function (maybeNode, maybeAppearing) {\n return _this.props.nodeRef ? [_this.props.nodeRef.current, maybeNode] // here `maybeNode` is actually `appearing`\n : [maybeNode, maybeAppearing];\n };\n\n _this.getClassNames = function (type) {\n var classNames = _this.props.classNames;\n var isStringClassNames = typeof classNames === 'string';\n var prefix = isStringClassNames && classNames ? classNames + \"-\" : '';\n var baseClassName = isStringClassNames ? \"\" + prefix + type : classNames[type];\n var activeClassName = isStringClassNames ? baseClassName + \"-active\" : classNames[type + \"Active\"];\n var doneClassName = isStringClassNames ? baseClassName + \"-done\" : classNames[type + \"Done\"];\n return {\n baseClassName: baseClassName,\n activeClassName: activeClassName,\n doneClassName: doneClassName\n };\n };\n\n return _this;\n }\n\n var _proto = CSSTransition.prototype;\n\n _proto.addClass = function addClass(node, type, phase) {\n var className = this.getClassNames(type)[phase + \"ClassName\"];\n\n var _this$getClassNames = this.getClassNames('enter'),\n doneClassName = _this$getClassNames.doneClassName;\n\n if (type === 'appear' && phase === 'done' && doneClassName) {\n className += \" \" + doneClassName;\n } // This is to force a repaint,\n // which is necessary in order to transition styles when adding a class name.\n\n\n if (phase === 'active') {\n if (node) forceReflow(node);\n }\n\n if (className) {\n this.appliedClasses[type][phase] = className;\n\n _addClass(node, className);\n }\n };\n\n _proto.removeClasses = function removeClasses(node, type) {\n var _this$appliedClasses$ = this.appliedClasses[type],\n baseClassName = _this$appliedClasses$.base,\n activeClassName = _this$appliedClasses$.active,\n doneClassName = _this$appliedClasses$.done;\n this.appliedClasses[type] = {};\n\n if (baseClassName) {\n removeClass(node, baseClassName);\n }\n\n if (activeClassName) {\n removeClass(node, activeClassName);\n }\n\n if (doneClassName) {\n removeClass(node, doneClassName);\n }\n };\n\n _proto.render = function render() {\n var _this$props = this.props,\n _ = _this$props.classNames,\n props = _objectWithoutPropertiesLoose(_this$props, [\"classNames\"]);\n\n return /*#__PURE__*/React.createElement(Transition, _extends({}, props, {\n onEnter: this.onEnter,\n onEntered: this.onEntered,\n onEntering: this.onEntering,\n onExit: this.onExit,\n onExiting: this.onExiting,\n onExited: this.onExited\n }));\n };\n\n return CSSTransition;\n}(React.Component);\n\nCSSTransition.defaultProps = {\n classNames: ''\n};\nCSSTransition.propTypes = process.env.NODE_ENV !== \"production\" ? _extends({}, Transition.propTypes, {\n /**\n * The animation classNames applied to the component as it appears, enters,\n * exits or has finished the transition. A single name can be provided, which\n * will be suffixed for each stage, e.g. `classNames=\"fade\"` applies:\n *\n * - `fade-appear`, `fade-appear-active`, `fade-appear-done`\n * - `fade-enter`, `fade-enter-active`, `fade-enter-done`\n * - `fade-exit`, `fade-exit-active`, `fade-exit-done`\n *\n * A few details to note about how these classes are applied:\n *\n * 1. They are _joined_ with the ones that are already defined on the child\n * component, so if you want to add some base styles, you can use\n * `className` without worrying that it will be overridden.\n *\n * 2. If the transition component mounts with `in={false}`, no classes are\n * applied yet. You might be expecting `*-exit-done`, but if you think\n * about it, a component cannot finish exiting if it hasn't entered yet.\n *\n * 2. `fade-appear-done` and `fade-enter-done` will _both_ be applied. This\n * allows you to define different behavior for when appearing is done and\n * when regular entering is done, using selectors like\n * `.fade-enter-done:not(.fade-appear-done)`. For example, you could apply\n * an epic entrance animation when element first appears in the DOM using\n * [Animate.css](https://daneden.github.io/animate.css/). Otherwise you can\n * simply use `fade-enter-done` for defining both cases.\n *\n * Each individual classNames can also be specified independently like:\n *\n * ```js\n * classNames={{\n * appear: 'my-appear',\n * appearActive: 'my-active-appear',\n * appearDone: 'my-done-appear',\n * enter: 'my-enter',\n * enterActive: 'my-active-enter',\n * enterDone: 'my-done-enter',\n * exit: 'my-exit',\n * exitActive: 'my-active-exit',\n * exitDone: 'my-done-exit',\n * }}\n * ```\n *\n * If you want to set these classes using CSS Modules:\n *\n * ```js\n * import styles from './styles.css';\n * ```\n *\n * you might want to use camelCase in your CSS file, that way could simply\n * spread them instead of listing them one by one:\n *\n * ```js\n * classNames={{ ...styles }}\n * ```\n *\n * @type {string | {\n * appear?: string,\n * appearActive?: string,\n * appearDone?: string,\n * enter?: string,\n * enterActive?: string,\n * enterDone?: string,\n * exit?: string,\n * exitActive?: string,\n * exitDone?: string,\n * }}\n */\n classNames: classNamesShape,\n\n /**\n * A `\n * {\"I'll receive my-node-* classes\"}\n *
\n * \n {children}\n
\n \n {children} \n
\n )\n },\n)\n\nCAccordionHeader.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCAccordionHeader.displayName = 'CAccordionHeader'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CCloseButtonProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCButtonToolbar.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCButtonToolbar.displayName = 'CButtonToolbar'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CButtonGroupProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCCardBody.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCCardBody.displayName = 'CCardBody'\n","import PropTypes from 'prop-types'\nimport React, { forwardRef, HTMLAttributes } from 'react'\nimport classNames from 'classnames'\n\nexport interface CCardFooterProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCCardFooter.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCCardFooter.displayName = 'CCardFooter'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CCardGroupProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCCardGroup.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCCardGroup.displayName = 'CCardGroup'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CCardHeaderProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCCardImageOverlay.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCCardImageOverlay.displayName = 'CCardImageOverlay'\n","import React, { AnchorHTMLAttributes, forwardRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { CLink } from '../link/CLink'\n\nexport interface CCardLinkProps extends AnchorHTMLAttributes\n {Array.from({ length: itemsNumber }, (_, i) => i).map((index) => {\n return (\n {\n !animating && handleIndicatorClick(index)\n }}\n className={classNames({\n active: active === index\n })}\n data-coreui-target=\"\"\n {...(active === index && { 'aria-current': true })}\n aria-label={`Slide ${index + 1}`}\n />\n )\n })}\n
\n )}\n \n {Children.map(children, (child, index) => {\n if (React.isValidElement(child)) {\n return React.cloneElement(child as React.ReactElement, {\n active: active === index ? true : false,\n direction: direction,\n key: index,\n })\n }\n return\n })}\n
\n {controls && (\n <>\n \n \n \n )}\n \n \n )\n },\n)\n\nCCarousel.propTypes = {\n activeIndex: PropTypes.number,\n children: PropTypes.node,\n className: PropTypes.string,\n controls: PropTypes.bool,\n dark: PropTypes.bool,\n indicators: PropTypes.bool,\n interval: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),\n onSlid: PropTypes.func,\n onSlide: PropTypes.func,\n pause: PropTypes.oneOf([false, 'hover']),\n touch: PropTypes.bool,\n transition: PropTypes.oneOf(['slide', 'crossfade']),\n wrap: PropTypes.bool,\n}\n\nCCarousel.displayName = 'CCarousel'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CCarouselCaptionProps extends HTMLAttributes| \n {weekNumbersLabel} \n | \n )}\n {weekDays.map(({ date }: { date: Date }, idx: number) => (\n \n \n {typeof weekdayFormat === 'function'\n ? weekdayFormat(date)\n : typeof weekdayFormat === 'string'\n ? date.toLocaleDateString(locale, { weekday: weekdayFormat })\n : date.toLocaleDateString(locale, { weekday: 'long' }).slice(0, weekdayFormat)}\n \n | \n ))}\n \n {week.weekNumber === 0 ? 53 : week.weekNumber}\n | \n )}\n {week.days.map(({ date, month }: { date: Date; month: string }, idx: number) => {\n const isDisabled = isDateDisabled(date, minDate, maxDate, disabledDates)\n return month === 'current' || showAdjacementDays ? (\n\n )\n })}\n \n )\n })}\n {view === 'months' &&\n listOfMonths.map((row, index) => {\n return (\n |
|---|---|
\n {navigation && (\n \n {view === 'days' && (\n navigation && onMonthClick()}>\n {calendarDate && calendarDate.toLocaleDateString(locale, { month: 'long' })}\n \n )}\n navigation && onYearClick()}\n {...(navYearFirst && { style: { order: '-1' } })}\n >\n {calendarDate && calendarDate.toLocaleDateString(locale, { year: 'numeric' })}\n \n
\n {navigation && (\n \n onNavigationClick('prev', true)}>\n {navPrevDoubleIcon ?? (\n \n )}\n \n {view === 'days' && (\n onNavigationClick('prev')}>\n {navPrevIcon ?? }\n \n )}\n
\n )}\n \n {view === 'days' && (\n onNavigationClick('next')}>\n {navNextIcon ?? }\n \n )}\n onNavigationClick('next', true)}>\n {navNextDoubleIcon ?? (\n \n )}\n \n
\n )}\n \n )\n}\n\nexport const CCalendar = forwardRef\n setView('months')}\n onNavigationClick={handleNavigationOnClick}\n onYearClick={() => setView('years')}\n view={view}\n />\n handleCalendarClick(date, index)}\n onCalendarKeyDown={(event, date) => handleCalendarKeyDown(event, date, index)}\n onCalendarMouseEnter={handleCalendarMouseEnter}\n onCalendarMouseLeave={handleCalendarMouseLeave}\n order={index}\n selectAdjacementDays={selectAdjacementDays}\n selectEndDate={_selectEndDate}\n selectionType={selectionType}\n showAdjacementDays={showAdjacementDays}\n showWeekNumber={showWeekNumber}\n startDate={_startDate}\n view={view}\n weekdayFormat={weekdayFormat}\n weekNumbersLabel={weekNumbersLabel}\n />\n
\n )\n })}\n \n )\n },\n)\n\nCCalendar.propTypes = {\n className: PropTypes.string,\n calendarDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),\n calendars: PropTypes.number,\n dayFormat: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.oneOf<'2-digit' | 'numeric'>(['2-digit', 'numeric']),\n ]),\n disabledDates: PropTypes.array,\n endDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),\n firstDayOfWeek: PropTypes.number,\n locale: PropTypes.string,\n maxDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),\n minDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),\n navigation: PropTypes.bool,\n navNextIcon: PropTypes.node,\n navNextDoubleIcon: PropTypes.node,\n navPrevIcon: PropTypes.node,\n navPrevDoubleIcon: PropTypes.node,\n navYearFirst: PropTypes.bool,\n range: PropTypes.bool,\n selectAdjacementDays: PropTypes.bool,\n selectEndDate: PropTypes.bool,\n selectionType: PropTypes.oneOf(['day', 'week', 'month', 'year']),\n showAdjacementDays: PropTypes.bool,\n showWeekNumber: PropTypes.bool,\n startDate: PropTypes.oneOfType([PropTypes.instanceOf(Date), PropTypes.string]),\n weekdayFormat: PropTypes.oneOfType([\n PropTypes.func,\n PropTypes.number,\n PropTypes.oneOf<'long' | 'narrow' | 'short'>(['long', 'narrow', 'short']),\n ]),\n weekNumbersLabel: PropTypes.string,\n onDateHover: PropTypes.func,\n onCalendarDateChange: PropTypes.func,\n onEndDateChange: PropTypes.func,\n onSelectEndChange: PropTypes.func,\n onStartDateChange: PropTypes.func,\n onViewChanged: PropTypes.func,\n}\n\nCCalendar.displayName = 'CCalendar'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CFormFeedbackProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nCFormFloating.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n}\n\nCFormFloating.displayName = 'CFormFloating'\n","import React, { forwardRef, LabelHTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CFormLabelProps extends LabelHTMLAttributes\n {children}\n
\n )\n }\n default: {\n return (\n \n {children}\n {footer && footerContent}\n
\n \n )\n }\n }\n },\n)\n\nCPicker.displayName = 'CPicker'\n\nCPicker.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n container: PropTypes.oneOf(['dropdown', 'inline']),\n disabled: PropTypes.bool,\n dropdownClassNames: PropTypes.string,\n footer: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n footerContent: PropTypes.node,\n onHide: PropTypes.func,\n onShow: PropTypes.func,\n toggler: PropTypes.node,\n}\n","import React, { forwardRef, useEffect, useRef } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { useForkedRef } from '../../hooks'\n\nexport interface Element {\n value: number | string\n label: number | string\n}\n\nexport interface CTimePickerRollColProps {\n elements: Element[]\n onClick?: (value: number | string) => void\n selected?: number | string | null\n}\n\nexport const CTimePickerRollCol = forwardRef\n {elements.map((element, index) => {\n return (\n onClick && onClick(element.value)}\n onKeyDown={(event) => handleKeyDown(event, element.value)}\n role=\"button\"\n tabIndex={0}\n >\n {element.label}\n
\n )\n })}\n \n )\n },\n)\n\nCTimePickerRollCol.propTypes = {\n elements: PropTypes.array.isRequired,\n onClick: PropTypes.func,\n selected: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),\n}\n\nCTimePickerRollCol.displayName = 'CTimePickerRollCol'\n","import type { LocalizedTimePartials } from './types'\n\nexport const convert12hTo24h = (abbr: 'am' | 'pm', hour: number) => {\n if (abbr === 'am' && hour === 12) {\n return 0\n }\n if (abbr === 'am') {\n return hour\n }\n if (abbr === 'pm' && hour === 12) {\n return 12\n }\n return hour + 12\n}\n\nexport const convert24hTo12h = (hour: number) => hour % 12 || 12\n\nexport const convertTimeToDate = (time: Date | string | null | undefined) =>\n time\n ? time instanceof Date\n ? time\n : new Date(`1970-01-01 ${time}`)\n : null\n\nexport const getAmPm = (date: Date, locale: string) => {\n if (date.toLocaleTimeString(locale).includes('AM')) {\n return 'am'\n }\n if (date.toLocaleTimeString(locale).includes('PM')) {\n return 'pm'\n }\n return date.getHours() >= 12 ? 'pm' : 'am'\n}\n\n// TODO: clean-up\nexport const getListOfHours = (locale: string, ampm: 'auto' | boolean = 'auto') =>\n Array.from({ length: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? 12 : 24 }, (_, i) => {\n return {\n value: (ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i,\n label: ((ampm === 'auto' && isAmPm(locale)) || ampm === true ? i + 1 : i).toLocaleString(\n locale,\n ),\n }\n })\n\n// TODO: clean-up\nexport const getListOfMinutes = (locale: string, valueAsString = false) =>\n Array.from({ length: 60 }, (_, i) => {\n const d = new Date()\n d.setMinutes(i)\n return {\n value: valueAsString ? i.toString() : i,\n label: d\n .toLocaleTimeString(locale, {\n minute: '2-digit',\n second: '2-digit',\n })\n .split(/[^A-Za-z0-9\\u06F0-\\u06F90-9]/)[0],\n }\n })\n\n// TODO: clean-up\nexport const getListOfSeconds = (locale: string, valueAsString = false) =>\n Array.from({ length: 60 }, (_, i) => {\n const d = new Date()\n d.setSeconds(i)\n return {\n value: valueAsString ? i.toString() : i,\n label: d\n .toLocaleTimeString(locale, {\n minute: '2-digit',\n second: '2-digit',\n })\n .split(/[^A-Za-z0-9\\u06F0-\\u06F90-9]/)[0],\n }\n })\n\nexport const getLocalizedTimePartials = (\n locale: string,\n ampm: 'auto' | boolean = 'auto',\n): LocalizedTimePartials => {\n const date = new Date()\n const hour12 = ['am', 'AM', 'pm', 'PM'].some((el) => date.toLocaleString(locale).includes(el))\n const listOfHours = Array.from(\n { length: (ampm === 'auto' && hour12) || ampm === true ? 12 : 24 },\n (_, i) => {\n return {\n value: (ampm === 'auto' && hour12) || ampm === true ? i + 1 : i,\n label: ((ampm === 'auto' && hour12) || ampm === true ? i + 1 : i).toLocaleString(locale),\n }\n },\n )\n const listOfMinutesSeconds = Array.from({ length: 60 }, (_, i) => {\n date.setMinutes(i)\n return {\n value: i,\n label: date\n .toLocaleTimeString(locale, {\n minute: '2-digit',\n second: '2-digit',\n })\n .split(/[^A-Za-z0-9\\u06F0-\\u06F90-9]/)[0],\n }\n })\n\n return {\n listOfHours,\n listOfMinutes: listOfMinutesSeconds,\n listOfSeconds: listOfMinutesSeconds,\n hour12,\n }\n}\n\nexport const getSelectedHour = (\n date: Date | null,\n locale: string,\n ampm: 'auto' | boolean = 'auto',\n) =>\n date\n ? (ampm === 'auto' && isAmPm(locale)) || ampm === true\n ? convert24hTo12h(date.getHours())\n : date.getHours()\n : ''\n\nexport const getSelectedMinutes = (date: Date | null) => (date ? date.getMinutes() : '')\n\nexport const getSelectedSeconds = (date: Date | null) => (date ? date.getSeconds() : '')\n\nexport const isAmPm = (locale: string) =>\n ['am', 'AM', 'pm', 'PM'].some((el) => new Date().toLocaleString(locale).includes(el))\n\nexport const isValidTime = (time: string) => {\n const d = new Date(`1970-01-01 ${time}`)\n return d instanceof Date && d.getTime()\n}\n","import React, { forwardRef, ReactNode, useEffect, useRef, useState } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nimport { CButton } from '../button'\nimport { CFormControlWrapper, CFormControlWrapperProps } from '../form/CFormControlWrapper'\nimport { CPicker, CPickerProps } from './../picker/CPicker'\n\nimport { CTimePickerRollCol } from './CTimePickerRollCol'\nimport {\n convert12hTo24h,\n convertTimeToDate,\n getAmPm,\n getLocalizedTimePartials,\n getSelectedHour,\n getSelectedMinutes,\n getSelectedSeconds,\n isValidTime,\n} from './utils'\n\nimport { Colors } from '../../types'\nimport type { LocalizedTimePartials } from './types'\n\nexport interface CTimePickerProps\n extends Omit\n \n isValidTime(event.target.value) && setDate(convertTimeToDate(event.target.value))\n }\n placeholder={placeholder}\n readOnly={inputReadOnly}\n required={required}\n ref={inputRef}\n />\n {indicator &&\n (typeof indicator === 'boolean' ? : indicator)}\n {cleaner &&\n date &&\n (typeof cleaner === 'boolean' ? (\n ) =>\n handleTimeChange('hours', event.target.value)\n }\n value={getSelectedHour(date, locale)}\n >\n {localizedTimePartials &&\n localizedTimePartials.listOfHours.map((option, index) => (\n \n ))}\n \n <>:\n ) =>\n handleTimeChange('minutes', event.target.value)\n }\n value={getSelectedMinutes(date)}\n >\n {localizedTimePartials &&\n localizedTimePartials.listOfMinutes.map((option, index) => (\n \n ))}\n \n {seconds && (\n <>\n <>:\n ) =>\n handleTimeChange('seconds', event.target.value)\n }\n value={getSelectedSeconds(date)}\n >\n {localizedTimePartials &&\n localizedTimePartials.listOfSeconds.map((option, index) => (\n \n ))}\n \n \n )}\n {localizedTimePartials && localizedTimePartials.hour12 && (\n ) =>\n handleTimeChange('toggle', event.target.value)\n }\n value={_ampm}\n >\n \n \n \n )}\n \n )\n }\n\n const TimePickerRoll = () => (\n <>\n handleTimeChange('hours', index.toString())}\n selected={getSelectedHour(date, locale, ampm)}\n />\n handleTimeChange('minutes', index.toString())}\n selected={getSelectedMinutes(date)}\n />\n {seconds && (\n handleTimeChange('seconds', index.toString())}\n selected={getSelectedSeconds(date)}\n />\n )}\n {localizedTimePartials && localizedTimePartials.hour12 && (\n handleTimeChange('toggle', value)}\n selected={_ampm}\n />\n )}\n \n )\n\n return (\n \n \n {cancelButton && (\n {\n initialDate && setDate(new Date(initialDate))\n setVisible(false)\n }}\n >\n {cancelButton}\n \n )}\n {confirmButton && (\n {\n setVisible(false)\n }}\n >\n {confirmButton}\n \n )}\n
\n }\n id={id}\n onHide={() => {\n setVisible(false)\n onHide && onHide()\n }}\n onShow={() => {\n date && setInitialDate(new Date(date))\n setVisible(true)\n onShow && onShow()\n }}\n toggler={InputGroup()}\n visible={_visible}\n {...rest}\n ref={ref}\n >\n handleClear(event)} />\n ) : (\n React.isValidElement(cleaner) &&\n React.cloneElement(cleaner as React.ReactElement, {\n onClick: (event: React.MouseEvent) => handleClear(event),\n })\n ))}\n
\n )\n\n const TimePickerSelect = () => {\n return (\n <>\n \n \n {\n const date = getLocalDateFromString(event.target.value, locale, timepicker)\n if (date instanceof Date && date.getTime()) {\n setCalendarDate(date)\n setStartDate(date)\n }\n }}\n onClick={() => setSelectEndDate(false)}\n ref={inputStartRef}\n />\n {range && separator !== false && }\n {range && (\n {\n const date = getLocalDateFromString(event.target.value, locale, timepicker)\n if (date instanceof Date && date.getTime()) {\n setCalendarDate(date)\n setEndDate(date)\n }\n }}\n onClick={() => setSelectEndDate(true)}\n ref={inputEndRef}\n />\n )}\n {indicator &&\n (typeof indicator === 'boolean' ? : indicator)}\n {cleaner &&\n (_startDate || _endDate) &&\n (typeof cleaner === 'boolean' ? (\n \n \n {todayButton && (\n {\n const date = new Date()\n handleStartDateChange(date)\n handleEndDateChange(date)\n setCalendarDate(date)\n }}\n >\n {todayButton}\n \n )}\n {cancelButton && (\n {\n handleStartDateChange(initialStartDate)\n handleEndDateChange(initialEndDate)\n setVisible(false)\n }}\n >\n {cancelButton}\n \n )}\n {confirmButton && (\n {\n setVisible(false)\n }}\n >\n {confirmButton}\n \n )}\n
\n }\n id={id}\n toggler={toggler ?? InputGroup()}\n onHide={() => {\n setVisible(false)\n onHide && onHide()\n }}\n onShow={() => {\n setInitialStartDate(_startDate)\n setInitialEndDate(_endDate)\n setVisible(true)\n onShow && onShow()\n }}\n visible={_visible}\n {...rest}\n ref={ref}\n >\n handleClear(event)} />\n ) : (\n React.isValidElement(cleaner) &&\n React.cloneElement(cleaner as React.ReactElement, {\n onClick: (event: React.MouseEvent) => handleClear(event),\n })\n ))}\n
\n )\n\n return (\n \n {ranges && (\n handleDateHover(date)}\n onCalendarDateChange={(date) => setCalendarDate(date)}\n onStartDateChange={(date) => handleStartDateChange(date)}\n onEndDateChange={(date) => handleEndDateChange(date)}\n onSelectEndChange={(value) => setSelectEndDate(value)}\n weekdayFormat={weekdayFormat}\n />\n {timepicker && (\n
\n \n \n )\n },\n)\n\nCDateRangePicker.displayName = 'CDateRangePicker'\n\nCDateRangePicker.propTypes = {\n ...CCalendar.propTypes,\n ...CFormControlWrapper.propTypes,\n ...CPicker.propTypes,\n cancelButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n cancelButtonColor: CButton.propTypes?.color,\n cancelButtonSize: CButton.propTypes?.size,\n cancelButtonVariant: CButton.propTypes?.variant,\n calendars: PropTypes.number,\n className: PropTypes.string,\n cleaner: PropTypes.bool,\n closeOnSelect: PropTypes.bool,\n confirmButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n confirmButtonColor: CButton.propTypes?.color,\n confirmButtonSize: CButton.propTypes?.size,\n confirmButtonVariant: CButton.propTypes?.variant,\n id: PropTypes.string,\n indicator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n inputReadOnly: PropTypes.bool,\n placeholder: PropTypes.oneOfType([\n PropTypes.string,\n PropTypes.arrayOf(PropTypes.string.isRequired),\n ]),\n range: PropTypes.bool,\n ranges: PropTypes.object,\n rangesButtonsColor: CButton.propTypes?.color,\n rangesButtonsSize: CButton.propTypes?.size,\n rangesButtonsVariant: CButton.propTypes?.variant,\n required: PropTypes.bool,\n separator: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n size: PropTypes.oneOf(['sm', 'lg']),\n timepicker: PropTypes.bool,\n todayButton: PropTypes.oneOfType([PropTypes.bool, PropTypes.node]),\n todayButtonColor: CButton.propTypes?.color,\n todayButtonSize: CButton.propTypes?.size,\n todayButtonVariant: CButton.propTypes?.variant,\n}\n","import React, { forwardRef } from 'react'\nimport PropTypes from 'prop-types'\n\nimport { CDateRangePicker, CDateRangePickerProps } from '../date-range-picker/CDateRangePicker'\n\nexport interface CDatePickerProps\n extends Omit<\n CDateRangePickerProps,\n | 'calendars'\n | 'endDate'\n | 'range'\n | 'onEndDateChange'\n | 'onStartDateChange'\n | 'ranges'\n | 'selectEndDate'\n | 'startDate'\n > {\n /**\n * Initial selected date.\n */\n date?: Date | string | null\n /**\n * The id global attribute defines an identifier (ID) that must be unique in the whole document.\n *\n * The name attribute for the input element is generated based on the `id` property:\n * - \\{id\\}-date\n */\n id?: string\n /**\n * Callback fired when the date changed.\n */\n onDateChange?: (date: Date | null, formatedDate?: string | undefined) => void\n}\n\nexport const CDatePicker = forwardRef\n {Object.keys(ranges).map((key: string, index: number) => (\n {\n handleStartDateChange(ranges[key][0])\n handleEndDateChange(ranges[key][1])\n }}\n size={rangesButtonsSize}\n variant={rangesButtonsVariant}\n >\n {key}\n \n ))}\n
\n )}\n \n {isMobile || (range && calendars === 1) ? (\n <>\n date && handleStartDateChange(date)}\n time={_startDate && new Date(_startDate)}\n variant=\"select\"\n />\n date && handleEndDateChange(date)}\n time={_endDate && new Date(_endDate)}\n variant=\"select\"\n />\n \n ) : (\n Array.from({ length: calendars }).map((_, index) => (\n \n index === 0\n ? date && handleStartDateChange(date)\n : date && handleEndDateChange(date)\n }\n time={\n index === 0\n ? _startDate && new Date(_startDate)\n : _endDate && new Date(_endDate)\n }\n variant=\"select\"\n />\n ))\n )}\n
\n )}\n \n },\n)\n\nCDropdownDivider.propTypes = {\n className: PropTypes.string,\n}\n\nCDropdownDivider.displayName = 'CDropdownDivider'\n","import React, { ElementType, forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CDropdownHeaderProps extends HTMLAttributes
\n \n {children ||
\n \n )\n },\n)\n\nCElementCover.propTypes = {\n boundaries: PropTypes.array,\n children: PropTypes.node,\n className: PropTypes.string,\n opacity: PropTypes.number,\n}\n\nCElementCover.displayName = 'CElementCover'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CFooterProps extends HTMLAttributes\n {children}\n
\n )\n },\n)\n\nconst bp = PropTypes.shape({\n cols: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.string]),\n gutter: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n gutterX: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n gutterY: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n})\n\nCRow.propTypes = {\n children: PropTypes.node,\n className: PropTypes.string,\n xs: bp,\n sm: bp,\n md: bp,\n lg: bp,\n xl: bp,\n xxl: bp,\n}\n\nCRow.displayName = 'CRow'\n","import React, { forwardRef, HTMLAttributes } from 'react'\nimport PropTypes from 'prop-types'\nimport classNames from 'classnames'\n\nexport interface CHeaderProps extends HTMLAttributes