@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/JSONViewer/type.js

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

package/build/components/LabeledIconDropdown/LabeledIconDropdown.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useState, useRef, useLayoutEffect } from 'react';
+import Box from '@mui/material/Box';
+import { blackRightArrowIcon, blueZigzagCheckIcon, downArrowIcon3 } from '../../constants/index.js';
+import CustomBackdrop from '../CustomBackdrop';
+import { ClickAwayListener, Typography } from '@mui/material';
+import Menu from '../Menu';
+import { ClickAwayWrapper, MainContainer, ValueContentWrapper, LabelTypography, CheckmarkIcon, BadgeBox, BadgeTypography, ArrowDividerContainer, ArrowIconBox, MenuItemBox, MenuItemLabel, FlagIcon, } from './style';
+function LabeledIconDropdown({ items = [], onChange, isDisabled, isArrowRight, selectedItem, flagIcon }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [containerWidth, setContainerWidth] = useState(undefined);
+    const mainContainerRef = useRef(null);
+    const open = Boolean(anchorEl);
+    const onOpenDropdown = (event) => {
+        if (!open && !isDisabled)
+            setAnchorEl(event.currentTarget);
+    };
+    const onCloseDropdown = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const selectItem = (item) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(item);
+        onCloseDropdown();
+    };
+    useLayoutEffect(() => {
+        if (mainContainerRef.current) {
+            setContainerWidth(mainContainerRef.current.offsetWidth);
+        }
+    }, [items, selectedItem]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCloseDropdown }, { children: _jsxs(ClickAwayWrapper, Object.assign({ onClick: onOpenDropdown, sx: { opacity: isDisabled ? 0.5 : 1, cursor: isDisabled || (items === null || items === void 0 ? void 0 : items.length) < 1 ? 'auto' : 'pointer' } }, { children: [_jsxs(MainContainer, Object.assign({ ref: mainContainerRef, isAvailable: (items === null || items === void 0 ? void 0 : items.length) > 0, open: open }, { children: [flagIcon && _jsx(FlagIcon, { src: flagIcon }), !(items === null || items === void 0 ? void 0 : items.length) ? (_jsx(Typography, Object.assign({ sx: {
+                                fontWeight: 400,
+                                fontSize: 14,
+                                lineHeight: '120%',
+                                letterSpacing: 0,
+                                color: '#B1B1B1',
+                            } }, { children: "Not Available" }))) : (_jsxs(ValueContentWrapper, { children: [_jsx(LabelTypography, { children: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label }), _jsx(CheckmarkIcon, { src: blueZigzagCheckIcon })] })), (items === null || items === void 0 ? void 0 : items.length) > 1 && (_jsx(BadgeBox, { children: _jsxs(BadgeTypography, { children: ["+", (items === null || items === void 0 ? void 0 : items.length) ? items === null || items === void 0 ? void 0 : items.length : 0] }) })), (items === null || items === void 0 ? void 0 : items.length) > 1 && (_jsx(ArrowDividerContainer, Object.assign({ open: open }, { children: isArrowRight ? (_jsx(Box, { component: "img", height: 10, src: blackRightArrowIcon, alt: "arrow-right" })) : (_jsx(ArrowIconBox, { open: open, src: downArrowIcon3, alt: "arrow-down" })) })))] })), (items === null || items === void 0 ? void 0 : items.length) > 1 && (_jsxs(_Fragment, { children: [open && _jsx(CustomBackdrop, { onClick: onCloseDropdown }), _jsx(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: {
+                                padding: '4px',
+                                width: containerWidth,
+                                marginTop: '4.5px',
+                                borderRadius: 1,
+                                boxShadow: '0px 8px 30px 0px #00000029',
+                                maxHeight: '128px',
+                                overflowY: 'auto',
+                            }, placement: "bottom-end" }, { children: _jsx(Box, Object.assign({ sx: {
+                                    display: 'flex',
+                                    flexDirection: 'column',
+                                    gap: '4px',
+                                } }, { children: items === null || items === void 0 ? void 0 : items.map((item) => (_jsxs(MenuItemBox, Object.assign({ onClick: () => selectItem(item) }, { children: [_jsx(MenuItemLabel, { children: item.label }), _jsx(CheckmarkIcon, { src: item.icon })] }), item.label))) })) }))] }))] })) })));
+}
+export default memo(LabeledIconDropdown);

package/build/components/LabeledIconDropdown/index.js

@@ -1 +1,2 @@
-import {a as a$2}from'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import {a as a$1}from'../../chunk-M7YGOEQF.js';import {Bb,jb,Bh}from'../../chunk-OYEIM6ED.js';import {a}from'../../chunk-RWXGVZUC.js';import {memo,useState,useRef,useLayoutEffect}from'react';import p from'@mui/material/Box';import {ClickAwayListener,Typography}from'@mui/material';import {styled}from'@mui/material/styles';import x from'@mui/material/Typography';import {jsx,jsxs,Fragment}from'react/jsx-runtime';var A=styled(p)(()=>({cursor:"pointer"})),L=styled(p,{shouldForwardProp:o=>o!=="open"&&o!=="isAvailable"})(({theme:o,open:i,isAvailable:l})=>({display:"flex",justifyContent:l?"flex-start":"center",alignItems:"center",minWidth:"130px",gap:"2.63px",height:"24px",borderRadius:"44px",padding:"2.5px 8px",paddingRight:o.spacing(.5),border:`1.03px solid ${i?"#1F88D0":"#F2F2F2"}`,position:"relative"})),v=styled(p)(({theme:o})=>({display:"flex",alignItems:"center",gap:o.spacing(.5)})),M=styled(x)(()=>({fontWeight:400,fontSize:14,height:"17px",lineHeight:"120%",letterSpacing:0,color:"#20232B",maxWidth:"80px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),h=styled("img")(()=>({width:12,height:12})),k=styled(p)(({theme:o})=>({minWidth:17.13,height:12,borderRadius:"4px",paddingTop:"1.28px",paddingRight:"2.57px",paddingBottom:"1.28px",paddingLeft:"2.57px",marginLeft:"4px",marginRight:"5.5px",backgroundColor:"#8D8D94",display:"flex",alignItems:"center",justifyContent:"center",color:o.palette.common.white})),W=styled(x)(()=>({fontWeight:600,fontSize:9.5})),m=styled(p,{shouldForwardProp:o=>o!=="open"})(({open:o})=>({borderLeft:`1px solid ${o?"#1F88D0":"#F2F2F2"}`,position:"relative",zIndex:1,height:"24px",width:"24px",display:"flex",alignItems:"center",justifyContent:"center"})),T=styled("img",{shouldForwardProp:o=>o!=="open"})(({open:o})=>a({transition:"transform 0.2s ease-in-out"},o&&{transform:"rotate(180deg)"})),D=styled(p)(({theme:o})=>({paddingTop:"5px",paddingRight:"4px",paddingBottom:"5px",paddingLeft:"4px",cursor:"pointer",position:"relative",display:"flex",alignItems:"center",gap:o.spacing(.5)})),F=styled(x)(()=>({fontWeight:400,fontSize:14,height:"17px",lineHeight:"120%",letterSpacing:0,color:"#20232B",maxWidth:"80px",overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"})),R=styled("img")(()=>({width:16,height:12}));function G({items:o=[],onChange:i,isDisabled:l,isArrowRight:H,selectedItem:c,flagIcon:f}){let[s,u]=useState(null),[z,O]=useState(void 0),g=useRef(null),t=!!s,V=e=>{!t&&!l&&u(e.currentTarget);},d=()=>{t&&u(null);},j=e=>{i==null||i(e),d();};return useLayoutEffect(()=>{g.current&&O(g.current.offsetWidth);},[o,c]),jsx(ClickAwayListener,{onClickAway:d,children:jsxs(A,{onClick:V,sx:{opacity:l?.5:1,cursor:l||(o==null?void 0:o.length)<1?"auto":"pointer"},children:[jsxs(L,{ref:g,isAvailable:(o==null?void 0:o.length)>0,open:t,children:[f&&jsx(R,{src:f}),o!=null&&o.length?jsxs(v,{children:[jsx(M,{children:c==null?void 0:c.label}),jsx(h,{src:Bb})]}):jsx(Typography,{sx:{fontWeight:400,fontSize:14,lineHeight:"120%",letterSpacing:0,color:"#B1B1B1"},children:"Not Available"}),(o==null?void 0:o.length)>1&&jsx(k,{children:jsxs(W,{children:["+",o!=null&&o.length?o==null?void 0:o.length:0]})}),(o==null?void 0:o.length)>1&&jsx(m,{open:t,children:H?jsx(p,{component:"img",height:10,src:jb,alt:"arrow-right"}):jsx(T,{open:t,src:Bh,alt:"arrow-down"})})]}),(o==null?void 0:o.length)>1&&jsxs(Fragment,{children:[t&&jsx(a$1,{onClick:d}),jsx(a$2,{anchorEl:s,open:t,sx:{padding:"4px",width:z,marginTop:"4.5px",borderRadius:1,boxShadow:"0px 8px 30px 0px #00000029",maxHeight:"128px",overflowY:"auto"},placement:"bottom-end",children:jsx(p,{sx:{display:"flex",flexDirection:"column",gap:"4px"},children:o==null?void 0:o.map(e=>jsxs(D,{onClick:()=>j(e),children:[jsx(F,{children:e.label}),jsx(h,{src:e.icon})]},e.label))})})]})]})})}var E=memo(G);var xo=E;export{xo as default};
+import LabeledIconDropdown from './LabeledIconDropdown';
+export default LabeledIconDropdown;

package/build/components/LabeledIconDropdown/style.js

@@ -0,0 +1,104 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Typography from '@mui/material/Typography';
+export const ClickAwayWrapper = styled(Box)(() => ({
+    cursor: 'pointer',
+}));
+export const MainContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'open' && prop !== 'isAvailable',
+})(({ theme, open, isAvailable }) => ({
+    display: 'flex',
+    justifyContent: isAvailable ? 'flex-start' : 'center',
+    alignItems: 'center',
+    minWidth: '130px',
+    gap: '2.63px',
+    height: '24px',
+    borderRadius: '44px',
+    padding: '2.5px 8px',
+    paddingRight: theme.spacing(0.5),
+    border: `1.03px solid ${open ? '#1F88D0' : '#F2F2F2'}`,
+    position: 'relative',
+}));
+export const ValueContentWrapper = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+export const LabelTypography = styled(Typography)(() => ({
+    fontWeight: 400,
+    fontSize: 14,
+    height: '17px',
+    lineHeight: '120%',
+    letterSpacing: 0,
+    color: '#20232B',
+    maxWidth: '80px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+export const CheckmarkIcon = styled('img')(() => ({
+    width: 12,
+    height: 12,
+}));
+export const BadgeBox = styled(Box)(({ theme }) => ({
+    minWidth: 17.13,
+    height: 12,
+    borderRadius: '4px',
+    paddingTop: '1.28px',
+    paddingRight: '2.57px',
+    paddingBottom: '1.28px',
+    paddingLeft: '2.57px',
+    marginLeft: '4px',
+    marginRight: '5.5px',
+    backgroundColor: '#8D8D94',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: theme.palette.common.white,
+}));
+export const BadgeTypography = styled(Typography)(() => ({
+    fontWeight: 600,
+    fontSize: 9.5,
+}));
+export const ArrowDividerContainer = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ open }) => ({
+    borderLeft: `1px solid ${open ? '#1F88D0' : '#F2F2F2'}`,
+    position: 'relative',
+    zIndex: 1,
+    height: '24px',
+    width: '24px',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const ArrowIconBox = styled('img', {
+    shouldForwardProp: (prop) => prop !== 'open',
+})(({ open }) => (Object.assign({ transition: 'transform 0.2s ease-in-out' }, (open && { transform: 'rotate(180deg)' }))));
+export const MenuItemBox = styled(Box)(({ theme }) => ({
+    paddingTop: '5px',
+    paddingRight: '4px',
+    paddingBottom: '5px',
+    paddingLeft: '4px',
+    cursor: 'pointer',
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+export const MenuItemLabel = styled(Typography)(() => ({
+    fontWeight: 400,
+    fontSize: 14,
+    height: '17px',
+    lineHeight: '120%',
+    letterSpacing: 0,
+    color: '#20232B',
+    maxWidth: '80px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+}));
+export const FlagIcon = styled('img')(() => ({
+    width: 16,
+    height: 12,
+}));

package/build/components/LanguageDropdown/LanguageDropdown.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { Menu, MenuItem } from '../index.js';
+import { Button } from './style';
+const languages = ['EN', 'AR'];
+export default function LanguageDropdown({ defaultLanguage = 'EN', onChange }) {
+    const [language, setLanguage] = useState(defaultLanguage);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const onOpen = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const onCLose = () => {
+        setAnchorEl(null);
+    };
+    const onClick = (lang) => {
+        setLanguage(lang);
+        onChange === null || onChange === void 0 ? void 0 : onChange(lang);
+        onCLose();
+    };
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onCLose }, { children: _jsxs(Box, { children: [_jsx(Button, Object.assign({ onClick: onOpen, open: open }, { children: _jsx(Box, Object.assign({ component: "span" }, { children: language })) })), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', width: 31.8 } }, { children: languages.map((lang) => lang !== language && (_jsx(MenuItem, Object.assign({ onClick: () => onClick(lang), hideCheckbox: true }, { children: lang }), lang))) }))] }) })));
+}

package/build/components/LanguageDropdown/index.js

@@ -1 +1,2 @@
-export{Vb as default}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import LanguageDropdown from './LanguageDropdown';
+export default LanguageDropdown;

package/build/components/LanguageDropdown/style.js

@@ -0,0 +1,5 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Button = styled(Box, { shouldForwardProp: (props) => props !== 'open' })(({ theme, open }) => (Object.assign({ backgroundColor: theme.palette.common.white, border: `1px solid ${theme.palette.divider}`, fontSize: '11px', color: theme.palette.text.primary, padding: '8px', borderRadius: '4px', display: 'flex', alignItems: 'center', height: 32, gap: '4px', cursor: 'pointer' }, (open && {
+    borderColor: theme.palette.info.dark,
+}))));

package/build/components/LazyImage/LazyImage.js

@@ -0,0 +1,39 @@
+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 { LazyLoadImage as RawLazyLoadImage } from 'react-lazy-load-image-component';
+const LazyLoadImage = RawLazyLoadImage;
+const EFFECT_ASSETS_MAPPER = {
+    opacity: () => import('react-lazy-load-image-component/src/effects/opacity.css'),
+    blur: () => import('react-lazy-load-image-component/src/effects/blur.css'),
+    'black-and-white': () => import('react-lazy-load-image-component/src/effects/black-and-white.css'),
+};
+const LazyImage = (props) => {
+    const { wrapperProps } = props, rest = __rest(props, ["wrapperProps"]);
+    const { effect } = rest;
+    const { style } = wrapperProps || {};
+    const [cssEffectAssetsLoading, setCssEffectAssetsLoading] = useState(!!effect);
+    useEffect(() => {
+        if (!effect || !(effect in EFFECT_ASSETS_MAPPER))
+            return;
+        const getResources = EFFECT_ASSETS_MAPPER[effect];
+        setCssEffectAssetsLoading(true);
+        getResources().finally(() => {
+            setCssEffectAssetsLoading(false);
+        });
+    }, [effect]);
+    if (cssEffectAssetsLoading)
+        return null;
+    return (_jsx(LazyLoadImage, Object.assign({}, rest, { wrapperProps: Object.assign(Object.assign({}, wrapperProps), { style: Object.assign({ display: 'flex', justifyContent: 'center', alignItems: 'center' }, style) }) })));
+};
+export default LazyImage;

package/build/components/LazyImage/index.js

@@ -1 +1,3 @@
-export{a as default}from'../../chunk-TZAF2TGI.js';import'../../chunk-RWXGVZUC.js';
+import LazyImage from './LazyImage';
+export * from './LazyImage';
+export default LazyImage;

package/build/components/LeftPeekRightExpandingChip/LeftPeekRightExpandingChip.js

@@ -0,0 +1,30 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { AnimatePresence } from 'framer-motion';
+import { Root, Container, PeekStack, PeekChip, MainChip, tableCellSx } from './style';
+import { useLeftPeekRightExpandingChip } from './useLeftPeekRightExpandingChip';
+/**
+ * LeftPeekRightExpandingChip
+ *
+ * Renders the last item of `icons` in a main chip and the remaining items as a vertical,
+ * left‑aligned peek stack (collapsed to 24px). Hovering the main chip reveals and expands
+ * the peek chips to the right and shifts the main chip accordingly. The top‑most peek chip
+ * stays anchored while the rest slide out to the right preserving the original order.
+ * Uses Framer Motion for smooth enter/leave and x‑translation, with z-index control via `expandedZIndex`.
+ * Peek chip content is rendered only on hover to minimize layout work.
+ */
+export default function LeftPeekRightExpandingChip({ icons = [], expandedZIndex = 1000, sx }) {
+    const { handleMouseEnter, handleRootMouseLeave, rootRef, mainChipRef, isHovering, peekItems, mainShiftX, mainIcon } = useLeftPeekRightExpandingChip({ icons });
+    return (_jsx(Box, Object.assign({ sx: Object.assign(Object.assign({}, tableCellSx), sx), "data-testid": "LeftPeekRightExpandingChipBox" }, { children: _jsx(Root, Object.assign({ ref: rootRef, onMouseLeave: handleRootMouseLeave, onMouseEnter: handleMouseEnter }, { children: _jsxs(Container, Object.assign({ "data-testid": "Container", initial: false }, { children: [_jsx(PeekStack, Object.assign({ "data-testid": "PeekStack", 
+                        // Allow the expanded chips area to keep hover active
+                        onMouseEnter: handleMouseEnter, onMouseLeave: handleRootMouseLeave, style: { pointerEvents: isHovering ? 'auto' : 'none' } }, { children: _jsx(AnimatePresence, Object.assign({ initial: false }, { children: peekItems.map(({ key, rIdx, offX, hoverX, zIndex, refCb, content }) => (_jsx(PeekChip, Object.assign({ "data-testid": `LeftPeekChip-${rIdx}`, ref: refCb, initial: { opacity: 0, scale: 0.95, x: offX, y: 0 }, animate: { opacity: 1, scale: 1, x: isHovering ? hoverX : offX, y: 0 }, exit: { opacity: 0, scale: 0.95, x: offX, y: 0 }, transition: { duration: 0.18, ease: 'easeOut' }, style: {
+                                    zIndex,
+                                    width: isHovering ? 'auto' : 24,
+                                    minWidth: 24,
+                                    padding: isHovering ? '0 6px' : 0,
+                                    whiteSpace: 'nowrap',
+                                    overflow: isHovering ? 'visible' : 'hidden',
+                                    // Make the expanded chip area interactive to preserve hover
+                                    pointerEvents: isHovering ? 'auto' : 'none',
+                                } }, { children: isHovering && _jsx(_Fragment, { children: content }) }), key))) })) })), _jsx(MainChip, Object.assign({ "data-testid": "MainChip", ref: mainChipRef, style: { zIndex: expandedZIndex + 10, padding: '0 6px' }, initial: false, animate: { x: isHovering ? mainShiftX : 0 }, transition: { duration: 0.18, ease: 'easeOut' } }, { children: mainIcon }))] })) })) })));
+}

package/build/components/LeftPeekRightExpandingChip/index.js

@@ -1 +1,2 @@
-export{a as LeftPeekRightExpandingChip}from'../../chunk-AMMCJJFH.js';import'../../chunk-RWXGVZUC.js';
+export { default as LeftPeekRightExpandingChip } from './LeftPeekRightExpandingChip';
+export * from './type';

package/build/components/LeftPeekRightExpandingChip/style.js

@@ -0,0 +1,65 @@
+import { styled } from '@mui/material/styles';
+import { motion } from 'framer-motion';
+export const CHIP_GAP = 3;
+export const DEFAULT_CHIP_MIN_WIDTH = 24;
+export const Root = styled('div')(() => ({
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const Container = styled(motion.div)(() => ({
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));
+export const PeekStack = styled('div')(() => ({
+    position: 'relative',
+    display: 'inline-block',
+    width: 0,
+    height: 24,
+    pointerEvents: 'none',
+}));
+export const PeekChip = styled(motion.div)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 12,
+    // width controlled in component to switch between 24 and auto
+    height: 24,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.background.paper,
+    fontSize: 12,
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    lineHeight: 1,
+    transition: 'width 180ms ease-out, padding 180ms ease-out',
+}));
+export const MainChip = styled(motion.div)(({ theme }) => ({
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: 12,
+    height: 24,
+    minWidth: 24,
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    background: theme.palette.background.paper,
+    overflow: 'hidden',
+    position: 'relative',
+    boxSizing: 'border-box',
+    whiteSpace: 'nowrap',
+    fontSize: 12,
+    lineHeight: 1,
+}));
+export const tableCellSx = {
+    position: 'relative',
+    overflow: 'visible',
+    zIndex: 1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+};

package/build/components/LeftPeekRightExpandingChip/type.js

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

package/build/components/LeftPeekRightExpandingChip/useLeftPeekRightExpandingChip.js

@@ -0,0 +1,134 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CHIP_GAP, DEFAULT_CHIP_MIN_WIDTH } from './style';
+export function useLeftPeekRightExpandingChip({ icons }) {
+    var _a;
+    // ======================
+    // State
+    // ======================
+    const [isHovering, setIsHovering] = useState(false);
+    const [rightWidths, setRightWidths] = useState([]);
+    // ======================
+    // Refs (DOM and timers)
+    // ======================
+    const rootRef = useRef(null);
+    const mainChipRef = useRef(null);
+    const rightChipRefs = useRef([]);
+    const hoverTimeoutRef = useRef(null);
+    // Prepare icons: last is MainChip, the rest are peeks
+    const safeIcons = icons !== null && icons !== void 0 ? icons : [];
+    const lastIndex = Math.max(0, ((_a = safeIcons.length) !== null && _a !== void 0 ? _a : 1) - 1);
+    const mainIcon = safeIcons[lastIndex];
+    const peekIcons = safeIcons.slice(0, lastIndex);
+    // ======================
+    // Computed values
+    // ======================
+    const { peekItems, mainShiftX, guardLeft, guardWidth } = useMemo(() => {
+        const n = peekIcons.length;
+        const measured = rightWidths.length === n && rightWidths.every((w) => w > 0);
+        // Anchor stacked offset for all peeks
+        const anchorOffXAll = -6 * n;
+        const totalPeekWidth = measured ? rightWidths.reduce((acc, w) => acc + w, 0) : n * DEFAULT_CHIP_MIN_WIDTH;
+        const gapsTotal = Math.max(0, n - 1) * CHIP_GAP;
+        const mainShift = Math.round(isHovering ? anchorOffXAll + totalPeekWidth + CHIP_GAP * n : 0);
+        const anchorRIdx = n - 1;
+        const anchorOffXEach = -6 * (anchorRIdx + 1);
+        const items = [];
+        for (let rIdx = 0; rIdx < n; rIdx++) {
+            const origIdx = n - 1 - rIdx;
+            const offX = -6 * (rIdx + 1);
+            const cumWidthBefore = measured
+                ? rightWidths.slice(0, origIdx).reduce((acc, w) => acc + w, 0) + CHIP_GAP * origIdx
+                : (DEFAULT_CHIP_MIN_WIDTH + CHIP_GAP) * origIdx;
+            const hoverX = Math.round(rIdx === anchorRIdx ? anchorOffXEach : anchorOffXEach + cumWidthBefore);
+            items.push({
+                key: `peek-${rIdx}`,
+                rIdx,
+                origIdx,
+                offX,
+                hoverX,
+                zIndex: n - rIdx,
+                refCb: (el) => {
+                    rightChipRefs.current[origIdx] = el;
+                },
+                content: peekIcons[origIdx],
+            });
+        }
+        // Guard box covers the full horizontal span of the expanded peeks
+        const guardLeft = anchorOffXEach;
+        const guardWidth = totalPeekWidth + gapsTotal;
+        return { peekItems: items, mainShiftX: mainShift, guardLeft, guardWidth };
+    }, [peekIcons, rightWidths, isHovering]);
+    // ======================
+    // Callbacks
+    // ======================
+    const clearHoverTimeout = useCallback(() => {
+        if (hoverTimeoutRef.current) {
+            clearTimeout(hoverTimeoutRef.current);
+            hoverTimeoutRef.current = null;
+        }
+    }, []);
+    const measureRightWidths = useCallback(() => {
+        const TARGET_PADDING_X = 12; /* 6px each side when expanded */
+        const BORDER_X = 2; /* 1px each side */
+        const next = peekIcons.map((_, origIdx) => {
+            const el = rightChipRefs.current[origIdx];
+            if (!el)
+                return DEFAULT_CHIP_MIN_WIDTH;
+            const contentWidth = el.scrollWidth || DEFAULT_CHIP_MIN_WIDTH;
+            const target = Math.max(DEFAULT_CHIP_MIN_WIDTH, contentWidth + TARGET_PADDING_X + BORDER_X);
+            return Math.ceil(target);
+        });
+        setRightWidths((prev) => {
+            if (prev.length === next.length && prev.every((v, i) => v === next[i]))
+                return prev;
+            return next;
+        });
+    }, [peekIcons.length]);
+    const handleMouseEnter = useCallback(() => {
+        clearHoverTimeout();
+        setIsHovering(true);
+    }, [clearHoverTimeout]);
+    const handleRootMouseLeave = useCallback(() => {
+        clearHoverTimeout();
+        hoverTimeoutRef.current = setTimeout(() => setIsHovering(false), 120);
+    }, [clearHoverTimeout]);
+    // ======================
+    // Effects
+    // ======================
+    useEffect(() => {
+        return () => clearHoverTimeout();
+    }, [clearHoverTimeout]);
+    // Measure initially and when count changes
+    useEffect(() => {
+        measureRightWidths();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [peekIcons.length]);
+    // Re-measure shortly after hover begins to capture dynamic size
+    useEffect(() => {
+        if (!isHovering)
+            return;
+        const id = window.requestAnimationFrame(() => {
+            measureRightWidths();
+        });
+        return () => window.cancelAnimationFrame(id);
+    }, [isHovering, measureRightWidths]);
+    // ======================
+    // Public API
+    // ======================
+    return {
+        // hover state/handlers
+        isHovering,
+        handleMouseEnter,
+        handleRootMouseLeave,
+        // refs
+        rootRef,
+        mainChipRef,
+        // render data
+        peekItems,
+        mainShiftX,
+        mainIcon,
+        // guard for hover persistence over gaps
+        guardLeft,
+        guardWidth,
+    };
+}

package/build/components/ListColumnFilter/ListColumnFilter.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { useMemo } from 'react';
+import { Box } from '@mui/material';
+import { SearchListInput, FilterTitle, FilterOkayButton, FilterFooter, FilterCancelButton } from '../index.js';
+import { FilterMenu, Container, ListColumnFilterID, ListColumnFilterMenuItem, ListColumnFilterName, ListColumnFilterWrapper } from './style';
+export default function ListColumnFilter({ anchorEl, onCloseDropdown, list, apiKey, placeholder, onConfirm, onClear, onClickItem, inputValue, onInputValueChange, selectedListItems, }) {
+    const { t } = useTranslation();
+    const handleOkButtonClick = (e) => {
+        onConfirm();
+        onCloseDropdown(e);
+    };
+    const onCancel = (e) => {
+        onClear();
+        onCloseDropdown(e);
+    };
+    const isInputHasValue = !!inputValue.trim().length;
+    const onClickResetInput = () => {
+        if (isInputHasValue)
+            onInputValueChange('');
+    };
+    const onChangeInput = (value) => {
+        onInputValueChange(value);
+    };
+    // filter the list based on input value
+    const filteredList = useMemo(() => {
+        if (!isInputHasValue)
+            return list;
+        return list === null || list === void 0 ? void 0 : list.filter((item) => item.name.toLowerCase().includes(inputValue.trim().toLowerCase()));
+    }, [inputValue, isInputHasValue, list]);
+    const noListDataAvailable = (isInputHasValue && !filteredList.length) || !list.length;
+    const selectedSet = useMemo(() => new Set(selectedListItems), [selectedListItems]);
+    return (_jsxs(FilterMenu, Object.assign({ open: !!anchorEl, anchorEl: anchorEl }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), !!(list === null || list === void 0 ? void 0 : list.length) && (_jsx(SearchListInput, { value: inputValue, name: apiKey, placeholder: placeholder, onSearchChange: onChangeInput, onSearchReset: onClickResetInput })), _jsx(Container, { children: !noListDataAvailable ? (filteredList === null || filteredList === void 0 ? void 0 : filteredList.map((item, index) => (_jsx(ListColumnFilterMenuItem, Object.assign({ isSelected: selectedSet.has(item === null || item === void 0 ? void 0 : item.id), onClick: () => {
+                        onClickItem(item === null || item === void 0 ? void 0 : item.id);
+                    } }, { children: _jsxs(ListColumnFilterWrapper, { children: [_jsx(ListColumnFilterName, { children: item.name }), _jsx(ListColumnFilterID, Object.assign({ component: "span" }, { children: item.id }))] }) }), `${item.id}-${index}`)))) : (_jsx(Box, Object.assign({ sx: { p: 1, textAlign: 'center', fontSize: '11px' } }, { children: "No data available" }))) }), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCancel }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
+}

package/build/components/ListColumnFilter/index.js

@@ -1 +1 @@
-export{Yc as ListColumnFilter}from'../../chunk-WGPV3VEK.js';import'../../chunk-5ZTIXOFI.js';import'../../chunk-RUU3IQ7Y.js';import'../../chunk-3EU4NGZ7.js';import'../../chunk-WX7HFBCU.js';import'../../chunk-KM4UT2GM.js';import'../../chunk-ZTHZGDV6.js';import'../../chunk-FQXBL3YF.js';import'../../chunk-CTBYQDKG.js';import'../../chunk-JQYBCTVW.js';import'../../chunk-7NYF2UBV.js';import'../../chunk-ARHJB5QJ.js';import'../../chunk-XY57JRPE.js';import'../../chunk-BV5VAMBI.js';import'../../chunk-LONKQ3XM.js';import'../../chunk-66JBLKME.js';import'../../chunk-24UTRGGG.js';import'../../chunk-VNK7I7AL.js';import'../../chunk-CQT4MCPB.js';import'../../chunk-GPFU7WD4.js';import'../../chunk-DYWKQE3E.js';import'../../chunk-WGCHJPEZ.js';import'../../chunk-JT54SXJ7.js';import'../../chunk-ZWJTEKFP.js';import'../../chunk-2FDPAJY4.js';import'../../chunk-544TDVOA.js';import'../../chunk-4O4EFXIC.js';import'../../chunk-X5KEG2KP.js';import'../../chunk-IXQ7Y6Y5.js';import'../../chunk-F4KVGV4T.js';import'../../chunk-ZUBHIDDI.js';import'../../chunk-FAYAV46R.js';import'../../chunk-6DLPM4RB.js';import'../../chunk-XQVSYDRO.js';import'../../chunk-ZN4NGPK4.js';import'../../chunk-V44MUKYW.js';import'../../chunk-ZMTLSAZW.js';import'../../chunk-TG2IA55S.js';import'../../chunk-ZLWJCX4K.js';import'../../chunk-T3BFBXVJ.js';import'../../chunk-TZAF2TGI.js';import'../../chunk-AMMCJJFH.js';import'../../chunk-D4S6DH7W.js';import'../../chunk-MTJECG6U.js';import'../../chunk-QF32XNU6.js';import'../../chunk-V5OHALLD.js';import'../../chunk-LDIEOZVR.js';import'../../chunk-NLOKMDQY.js';import'../../chunk-OLPNHTE7.js';import'../../chunk-UF4FBI5V.js';import'../../chunk-OJJ2Q5XK.js';import'../../chunk-RQ2V5JZH.js';import'../../chunk-QFMHEDCR.js';import'../../chunk-34II3WB7.js';import'../../chunk-2Q6H6K3P.js';import'../../chunk-XZORYOIS.js';import'../../chunk-BTANFCN2.js';import'../../chunk-YTBVTQNQ.js';import'../../chunk-LLPG2AC6.js';import'../../chunk-LMKY6Q27.js';import'../../chunk-OFBKWUDT.js';import'../../chunk-NQVCWKMH.js';import'../../chunk-YVHYNRRL.js';import'../../chunk-LOJTJZSX.js';import'../../chunk-DQ76BKNS.js';import'../../chunk-XRTET45W.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-NLEKLEHC.js';import'../../chunk-B4QKXIT7.js';import'../../chunk-IBPFWRCW.js';import'../../chunk-FL7ZDVP7.js';import'../../chunk-23C4BLEJ.js';import'../../chunk-7A7PBYFB.js';import'../../chunk-J72TLM2F.js';import'../../chunk-HRHKLBHG.js';import'../../chunk-ABDRIOU6.js';import'../../chunk-YLE4Q6WH.js';import'../../chunk-D5EB3ZRT.js';import'../../chunk-BNUBHZV7.js';import'../../chunk-3ABTBVXY.js';import'../../chunk-AUM6AR3E.js';import'../../chunk-4A6Z3DYW.js';import'../../chunk-TUTEF6YD.js';import'../../chunk-PX7SYRBV.js';import'../../chunk-2T2Z5RPJ.js';import'../../chunk-SZBR7LB3.js';import'../../chunk-NLAQMZT4.js';import'../../chunk-E6XVMA37.js';import'../../chunk-JWC3XDE4.js';import'../../chunk-UB5L7C6S.js';import'../../chunk-JYJ3D2X6.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-62CGUEB4.js';import'../../chunk-DJYRLVOD.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-VJLQXTHX.js';import'../../chunk-L3M6OM4B.js';import'../../chunk-S2BQCMBY.js';import'../../chunk-QGXXI4EO.js';import'../../chunk-NLPYBEGY.js';import'../../chunk-M7YGOEQF.js';import'../../chunk-GF7D4WGP.js';import'../../chunk-6ZPCHYOF.js';import'../../chunk-GI3U6XGW.js';import'../../chunk-3A4B5D6T.js';import'../../chunk-24XGEJR2.js';import'../../chunk-UEMTPYYH.js';import'../../chunk-BFGMD3VQ.js';import'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-P6K4PD7Y.js';import'../../chunk-XUDGW7IY.js';import'../../chunk-2LMLVUW4.js';import'../../chunk-KGQT7R3W.js';import'../../chunk-XXZJ5D5P.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-5QGYWOQI.js';import'../../chunk-7IW25XZP.js';import'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+export { default as ListColumnFilter } from './ListColumnFilter';

package/build/components/ListColumnFilter/style.js

@@ -0,0 +1,35 @@
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import { Menu, MenuItem } from '../index.js';
+export const Container = styled(Box)(() => ({
+    maxHeight: '210px',
+    maxWidth: '177px',
+    overflowY: 'auto',
+    padding: 0,
+}));
+export const ListColumnFilterMenuItem = styled(MenuItem)(() => ({
+    padding: '12px 16px',
+    border: 'none !important',
+    '&:hover': { boxShadow: '0px 0px 16px 0px #00000021' },
+    maxHeight: 35,
+    minHeight: 35,
+}));
+export const ListColumnFilterWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '2px',
+}));
+export const ListColumnFilterID = styled(Box)(({ theme }) => ({
+    color: alpha(theme.palette.text.primary, 0.5),
+    fontSize: '9px',
+}));
+export const ListColumnFilterName = styled(Box)(() => ({
+    fontSize: '11px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+    maxWidth: '120px',
+}));
+export const FilterMenu = styled(Menu)(() => ({
+    marginBottom: '8px',
+}));

package/build/components/ListLayout/ListLayout.js

@@ -0,0 +1,20 @@
+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 { memo } from 'react';
+import { ListLayoutStyled } from './styles';
+function ListLayout(_a) {
+    var { children } = _a, props = __rest(_a, ["children"]);
+    return (_jsx(ListLayoutStyled, Object.assign({ component: "article", "data-testid": "ListLayout" }, props, { children: children })));
+}
+ListLayout.displayName = 'ListLayout';
+export default memo(ListLayout);

package/build/components/ListLayout/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-D4S6DH7W.js';import'../../chunk-RWXGVZUC.js';
+import ListLayout from './ListLayout';
+export default ListLayout;

package/build/components/ListLayout/styles.js

@@ -0,0 +1,9 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const ListLayoutStyled = styled(Box)(() => ({
+    flex: 1,
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+}));