@tap-payments/os-micro-frontend-shared 0.1.494 → 0.1.495-test.1

package/build/.storybook/main.ts

@@ -0,0 +1,23 @@
+import type { StorybookConfig } from '@storybook/react-vite'
+// vite-tsconfig-paths plugin so all @components, @theme, @types, etc. aliases work inside stories
+import tsconfigPaths from 'vite-tsconfig-paths'
+import { mergeConfig } from 'vite'
+
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.stories.@(ts|tsx|mdx)'],
+  addons: ['@storybook/addon-a11y', '@storybook/addon-docs'],
+
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  // Resolve the same path aliases used in tsconfig.json (@components, @theme, etc.)
+  viteFinal: async (config) => {
+    return mergeConfig(config, {
+      plugins: [tsconfigPaths()],
+    })
+  }
+}
+
+export default config

package/build/.storybook/preview.tsx

@@ -0,0 +1,110 @@
+import React from 'react'
+import type { Preview, Decorator } from '@storybook/react-vite'
+
+// Loads Tap Sans @font-face, CSS variables, and global font stack.
+import '../../src/index.css'
+
+import CssBaseline from '@mui/material/CssBaseline'
+import { appTheme } from '../../src/theme'
+import { ThemeMode } from '../../src/types/theme'
+import MUIThemeProvider from '../../src/components/MUIThemeProvider'
+import { initReactI18next } from 'react-i18next'
+import i18n from 'i18next'
+
+// ---------------------------------------------------------------------------
+// Minimal i18n setup so components that call useTranslation() don't crash.
+// Stories that need real translations can override this in their decorator.
+// ---------------------------------------------------------------------------
+if (!i18n.isInitialized) {
+  i18n.use(initReactI18next).init({
+    lng: 'en',
+    fallbackLng: 'en',
+    resources: { en: { translation: {} } },
+    interpolation: { escapeValue: false },
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Toolbar: Theme (light / dark) + Direction (ltr / rtl)
+// ---------------------------------------------------------------------------
+export const globalTypes = {
+  themeMode: {
+    name: 'Theme',
+    description: 'MUI theme mode',
+    defaultValue: 'light',
+    toolbar: {
+      icon: 'circlehollow',
+      items: [
+        { value: 'light', title: 'Light', icon: 'sun' },
+        { value: 'dark', title: 'Dark', icon: 'moon' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+  direction: {
+    name: 'Direction',
+    description: 'Text direction (LTR / RTL)',
+    defaultValue: 'ltr',
+    toolbar: {
+      icon: 'menu',
+      items: [
+        { value: 'ltr', title: 'LTR' },
+        { value: 'rtl', title: 'RTL' },
+      ],
+      dynamicTitle: true,
+    },
+  },
+}
+
+// ---------------------------------------------------------------------------
+// Global decorator — wraps every story with the correct MUI theme
+// ---------------------------------------------------------------------------
+const withMUITheme: Decorator = (Story, context) => {
+  const mode = (context.globals.themeMode as ThemeMode) ?? ThemeMode.LIGHT
+  const direction = (context.globals.direction as 'ltr' | 'rtl') ?? 'ltr'
+  const theme = appTheme(mode, direction)
+
+  return (
+    <MUIThemeProvider theme={theme}>
+      <CssBaseline />
+      <div dir={direction} style={{ padding: '1.5rem' }}>
+        <Story />
+      </div>
+    </MUIThemeProvider>
+  )
+}
+
+const preview: Preview = {
+  decorators: [withMUITheme],
+
+  parameters: {
+    // Default backgrounds synced with the theme selector
+    backgrounds: {
+      options: {
+        light: { name: 'light', value: '#ffffff' },
+        dark: { name: 'dark', value: '#121212' },
+      },
+    },
+
+    controls: {
+      // Show default values in the Controls panel
+      expanded: true,
+      // Sort alphabetically for easier scanning
+      sort: 'alpha',
+      matchers: {
+        color: /(color|background|bg|fill)$/i,
+        date: /date$/i,
+      },
+    },
+
+    actions: { argTypesRegex: '^on[A-Z].*' },
+  },
+
+  initialGlobals: {
+    backgrounds: {
+      value: 'light',
+    },
+  },
+}
+
+export default preview

package/build/.storybook/story-utils.tsx

@@ -0,0 +1,211 @@
+/**
+ * story-utils.tsx
+ *
+ * Shared layout primitives for .stories.tsx files.
+ * Import from any story:
+ *   import { StoryTable, StoryFormCanvas, StoryFlexRow, ... } from '@storybook-utils'
+ *
+ * All components use MUI sx + theme tokens so they adapt to the
+ * light/dark toolbar toggle in preview.tsx automatically.
+ *
+ * Rule: add exports here only when a pattern appears in 2+ stories.
+ *
+ * CONVENTION — stateful stories (render + useState):
+ * When a story uses a `render` function with `useState`, Storybook cannot
+ * auto-generate useful "Show code" output. Always add an explicit source
+ * override so developers can copy real usage:
+ *
+ *   parameters: {
+ *     docs: {
+ *       source: {
+ *         language: 'tsx',
+ *         code: `...clean minimal snippet...`.trim(),
+ *       },
+ *     },
+ *   },
+ */
+import type { ReactNode } from 'react'
+import Box, { type BoxProps } from '@mui/material/Box'
+import Stack, { type StackProps } from '@mui/material/Stack'
+import Typography, { type TypographyProps } from '@mui/material/Typography'
+import { FormProvider, useForm } from 'react-hook-form'
+
+// ─── Spacing tokens ──────────────────────────────────────────────────────────
+// Named constants so story authors never write magic numbers.
+// Values map to theme.spacing() units (1 unit = 8px by default in MUI).
+export const STORY_SPACING = {
+  cell: 2, // 16px — cell padding
+  labelRight: 3, // 24px — right-pad on row/column label cells
+  section: 4, // 32px — gap between table and hint text
+} as const
+
+// ─── Table primitives ─────────────────────────────────────────────────────────
+
+export function StoryTable({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box
+      component="table"
+      sx={[
+        {
+          width: '100%',
+          borderCollapse: 'separate',
+          borderSpacing: '0 10px',
+          fontSize: '1rem',
+          tableLayout: 'auto',
+        },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export function StoryThead({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box component="thead" sx={sx} {...rest}>
+      {children}
+    </Box>
+  )
+}
+
+export function StoryTbody({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box component="tbody" sx={sx} {...rest}>
+      {children}
+    </Box>
+  )
+}
+
+export function StoryRow({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box
+      component="tr"
+      sx={[
+        (theme) => ({
+          '&:hover td': {
+            backgroundColor: theme.palette.action.hover,
+          },
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+// `first` targets the leftmost header cell (row label column) — left-aligned.
+export function StoryHeaderCell({ first = false, children, sx, ...rest }: BoxProps & { first?: boolean }) {
+  return (
+    <Box
+      component="th"
+      sx={[
+        (theme) => ({
+          padding: first ? theme.spacing(0.5, STORY_SPACING.labelRight, 0.5, 0) : theme.spacing(0.5, STORY_SPACING.cell),
+          fontWeight: theme.typography.fontWeightMedium,
+          fontSize: '1.1rem',
+          color: theme.palette.text.primary,
+          whiteSpace: 'nowrap',
+          textAlign: 'left',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export function StoryRowLabel({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box
+      component="th"
+      sx={[
+        (theme) => ({
+          textAlign: 'left',
+          padding: theme.spacing(STORY_SPACING.cell, STORY_SPACING.labelRight, STORY_SPACING.cell, 0),
+          fontWeight: theme.typography.fontWeightRegular,
+          fontSize: '1.1rem',
+          color: theme.palette.text.primary,
+          verticalAlign: 'middle',
+          whiteSpace: 'nowrap',
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+export function StoryCell({ children, sx, ...rest }: BoxProps) {
+  return (
+    <Box
+      component="td"
+      sx={[
+        (theme) => ({
+          padding: theme.spacing(STORY_SPACING.cell),
+          textAlign: 'center',
+          verticalAlign: 'middle',
+          borderBottom: `1px solid ${theme.palette.divider}`,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Box>
+  )
+}
+
+// ─── Flex row ─────────────────────────────────────────────────────────────────
+
+// Default spacing={3} = 24px. Pass spacing={1} (8px) for tighter layouts.
+export function StoryFlexRow({ children, sx, ...rest }: StackProps) {
+  return (
+    <Stack direction="row" alignItems="center" spacing={3} sx={sx} {...rest}>
+      {children}
+    </Stack>
+  )
+}
+
+// ─── React Hook Form ─────────────────────────────────────────────────────────
+
+/**
+ * Minimal `FormProvider` + `useForm` wrapper for stories that use `useFormContext` / `Controller` / RFH inputs.
+ * Default `mode` is `onChange`.
+ */
+export function StoryFormCanvas({
+  defaultValues,
+  children,
+}: Readonly<{ defaultValues?: Record<string, unknown>; children: ReactNode }>) {
+  const methods = useForm({ defaultValues, mode: 'onChange' })
+  return <FormProvider {...methods}>{children}</FormProvider>
+}
+
+// ─── Hint text ────────────────────────────────────────────────────────────────
+
+export function StoryHint({ children, sx, ...rest }: TypographyProps) {
+  return (
+    <Typography
+      variant="caption"
+      align="center"
+      sx={[
+        (theme) => ({
+          display: 'block',
+          mt: STORY_SPACING.section,
+          color: theme.palette.text.secondary,
+        }),
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {children}
+    </Typography>
+  )
+}

package/build/chunk-3ZO53OMP.js

@@ -0,0 +1 @@
+import {a}from'./chunk-XDMM2WXF.js';import {a as a$1}from'./chunk-S7OMWEM6.js';import {vb,w}from'./chunk-NSFZTMX6.js';import gt,{forwardRef,memo,useMemo,useState,useEffect}from'react';import pe from'@mui/material/Box';import {styled}from'@mui/material/styles';import ft from'@mui/material/TextField';import {jsxs,jsx,Fragment}from'react/jsx-runtime';import {styled as styled$1,Popper,Box,CircularProgress,ClickAwayListener}from'@mui/material';import vt from'@mui/material/IconButton';import Pt from'@mui/material/InputLabel';import Et from'@mui/material/MenuItem';import bt from'@mui/material/SvgIcon';import wt from'@mui/material/FormControl';import be from'@mui/material/Select';import Ot from'@mui/material/Skeleton';import jt from'@mui/material/Input';var ue=styled(pe)(()=>({display:"flex",flexDirection:"column",gap:"4px",width:"100%",height:40,"& *":{flex:1,margin:"0 !important"}})),ce=styled(ft,{shouldForwardProp:e=>e!=="hideArrows"})(({theme:e,error:t,hideArrows:n,disabled:r})=>({border:`1px solid ${e.palette.divider}`,...r&&{backgroundColor:e.palette.grey[400]},borderRadius:"4px",...!!t&&{border:`1px solid ${e.palette.error.main}`},...n&&{"& input[type=number]":{MozAppearance:"textfield"},"& input[type=number]::-webkit-outer-spin-button":{WebkitAppearance:"none",margin:0},"& input[type=number]::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}},"& .MuiFormLabel-asterisk":{color:"red"},"& .MuiInputBase-root":{maxHeight:"40px !important",alignItems:"flex-end !important",fontSize:"11px",height:"40px",padding:"8px",borderRadius:"4px"},"& .MuiInputBase-input":{margin:0,padding:0,color:e.palette.text.primary},"& .MuiFormLabel-root":{fontSize:"10px",fontWeight:500,lineHeight:"100%",transform:"translate(0, 8px) scale(1)",color:e.palette.grey[700],padding:"8px","&.MuiFormLabel-filled, &.Mui-focused":{transform:"translate(0, -1.5px) scale(0.75) "},"&.Mui-focused":{fontSize:"10px",fontWeight:500,lineHeight:"100%"}}})),me=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"}));var fe=gt.forwardRef(({name:e,onChange:t,hasError:n,helperText:r,hideArrows:g,...a},s)=>{let d=c=>{t?.(c.target.value??"");};return jsxs(pe,{children:[jsx(ue,{"data-testid":"InputBase",children:jsx(ce,{rows:1,error:n,fullWidth:true,size:"small",variant:"standard",ref:s,name:e,type:a.type??"text",label:a.placeholder||a.label,onChange:d,InputProps:{disableUnderline:true},hideArrows:g,...a})}),jsx(me,{children:r})]})});fe.displayName="InputBase";var ge=fe;var Ct=ge;var ye=forwardRef((e,t)=>jsx(bt,{ref:t,viewBox:"0 0 8 8",fontSize:"small",...e,children:jsx("path",{d:"M6.63965 0.102539C6.75727 0.0997602 6.87304 0.133137 6.97168 0.197266C7.07023 0.261345 7.14718 0.353407 7.19238 0.461914C7.23757 0.570522 7.24961 0.690513 7.22559 0.805664C7.20154 0.920834 7.1425 1.02595 7.05762 1.10742L7.05664 1.10938L4.56738 3.59766L4.49512 3.66992L7.05762 6.23242C7.11359 6.28617 7.15865 6.35066 7.18945 6.42188C7.22023 6.49308 7.23648 6.5699 7.2373 6.64746C7.23809 6.72499 7.22359 6.80223 7.19434 6.87402C7.16499 6.9459 7.1213 7.0115 7.06641 7.06641C7.01149 7.12132 6.94592 7.16498 6.87402 7.19434C6.8022 7.22362 6.72502 7.23809 6.64746 7.2373C6.56987 7.23649 6.4931 7.22024 6.42188 7.18945C6.35064 7.15865 6.28618 7.1136 6.23242 7.05762L6.23145 7.05664L3.74219 4.56836L3.66992 4.49512L3.59766 4.56836L1.1084 7.05664L1.10742 7.05762C1.05365 7.11362 0.989227 7.15864 0.917969 7.18945C0.846721 7.22025 0.769997 7.2365 0.692383 7.2373C0.614798 7.23809 0.537661 7.22364 0.46582 7.19434C0.393921 7.16498 0.328351 7.12132 0.273438 7.06641C0.218559 7.01151 0.174849 6.94589 0.145508 6.87402C0.116258 6.80223 0.101751 6.72498 0.102539 6.64746C0.103364 6.5699 0.119618 6.49308 0.150391 6.42188C0.181198 6.35065 0.226245 6.28617 0.282227 6.23242L2.84473 3.66992L2.77246 3.59766L0.283203 1.10938L0.282227 1.1084L0.224609 1.04297C0.172384 0.974382 0.136093 0.894624 0.118164 0.80957C0.0942576 0.695891 0.104774 0.577375 0.148438 0.469727C0.192107 0.362124 0.266971 0.269962 0.363281 0.205078C0.459591 0.140238 0.573348 0.105497 0.689453 0.105469C0.767281 0.105527 0.844313 0.121103 0.916016 0.151367C0.987801 0.181723 1.05308 0.226359 1.10742 0.282227L3.66992 2.84473L6.23242 0.282227C6.33914 0.171037 6.48558 0.106239 6.63965 0.102539Z",fill:"#20232B",stroke:"white",strokeWidth:.20511})}));ye.displayName="DefaultClearIcon";var O=ye;var he=forwardRef((e,t)=>jsx(bt,{ref:t,viewBox:"0 0 8 5",fill:"none",fontSize:"small",sx:{width:8,height:5},...e,children:jsx("path",{d:"M7.30273 0.117188C7.3806 0.115307 7.4565 0.138248 7.52051 0.182617C7.58455 0.227088 7.63373 0.290458 7.66211 0.363281C7.69046 0.436073 7.69761 0.516047 7.68262 0.592773C7.66777 0.668745 7.63069 0.738375 7.57715 0.793945L4.17285 4.43164C4.10255 4.50662 4.00523 4.55078 3.90234 4.55078C3.79964 4.55064 3.703 4.5065 3.63281 4.43164L0.227539 0.794922L0.228516 0.793945C0.175799 0.738766 0.139848 0.669812 0.125 0.594727C0.11011 0.519097 0.116275 0.440194 0.143555 0.368164C0.170957 0.296002 0.218752 0.232474 0.28125 0.1875C0.343758 0.14262 0.418162 0.11821 0.495117 0.118164C0.546901 0.118166 0.598306 0.12907 0.645508 0.150391C0.691832 0.171346 0.733094 0.201824 0.767578 0.239258L3.90234 3.58691L7.03711 0.239258C7.10547 0.164191 7.20108 0.119752 7.30273 0.117188Z",fill:"#20232B",stroke:"#20232B",strokeWidth:.233333})}));he.displayName="DefaultSelectIcon";var U=he;function Y(e,t){if(e==null)return  false;if(Array.isArray(e))return e.length>0;if(typeof e=="object"){if(t){let r=t(e);return r!=null&&r!==""}let n=e.id;return n!=null&&n!==""}return String(e)!==""}var Z=styled(wt)(({theme:e})=>({minWidth:52,height:"40px !important",maxHeight:"40px !important",backgroundColor:"transparent",width:"100%","& .MuiFormLabel-asterisk":{color:"red"},"& .MuiFormLabel-root":{fontSize:"10px",fontStyle:"normal",fontWeight:500,lineHeight:"100%",transform:"translate(8px, 15px) scale(1)",color:`${e.palette.grey[700]} !important`},".MuiFormLabel-root.MuiFormLabel-filled":{transform:"translate(8px, 8px) scale(0.75) "},".MuiFormLabel-root.Mui-focused":{transform:"translate(8px, 8px) scale(0.75)",fontSize:"10px",fontStyle:"normal",fontWeight:500,lineHeight:"100%"}}));styled(be)(({theme:e})=>({fontSize:"11px",lineHeight:"11px",color:e.palette.common.black,borderRadius:"4px",boxShadow:e.shadows[17],border:"none",outline:"none","&:focus":{border:"1px solid #1F88D0"},"& .MuiOutlinedInput-root":{"& fieldset":{borderColor:"rgba(0, 0, 0, 0.23)"},"&.Mui-focused fieldset":{border:"2px solid red"}},minWidth:52,height:"40px !important",maxHeight:"40px !important",width:"100%","& .MuiFormLabel-asterisk":{color:"red"},"& .MuiFormLabel-root":{fontSize:"10px",fontStyle:"normal",fontWeight:500,lineHeight:"100%",transform:"translate(8px, 15px) scale(1)"},".MuiFormLabel-root.MuiFormLabel-filled":{transform:"translate(8px, 8px) scale(0.75) "},".MuiFormLabel-root.Mui-focused":{transform:"translate(8px, 8px) scale(0.75)",fontSize:"10px",fontStyle:"normal",fontWeight:500,lineHeight:"100%"}}));var K=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),J=styled(be)(({theme:e,error:t})=>({width:"100%",height:"40px !important",maxHeight:"40px !important",borderRadius:"4px",overflow:"hidden",backgroundColor:e.palette.grey[400],"&.Mui-disabled":{backgroundColor:e.palette.grey[400]},".MuiSelect-select":{padding:"0 8px !important",height:"40px !important",maxHeight:"40px !important",display:"flex",alignItems:"flex-end !important",backgroundColor:`${e.palette.grey[400]} !important`,borderRadius:"4px",fontSize:"11px",cursor:"pointer","&:focus":{backgroundColor:`${e.palette.grey[400]} !important`}},"&.Mui-disabled .MuiSelect-select":{cursor:"default"},".MuiSelect-filled":{padding:"0 8px !important"},"&.MuiInputBase-adornedEnd":{display:"inline-flex",alignItems:"center",backgroundColor:e.palette.grey[400],gap:0},"& .MuiSelect-icon":{top:"50%",transform:"translateY(-50%)",right:8,zIndex:1,cursor:"pointer",backgroundColor:"transparent",borderRadius:0,pointerEvents:"auto","&:hover":{backgroundColor:"transparent"}},"&.Mui-disabled .MuiSelect-icon":{cursor:"default"},"& .MuiSelect-iconOpen":{transform:"translateY(-50%) rotate(180deg)"},"&[data-loading] .MuiSelect-icon":{display:"none"},"&[data-show-clear] .MuiSelect-icon":{display:"none"},"&[data-show-clear] .SelectBase-clearIconButton":{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",margin:0,zIndex:2},...t&&{border:`1px solid ${e.palette.error.main}`}})),Q=styled(pe)(()=>({display:"flex",alignItems:"stretch",height:"100%",flexDirection:"column",flex:1}));function kt({required:e,hasError:t,label:n,value:r,helperText:g,onChange:a,options:s,isOptionEqualToValue:d,renderOption:c,getOptionValue:l,isLoading:u,children:m,getOptionLabel:C,IconComponent:w,showClearIcon:h=false,ClearIconComponent:i=O,endAdornment:b,...M},A){let f=p=>{a?.(p);},I=()=>r==null?"":c?c(r):C?C(r):r?.label??"",k="";r!=null&&(k=(l?l(r):r?.id)??"");let v=!!(M.disabled||u),R=h&&Y(r,l)&&!v,N={IconComponent:w??U};return jsxs(Q,{children:[jsxs(Z,{variant:"filled","data-testid":"SelectBase",required:e,children:[jsx(Pt,{sx:{height:"100%"},id:`select-label-${n.trim()}`,"data-testid":"SelectBase_InputLabel",children:n}),jsx(J,{"data-testid":"SelectBase_Select","data-loading":u?"":void 0,"data-show-clear":R?"":void 0,ref:A,value:k,error:t,disableUnderline:true,required:e,labelId:`select-label-${n.trim()}`,id:`select-label-${n.trim()}`,renderValue:I,...M,disabled:v,...N,endAdornment:b||R||u?jsxs(Fragment,{children:[b,R&&jsx(vt,{className:"SelectBase-clearIconButton",type:"button",tabIndex:0,size:"small","aria-label":"Clear selection",onMouseDown:p=>{p.preventDefault(),p.stopPropagation();},onClick:p=>{p.preventDefault(),p.stopPropagation(),a?.(null);},sx:p=>({p:"1px",flexShrink:0,cursor:"pointer",color:"inherit",backgroundColor:"transparent","&:hover":{backgroundColor:p.palette.action.hover},"&:focus-visible":{outline:`2px solid ${p.palette.primary.main}`,outlineOffset:1}}),children:jsx(i,{sx:{fontSize:8,width:8,height:8}})}),u?jsx(CircularProgress,{size:20,sx:{backgroundColor:"transparent",color:p=>p.palette.grey.A400}}):null]}):void 0,children:m||s?.map((p,o)=>{let x=d?d(p,r):p?.id===r?.id;return jsx(Et,{disabled:!!p.disabled,value:(l?l(p):p?.id)??"",onClick:()=>{f(p);},sx:{fontSize:"12px",backgroundColor:L=>x?L.palette.action.hover:L.palette.common.white},children:c?c(p):p.label},`select-base-item-${o}`)})})]}),jsx(K,{children:g})]})}var Se=gt.forwardRef(kt);function Tt({required:e,hasError:t,label:n,value:r,helperText:g,onChange:a,options:s,isOptionEqualToValue:d,renderOption:c,getOptionValue:l,isLoading:u,children:m,getOptionLabel:C,IconComponent:w,showClearIcon:h=false,ClearIconComponent:i=O,endAdornment:b,...M},A){let f=o=>{a?.(o);},I=()=>{let o=r?.filter(x=>x!=null)??[];return l?o.map(l):o.map(x=>x?.id)},k=useMemo(()=>s?.filter(o=>r?.some(x=>{if(x==null)return  false;if(d)return d(o,x);if(l){let z=l(o),F=l(x);return z===F||String(z)===String(F)}let L=o?.id,S=x?.id;return L===S||String(L)===String(S)})),[s,r,d,l]),v=()=>k?.map(o=>C?C(o):o.label)?.join(", "),R=!!(M.disabled||u),N=h&&Y(r,l)&&!R,p={IconComponent:w??U};return jsxs(Q,{children:[jsxs(Z,{variant:"filled","data-testid":"SelectBase",required:e,children:[jsx(Pt,{id:`select-label-${n.trim()}`,"data-testid":"SelectBase_InputLabel",children:n}),jsx(J,{multiple:true,"data-testid":"SelectBase_Select","data-loading":u?"":void 0,"data-show-clear":N?"":void 0,ref:A,value:I()??"",error:t,disableUnderline:true,required:e,labelId:`select-label-${n.trim()}`,id:`select-label-${n.trim()}`,renderValue:v,...M,disabled:R,...p,endAdornment:b||N||u?jsxs(Fragment,{children:[b,N&&jsx(vt,{className:"SelectBase-clearIconButton",type:"button",tabIndex:0,size:"small","aria-label":"Clear selection",onMouseDown:o=>{o.preventDefault(),o.stopPropagation();},onClick:o=>{o.preventDefault(),o.stopPropagation(),a?.([]);},sx:o=>({padding:"1px",flexShrink:0,cursor:"pointer",color:"inherit",backgroundColor:"transparent","&:hover":{backgroundColor:o.palette.action.hover},"&:focus-visible":{outline:`2px solid ${o.palette.primary.main}`,outlineOffset:1}}),children:jsx(i,{sx:{fontSize:8,width:8,height:8}})}),u?jsx(CircularProgress,{size:20,sx:{backgroundColor:"transparent",color:o=>o.palette.grey.A400}}):null]}):void 0,onChange:o=>{let L=o.target.value?.map(S=>s?.find(z=>{if(l){let se=l(z);return se===S||String(se)===String(S)}let F=z?.id;return F===S||String(F)===String(S)}));a?.(L?.filter(S=>S!=null)??[]);},children:m||s?.map((o,x)=>{let L=d?d(o,r):o?.id===r?.id;return jsx(Et,{value:(l?l(o):o?.id)??"",onClick:()=>{f(o);},sx:{fontSize:"12px",backgroundColor:S=>L?S.palette.action.hover:S.palette.common.white},children:c?c(o):o.label},`select-base-multiple-item-${x}`)})})]}),jsx(K,{children:g})]})}var Ie=gt.forwardRef(Tt);var $t=Se;var Be=styled$1("button")(({theme:e,disabled:t})=>({display:"flex",gap:"4px",alignItems:"center",".logo":{width:"15.568px",height:"10.889px",borderRadius:"3px"},".arrow":{width:14},span:{color:e.palette.text.primary,fontWeight:500,fontSize:"11px"},height:24,cursor:t?"default":"pointer",opacity:t?.5:1})),we=styled$1(Popper)(({theme:e})=>({zIndex:9999,backgroundColor:e.palette.common.white,padding:"4px 8px",borderRadius:"4px",border:`1px solid ${e.palette.divider}`,width:100})),Le=styled$1("ul")(()=>({listStyle:"none",padding:0,margin:0,maxHeight:100,overflow:"auto"})),Me=styled$1("li")(({theme:e})=>({display:"flex",gap:"4px",alignItems:"center",".logo":{width:"15.568px",height:"10.889px",borderRadius:"3px"},".arrow":{width:14},span:{color:e.palette.text.primary,fontWeight:500,fontSize:"11px"},height:24,cursor:"pointer"})),ve=styled$1(a)(()=>({height:24,padding:"4px",marginBottom:"4px"})),Pe=styled$1(Box)(()=>({color:"red !important"}));function We({isLoading:e,countries:t,value:n,onCountryChange:r,required:g,disabled:a}){let[s,d]=useState(),[c,l]=useState(null),[u,m]=useState([]),[C,w$1]=useState(""),h=!!c&&!a,i=f=>{f.stopPropagation(),l(f.currentTarget);},b=()=>{l(null);},M=f=>{r?.(f),d(f),b(),m(t);},A=f=>{let I=f.target.value.toString()??"";if(w$1(I),!I){m(t);return}let k=t.filter(v=>v.idd_prefix.toString().startsWith(I)||v.iso2.toLowerCase().startsWith(I.toLowerCase()));m(k);};return useEffect(()=>{n&&d(n);},[n?.countryId]),useEffect(()=>{t.length&&m(t);},[t.length]),jsxs(pe,{"data-testid":"CountriesList",sx:{position:"relative"},children:[jsx(Be,{type:"button","aria-describedby":"CountriesList_CountriesWrapper",onClick:i,disabled:e||a,sx:{backgroundColor:"transparent",border:"none",height:34,paddingInlineStart:"8px"},children:e?jsx(Ot,{variant:"rectangular",width:56.5,height:20,sx:{borderRadius:"4px"}}):jsxs(Fragment,{children:[s&&jsxs(Fragment,{children:[jsx("img",{src:s.logo,alt:"c",className:"logo"}),jsx("span",{children:`+${s?.idd_prefix}`})]}),g&&jsx(Pe,{component:"span",children:"*"}),jsx(pe,{component:"img",src:vb,alt:"d",className:"arrow",sx:{...h&&{transform:"rotate(180deg)"}}})]})}),h&&jsx(a$1,{onClick:b,sx:{zIndex:9999}}),h&&jsx(ClickAwayListener,{onClickAway:b,children:jsxs(we,{id:"CountriesList_CountriesWrapper",open:h,anchorEl:c,"data-testid":"CountriesList_CountriesWrapper",placement:"bottom-start",children:[jsx(ve,{endAdornment:jsx("img",{src:w,alt:"arrow"}),onChange:A,hideArrows:true,"data-testid":"CountriesList_InputStyled",value:C}),jsx(Le,{"data-testid":"CountriesList_CountriesListStyled",children:u.map(f=>{let I=s?.countryId===f.countryId;return jsxs(Me,{onClick:()=>{M(f);},sx:{backgroundColor:I?"#F9F9F9":"transparent",color:I?"#000":"#8D8D94"},children:[jsx("img",{src:f.logo,alt:"c",className:"logo"}),jsx("span",{children:`+${f.idd_prefix}`})]},`country-code-${f.countryId}`)})})]})})]})}We.displayName="CountriesList";var Ae=memo(We);var V=Ae;var ze=styled(pe,{shouldForwardProp:e=>e!=="hasError"})(({theme:e,hasError:t})=>({border:`1px solid ${e.palette.divider}`,display:"flex",position:"relative",paddingInline:"8px",paddingInlineStart:"0px",alignItems:"center",borderRadius:"4px",height:"40px",...t&&{border:`1px solid ${e.palette.error.main}`}})),Fe=styled(a)(({error:e})=>({border:"none",paddingInlineEnd:0,img:{cursor:"pointer"},...e&&{borderBottomLeftRadius:0,borderBottomRightRadius:0,borderBottom:"none"}})),He=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),Te=styled(pe)(()=>({flex:1}));function $e({phoneValue:e,hasError:t,countries:n,isCountriesLoading:r,countryValue:g,onCountryChange:a,onPhoneChange:s,helperText:d,countryError:c,required:l,disabled:u,...m},C){return jsxs(Te,{"data-testid":"PhoneInput",children:[jsxs(ze,{"data-testid":"PhoneInput_MobileWrapper",hasError:t,children:[jsx(V,{isLoading:r,countries:n,value:g,onCountryChange:i=>{a?.(i);},required:l,disabled:u}),jsx(Fe,{value:e,"data-testid":"PhoneInput_InputNumberStyled",ref:C,inputProps:{autoComplete:"off"},error:t,disabled:u,...m,onChange:i=>{s?.(i.target.value);},hideArrows:true})]}),jsx(He,{children:d})]})}$e.displayName="PhoneInputBase";var _e=gt.forwardRef($e);var Zt=_e;var qe=styled$1("button")(({theme:e})=>({display:"flex",gap:"4px",alignItems:"center",".logo":{width:"15.568px",height:"10.889px",borderRadius:"3px"},".arrow":{width:14},span:{color:e.palette.text.primary,fontWeight:500,fontSize:"11px"},height:24,cursor:"pointer"})),Ge=styled$1(Popper)(({theme:e})=>({zIndex:99,backgroundColor:e.palette.common.white,padding:"4px 8px",borderRadius:"4px",border:`1px solid ${e.palette.divider}`,width:100})),Oe=styled$1("ul")(()=>({listStyle:"none",padding:0,margin:0,maxHeight:100,overflow:"auto"})),Ue=styled$1("li")(({theme:e})=>({display:"flex",gap:"4px",alignItems:"center",".logo":{width:"15.568px",height:"10.889px",borderRadius:"3px"},".arrow":{width:14},span:{color:e.palette.text.primary,fontWeight:500,fontSize:"11px"},height:24,cursor:"pointer"})),Ye=styled$1(Box)(()=>({color:"red !important"}));function Qe({isLoading:e,currencies:t,value:n,onCurrencyChange:r,required:g}){let[a,s]=useState(),[d,c]=useState(null),[l,u]=useState([]),m=!!d,C=i=>{i.stopPropagation(),c(i.currentTarget);},w=()=>{c(null);},h=i=>{r?.(i),s(i),w(),u(t);};return useEffect(()=>{n&&s(n);},[n?.currencyId]),useEffect(()=>{t.length&&u(t);},[t.length]),jsxs(pe,{"data-testid":"currenciesList",sx:{position:"relative"},children:[jsx(qe,{type:"button","aria-describedby":"currenciesList_currenciesWrapper",onClick:C,disabled:e,sx:{backgroundColor:"transparent",border:"none",height:34,paddingInlineStart:"8px"},children:e?jsx(Ot,{variant:"rectangular",width:56.5,height:20,sx:{borderRadius:"4px"}}):jsxs(Fragment,{children:[a&&jsxs(Fragment,{children:[jsx("img",{src:a.logo,alt:"c",className:"logo"}),jsx("span",{children:a?.code.english})]}),g&&jsx(Ye,{component:"span",children:"*"}),jsx(pe,{component:"img",src:vb,alt:"d",className:"arrow",sx:{...m&&{transform:"rotate(180deg)"}}})]})}),m&&jsx(a$1,{onClick:w}),m&&jsx(Ge,{id:"currenciesList_currenciesWrapper",open:m,anchorEl:d,"data-testid":"currenciesList_currenciesWrapper",placement:"bottom-start",children:jsx(Oe,{"data-testid":"currenciesList_currenciesListStyled",children:l.map(i=>{let b=a?.currencyId===i.currencyId;return jsxs(Ue,{onClick:()=>{h(i);},sx:{backgroundColor:b?"#F9F9F9":"transparent",color:b?"#000":"#8D8D94"},children:[jsx("img",{src:i.logo,alt:"c",className:"logo"}),jsx("span",{children:i?.code.english})]},`currency-code-${i.currencyId}`)})})})]})}Qe.displayName="CurrenciesList";var Xe=memo(Qe);var Ve=Xe;var et=styled(jt,{shouldForwardProp:e=>!["hasError","hideArrows"].includes(e)})(({theme:e,hideArrows:t})=>({padding:"8px",border:`1px solid ${e.palette.divider}`,borderRadius:"4px",height:32,color:e.palette.text.primary,fontSize:"11px",outline:0,maxWidth:"100%",display:"flex",flexGrow:1,"::placeholder":{color:e.palette.grey[700],fontWeight:400},...t&&{"& input[type=number]":{MozAppearance:"textfield"},"& input[type=number]::-webkit-outer-spin-button":{WebkitAppearance:"none",margin:0},"& input[type=number]::-webkit-inner-spin-button":{WebkitAppearance:"none",margin:0}}})),tt=styled(pe)(()=>({flex:1}));function tr({hasError:e,hideArrows:t,inputProps:n,...r},g){return jsx(tt,{onClick:a=>{a.stopPropagation();},children:jsx(et,{ref:g,placeholder:r.placeholder,hideArrows:true,hasError:e,disableUnderline:true,inputProps:{...n,type:"number"},onKeyDown:a=>{["e","E","+","-"].includes(a.key)&&a.preventDefault();},...r})})}var ot=forwardRef(tr);var nt=ot;var at=styled(pe,{shouldForwardProp:e=>e!=="hasError"})(({theme:e,hasError:t})=>({border:`1px solid ${e.palette.divider}`,display:"flex",justifyContent:"space-between",position:"relative",paddingInline:"8px",paddingInlineStart:"0px",alignItems:"center",borderRadius:"4px",height:"40px",...t&&{border:`1px solid ${e.palette.error.main}`}})),it=styled(pe)(()=>({width:"50px"})),lt=styled(nt)(({error:e})=>({border:"none",paddingInlineEnd:0,img:{cursor:"pointer"},...e&&{borderBottomLeftRadius:0,borderBottomRightRadius:0,borderBottom:"none"}})),pt=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),st=styled(pe)(()=>({flex:1}));function ut({amountValue:e,hasError:t,currencies:n,isCurrenciesLoading:r,currencyValue:g,onCurrencyChange:a,onAmountChange:s,onAmountBlur:d,helperText:c,required:l,...u},m){return jsxs(st,{"data-testid":"AmountInput",children:[jsxs(at,{"data-testid":"AmountInput_MobileWrapper",hasError:t,children:[jsx(Ve,{isLoading:r,currencies:n,value:g,onCurrencyChange:i=>{a?.(i);},required:l}),jsx(it,{children:jsx(lt,{value:e,"data-testid":"AmountInput_InputNumberStyled",ref:m,inputProps:{autoComplete:"off"},error:t,...u,onChange:i=>{s?.(i.target.value);},onBlur:i=>{d?.(i.target.value);},hideArrows:true})})]}),jsx(pt,{children:c})]})}ut.displayName="AmountInputBase";var ct=gt.forwardRef(ut);var or=ct;export{Ct as a,Ie as b,$t as c,V as d,Zt as e,or as f};