ab-ui-library 1.0.1

package/components/CardSelect/types.d.ts

@@ -0,0 +1,37 @@
+import type { InputCustomProps } from '../Input/types';
+import type { TChipsProps } from '../Chips/types';
+import type { CARD_SELECT_TYPES } from '../../consts';
+export interface TCardSelectProps extends IFormCompProps {
+    id?: number | string;
+    type?: CARD_SELECT_TYPES;
+    title: string;
+    description: string;
+    chips?: TChipsProps[];
+    inputProps?: InputCustomProps;
+    className?: string;
+    disabled?: boolean;
+    handleCardSelectValue?: (isChecked: boolean) => void;
+    dataId?: string;
+    additionalInfo?: TInfoList;
+    selectedCard?: number;
+    value?: number | string;
+    handleChange?: (selected: number | string) => void;
+    isSelected?: boolean;
+    cardValue?: number | string;
+    illustration?: string;
+    icon?: TSelectIconProps;
+}
+export interface TCardSelectGroupProps extends IFormCompProps {
+    cards: TCardSelectProps[];
+    handleChange?: (selected: number | string) => void;
+    value: number | string;
+    cardsGroupDisable?: boolean;
+    cardsGroupType?: CARD_SELECT_TYPES;
+    className?: string;
+}
+export type TInfoList = TInfoListItem[];
+export type TInfoListItem = {
+    key: string;
+    value: string;
+    id?: number | string;
+};

package/components/CardSelect/types.js

@@ -0,0 +1 @@
+

package/components/Cards/CardItem.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TCardItemProps } from './types';
+export declare const CardItem: (props: TCardItemProps) => ReactElement;

package/components/Cards/CardItem.js

@@ -0,0 +1,41 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React from 'react';
+import { Text } from '../Text/Text.js';
+import classNames from 'classnames';
+import { Image } from '../Image/Image.js';
+import '../../utils/helpers.js';
+import 'dayjs';
+
+var CardItem = function CardItem(props) {
+  var title = props.title,
+    icon = props.icon,
+    subtitleProps = props.subtitleProps,
+    children = props.children,
+    className = props.className,
+    image = props.image,
+    disabled = props.disabled;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('card-item', className)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: 'card-item__left flexbox align-items--center'
+  }, image ? /*#__PURE__*/React.createElement("div", {
+    className: 'card-item__image flexbox align-items--center justify-content--center'
+  }, /*#__PURE__*/React.createElement(Image, {
+    imagePath: image
+  })) : icon && icon.Component ? /*#__PURE__*/React.createElement(icon.Component, icon) : null, /*#__PURE__*/React.createElement("div", {
+    className: "card-item__content text-truncate ".concat((image || icon && (icon === null || icon === void 0 ? void 0 : icon.Component)) && 'pl-12')
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: 'semibold'
+  }, title), /*#__PURE__*/React.createElement(Text, {
+    type: 'tertiary',
+    className: 'flexbox align-items--center mt-2'
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, subtitleProps === null || subtitleProps === void 0 ? void 0 : subtitleProps.subtitle, subtitleProps !== null && subtitleProps !== void 0 && subtitleProps.iconProps && subtitleProps.iconProps.Component ? /*#__PURE__*/React.createElement(subtitleProps.iconProps.Component, _extends({}, icon, {
+    size: 'xsmall',
+    type: 'tertiary',
+    className: 'ml-6'
+  })) : null)))), !disabled ? /*#__PURE__*/React.createElement("div", {
+    className: 'card-item__right ml-12'
+  }, children ? children : null) : null);
+};
+
+export { CardItem };

package/components/Cards/index.d.ts

@@ -0,0 +1 @@
+export * from './CardItem';

package/components/Cards/index.js

@@ -0,0 +1,8 @@
+export { CardItem } from './CardItem.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import '../Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../Image/Image.js';

package/components/Cards/types.d.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+type TSubtitleProps = {
+    subtitle?: string;
+    iconProps?: TSelectIconProps;
+};
+export interface TCardItemProps {
+    title?: string;
+    subtitleProps?: TSubtitleProps;
+    icon?: TSelectIconProps;
+    children?: ReactNode;
+    className?: string;
+    image?: string;
+    disabled?: boolean;
+}
+export {};

package/components/Cards/types.js

@@ -0,0 +1 @@
+

package/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TCheckboxProps } from './types';
+export declare const Checkbox: React.ForwardRefExoticComponent<TCheckboxProps & React.RefAttributes<HTMLInputElement>>;

package/components/Checkbox/Checkbox.js

@@ -0,0 +1,137 @@
+import { _ as _defineProperty } from '../../defineProperty-7db32082.js';
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React, { forwardRef, useRef, useMemo } from 'react';
+import classNames from 'classnames';
+import { Popover } from '../Popover/Popover.js';
+import { Link } from '../Link/Link.js';
+import { Text } from '../Text/Text.js';
+import { IconInfo } from '../SVGIcons/IconInfo.js';
+import { IconDynamicComponent } from '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import 'dayjs';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import 'react-syntax-highlighter';
+import '../../typeof-ecd92d7f.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import '../../hooks/useOnOutsideClick.js';
+import '../../utils/helpers.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+
+var Checkbox = /*#__PURE__*/forwardRef(function (props, ref) {
+  var label = props.label,
+    disabled = props.disabled,
+    _props$required = props.required,
+    required = _props$required === void 0 ? false : _props$required,
+    link = props.link,
+    name = props.name,
+    setFieldValue = props.setFieldValue,
+    selectedValue = props.selectedValue,
+    value = props.value,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    _props$iconProps = props.iconProps,
+    iconProps = _props$iconProps === void 0 ? {
+      name: 'checkmark'
+    } : _props$iconProps,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId,
+    onClick = props.onClick,
+    beforeLink = props.beforeLink,
+    afterLink = props.afterLink,
+    _props$helperText = props.helperText,
+    helperText = _props$helperText === void 0 ? '' : _props$helperText,
+    popoverAddons = props.popoverAddons,
+    isInvalid = props.isInvalid;
+  var localRef = useRef(null);
+  var inputRef = ref && Object.keys(ref).length ? ref : localRef;
+  var isChecked = !!value || selectedValue;
+  var changeHandler = function changeHandler() {
+    if (name && setFieldValue) {
+      setFieldValue(name, !isChecked, {
+        shouldValidate: !isChecked
+      });
+    }
+    if (onClick) {
+      onClick(!isChecked);
+    }
+  };
+  var checkboxLabelPopover = popoverAddons ? /*#__PURE__*/React.createElement(Popover, _extends({
+    id: "".concat(popoverAddons.id)
+  }, popoverAddons), /*#__PURE__*/React.createElement("div", {
+    id: "".concat(popoverAddons.id)
+  }, /*#__PURE__*/React.createElement(IconInfo, {
+    dataId: "".concat(dataId, "-icon"),
+    type: "information",
+    size: "xsmall",
+    className: 'ml-4 pointer',
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      changeHandler();
+    }
+  }))) : null;
+  var checkboxLabel = useMemo(function () {
+    if (!label) {
+      return null;
+    }
+    if (typeof label !== 'string') {
+      return label;
+    }
+    if (!link) {
+      return /*#__PURE__*/React.createElement(Text, {
+        type: disabled ? 'disabled' : 'primary',
+        className: "controller__label"
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, label, required && /*#__PURE__*/React.createElement("sup", null, "*")));
+    }
+    return /*#__PURE__*/React.createElement(Text, {
+      type: disabled ? 'disabled' : 'primary',
+      className: "controller__label"
+    }, /*#__PURE__*/React.createElement(React.Fragment, null, beforeLink && /*#__PURE__*/React.createElement("span", {
+      className: "mr-4"
+    }, beforeLink), /*#__PURE__*/React.createElement(Link, {
+      dataId: dataId,
+      url: link,
+      target: "_blank"
+    }, label), afterLink && /*#__PURE__*/React.createElement("span", {
+      className: "ml-4"
+    }, afterLink), required && /*#__PURE__*/React.createElement("sup", null, "*")));
+  }, [label, link]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
+    className: classNames('controller', _defineProperty({
+      'controller--checkbox': true,
+      'controller--disabled': disabled,
+      'controller--error': isInvalid
+    }, className, !!className))
+  }, /*#__PURE__*/React.createElement("input", {
+    "data-id": dataId,
+    type: "checkbox",
+    ref: inputRef,
+    tabIndex: 0,
+    onChange: changeHandler,
+    checked: Boolean(isChecked),
+    disabled: disabled
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "controller__icon"
+  }, /*#__PURE__*/React.createElement(IconDynamicComponent, {
+    componentName: iconProps.name,
+    size: "xxsmall",
+    type: disabled ? 'disabled' : 'inverse',
+    className: "controller__mark"
+  })), checkboxLabel ? /*#__PURE__*/React.createElement("div", {
+    className: "controller__right"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "flexbox"
+  }, checkboxLabel, checkboxLabelPopover), helperText ? /*#__PURE__*/React.createElement(Text, {
+    size: "small",
+    type: disabled ? 'disabled' : 'secondary'
+  }, helperText) : null) : null));
+});
+Checkbox.displayName = 'Checkbox';
+
+export { Checkbox };

package/components/Checkbox/index.d.ts

@@ -0,0 +1 @@
+export * from './Checkbox';

package/components/Checkbox/index.js

@@ -0,0 +1,26 @@
+export { Checkbox } from './Checkbox.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import 'classnames';
+import '../Popover/Popover.js';
+import '../../slicedToArray-0c706912.js';
+import '../../hooks/useGetTooltipStyles.js';
+import '../../hooks/useGetElemSizes.js';
+import '../../hooks/useGetElemPositions.js';
+import '../../hooks/useGetTooltipPosition.js';
+import '../Tooltip/types.js';
+import '../../hooks/useHideOnScroll.js';
+import '../../consts/index.js';
+import 'dayjs';
+import '../../hooks/useOnOutsideClick.js';
+import '../../hooks/useScreenSize.js';
+import 'react-hook-form';
+import '../Text/Text.js';
+import '../../utils/helpers.js';
+import '../Link/Link.js';
+import '../SVGIcons/IconInfo.js';
+import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
+import '../../helperComponents/IconDynamicComponent/constants.js';
+import 'react-syntax-highlighter';

package/components/Checkbox/types.d.ts

@@ -0,0 +1,19 @@
+import type { JSX } from 'react';
+import type { TPopoverProps } from '../Popover/types';
+export interface TCheckboxProps extends IFormCompProps {
+    label?: string | JSX.Element;
+    beforeLink?: string | JSX.Element;
+    afterLink?: string | JSX.Element;
+    className?: string;
+    disabled?: boolean;
+    required?: boolean;
+    link?: string;
+    selectedValue?: boolean;
+    iconProps?: {
+        name: string;
+    };
+    helperText?: string;
+    onClick?: (isChecked: boolean) => void;
+    popoverAddons?: TPopoverProps;
+    isInvalid?: boolean;
+}

package/components/Checkbox/types.js

@@ -0,0 +1 @@
+

package/components/Chips/Chips.d.ts

@@ -0,0 +1,3 @@
+import type { ReactElement } from 'react';
+import type { TChipsProps } from './types';
+export declare const Chips: (props: TChipsProps) => ReactElement;

package/components/Chips/Chips.js

@@ -0,0 +1,55 @@
+import { _ as _extends } from '../../extends-e8ef956f.js';
+import React from 'react';
+import { Text } from '../Text/Text.js';
+import { ChipCustomType } from './types.js';
+import classNames from 'classnames';
+import { IconDismissCircleFilled } from '../SVGIcons/IconDismissCircleFilled.js';
+import { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING } from './consts.js';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+
+var Chips = function Chips(props) {
+  var _props$type = props.type,
+    type = _props$type === void 0 ? 'filled' : _props$type,
+    _props$color = props.color,
+    color = _props$color === void 0 ? 'primary' : _props$color,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'large' : _props$size,
+    text = props.text,
+    disabled = props.disabled,
+    _props$className = props.className,
+    className = _props$className === void 0 ? '' : _props$className,
+    leftIconProps = props.leftIconProps,
+    withAction = props.withAction,
+    onClick = props.onClick,
+    _props$dataId = props.dataId,
+    dataId = _props$dataId === void 0 ? '' : _props$dataId;
+  var customType = disabled ? 'disabled' : type == ChipCustomType.filled ? ChipCustomType.inverse : color;
+  var handleClick = function handleClick(event) {
+    event.stopPropagation();
+    onClick === null || onClick === void 0 || onClick(event);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames("chips chips--".concat(type, " chips--").concat(disabled ? 'disabled' : color, " chips--").concat(size), className)
+  }, leftIconProps !== null && leftIconProps !== void 0 && leftIconProps.Component ? /*#__PURE__*/React.createElement(leftIconProps.Component, _extends({
+    dataId: "".concat(dataId, "-icon"),
+    size: ICON_SIZE_MAPPING[size],
+    type: customType,
+    className: 'mr-6'
+  }, leftIconProps)) : null, text ? /*#__PURE__*/React.createElement(Text, {
+    dataId: "".concat(dataId, "-text"),
+    type: customType,
+    size: TEXT_SIZE_MAPPING[size],
+    className: "chips__label text-truncate"
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, text)) : null, withAction && /*#__PURE__*/React.createElement(IconDismissCircleFilled, {
+    dataId: "".concat(dataId, "-icon"),
+    size: ICON_SIZE_MAPPING[size],
+    type: customType,
+    className: "chips__delete ml-6",
+    onClick: handleClick
+  }));
+};
+
+export { Chips };

package/components/Chips/consts.d.ts

@@ -0,0 +1,7 @@
+import type { TSVGIconSize, TTextSize } from '../SVGIcons/types';
+export declare const ICON_SIZE_MAPPING: {
+    [key: string]: TSVGIconSize;
+};
+export declare const TEXT_SIZE_MAPPING: {
+    [key: string]: TTextSize;
+};

package/components/Chips/consts.js

@@ -0,0 +1,14 @@
+var ICON_SIZE_MAPPING = {
+  large: 'medium',
+  medium: 'small',
+  small: 'xsmall',
+  xsmall: 'xxsmall'
+};
+var TEXT_SIZE_MAPPING = {
+  large: 'standard',
+  medium: 'standard',
+  small: 'small',
+  xsmall: 'xsmall'
+};
+
+export { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING };

package/components/Chips/index.d.ts

@@ -0,0 +1 @@
+export * from './Chips';

package/components/Chips/index.js

@@ -0,0 +1,12 @@
+export { Chips } from './Chips.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import '../Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import './types.js';
+import '../SVGIcons/IconDismissCircleFilled.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import './consts.js';

package/components/Chips/types.d.ts

@@ -0,0 +1,20 @@
+import type { ReactNode } from 'react';
+import type { ISVGIconProps } from '../SVGIcons/types';
+export type TChipsColors = 'primary' | 'disabled' | 'brand' | 'danger' | 'warning' | 'success' | 'information' | 'discovery';
+export interface TChipsProps extends IFormCompProps {
+    text?: string | ReactNode;
+    leftIconProps?: ISVGIconProps;
+    color?: TChipsColors;
+    type?: 'filled' | 'accent' | 'outlined';
+    size?: 'large' | 'medium' | 'small' | 'xsmall';
+    className?: string;
+    disabled?: boolean;
+    withAction?: boolean;
+    onClick?: (e: TClickEventType) => void;
+    dataId?: string;
+    id?: string | number;
+}
+export declare enum ChipCustomType {
+    filled = "filled",
+    inverse = "inverse"
+}

package/components/Chips/types.js

@@ -0,0 +1,7 @@
+var ChipCustomType = /*#__PURE__*/function (ChipCustomType) {
+  ChipCustomType["filled"] = "filled";
+  ChipCustomType["inverse"] = "inverse";
+  return ChipCustomType;
+}({});
+
+export { ChipCustomType };

package/components/Collapse/CollapseGroup/CollapseGroup.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { TCollapseGroupProps } from '../types';
+export declare const CollapseGroup: React.ForwardRefExoticComponent<TCollapseGroupProps & React.RefAttributes<HTMLDivElement>>;

package/components/Collapse/CollapseGroup/CollapseGroup.js

@@ -0,0 +1,77 @@
+import { _ as _toConsumableArray } from '../../../toConsumableArray-e0031ed3.js';
+import { _ as _slicedToArray } from '../../../slicedToArray-0c706912.js';
+import React, { forwardRef, useState } from 'react';
+import { CollapseItem } from '../CollapseItem/CollapseItem.js';
+import classNames from 'classnames';
+import '../../../extends-e8ef956f.js';
+import 'framer-motion';
+import '../../Text/Text.js';
+import '../../../utils/helpers.js';
+import 'dayjs';
+import '../../SVGIcons/IconChevronRight.js';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+import '../../Divider/Divider.js';
+import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../../SVGIcons/IconChevronDown.js';
+
+var CollapseGroup = /*#__PURE__*/forwardRef(function (props, ref) {
+  var items = props.items,
+    singleSelection = props.singleSelection,
+    _props$titleProps = props.titleProps,
+    titleProps = _props$titleProps === void 0 ? {} : _props$titleProps,
+    className = props.className;
+  var size = titleProps.size,
+    color = titleProps.color;
+  var _useState = useState(items.filter(function (item) {
+      return item.isOpen;
+    }).map(function (item) {
+      return item.value;
+    })),
+    _useState2 = _slicedToArray(_useState, 2),
+    openValues = _useState2[0],
+    setOpenValues = _useState2[1];
+  var onCollapseSelect = function onCollapseSelect(value) {
+    if (singleSelection) {
+      setOpenValues([value]);
+    } else {
+      setOpenValues([].concat(_toConsumableArray(openValues), [value]));
+    }
+  };
+  var onCollapseDeselect = function onCollapseDeselect(value) {
+    setOpenValues(openValues.filter(function (item) {
+      return item !== value;
+    }));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('collapse-group', className),
+    ref: ref
+  }, items.map(function (_ref) {
+    var id = _ref.id,
+      title = _ref.title,
+      value = _ref.value,
+      content = _ref.content,
+      dataId = _ref.dataId,
+      iconProps = _ref.iconProps;
+    var isOpen = openValues.indexOf(value) !== -1;
+    return /*#__PURE__*/React.createElement(CollapseItem, {
+      className: 'collapse-group__item',
+      id: id,
+      isOpen: isOpen,
+      key: value,
+      dataId: dataId,
+      title: {
+        size: size,
+        color: color,
+        text: title
+      },
+      toggle: function toggle() {
+        return isOpen ? onCollapseDeselect(value) : onCollapseSelect(value);
+      },
+      labelLeftIconProps: iconProps
+    }, content);
+  }));
+});
+CollapseGroup.displayName = 'CollapseGroup';
+
+export { CollapseGroup };

package/components/Collapse/CollapseItem/CollapseItem.d.ts

@@ -0,0 +1,3 @@
+import type { JSX } from 'react';
+import type { TCollapseProps } from '../types';
+export declare const CollapseItem: (props: TCollapseProps) => JSX.Element;

package/components/Collapse/CollapseItem/CollapseItem.js

@@ -0,0 +1,87 @@
+import { _ as _extends } from '../../../extends-e8ef956f.js';
+import React from 'react';
+import { motion } from 'framer-motion';
+import { Text } from '../../Text/Text.js';
+import { IconChevronRight } from '../../SVGIcons/IconChevronRight.js';
+import { Divider } from '../../Divider/Divider.js';
+import { AnimatePresenceWrapper } from '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import classNames from 'classnames';
+import { IconChevronDown } from '../../SVGIcons/IconChevronDown.js';
+import '../../../utils/helpers.js';
+import 'dayjs';
+import '../../../defineProperty-7db32082.js';
+import '../../../typeof-ecd92d7f.js';
+
+var CollapseItem = function CollapseItem(props) {
+  var _props$title = props.title,
+    text = _props$title.text,
+    _props$title$size = _props$title.size,
+    size = _props$title$size === void 0 ? 'medium' : _props$title$size,
+    color = _props$title.color,
+    className = props.className,
+    isOpen = props.isOpen,
+    toggle = props.toggle,
+    dataId = props.dataId,
+    children = props.children,
+    _props$reverse = props.reverse,
+    reverse = _props$reverse === void 0 ? false : _props$reverse,
+    additionalInfo = props.additionalInfo,
+    labelLeftIconProps = props.labelLeftIconProps,
+    id = props.id;
+  var title = typeof text === 'string' ? /*#__PURE__*/React.createElement(Text, {
+    size: size,
+    type: color,
+    weight: "bolder",
+    dataId: dataId
+  }, text) : text;
+  return /*#__PURE__*/React.createElement("div", {
+    className: classNames('collapse', {
+      'collapse--opened': isOpen
+    }, className),
+    id: "".concat(id || '')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collapse__header flexbox justify-content--between",
+    onClick: toggle
+  }, reverse ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "collapse__header__inner flexbox align-items--center"
+  }, /*#__PURE__*/React.createElement(IconChevronDown, {
+    className: 'collapse__header__icon',
+    size: 'small'
+  }), additionalInfo), title) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "flexbox align-items--center"
+  }, labelLeftIconProps !== null && labelLeftIconProps !== void 0 && labelLeftIconProps.Component ? /*#__PURE__*/React.createElement(labelLeftIconProps.Component, _extends({
+    size: "small",
+    type: "primary",
+    className: "mr-16"
+  }, labelLeftIconProps)) : null, title), /*#__PURE__*/React.createElement("div", {
+    className: "collapse__header__inner flexbox align-items--center"
+  }, additionalInfo, /*#__PURE__*/React.createElement(IconChevronRight, {
+    className: 'collapse__header__icon',
+    size: 'small'
+  })))), /*#__PURE__*/React.createElement(AnimatePresenceWrapper, {
+    initial: false
+  }, isOpen && /*#__PURE__*/React.createElement(motion.div, {
+    initial: {
+      height: 0
+    },
+    animate: {
+      height: 'auto'
+    },
+    exit: {
+      height: 0
+    },
+    transition: {
+      type: 'spring',
+      duration: 0.5,
+      bounce: 0
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "collapse__content"
+  }, /*#__PURE__*/React.createElement(Divider, {
+    type: "primary",
+    isHorizontal: true,
+    className: 'collapse__divider'
+  }), children))));
+};
+
+export { CollapseItem };

package/components/Collapse/index.d.ts

@@ -0,0 +1,2 @@
+export * from './CollapseItem/CollapseItem';
+export * from './CollapseGroup/CollapseGroup';

package/components/Collapse/index.js

@@ -0,0 +1,17 @@
+export { CollapseItem } from './CollapseItem/CollapseItem.js';
+export { CollapseGroup } from './CollapseGroup/CollapseGroup.js';
+import '../../extends-e8ef956f.js';
+import 'react';
+import 'framer-motion';
+import '../Text/Text.js';
+import 'classnames';
+import '../../utils/helpers.js';
+import 'dayjs';
+import '../SVGIcons/IconChevronRight.js';
+import '../../defineProperty-7db32082.js';
+import '../../typeof-ecd92d7f.js';
+import '../Divider/Divider.js';
+import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
+import '../SVGIcons/IconChevronDown.js';
+import '../../toConsumableArray-e0031ed3.js';
+import '../../slicedToArray-0c706912.js';