hrm_ui_lib 2.1.0-alpha.16 → 2.1.0-alpha.17

package/components/Alert/Alert.js

@@ -1,6 +1,11 @@
-import{jsx as e,jsxs as i}from"react/jsx-runtime";import{TYPE_MAPPING as s,ICONS_MAPPING as N}from"./consts.js";import h from"classnames";import{Text as n}from"../Text/Text.js";import{Button as a}from"../Button/Button.js";import u from"../SVGIcons/IconDismissFilled.js";import{IconDynamicComponent as f}from"../../helperComponents/IconDynamicComponent/IconDynamicComponent.js";const C=t=>{const{buttonProps:o,type:l="information",position:r="inline",text:m,subtext:c,closeIcon:p,onClose:d,className:y=""}=t;/* @__PURE__ */
-return e("div",{className:h("alert",`alert--${l} alert--${r}`,y),children:/* @__PURE__ */i("div",{className:"alert__content",children:[
-/* @__PURE__ */e(f,{Component:N[l],size:"small",type:s[l]}),
-/* @__PURE__ */i("div",{className:"alert__text pl-8",children:[
-/* @__PURE__ */i("div",{children:[
-/* @__PURE__ */e(n,{type:"primary",size:"standard",weight:"regular",lineHeight:"large",children:m}),c?/* @__PURE__ */e(n,{className:"mt-4",type:"secondary",size:"small",weight:"regular",lineHeight:"large",children:c}):null]}),o?/* @__PURE__ */i("div",{className:"alert__actions",children:[o.confirm&&/* @__PURE__ */e(a,{size:"medium",type:"secondary",...o.confirm}),o.cancel&&/* @__PURE__ */e(a,{size:"medium",type:"tertiary",className:"ml-12",...o.cancel})]}):null]}),p?/* @__PURE__ */e(u,{type:s[l],size:"xsmall",className:"ml-12 pointer",onClick:d}):null]})})};export{C as Alert};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ICONS_MAPPING, TYPE_MAPPING } from './consts';
+import classnames from 'classnames';
+import { Text } from '../Text';
+import { Button } from '../Button';
+import IconDismissFilled from '../SVGIcons/IconDismissFilled';
+import { IconDynamicComponent } from '../../helperComponents/IconDynamicComponent';
+export const Alert = (props) => {
+    const { buttonProps, type = 'information', position = 'inline', text, subtext, closeIcon, onClose, className = '' } = props;
+    return (_jsx("div", { className: classnames('alert', `alert--${type} alert--${position}`, className), children: _jsxs("div", { className: "alert__content", children: [_jsx(IconDynamicComponent, { Component: ICONS_MAPPING[type], size: "small", type: TYPE_MAPPING[type] }), _jsxs("div", { className: "alert__text pl-8", children: [_jsxs("div", { children: [_jsx(Text, { type: "primary", size: "standard", weight: "regular", lineHeight: "large", children: text }), subtext ? (_jsx(Text, { className: 'mt-4', type: "secondary", size: "small", weight: "regular", lineHeight: "large", children: subtext })) : null] }), buttonProps ? (_jsxs("div", { className: "alert__actions", children: [buttonProps.confirm && (_jsx(Button, Object.assign({ size: "medium", type: "secondary" }, buttonProps.confirm))), buttonProps.cancel && (_jsx(Button, Object.assign({ size: "medium", type: "tertiary", className: "ml-12" }, buttonProps.cancel)))] })) : null] }), closeIcon ? (_jsx(IconDismissFilled, { type: TYPE_MAPPING[type], size: "xsmall", className: "ml-12 pointer", onClick: onClose })) : null] }) }));
+};

package/components/Alert/consts.js

@@ -1 +1,15 @@
-import{lazy as r}from"react";const i={warning:"warning",success:"success",error:"danger",information:"information",discovery:"discovery"},n={warning:r(()=>import("../SVGIcons/IconWarningFilled.js")),success:r(()=>import("../SVGIcons/IconCheckmarkFilled.js")),error:r(()=>import("../SVGIcons/IconErrorCircleFilled.js")),information:r(()=>import("../SVGIcons/IconInfoFilled.js")),discovery:r(()=>import("../SVGIcons/IconInfoFilled.js"))};export{n as ICONS_MAPPING,i as TYPE_MAPPING};
+import { lazy } from 'react';
+export const TYPE_MAPPING = {
+    warning: 'warning',
+    success: 'success',
+    error: 'danger',
+    information: 'information',
+    discovery: 'discovery'
+};
+export const ICONS_MAPPING = {
+    warning: lazy(() => import('../SVGIcons/IconWarningFilled')),
+    success: lazy(() => import('../SVGIcons/IconCheckmarkFilled')),
+    error: lazy(() => import('../SVGIcons/IconErrorCircleFilled')),
+    information: lazy(() => import('../SVGIcons/IconInfoFilled')),
+    discovery: lazy(() => import('../SVGIcons/IconInfoFilled'))
+};

package/components/Alert/index.js

@@ -1 +1 @@
-import{Alert as o}from"./Alert.js";export{o as Alert};
+export * from './Alert';

package/components/Alert/types.js

@@ -0,0 +1 @@
+export {};

package/components/Avatar/Avatar.js

@@ -1,2 +1,24 @@
-import{jsxs as x,jsx as o}from"react/jsx-runtime";import{useState as N,useEffect as k}from"react";import s from"classnames";import{FileUpload as w}from"../FileUpload/FileUpload.js";import"../FileUpload/DropzoneFileUpload/DropzoneFileUpload.js";import{FileUploadMode as I}from"../FileUpload/types.js";const S=({dataId:a,id:e,color:l="default",size:i="medium",type:t,imagePath:r="",initials:d="",className:p="",isEditable:m=!1,allowedTypes:n=".png, .jpg, .jpeg, image/jpeg, image/png, image/jpg",onError:c,fileAllowedSize:g,onAvatarChange:v,onAvatarClick:j})=>{const[u,f]=N(r),F={backgroundImage:u?`url(${u})`:"none"};return k(()=>{f(r)},[r]),/* @__PURE__ */x("div",{id:e,"data-id":a,className:s(`avatar avatar--${l} avatar--${t} avatar--${i}`,p,{"avatar--edit":m}),children:[
-/* @__PURE__ */o("div",{className:s({"avatar--image":u}),onClick:j,style:F}),u?null:d,m&&/* @__PURE__ */o(w,{onError:c,fileAllowedSize:g,multiple:!1,withFilePreview:!1,getFiles:a=>{a&&a[0]&&(f(URL.createObjectURL(a[0])),null==v||v(a[0]))},allowedTypes:n,mode:I.edit})]})};export{S as Avatar};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { FileUpload, FileUploadMode } from '../FileUpload';
+export const Avatar = ({ dataId, id, color = 'default', size = 'medium', type, imagePath = '', initials = '', className = '', isEditable = false, allowedTypes = '.png, .jpg, .jpeg, image/jpeg, image/png, image/jpg', onError, fileAllowedSize, onAvatarChange, onAvatarClick }) => {
+    const [image, setImage] = useState(imagePath);
+    const getFiles = (files) => {
+        if (files && files[0]) {
+            setImage(URL.createObjectURL(files[0]));
+            onAvatarChange === null || onAvatarChange === void 0 ? void 0 : onAvatarChange(files[0]);
+        }
+    };
+    const style = {
+        backgroundImage: image ? `url(${image})` : 'none'
+    };
+    useEffect(() => {
+        setImage(imagePath);
+    }, [imagePath]);
+    return (_jsxs("div", { id: id, "data-id": dataId, className: classNames(`avatar avatar--${color} avatar--${type} avatar--${size}`, className, {
+            'avatar--edit': isEditable
+        }), children: [_jsx("div", { className: classNames({
+                    'avatar--image': image
+                }), onClick: onAvatarClick, style: style }), !image ? initials : null, isEditable && (_jsx(FileUpload, { onError: onError, fileAllowedSize: fileAllowedSize, multiple: false, withFilePreview: false, getFiles: getFiles, allowedTypes: allowedTypes, mode: FileUploadMode.edit }))] }));
+};

package/components/Avatar/AvatarGroup.js

@@ -1,5 +1,21 @@
-import{jsxs as n,jsx as t}from"react/jsx-runtime";import{Tooltip as s}from"../Tooltip/Tooltip.js";import{Avatar as p}from"./Avatar.js";import"react";import{Positions as c}from"../Tooltip/types.js";import"../../consts/index.js";import"../../context/types.js";import{useScreenSize as _}from"../../hooks/useScreenSize.js";import"react-hook-form";import u from"classnames";import N from"../SVGIcons/IconAdd.js";const T={small:2,medium:4,large:6},R=({avatarGroup:a=[],onAddUser:o,size:i="medium",maxCount:r=0,dataId:e})=>{const m=_(),l=r||T[m],d=a.slice(0,l),v=a.length-l>0?a.length-l:0;/* @__PURE__ */
-return n("div",{className:u(`avatar-group avatar-group--${i}`),children:[d.map((a,o)=>/* @__PURE__ */n("div",{className:"avatar-group__item",children:[a.tooltipContent?/* @__PURE__ */t(s,{text:a.tooltipContent,id:`${o}`,position:c.TOP_CENTER}):null,
-/* @__PURE__ */t(p,{dataId:e,id:`${o}`,size:i,initials:a.initials,imagePath:a.imagePath})]},o)),v?/* @__PURE__ */n("div",{className:"avatar-group__item",children:[
-/* @__PURE__ */t(s,{text:"Name Surname",id:"amountTooltip",position:c.TOP_CENTER}),
-/* @__PURE__ */t(p,{type:"count",size:i,id:"amountTooltip",initials:`+${v}`})]}):null,o?/* @__PURE__ */t("div",{className:u(`avatar avatar-group__add avatar--${i}`),onClick:o,children:/* @__PURE__ */t(N,{type:"disabled",size:i})}):null]})};export{R as AvatarGroup};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '../Tooltip';
+import { Avatar } from './Avatar';
+import { useScreenSize } from '../../hooks';
+import classNames from 'classnames';
+import { Positions } from '../Tooltip/types';
+import IconAdd from '../SVGIcons/IconAdd';
+const VISIBLE_AVATARS_AMOUNT = {
+    small: 2,
+    medium: 4,
+    large: 6
+};
+export const AvatarGroup = ({ avatarGroup = [], onAddUser, size = 'medium', maxCount = 0, dataId }) => {
+    const screenSize = useScreenSize();
+    const visibleAvatarsAmount = maxCount || VISIBLE_AVATARS_AMOUNT[screenSize];
+    const visibleAvatars = avatarGroup.slice(0, visibleAvatarsAmount);
+    const invisibleAvatarsAmount = avatarGroup.length - visibleAvatarsAmount > 0 ? avatarGroup.length - visibleAvatarsAmount : 0;
+    return (_jsxs("div", { className: classNames(`avatar-group avatar-group--${size}`), children: [visibleAvatars.map((avatar, index) => {
+                return (_jsxs("div", { className: 'avatar-group__item', children: [avatar.tooltipContent ? (_jsx(Tooltip, { text: avatar.tooltipContent, id: `${index}`, position: Positions.TOP_CENTER })) : null, _jsx(Avatar, { dataId: dataId, id: `${index}`, size: size, initials: avatar.initials, imagePath: avatar.imagePath })] }, index));
+            }), invisibleAvatarsAmount ? (_jsxs("div", { className: "avatar-group__item", children: [_jsx(Tooltip, { text: 'Name Surname', id: 'amountTooltip', position: Positions.TOP_CENTER }), _jsx(Avatar, { type: 'count', size: size, id: 'amountTooltip', initials: `+${invisibleAvatarsAmount}` })] })) : null, onAddUser ? (_jsx("div", { className: classNames(`avatar avatar-group__add avatar--${size}`), onClick: onAddUser, children: _jsx(IconAdd, { type: "disabled", size: size }) })) : null] }));
+};

package/components/Avatar/index.js

@@ -1 +1,2 @@
-import{Avatar as a}from"./Avatar.js";import{AvatarGroup as p}from"./AvatarGroup.js";export{a as Avatar,p as AvatarGroup};
+export * from './Avatar';
+export * from './AvatarGroup';

package/components/Avatar/types.js

@@ -0,0 +1 @@
+export {};

package/components/Badge/Badge.js

@@ -1,2 +1,7 @@
-import{jsx as e,Fragment as t}from"react/jsx-runtime";import{Text as l}from"../Text/Text.js";import n from"classnames";const p=a=>{const{type:r="primary",size:s="large",text:m,className:i=""}=a;/* @__PURE__ */
-return e("div",{className:n(`badge badge--${r}  badge--${s}`,i),children:m?/* @__PURE__ */e(l,{size:"xsmall",type:"secondary"==r?"primary":"inverse",className:"badge__inner",children:/* @__PURE__ */e(t,{children:m})}):null})};export{p as Badge};
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { Text } from '../Text';
+import classNames from 'classnames';
+export const Badge = (props) => {
+    const { type = 'primary', size = 'large', text, className = '' } = props;
+    return (_jsx("div", { className: classNames(`badge badge--${type}  badge--${size}`, className), children: text ? (_jsx(Text, { size: "xsmall", type: type == 'secondary' ? 'primary' : 'inverse', className: "badge__inner", children: _jsx(_Fragment, { children: text }) })) : null }));
+};

package/components/Badge/index.js

@@ -1 +1 @@
-import{Badge as r}from"./Badge.js";export{r as Badge};
+export * from './Badge';

package/components/Badge/types.js

@@ -0,0 +1 @@
+export {};

package/components/BadgeV2/BadgeV2.js

@@ -1 +1,14 @@
-import{jsx as s,jsxs as f}from"react/jsx-runtime";import u from"react";import{Text as y}from"../Text/Text.js";import{BadgeSize as z}from"./types.js";import l from"classnames";const j=e=>{const{type:t="blue",style:a="filled",size:i=z.large,text:d,className:o="",iconProps:m,withDot:r,dot:n,disabled:p}=e,{size:g="small",type:b,alignment:c="left"}=m??{},v=l(`badge-v2 badge-v2--${t} badge-v2--${a} badge-v2--${i}`,{"badge-v2--disabled":p},o);return n?/* @__PURE__ */s("div",{className:l(v,"badge-v2--dot")}):/* @__PURE__ */f("div",{className:v,children:[r?/* @__PURE__ */s("div",{className:l(v,"badge-v2--dot badge-v2--with-dot")}):null,!r&&m&&"left"===c?/* @__PURE__ */s(m.Component,{size:g,type:b}):null,"string"==typeof d||"number"==typeof d?/* @__PURE__ */s(y,{size:"xsmall",className:"badge-v2__inner",children:d}):u.isValidElement(d)?d:null,!r&&m&&"right"===c?/* @__PURE__ */s(m.Component,{size:g,type:b}):null]})};export{j as BadgeV2};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Text } from '../Text';
+import { BadgeSize } from './types';
+import classNames from 'classnames';
+export const BadgeV2 = (props) => {
+    const { type = 'blue', style = 'filled', size = BadgeSize.large, text, className = '', iconProps, withDot, dot, disabled } = props;
+    const { size: iconSize = 'small', type: iconType, alignment: iconAlignment = 'left' } = iconProps !== null && iconProps !== void 0 ? iconProps : {};
+    const baseClassName = classNames(`badge-v2 badge-v2--${type} badge-v2--${style} badge-v2--${size}`, { 'badge-v2--disabled': disabled }, className);
+    if (dot) {
+        return _jsx("div", { className: classNames(baseClassName, 'badge-v2--dot') });
+    }
+    return (_jsxs("div", { className: baseClassName, children: [withDot ? (_jsx("div", { className: classNames(baseClassName, 'badge-v2--dot badge-v2--with-dot') })) : null, !withDot && iconProps && iconAlignment === 'left' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType })) : null, typeof text === 'string' || typeof text === 'number' ? (_jsx(Text, { size: "xsmall", className: "badge-v2__inner", children: text })) : React.isValidElement(text) ? (text) : null, !withDot && iconProps && iconAlignment === 'right' ? (_jsx(iconProps.Component, { size: iconSize, type: iconType })) : null] }));
+};

package/components/BadgeV2/index.js

@@ -1 +1 @@
-import{BadgeV2 as r}from"./BadgeV2.js";export{r as BadgeV2};
+export * from './BadgeV2';

package/components/BadgeV2/types.js

@@ -1 +1,5 @@
-var r=/* @__PURE__ */(a=>(a.small="small",a.large="large",a))(r||{});export{r as BadgeSize};
+export var BadgeSize;
+(function (BadgeSize) {
+    BadgeSize["small"] = "small";
+    BadgeSize["large"] = "large";
+})(BadgeSize || (BadgeSize = {}));

package/components/Breadcrumb/Breadcrumb.js

@@ -1,2 +1,7 @@
-import{jsx as a}from"react/jsx-runtime";const u=e=>{const{selectedValue:r,breadCrumbItems:s,className:c="",onSelect:l}=e;/* @__PURE__ */
-return a("div",{className:`breadcrumb ${c}`,children:s.map(e=>/* @__PURE__ */a("span",{className:"breadcrumb__item",children:/* @__PURE__ */a("span",{className:"breadcrumb__item__inner "+(r===e.value?"selected":""),onClick:()=>l(e.value),children:e.label})},e.value))})};export{u as Breadcrumb};
+import { jsx as _jsx } from "react/jsx-runtime";
+export const Breadcrumb = (props) => {
+    const { selectedValue, breadCrumbItems, className = '', onSelect } = props;
+    return (_jsx("div", { className: `breadcrumb ${className}`, children: breadCrumbItems.map((itemInfo) => {
+            return (_jsx("span", { className: "breadcrumb__item", children: _jsx("span", { className: `breadcrumb__item__inner ${selectedValue === itemInfo.value ? 'selected' : ''}`, onClick: () => onSelect(itemInfo.value), children: itemInfo.label }) }, itemInfo.value));
+        }) }));
+};

package/components/Breadcrumb/index.js

@@ -1 +1 @@
-import{Breadcrumb as m}from"./Breadcrumb.js";export{m as Breadcrumb};
+export * from './Breadcrumb';

package/components/Breadcrumb/types.js

@@ -0,0 +1 @@
+export {};

package/components/Button/Button.js

@@ -1,2 +1,31 @@
-import{jsx as e,jsxs as x,Fragment as C}from"react/jsx-runtime";import E from"classnames";import{Loader as T}from"../../helperComponents/Loader/Loader.js";import{LITE_LOADER_TYPES as g,ICON_TYPE_MAPPING as h,ICON_SIZE_MAPPING as A}from"./consts.js";const $=n=>{const{buttonText:t,type:s="primary",size:o="large",className:a="",iconProps:r,buttonActionType:l="button",disabled:i,pressed:d,isLoading:m,formId:p,dataId:c="",onClick:u,refHandler:b=null,children:f,..._}=n,I=!t&&!f&&void 0!==r;/* @__PURE__ */
-return e("button",{ref:b,"data-id":c,disabled:i,type:l,className:E("btn",`btn--${s}`,`btn--${o}`,{pressed:d,"btn--icon":I,[`btn--icon-${(null==r?void 0:r.alignment)||"left"}`]:!m&&!I&&(null==r?void 0:r.Component)},a),onClick:e=>{d||i||m?e.preventDefault():null==u||u(e)},form:p,..._,children:m?/* @__PURE__ */e(T,{size:o,type:-1===g.indexOf(s)?"dark":"lite"}):/* @__PURE__ */x(C,{children:[null!=r&&r.Component?/* @__PURE__ */e(r.Component,{size:A[r.size||o],type:h[r.type||s],className:"btn__icon"}):null,t||f?/* @__PURE__ */e("span",{className:"btn__text",children:t||f}):null]})})};export{$ as Button};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import classnames from 'classnames';
+import { Loader } from '../../helperComponents/Loader';
+import { ICON_SIZE_MAPPING, ICON_TYPE_MAPPING, LITE_LOADER_TYPES } from './consts';
+export const Button = (props) => {
+    const { buttonText, type = 'primary', size = 'large', className = '', iconProps, buttonActionType = 'button', disabled, pressed, isLoading, formId, dataId = '', onClick, refHandler = null, children } = props, rest = __rest(props, ["buttonText", "type", "size", "className", "iconProps", "buttonActionType", "disabled", "pressed", "isLoading", "formId", "dataId", "onClick", "refHandler", "children"]);
+    const justIcon = !buttonText && !children && iconProps !== undefined;
+    const clickHandler = (e) => {
+        if (pressed || disabled || isLoading) {
+            e.preventDefault();
+            return;
+        }
+        onClick === null || onClick === void 0 ? void 0 : onClick(e);
+    };
+    return (_jsx("button", Object.assign({ ref: refHandler, "data-id": dataId, disabled: disabled, type: buttonActionType, className: classnames('btn', `btn--${type}`, `btn--${size}`, {
+            pressed: pressed,
+            'btn--icon': justIcon,
+            [`btn--icon-${(iconProps === null || iconProps === void 0 ? void 0 : iconProps.alignment) || 'left'}`]: !isLoading && !justIcon && (iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component)
+        }, className), onClick: clickHandler, form: formId }, rest, { children: isLoading ? (_jsx(Loader, { size: size, type: LITE_LOADER_TYPES.indexOf(type) === -1 ? 'dark' : 'lite' })) : (_jsxs(_Fragment, { children: [(iconProps === null || iconProps === void 0 ? void 0 : iconProps.Component) ? (_jsx(iconProps.Component, { size: ICON_SIZE_MAPPING[iconProps.size || size], type: ICON_TYPE_MAPPING[iconProps.type || type], className: "btn__icon" })) : null, buttonText || children ? (_jsx("span", { className: "btn__text", children: buttonText || children })) : null] })) })));
+};

package/components/Button/consts.js

@@ -1 +1,14 @@
-const r=["primary","danger"],e={large:"small",medium:"small",small:"xsmall"},a={primary:"inverse",secondary:"secondary",tertiary:"primary",danger:"inverse",text:"information",link:"selected"};export{e as ICON_SIZE_MAPPING,a as ICON_TYPE_MAPPING,r as LITE_LOADER_TYPES};
+export const LITE_LOADER_TYPES = ['primary', 'danger'];
+export const ICON_SIZE_MAPPING = {
+    large: 'small',
+    medium: 'small',
+    small: 'xsmall'
+};
+export const ICON_TYPE_MAPPING = {
+    primary: 'inverse',
+    secondary: 'secondary',
+    tertiary: 'primary',
+    danger: 'inverse',
+    text: 'information',
+    link: 'selected'
+};

package/components/Button/index.js

@@ -1 +1 @@
-import{Button as r}from"./Button.js";export{r as Button};
+export * from './Button';

package/components/Button/types.js

@@ -0,0 +1 @@
+export {};

package/components/ButtonGroup/ButtonGroup.js

@@ -1,2 +1,16 @@
-import{jsx as i}from"react/jsx-runtime";import{useState as v}from"react";import I from"classnames";import{ButtonGroupItem as G}from"./ButtonGroupItem.js";const N=({buttons:t,activeIndex:o=0,className:e,type:s,size:r,disabled:a,onTabChange:n})=>{const[m,u]=v(o);/* @__PURE__ */
-return i("div",{className:I("button-group",e),children:t.map(t=>/* @__PURE__ */i(G,{...t,type:s,size:r,isActive:m===t.id,disabled:a,onClick:()=>(t=>{a||m===t||(u(t),null==n||n(t))})(t.id)},`buttonGroup_${t.id}`))})};export{N as ButtonGroup};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import classNames from 'classnames';
+import { ButtonGroupItem } from './ButtonGroupItem';
+export const ButtonGroup = ({ buttons, activeIndex = 0, className, type, size, disabled, onTabChange }) => {
+    const [activeItem, setActiveItem] = useState(activeIndex);
+    const handleItemClick = (index) => {
+        if (disabled || activeItem === index)
+            return;
+        setActiveItem(index);
+        onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
+    };
+    return (_jsx("div", { className: classNames('button-group', className), children: buttons.map((button) => {
+            return (_jsx(ButtonGroupItem, Object.assign({}, button, { type: type, size: size, isActive: activeItem === button.id, disabled: disabled, onClick: () => handleItemClick(button.id) }), `buttonGroup_${button.id}`));
+        }) }));
+};

package/components/ButtonGroup/ButtonGroupItem.js

@@ -1,3 +1,23 @@
-import{jsxs as N,jsx as u}from"react/jsx-runtime";import{useMemo as P}from"react";import{Text as h}from"../Text/Text.js";import i from"classnames";import{ICON_SIZE_MAPPING as l,TEXT_SIZE_MAPPING as x}from"./consts.js";const M=({buttonText:t,size:e="medium",type:o="primary",isActive:s,disabled:n,onClick:r,className:m,icons:a})=>{var p,c;const d=P(()=>n?"disabled":s?"primary":"tertiary",[n,s]);/* @__PURE__ */
-return N("div",{className:i("button-group-item",`button-group-item__${o}`,`button-group-item__${e}`,{active:s,disabled:n},m),onClick:t=>{t.preventDefault(),t.stopPropagation(),null==r||r()},children:[null!=(p=null==a?void 0:a.left)&&p.Component?/* @__PURE__ */u(a.left.Component,{size:l[e],type:d}):null,
-/* @__PURE__ */u(h,{size:x[e],type:d,children:t}),null!=(c=null==a?void 0:a.right)&&c.Component?/* @__PURE__ */u(a.right.Component,{size:l[e],type:d}):null]})};export{M as ButtonGroupItem};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { Text } from '../Text';
+import classNames from 'classnames';
+import { ICON_SIZE_MAPPING, TEXT_SIZE_MAPPING } from './consts';
+export const ButtonGroupItem = ({ buttonText, size = 'medium', type = 'primary', isActive, disabled, onClick, className, icons }) => {
+    var _a, _b;
+    const onClickHandler = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        onClick === null || onClick === void 0 ? void 0 : onClick();
+    };
+    const iconType = useMemo(() => {
+        if (disabled) {
+            return 'disabled';
+        }
+        if (isActive) {
+            return 'primary';
+        }
+        return 'tertiary';
+    }, [disabled, isActive]);
+    return (_jsxs("div", { className: classNames('button-group-item', `button-group-item__${type}`, `button-group-item__${size}`, { active: isActive, disabled }, className), onClick: onClickHandler, children: [((_a = icons === null || icons === void 0 ? void 0 : icons.left) === null || _a === void 0 ? void 0 : _a.Component) ? (_jsx(icons.left.Component, { size: ICON_SIZE_MAPPING[size], type: iconType })) : null, _jsx(Text, { size: TEXT_SIZE_MAPPING[size], type: iconType, children: buttonText }), ((_b = icons === null || icons === void 0 ? void 0 : icons.right) === null || _b === void 0 ? void 0 : _b.Component) ? (_jsx(icons.right.Component, { size: ICON_SIZE_MAPPING[size], type: iconType })) : null] }));
+};

package/components/ButtonGroup/consts.js

@@ -1 +1,10 @@
-const l={large:"standard",medium:"standard",small:"small"},a={large:"small",medium:"small",small:"xsmall"};export{a as ICON_SIZE_MAPPING,l as TEXT_SIZE_MAPPING};
+export const TEXT_SIZE_MAPPING = {
+    large: 'standard',
+    medium: 'standard',
+    small: 'small'
+};
+export const ICON_SIZE_MAPPING = {
+    large: 'small',
+    medium: 'small',
+    small: 'xsmall'
+};

package/components/ButtonGroup/index.js

@@ -1 +1 @@
-import{ButtonGroup as t}from"./ButtonGroup.js";export{t as ButtonGroup};
+export * from './ButtonGroup';

package/components/ButtonGroup/types.js

@@ -0,0 +1 @@
+export {};

package/components/Card/Card.js

@@ -1 +1,30 @@
-import{jsx as t}from"react/jsx-runtime";import{useState as p,useEffect as f}from"react";import{CardContext as i}from"./CardContext.js";import{Card as s}from"./CardComponent/Card.js";import{CardHead as C}from"./CardComponent/CardHead.js";import{CardBody as n}from"./CardComponent/CardBody.js";import{CardFooter as c}from"./CardComponent/CardFooter.js";import{noop as l}from"../../utils/helpers.js";const u=({children:r,isExpanded:o,isExpandedFromParent:a,...e})=>{const[d,n]=p(o??!1);return f(()=>"boolean"==typeof a?n(a):l,[a]),/* @__PURE__ */t(i.Provider,{value:{...e,isExpanded:d,toggleIsExpanded:n},children:/* @__PURE__ */t(s,{children:r})})},H=Object.assign(u,{Head:C,Body:n,Footer:c});export{H as Card};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import { CardContext } from './CardContext';
+import { Card as _Card } from './CardComponent/Card';
+import { CardHead } from './CardComponent/CardHead';
+import { CardBody } from './CardComponent/CardBody';
+import { CardFooter } from './CardComponent/CardFooter';
+import { noop } from '../../utils/helpers';
+const CardComponent = (_a) => {
+    var { children, isExpanded, isExpandedFromParent } = _a, rest = __rest(_a, ["children", "isExpanded", "isExpandedFromParent"]);
+    const [isCardExpanded, toggleIsExpanded] = useState(isExpanded !== null && isExpanded !== void 0 ? isExpanded : false);
+    useEffect(() => typeof isExpandedFromParent === 'boolean' ? toggleIsExpanded(isExpandedFromParent) : noop, [isExpandedFromParent]);
+    return (_jsx(CardContext.Provider, { value: Object.assign(Object.assign({}, rest), { isExpanded: isCardExpanded, toggleIsExpanded }), children: _jsx(_Card, { children: children }) }));
+};
+export const Card = Object.assign(CardComponent, {
+    Head: CardHead,
+    Body: CardBody,
+    Footer: CardFooter
+});

package/components/Card/CardComponent/Card.js

@@ -1,3 +1,13 @@
-import{jsxs as p,jsx as e}from"react/jsx-runtime";import r from"classnames";import{useCardContext as x}from"../CardContext.js";import{generateDataTestId as _}from"../../../utils/helpers.js";const v=({children:a})=>{const{isExpanded:t,className:d,title:s,dataId:i,id:n,noBorder:c}=x(),{alignment:l,color:o,text:m}=s??{alignment:"left",color:"blue"};/* @__PURE__ */
-return p("div",{className:r("card",{"card--expanded":t,[`card--title--alignment--${l}`]:s,"card--noBorder":c},d),id:`${n||""}`,"data-id":_("card-item",i),children:[s&&/* @__PURE__ */e("div",{className:r("card__title",{[`card__title--${o}`]:o}),children:m}),
-/* @__PURE__ */e("div",{className:"card__content",children:a})]})};export{v as Card};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { useCardContext } from '../CardContext';
+import { generateDataTestId } from '../../../utils/helpers';
+export const Card = ({ children }) => {
+    const { isExpanded, className, title, dataId, id, noBorder } = useCardContext();
+    const { alignment, color, text } = title !== null && title !== void 0 ? title : { alignment: 'left', color: 'blue' };
+    return (_jsxs("div", { className: classNames('card', {
+            'card--expanded': isExpanded,
+            [`card--title--alignment--${alignment}`]: title,
+            'card--noBorder': noBorder
+        }, className), id: `${id || ''}`, "data-id": generateDataTestId('card-item', dataId), children: [title && (_jsx("div", { className: classNames('card__title', { [`card__title--${color}`]: color }), children: text })), _jsx("div", { className: "card__content", children: children })] }));
+};

package/components/Card/CardComponent/CardBody.js

@@ -1,2 +1,9 @@
-import{jsx as i,jsxs as o}from"react/jsx-runtime";import{motion as n}from"motion/react";import{useCardContext as a}from"../CardContext.js";import{Divider as d}from"../../Divider/Divider.js";import{AnimatePresenceWrapper as m}from"../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js";const f=({children:e})=>{const{isExpanded:r,noDivider:t}=a();/* @__PURE__ */
-return i(m,{initial:!1,children:r&&/* @__PURE__ */i(n.div,{initial:{height:0},animate:{height:"auto"},exit:{height:0},transition:{type:"spring",duration:.5,bounce:0},children:/* @__PURE__ */o("div",{className:"card__content--body",children:[!t&&/* @__PURE__ */i(d,{type:"primary",isHorizontal:!0,className:"card__divider"}),e]})})})};export{f as CardBody};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { motion } from 'motion/react';
+import { useCardContext } from '../CardContext';
+import { Divider } from '../../Divider';
+import { AnimatePresenceWrapper } from '../../../helperComponents/AnimatePresenceWrapper';
+export const CardBody = ({ children }) => {
+    const { isExpanded, noDivider } = useCardContext();
+    return (_jsx(AnimatePresenceWrapper, { initial: false, children: isExpanded && (_jsx(motion.div, { initial: { height: 0 }, animate: { height: 'auto' }, exit: { height: 0 }, transition: { type: 'spring', duration: 0.5, bounce: 0 }, children: _jsxs("div", { className: "card__content--body", children: [!noDivider && _jsx(Divider, { type: "primary", isHorizontal: true, className: "card__divider" }), children] }) })) }));
+};

package/components/Card/CardComponent/CardFooter.js

@@ -1 +1,6 @@
-import{jsx as t}from"react/jsx-runtime";import{useCardContext as e}from"../CardContext.js";const a=({children:r})=>{const{isExpanded:o}=e();return!o&&/* @__PURE__ */t("div",{className:"card__content--footer",children:r})};export{a as CardFooter};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCardContext } from '../CardContext';
+export const CardFooter = ({ children }) => {
+    const { isExpanded } = useCardContext();
+    return !isExpanded && _jsx("div", { className: "card__content--footer", children: children });
+};

package/components/Card/CardComponent/CardHead.js

@@ -1,2 +1,23 @@
-import{jsxs as s,jsx as a}from"react/jsx-runtime";import{useCallback as i}from"react";import{useCardContext as p}from"../CardContext.js";import d from"classnames";import{noop as l}from"../../../utils/helpers.js";import{Button as x}from"../../Button/Button.js";import h from"../../SVGIcons/IconChevronDown.js";import f from"../../SVGIcons/IconChevronRight.js";const I=({children:e})=>{const{toggleIsExpanded:o,onExpand:n,isExpandable:r,isExpanded:t}=p(),c=i(()=>{o&&o(e=>(n&&n(!e),!e))},[]);/* @__PURE__ */
-return s("div",{className:d("card__content--header",{"card__content--header--expandable":r}),onClick:r?c:l,children:[e,r&&/* @__PURE__ */a("div",{className:"card__content--header--expand",children:/* @__PURE__ */a(x,{iconProps:{Component:t?h:f},className:d({"card__content--header--expand--icon":t}),type:"tertiary",size:"medium"})})]})};export{I as CardHead};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { useCardContext } from '../CardContext';
+import classNames from 'classnames';
+import { noop } from '../../../utils/helpers';
+import { Button } from '../../Button';
+import IconChevronDown from '../../SVGIcons/IconChevronDown';
+import IconChevronRight from '../../SVGIcons/IconChevronRight';
+export const CardHead = ({ children }) => {
+    const { toggleIsExpanded, onExpand, isExpandable, isExpanded } = useCardContext();
+    const onToggleExpand = useCallback(() => {
+        toggleIsExpanded &&
+            toggleIsExpanded((prevVal) => {
+                onExpand && onExpand(!prevVal);
+                return !prevVal;
+            });
+    }, []);
+    return (_jsxs("div", { className: classNames('card__content--header', {
+            'card__content--header--expandable': isExpandable
+        }), onClick: isExpandable ? onToggleExpand : noop, children: [children, isExpandable && (_jsx("div", { className: "card__content--header--expand", children: _jsx(Button, { iconProps: {
+                        Component: isExpanded ? IconChevronDown : IconChevronRight
+                    }, className: classNames({ 'card__content--header--expand--icon': isExpanded }), type: "tertiary", size: "medium" }) }))] }));
+};

package/components/Card/CardContext.js

@@ -1 +1,6 @@
-import{createContext as t,useContext as e}from"react";const o=t({isExpanded:!1,isExpandable:!0}),a=()=>e(o);export{o as CardContext,a as useCardContext};
+import { createContext, useContext } from 'react';
+export const CardContext = createContext({
+    isExpanded: false,
+    isExpandable: true
+});
+export const useCardContext = () => useContext(CardContext);

package/components/Card/index.js

@@ -1 +1 @@
-import{Card as a}from"./Card.js";export{a as Card};
+export * from './Card';

package/components/Card/types.js

@@ -0,0 +1 @@
+export {};

package/components/CardGroup/CardGroup.js

@@ -1 +1,24 @@
-import{jsx as r}from"react/jsx-runtime";import{CardGroupContext as p}from"./CardGroupContext.js";import{CardGroup as t}from"./CardGroupComponent/CardGroup.js";import{CardGroupHead as a}from"./CardGroupComponent/CardHead.js";import{CardGroupBody as m}from"./CardGroupComponent/CardBody.js";const e=({children:o,...a})=>/* @__PURE__ */r(p.Provider,{value:{...a},children:/* @__PURE__ */r(t,{children:o})}),G=Object.assign(e,{Head:a,Body:m});export{G as CardGroup};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CardGroupContext } from './CardGroupContext';
+import { CardGroup as _CardGroup } from './CardGroupComponent/CardGroup';
+import { CardGroupHead } from './CardGroupComponent/CardHead';
+import { CardGroupBody } from './CardGroupComponent/CardBody';
+const CardComponent = (_a) => {
+    var { children } = _a, rest = __rest(_a, ["children"]);
+    return (_jsx(CardGroupContext.Provider, { value: Object.assign({}, rest), children: _jsx(_CardGroup, { children: children }) }));
+};
+export const CardGroup = Object.assign(CardComponent, {
+    Head: CardGroupHead,
+    Body: CardGroupBody
+});

package/components/CardGroup/CardGroupComponent/CardBody.js

@@ -1,2 +1,8 @@
-import{jsxs as m,jsx as p}from"react/jsx-runtime";import{useMemo as e,useId as u}from"react";const d=({children:r})=>{const s=e(()=>Array.isArray(r),[r]),a=u();/* @__PURE__ */
-return m("div",{className:"card--group__content--body",children:[s&&(null==r?void 0:r.map((r,s)=>/* @__PURE__ */p("div",{className:"card--group__child",children:r},`${a}_${s}`))),!s&&r]})};export{d as CardGroupBody};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useMemo } from 'react';
+export const CardGroupBody = ({ children }) => {
+    const isChildrenArray = useMemo(() => Array.isArray(children), [children]);
+    const componentKey = useId();
+    return (_jsxs("div", { className: "card--group__content--body", children: [isChildrenArray &&
+                (children === null || children === void 0 ? void 0 : children.map((child, id) => (_jsx("div", { className: "card--group__child", children: child }, `${componentKey}_${id}`)))), !isChildrenArray && children] }));
+};

package/components/CardGroup/CardGroupComponent/CardGroup.js

@@ -1,2 +1,9 @@
-import{jsx as r}from"react/jsx-runtime";import m from"classnames";import{generateDataTestId as n}from"../../../utils/helpers.js";import{useCardGroupContext as s}from"../CardGroupContext.js";const u=({children:t})=>{const{className:a,title:e,dataId:o,id:i}=s(),{alignment:d}=e??{alignment:"left"};/* @__PURE__ */
-return r("div",{className:m("card--group",{[`card--group--title--alignment--${d}`]:e},a),id:`${i||""}`,"data-id":n("card--group-item",o),children:/* @__PURE__ */r("div",{className:"card--group__content",children:t})})};export{u as CardGroup};
+import { jsx as _jsx } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { generateDataTestId } from '../../../utils/helpers';
+import { useCardGroupContext } from '../CardGroupContext';
+export const CardGroup = ({ children }) => {
+    const { className, title, dataId, id } = useCardGroupContext();
+    const { alignment } = title !== null && title !== void 0 ? title : { alignment: 'left' };
+    return (_jsx("div", { className: classNames('card--group', { [`card--group--title--alignment--${alignment}`]: title }, className), id: `${id || ''}`, "data-id": generateDataTestId('card--group-item', dataId), children: _jsx("div", { className: "card--group__content", children: children }) }));
+};

package/components/CardGroup/CardGroupComponent/CardHead.js

@@ -1,3 +1,9 @@
-import{jsxs as t,jsx as o}from"react/jsx-runtime";import{useCardGroupContext as a}from"../CardGroupContext.js";import c from"classnames";const i=({children:r})=>{const{title:e}=a();/* @__PURE__ */
-return t("div",{className:"card--group__content--header",children:[e&&/* @__PURE__ */o("div",{className:c("card--group__title",{[`card--group__title--${e.color}`]:e.color}),children:e.text}),
-/* @__PURE__ */o("div",{className:"card--group__content--header--component",children:r})]})};export{i as CardGroupHead};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCardGroupContext } from '../CardGroupContext';
+import classNames from 'classnames';
+export const CardGroupHead = ({ children }) => {
+    const { title } = useCardGroupContext();
+    return (_jsxs("div", { className: "card--group__content--header", children: [title && (_jsx("div", { className: classNames('card--group__title', {
+                    [`card--group__title--${title.color}`]: title.color
+                }), children: title.text })), _jsx("div", { className: "card--group__content--header--component", children: children })] }));
+};

package/components/CardGroup/CardGroupContext.js

@@ -1 +1,3 @@
-import{createContext as t,useContext as o}from"react";const e=t({}),n=()=>o(e);export{e as CardGroupContext,n as useCardGroupContext};
+import { createContext, useContext } from 'react';
+export const CardGroupContext = createContext({});
+export const useCardGroupContext = () => useContext(CardGroupContext);

package/components/CardGroup/index.js

@@ -1 +1 @@
-import{CardGroup as p}from"./CardGroup.js";export{p as CardGroup};
+export * from './CardGroup';

package/components/CardGroup/types.js

@@ -0,0 +1 @@
+export {};