@tap-payments/os-micro-frontend-shared 0.1.491 → 0.1.492-test.2

package/docs/stories/components/inputs/Timepicker.stories.tsx

@@ -0,0 +1,91 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import Typography from '@mui/material/Typography'
+import Timepicker, { type Time } from '@components/Timepicker'
+
+const meta: Meta<typeof Timepicker> = {
+  title: 'Components/Inputs/Timepicker',
+  component: Timepicker,
+  tags: ['autodocs'],
+  argTypes: {
+    onChange: { table: { disable: true } },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', width: '100%' }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Timepicker>
+
+function BaseRender(args: { enableRealTimeChange?: boolean; size?: 'small' | 'large'; defaultTime?: Time }) {
+  const [value, setValue] = useState<Time | undefined>(args.defaultTime)
+
+  return (
+    <Box sx={{ display: 'grid', gap: 1 }}>
+      <Timepicker defaultTime={args.defaultTime} enableRealTimeChange={args.enableRealTimeChange} size={args.size} onChange={setValue} />
+      <Typography variant="caption" color="text.secondary">
+        Selected: {value ? `${value.hour}:${String(value.minute).padStart(2, '0')} ${value.period || ''}` : 'none'}
+      </Typography>
+    </Box>
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  args: {
+    defaultTime: { hour: 9, minute: 30, period: 'AM' },
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<Time | undefined>({ hour: 9, minute: 30, period: 'AM' })
+
+<Timepicker
+  defaultTime={{ hour: 9, minute: 30, period: 'AM' }}
+  onChange={setValue}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+export const RealTimeChange: Story = {
+  name: 'real-time change',
+  render: BaseRender,
+  args: {
+    enableRealTimeChange: true,
+    size: 'small',
+    defaultTime: { hour: 2, minute: 15, period: 'PM' },
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [value, setValue] = useState<Time | undefined>({ hour: 2, minute: 15, period: 'PM' })
+
+<Timepicker
+  defaultTime={{ hour: 2, minute: 15, period: 'PM' }}
+  size="small"
+  enableRealTimeChange
+  onChange={setValue}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

package/docs/stories/components/inputs/ToggleButtons.stories.tsx

@@ -0,0 +1,242 @@
+import { useState } from 'react'
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import Box from '@mui/material/Box'
+import ToggleButtons from '@components/ToggleButtons'
+import { StoryTable, StoryThead, StoryTbody, StoryRow, StoryHeaderCell, StoryRowLabel, StoryCell, StoryHint } from '@storybook-utils'
+
+const meta: Meta<typeof ToggleButtons> = {
+  title: 'Components/Inputs/ToggleButtons',
+  component: ToggleButtons,
+  tags: ['autodocs'],
+  argTypes: {
+    activeKey: { control: false, description: 'The key of the currently active option' },
+    onChange: { control: false, description: 'Callback fired when the active option changes' },
+    options: { control: false, description: 'Array of `{ key, content }` options to render' },
+    containerProps: { control: false, description: 'MUI `BoxProps` forwarded to the outer container' },
+    buttonProps: { control: false, description: 'MUI `BoxProps` forwarded to every toggle button' },
+  },
+  parameters: {
+    layout: 'padded',
+    controls: { expanded: true },
+  },
+  decorators: [
+    (Story) => (
+      <Box sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', width: '100%', minHeight: 80 }}>
+        <Story />
+      </Box>
+    ),
+  ],
+}
+
+export default meta
+
+type Story = StoryObj<typeof ToggleButtons>
+
+// ──────────────────────────────────────────────
+// Focused / named stories
+
+function BaseRender() {
+  const [active, setActive] = useState<string>('day')
+  return (
+    <ToggleButtons
+      options={[
+        { key: 'day', content: 'D' },
+        { key: 'week', content: 'W' },
+        { key: 'month', content: 'M' },
+      ]}
+      activeKey={active}
+      onChange={setActive}
+    />
+  )
+}
+
+export const Base: Story = {
+  render: BaseRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [active, setActive] = useState('day')
+
+<ToggleButtons
+  options={[
+    { key: 'day', content: 'D' },
+    { key: 'week', content: 'W' },
+    { key: 'month', content: 'M' },
+  ]}
+  activeKey={active}
+  onChange={setActive}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function TwoOptionsRender() {
+  const [active, setActive] = useState<string>('list')
+  return (
+    <ToggleButtons
+      options={[
+        { key: 'list', content: '≡' },
+        { key: 'grid', content: '⊞' },
+      ]}
+      activeKey={active}
+      onChange={setActive}
+    />
+  )
+}
+
+export const TwoOptions: Story = {
+  render: TwoOptionsRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [active, setActive] = useState('list')
+
+<ToggleButtons
+  options={[
+    { key: 'list', content: '≡' },
+    { key: 'grid', content: '⊞' },
+  ]}
+  activeKey={active}
+  onChange={setActive}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+function FiveOptionsRender() {
+  const [active, setActive] = useState<string>('3')
+  return (
+    <ToggleButtons
+      options={[
+        { key: '1', content: '1' },
+        { key: '2', content: '2' },
+        { key: '3', content: '3' },
+        { key: '4', content: '4' },
+        { key: '5', content: '5' },
+      ]}
+      activeKey={active}
+      onChange={setActive}
+    />
+  )
+}
+
+export const FiveOptions: Story = {
+  render: FiveOptionsRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [active, setActive] = useState('3')
+
+<ToggleButtons
+  options={['1','2','3','4','5'].map((k) => ({ key: k, content: k }))}
+  activeKey={active}
+  onChange={setActive}
+/>
+        `.trim(),
+      },
+    },
+  },
+}
+
+// ──────────────────────────────────────────────
+// Kitchen sink
+
+const tableColumns = ['USE CASE', 'TOGGLE'] as const
+
+function AllVariantsRender() {
+  const [period, setPeriod] = useState('W')
+  const [view, setView] = useState('list')
+  const [page, setPage] = useState('2')
+
+  return (
+    <Box sx={{ maxWidth: 640, mx: 'auto' }}>
+      <StoryTable>
+        <StoryThead>
+          <StoryRow>
+            {tableColumns.map((header, index) => (
+              <StoryHeaderCell key={header} first={index === 0}>
+                {header}
+              </StoryHeaderCell>
+            ))}
+          </StoryRow>
+        </StoryThead>
+
+        <StoryTbody>
+          <StoryRow>
+            <StoryRowLabel>Time period (3 options)</StoryRowLabel>
+            <StoryCell>
+              <ToggleButtons
+                options={[
+                  { key: 'D', content: 'D' },
+                  { key: 'W', content: 'W' },
+                  { key: 'M', content: 'M' },
+                ]}
+                activeKey={period}
+                onChange={setPeriod}
+              />
+            </StoryCell>
+          </StoryRow>
+
+          <StoryRow>
+            <StoryRowLabel>View mode (2 options)</StoryRowLabel>
+            <StoryCell>
+              <ToggleButtons
+                options={[
+                  { key: 'list', content: '≡' },
+                  { key: 'grid', content: '⊞' },
+                ]}
+                activeKey={view}
+                onChange={setView}
+              />
+            </StoryCell>
+          </StoryRow>
+
+          <StoryRow>
+            <StoryRowLabel>Pagination (5 options)</StoryRowLabel>
+            <StoryCell>
+              <ToggleButtons options={['1', '2', '3', '4', '5'].map((k) => ({ key: k, content: k }))} activeKey={page} onChange={setPage} />
+            </StoryCell>
+          </StoryRow>
+        </StoryTbody>
+      </StoryTable>
+
+      <StoryHint>All toggles above are interactive — click any option to activate it.</StoryHint>
+    </Box>
+  )
+}
+
+export const AllVariants: Story = {
+  name: 'all variants',
+  decorators: [],
+  render: AllVariantsRender,
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `
+const [active, setActive] = useState('W')
+
+<ToggleButtons
+  options={[
+    { key: 'D', content: 'D' },
+    { key: 'W', content: 'W' },
+    { key: 'M', content: 'M' },
+  ]}
+  activeKey={active}
+  onChange={setActive}
+/>
+        `.trim(),
+      },
+    },
+  },
+}

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.491",
-  "testVersion": 0,
+  "version": "0.1.492-test.2",
+  "testVersion": 2,
   "type": "module",
   "sideEffects": false,
   "main": "build/index.js",
@@ -50,6 +50,7 @@
   },
   "files": [
     "build",
+    "docs",
     "readme.md"
   ],
   "scripts": {
@@ -154,4 +155,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

package/build/chunk-CC4HU4H6.js

@@ -1 +0,0 @@
-import {a as a$2}from'./chunk-ZTFNCBDJ.js';import {a as a$3}from'./chunk-NET3U5QO.js';import {a as a$1}from'./chunk-QTZ2AGMI.js';import {a}from'./chunk-CNIYZZCP.js';import {Ic}from'./chunk-NSFZTMX6.js';import {useState,useMemo,createElement}from'react';import c from'@mui/material/Box';import O from'@mui/material/Typography';import Q from'@mui/material/Input';import {styled}from'@mui/material/styles';import {CircularProgress}from'@mui/material';import X from'@mui/material/SvgIcon';import {jsx,jsxs}from'react/jsx-runtime';var ce=styled(a)(({theme:e})=>({fontSize:"10px",color:e.palette.grey[700],fontWeight:600,lineHeight:"10px"})),se=styled(a)(({theme:e})=>({fontSize:"11px",color:e.palette.text.primary,fontWeight:600,lineHeight:"14.3px",width:200})),de=styled(c)(()=>({display:"flex",flexDirection:"column",maxHeight:400,overflow:"auto",gap:"8px"})),B=styled(Q)(({theme:e})=>({width:"inherit",height:32,padding:"11px 12px",fontSize:"10px",borderRadius:"5px",backgroundColor:"#F9F9F9",border:"1px solid transparent","&.Mui-focused":{borderColor:e.palette.info.dark}})),he=styled(a$1)(()=>({padding:0,width:12,height:12,".MuiSvgIcon-root, img":{width:12,height:12}})),L=styled(c)(()=>({display:"flex",flexDirection:"column",gap:"8px",padding:"4px"})),ue=styled(c)(()=>({display:"flex",gap:"8px",padding:"4px",flexWrap:"wrap"})),me=styled(c)(({theme:e})=>({display:"flex",padding:"4px 8px 4px 6px",alignItems:"center",gap:"4px",borderRadius:"13px",backgroundColor:`${e.palette.info.dark}1a`,fontSize:"10px",fontWeight:500,cursor:"pointer"})),S=styled(a)(({theme:e,selected:a})=>({display:"flex",gap:"8px",alignItems:"center",fontSize:"10px",fontWeight:500,color:e.palette.common.black,cursor:"pointer",padding:8,justifyContent:"space-between",...a&&{backgroundColor:"#F8F8F8"}}));var Y="M4.83332 0C2.16987 0 0 2.16988 0 4.83334C0 7.4968 2.16987 9.66668 4.83332 9.66668C5.98544 9.66668 7.04455 9.2597 7.87628 8.58335L11.1465 11.8535C11.1925 11.9015 11.2477 11.9398 11.3088 11.9662C11.3698 11.9926 11.4356 12.0066 11.5021 12.0072C11.5686 12.0079 11.6346 11.9953 11.6962 11.9702C11.7578 11.945 11.8137 11.9078 11.8607 11.8608C11.9078 11.8138 11.945 11.7578 11.9701 11.6962C11.9953 11.6346 12.0079 11.5686 12.0072 11.5021C12.0065 11.4356 11.9926 11.3699 11.9662 11.3088C11.9398 11.2478 11.9015 11.1926 11.8535 11.1465L8.58331 7.87632C9.25966 7.04458 9.66664 5.98546 9.66664 4.83334C9.66664 2.16988 7.49677 0 4.83332 0ZM4.83332 1C6.95633 1 8.66665 2.71032 8.66665 4.83334C8.66665 5.86755 8.25871 6.80192 7.59699 7.49025C7.5562 7.52023 7.5202 7.55623 7.49022 7.59702C6.80189 8.25875 5.86752 8.66668 4.83332 8.66668C2.71031 8.66668 0.999997 6.95636 0.999997 4.83334C0.999997 2.71032 2.71031 1 4.83332 1Z";function j({size:e=12,sx:a,className:r,...d}){return jsx(X,{viewBox:"0 0 12 12",inheritViewBox:true,className:`${r??""} MUISvgIcon__search-icon`,sx:{width:e,height:e,color:"text.primary",...a},...d,children:jsx("path",{d:Y,fill:"currentColor"})})}var D=j;function te({options:e,onChangeOption:a,selectedOption:r,placeholder:d,label:T,isLoading:z,renderOption:g,iconUrl:h,disabled:u,onClearValue:H,slotProps:A={},hideSelectedCheckmark:V,listWrapperSx:R={},...$}){let{selectInput:Z={},searchInput:U={},dropdownContainer:C={},item:v={}}=A,[I,b]=useState(null),[l,m]=useState(""),x=!!I,q=t=>{u||b(x?null:t.currentTarget);},f=()=>{b(null),m("");},G=z?jsx(CircularProgress,{size:16}):jsx(D,{onClick:()=>{l&&m("");},role:"button"}),w=useMemo(()=>l?e.filter(t=>{let p=t?.label?.toLowerCase(),K=t?.value?.toLowerCase();return p?.includes(l.toLowerCase())||K?.includes(l.toLowerCase())}):e,[e,l]),J=useMemo(()=>jsx(c,{sx:{display:"flex",alignItems:"center",maxWidth:16},children:jsx(c,{component:"img",src:h,alt:"icon",sx:{maxWidth:12,height:12}})}),[h]);return jsx(a$2,{disabled:u,open:x,anchorEl:I,onOpen:q,onClose:f,hasValue:!!r?.value,onClear:H,trigger:jsx(a$3,{className:"SelectWithSearch_input",name:"name",placeholder:"Please Select",hasError:false,label:T,sx:{cursor:"pointer"},value:r?.label||"",InputLabelProps:{filled:!!r?.label},disabled:u,InputProps:{disableUnderline:true,...!!h&&{startAdornment:J}},...Z}),listWrapperSx:{height:"100%",overflow:"hidden",...R},slotProps:{popover:{slotProps:{paper:{sx:{overflow:"hidden"}}}}},...$,children:jsxs(L,{...C,className:`SelectWithSearch_container ${C?.className??""}`,children:[jsx(B,{className:"SelectWithSearch_input",placeholder:d||"Select",endAdornment:G,onClick:t=>{t.stopPropagation();},value:l,onChange:t=>{m(t.target.value);},disableUnderline:true,sx:{cursor:"default",width:"100%",backgroundColor:"white",border:"1px solid #F2F2F2",...e.length&&{marginBottom:"4px"},...l&&{cursor:"pointer"}},...U}),jsxs(c,{className:"SelectWithSearch_options",overflow:"auto",maxHeight:400,children:[w.length===0&&l&&jsx(S,{selected:false,...v,children:jsx(O,{component:"span",fontSize:"10px",fontWeight:500,color:"#8D8D94",children:"No results found"})}),w.map(t=>g?g(t,{closeDropdown:f,open:x}):createElement(S,{...v,className:`SelectWithSearch_item ${r?.value===t.value?"SelectWithSearch_item-selected":""}`,key:t.value,selected:r?.value===t.value,onClick:p=>{p.stopPropagation(),p.preventDefault(),r?.value===t.value?a(null):a(t),f();}},jsx("span",{children:t.label}),!V&&r?.value===t?.value&&jsx(c,{component:"img",src:Ic,alt:"close",sx:{width:10,height:7.5}})))]})]})})}var N=te;var Ee=N;export{ce as a,se as b,de as c,B as d,he as e,L as f,ue as g,me as h,S as i,Ee as j};

package/build/chunk-NET3U5QO.js

@@ -1 +0,0 @@
-import {a}from'./chunk-XDMM2WXF.js';import {a as a$1}from'./chunk-S7OMWEM6.js';import {vb,w}from'./chunk-NSFZTMX6.js';import je,{memo,forwardRef,useMemo,useState,useEffect}from'react';import Q from'@mui/material/Box';import {styled}from'@mui/material/styles';import Ve 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 pt from'@mui/material/InputLabel';import lt from'@mui/material/MenuItem';import nt from'@mui/material/FormControl';import re from'@mui/material/Select';import bt from'@mui/material/Skeleton';import Rt from'@mui/material/Input';var Z=styled(Q)(()=>({display:"flex",flexDirection:"column",gap:"4px",width:"100%",height:40,"& *":{flex:1,margin:"0 !important"}})),V=styled(Ve,{shouldForwardProp:e=>e!=="hideArrows"})(({theme:e,error:t,hideArrows:n,disabled:o})=>({border:`1px solid ${e.palette.divider}`,...o&&{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%"}}})),j=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"}));var ee=je.forwardRef(({name:e,onChange:t,hasError:n,helperText:o,hideArrows:f,...i},p)=>{let l=d=>{t?.(d.target.value??"");};return jsxs(Q,{children:[jsx(Z,{"data-testid":"InputBase",children:jsx(V,{rows:1,error:n,fullWidth:true,size:"small",variant:"standard",ref:p,name:e,type:i.type??"text",label:i.placeholder||i.label,onChange:l,InputProps:{disableUnderline:true},hideArrows:f,...i})}),jsx(j,{children:o})]})});ee.displayName="InputBase";var te=ee;var rt=te;var H=styled(nt)(({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(re)(({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 N=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),z=styled(re)(({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"},".MuiSelect-filled":{padding:"0 8px !important"},"&.MuiInputBase-adornedStart > div:nth-of-type(1)":{backgroundColor:"red"},...t&&{border:`1px solid ${e.palette.error.main}`}})),$=styled(Q)(()=>({display:"flex",alignItems:"stretch",height:"100%",flexDirection:"column",flex:1}));function st({required:e,hasError:t,label:n,value:o,helperText:f,onChange:i,options:p,isOptionEqualToValue:l,renderOption:d,getOptionValue:s,isLoading:g,children:u,getOptionLabel:y,...h},C){let a=m=>{i?.(m);},S=()=>d?d(o):y?y(o):o.label;return jsxs($,{children:[jsxs(H,{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(z,{"data-testid":"SelectBase_Select",ref:C,value:(s?s(o):o?.id)??"",error:t,disableUnderline:true,required:e,labelId:`select-label-${n.trim()}`,id:`select-label-${n.trim()}`,renderValue:S,...h,disabled:h.disabled||g,endAdornment:g?jsx(CircularProgress,{size:20,sx:{backgroundColor:"transparent",color:m=>m.palette.grey.A400}}):null,children:u||p?.map((m,B)=>{let r=l?l(m,o):m?.id===o?.id;return jsx(lt,{disabled:!!m.disabled,value:(s?s(m):m?.id)??"",onClick:()=>{a(m);},sx:{fontSize:"12px",backgroundColor:c=>r?c.palette.action.hover:c.palette.common.white},children:d?d(m):m.label},`country-item-${B}`)})})]}),jsx(N,{children:f})]})}var ne=je.forwardRef(st);function gt({required:e,hasError:t,label:n,value:o,helperText:f,onChange:i,options:p,isOptionEqualToValue:l,renderOption:d,getOptionValue:s,isLoading:g,children:u,getOptionLabel:y,...h},C){let a=r=>{i?.(r);},S=()=>s?o?.map(s):o?.map(r=>r?.id),m=useMemo(()=>p?.filter(r=>o?.some(c=>l?l(r,c):r.id===c?.id)),[p,o,l]),B=()=>m?.map(r=>y?y(r):r.label)?.join(", ");return jsxs($,{children:[jsxs(H,{variant:"filled","data-testid":"SelectBase",required:e,children:[jsx(pt,{id:`select-label-${n.trim()}`,"data-testid":"SelectBase_InputLabel",children:n}),jsx(z,{multiple:true,"data-testid":"SelectBase_Select",ref:C,value:S()??"",error:t,disableUnderline:true,required:e,labelId:`select-label-${n.trim()}`,id:`select-label-${n.trim()}`,renderValue:B,...h,disabled:h.disabled||g,endAdornment:g?jsx(CircularProgress,{size:20,sx:{backgroundColor:"transparent",color:r=>r.palette.grey.A400}}):null,onChange:r=>{let L=r.target.value?.map(I=>p?.find(X=>s?s(X)===I:X.id===I));i?.([...L]);},children:u||p?.map((r,c)=>{let L=l?l(r,o):r?.id===o?.id;return jsx(lt,{value:(s?s(r):r?.id)??"",onClick:()=>{a(r);},sx:{fontSize:"12px",backgroundColor:I=>L?I.palette.action.hover:I.palette.common.white},children:d?d(r):r.label},`country-item-${c}`)})})]}),jsx(N,{children:f})]})}var ie=je.forwardRef(gt);var xt=ne;var pe=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})),le=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})),se=styled$1("ul")(()=>({listStyle:"none",padding:0,margin:0,maxHeight:100,overflow:"auto"})),de=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"})),ue=styled$1(a)(()=>({height:24,padding:"4px",marginBottom:"4px"})),me=styled$1(Box)(()=>({color:"red !important"}));function xe({isLoading:e,countries:t,value:n,onCountryChange:o,required:f,disabled:i}){let[p,l]=useState(),[d,s]=useState(null),[g,u]=useState([]),[y,h]=useState(""),C=!!d&&!i,a=r=>{r.stopPropagation(),s(r.currentTarget);},S=()=>{s(null);},m=r=>{o?.(r),l(r),S(),u(t);},B=r=>{let c=r.target.value.toString()??"";if(h(c),!c){u(t);return}let L=t.filter(I=>I.idd_prefix.toString().startsWith(c)||I.iso2.toLowerCase().startsWith(c.toLowerCase()));u(L);};return useEffect(()=>{n&&l(n);},[n?.countryId]),useEffect(()=>{t.length&&u(t);},[t.length]),jsxs(Q,{"data-testid":"CountriesList",sx:{position:"relative"},children:[jsx(pe,{type:"button","aria-describedby":"CountriesList_CountriesWrapper",onClick:a,disabled:e||i,sx:{backgroundColor:"transparent",border:"none",height:34,paddingInlineStart:"8px"},children:e?jsx(bt,{variant:"rectangular",width:56.5,height:20,sx:{borderRadius:"4px"}}):jsxs(Fragment,{children:[p&&jsxs(Fragment,{children:[jsx("img",{src:p.logo,alt:"c",className:"logo"}),jsx("span",{children:`+${p?.idd_prefix}`})]}),f&&jsx(me,{component:"span",children:"*"}),jsx(Q,{component:"img",src:vb,alt:"d",className:"arrow",sx:{...C&&{transform:"rotate(180deg)"}}})]})}),C&&jsx(a$1,{onClick:S,sx:{zIndex:9999}}),C&&jsx(ClickAwayListener,{onClickAway:S,children:jsxs(le,{id:"CountriesList_CountriesWrapper",open:C,anchorEl:d,"data-testid":"CountriesList_CountriesWrapper",placement:"bottom-start",children:[jsx(ue,{endAdornment:jsx("img",{src:w,alt:"arrow"}),onChange:B,hideArrows:true,"data-testid":"CountriesList_InputStyled",value:y}),jsx(se,{"data-testid":"CountriesList_CountriesListStyled",children:g.map(r=>{let c=p?.countryId===r.countryId;return jsxs(de,{onClick:()=>{m(r);},sx:{backgroundColor:c?"#F9F9F9":"transparent",color:c?"#000":"#8D8D94"},children:[jsx("img",{src:r.logo,alt:"c",className:"logo"}),jsx("span",{children:`+${r.idd_prefix}`})]},`country-code-${r.countryId}`)})})]})})]})}xe.displayName="CountriesList";var ye=memo(xe);var _=ye;var Ce=styled(Q,{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}`}})),be=styled(a)(({error:e})=>({border:"none",paddingInlineEnd:0,img:{cursor:"pointer"},...e&&{borderBottomLeftRadius:0,borderBottomRightRadius:0,borderBottom:"none"}})),Se=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),Ie=styled(Q)(()=>({flex:1}));function Be({phoneValue:e,hasError:t,countries:n,isCountriesLoading:o,countryValue:f,onCountryChange:i,onPhoneChange:p,helperText:l,countryError:d,required:s,disabled:g,...u},y){return jsxs(Ie,{"data-testid":"PhoneInput",children:[jsxs(Ce,{"data-testid":"PhoneInput_MobileWrapper",hasError:t,children:[jsx(_,{isLoading:o,countries:n,value:f,onCountryChange:a=>{i?.(a);},required:s,disabled:g}),jsx(be,{value:e,"data-testid":"PhoneInput_InputNumberStyled",ref:y,inputProps:{autoComplete:"off"},error:t,disabled:g,...u,onChange:a=>{p?.(a.target.value);},hideArrows:true})]}),jsx(Se,{children:l})]})}Be.displayName="PhoneInputBase";var Le=je.forwardRef(Be);var Mt=Le;var we=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"})),ve=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})),Pe=styled$1("ul")(()=>({listStyle:"none",padding:0,margin:0,maxHeight:100,overflow:"auto"})),Re=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"})),Ee=styled$1(Box)(()=>({color:"red !important"}));function Fe({isLoading:e,currencies:t,value:n,onCurrencyChange:o,required:f}){let[i,p]=useState(),[l,d]=useState(null),[s,g]=useState([]),u=!!l,y=a=>{a.stopPropagation(),d(a.currentTarget);},h=()=>{d(null);},C=a=>{o?.(a),p(a),h(),g(t);};return useEffect(()=>{n&&p(n);},[n?.currencyId]),useEffect(()=>{t.length&&g(t);},[t.length]),jsxs(Q,{"data-testid":"currenciesList",sx:{position:"relative"},children:[jsx(we,{type:"button","aria-describedby":"currenciesList_currenciesWrapper",onClick:y,disabled:e,sx:{backgroundColor:"transparent",border:"none",height:34,paddingInlineStart:"8px"},children:e?jsx(bt,{variant:"rectangular",width:56.5,height:20,sx:{borderRadius:"4px"}}):jsxs(Fragment,{children:[i&&jsxs(Fragment,{children:[jsx("img",{src:i.logo,alt:"c",className:"logo"}),jsx("span",{children:i?.code.english})]}),f&&jsx(Ee,{component:"span",children:"*"}),jsx(Q,{component:"img",src:vb,alt:"d",className:"arrow",sx:{...u&&{transform:"rotate(180deg)"}}})]})}),u&&jsx(a$1,{onClick:h}),u&&jsx(ve,{id:"currenciesList_currenciesWrapper",open:u,anchorEl:l,"data-testid":"currenciesList_currenciesWrapper",placement:"bottom-start",children:jsx(Pe,{"data-testid":"currenciesList_currenciesListStyled",children:s.map(a=>{let S=i?.currencyId===a.currencyId;return jsxs(Re,{onClick:()=>{C(a);},sx:{backgroundColor:S?"#F9F9F9":"transparent",color:S?"#000":"#8D8D94"},children:[jsx("img",{src:a.logo,alt:"c",className:"logo"}),jsx("span",{children:a?.code.english})]},`currency-code-${a.currencyId}`)})})})]})}Fe.displayName="CurrenciesList";var He=memo(Fe);var Ne=He;var $e=styled(Rt,{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}}})),Te=styled(Q)(()=>({flex:1}));function Wt({hasError:e,hideArrows:t,inputProps:n,...o},f){return jsx(Te,{onClick:i=>{i.stopPropagation();},children:jsx($e,{ref:f,placeholder:o.placeholder,hideArrows:true,hasError:e,disableUnderline:true,inputProps:{...n,type:"number"},onKeyDown:i=>{["e","E","+","-"].includes(i.key)&&i.preventDefault();},...o})})}var De=forwardRef(Wt);var qe=De;var Oe=styled(Q,{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}`}})),Ue=styled(Q)(()=>({width:"50px"})),Ge=styled(qe)(({error:e})=>({border:"none",paddingInlineEnd:0,img:{cursor:"pointer"},...e&&{borderBottomLeftRadius:0,borderBottomRightRadius:0,borderBottom:"none"}})),Ke=styled("small")(({theme:e})=>({color:e.palette.error.main,fontSize:"10px",lineHeight:"10px",marginTop:"4px",display:"block"})),Je=styled(Q)(()=>({flex:1}));function Xe({amountValue:e,hasError:t,currencies:n,isCurrenciesLoading:o,currencyValue:f,onCurrencyChange:i,onAmountChange:p,onAmountBlur:l,helperText:d,required:s,...g},u){return jsxs(Je,{"data-testid":"AmountInput",children:[jsxs(Oe,{"data-testid":"AmountInput_MobileWrapper",hasError:t,children:[jsx(Ne,{isLoading:o,currencies:n,value:f,onCurrencyChange:a=>{i?.(a);},required:s}),jsx(Ue,{children:jsx(Ge,{value:e,"data-testid":"AmountInput_InputNumberStyled",ref:u,inputProps:{autoComplete:"off"},error:t,...g,onChange:a=>{p?.(a.target.value);},onBlur:a=>{l?.(a.target.value);},hideArrows:true})})]}),jsx(Ke,{children:d})]})}Xe.displayName="AmountInputBase";var Ye=je.forwardRef(Xe);var At=Ye;export{rt as a,ie as b,xt as c,_ as d,Mt as e,At as f};

package/build/chunk-QLEUEVEZ.js

@@ -1 +0,0 @@
-import {a as a$4}from'./chunk-ZTFNCBDJ.js';import {a,c,e,f,b}from'./chunk-NET3U5QO.js';import {a as a$3}from'./chunk-237EA4BW.js';import {a as a$2}from'./chunk-QTZ2AGMI.js';import {a as a$5}from'./chunk-SQRZEIOF.js';import {a as a$6}from'./chunk-NKNRVF6Q.js';import {a as a$1}from'./chunk-CNIYZZCP.js';import {Ic,w as w$1}from'./chunk-NSFZTMX6.js';import*as w from'react';import w__default,{useState,useMemo}from'react';import {useFormContext,Controller,FormProvider,useForm}from'react-hook-form';import {jsx,jsxs}from'react/jsx-runtime';import P from'@mui/material/Box';import Le from'@mui/material/Input';import {styled}from'@mui/material/styles';import {ListSubheader,Box,MenuItem}from'@mui/material';import Ke from'@mui/material/MenuItem';function Pe({onSubmit:e,methods:n,children:o}){return jsx(FormProvider,{...n,children:jsx("form",{onSubmit:e,noValidate:true,children:o})})}var Fe=w__default.memo(Pe);var J=w.forwardRef(({name:e,helperText:n,hideArrows:o,...t},l)=>{let{control:i}=useFormContext();return jsx(Controller,{name:e,control:i,defaultValue:t.defaultValue,render:({field:c,fieldState:a$1})=>jsx(a,{...t,...c,ref:l,hasError:!!a$1.error,helperText:n??a$1.error?.message,hideArrows:o,onChange:p=>{c.onChange(p),t.onChange?.(p);},onWheel:p=>{p.target instanceof HTMLElement&&p.target.blur();}})})});J.displayName="RFHFormInput";var Q=w.memo(J);var Ae=Q;function Y({phoneName:e$1,countries:n,countryName:o,helperText:t,isCountriesLoading:l,disabled:i,...c}){let{control:a,watch:p,setValue:x}=useFormContext(),h=p(o),b=u=>{x(o,u);};return jsx(Controller,{name:e$1,control:a,render:({field:{onChange:u,value:s},fieldState:f})=>jsx(e,{...c,phoneValue:s,countries:n,hasError:!!f.error,helperText:t??f.error?.message,onPhoneChange:d=>{u(d);},disabled:i,countryValue:h,onCountryChange:b,isCountriesLoading:l})})}Y.displayName="RFHPhoneInput";var Z=Y;var Ee=Z;var B=(e,n)=>e.toFixed(n);function j({amountName:e,currencies:n,currencyName:o,helperText:t,isCurrenciesLoading:l,...i}){let{control:c,watch:a,setValue:p}=useFormContext(),x=a(o),h=a(e),b=u=>{p(o,u),p(e,B(Number(h),u?.decimals||2));};return jsx(Controller,{name:e,control:c,render:({field:{onChange:u,value:s},fieldState:f$1})=>jsx(f,{...i,amountValue:s??"",currencies:n,hasError:!!f$1.error,helperText:t??f$1.error?.message,onAmountChange:d=>{u(d);},onAmountBlur:d=>{u(B(Number(d),x?.decimals||2));},currencyValue:x,onCurrencyChange:b,isCurrenciesLoading:l})})}j.displayName="RFHAmountInput";var ee=j;var We=ee;function te({name:e,helperText:n,...o}){let{control:t}=useFormContext();return jsx(Controller,{name:e,control:t,render:({field:l,fieldState:i})=>jsx(c,{...o,...l,hasError:!!i.error,helperText:n??i.error?.message})})}te.displayName="RFHSelect";var ne=w.memo(te);var k=ne;function le({name:e,disabled:n,...o}){let{control:t}=useFormContext();return jsx(Controller,{name:e,control:t,render:({field:{name:l,onBlur:i,onChange:c,value:a,disabled:p}})=>jsx(a$3,{...o,onChange:c,onBlur:i,name:l,disabled:p||n,checked:a??false})})}le.displayName="RFHSWitch";var ie=w.memo(le);var Te=ie;var me=styled(a$1)(({theme:e})=>({fontSize:"10px",color:e.palette.grey[700],fontWeight:600,lineHeight:"10px"}));styled(a$1)(({theme:e})=>({fontSize:"11px",color:e.palette.text.primary,fontWeight:600,lineHeight:"14.3px",width:200}));var se=styled(P)(()=>({display:"flex",flexDirection:"column",maxHeight:180,overflow:"auto",scrollbarWidth:"thin",scrollbarColor:"#E5E5E5 #E5E5E5"}));styled(Le)(({theme:e})=>({width:"inherit",height:32,padding:"11px 12px",fontSize:"10px",borderRadius:"5px",backgroundColor:"#F9F9F9",border:"1px solid transparent","&.Mui-focused":{borderColor:e.palette.info.dark}}));var ce=styled(P)(()=>({display:"flex",flexDirection:"column",gap:"8px"}));styled(P)(()=>({display:"flex",gap:"8px",padding:"4px",flexWrap:"wrap",paddingInlineEnd:"20px"}));styled(P)(({theme:e,maxWidth:n})=>({display:"flex",padding:"4px 8px 4px 6px",alignItems:"center",gap:"4px",borderRadius:"13px",backgroundColor:`${e.palette.info.dark}1a`,fontSize:"10px",fontWeight:500,cursor:"pointer",...n&&{maxWidth:`${n}%`}}));var ue=styled(a$1)(({theme:e})=>({display:"flex",gap:"8px",alignItems:"center",justifyContent:"space-between",fontSize:"10px",fontWeight:500,color:e.palette.common.black,cursor:"pointer",padding:"8px 20px"}));styled(P)(({theme:e})=>({width:"100%",flexDirection:"column",border:`1px solid ${e.palette.grey[100]}`,borderRadius:"4px",backgroundColor:e.palette.grey[400]}));function $e({name:e,options:n,...o}){let[t,l]=useState(null),[i,c]=useState(0),a=!!t,p=s=>{l(a?null:s.currentTarget);},x=()=>{l(null);},{watch:h,setValue:b}=useFormContext(),u=h(e);return jsx(a$4,{open:a,anchorEl:t,onOpen:p,onClose:x,trigger:jsx(k,{name:e,options:[],...o,open:false}),hideArrow:true,listWrapperSx:{padding:0,margin:0},children:jsx(ce,{children:jsx(se,{"data-testid":"AccordionWrapper",children:n.map?.((s,f)=>{let d=i===f;return jsx(a$5,{Header:jsx(me,{variant:"caption",children:s.group}),defaultExpanded:true,sx:{flexShrink:0,border:0,...d&&{borderBottom:"1px solid #0000001A",borderTop:"1px solid #0000001A"}},summarySx:{backgroundColor:d?"#F8F8F8":"#ffffff",borderBottom:"1px solid #0000001A",minHeight:28},expanded:d,onChange:(m,g)=>{m.stopPropagation(),m.preventDefault(),c(g?f:null);},children:(s?.options||[]).map((m,g)=>{let r=o?.isOptionEqualToValue?.(m,u);return jsxs(ue,{onClick:()=>{b(e,m,{shouldDirty:true,shouldTouch:true,shouldValidate:true}),x();},children:[o.renderOption?.(m)||m.label,r&&jsx(a$6,{src:Ic,alt:"blue-check",sx:{width:14,height:10}})]},`${m.value}-${m.label}-${g}`)})},`${s.group}-group-${f}`)})})})})}var fe=$e;var Ue=fe;var xe=styled(a$2)(()=>({padding:0,".MuiSvgIcon-root":{width:12,height:12}})),he=styled(Le)(({theme:e})=>({width:"100%",height:36,padding:"8px 8px 8px 12px",borderRadius:4,backgroundColor:e.palette.common.white,border:"1px solid #F2F2F2",boxSizing:"border-box","&:hover":{borderColor:"#F2F2F2"},"&.Mui-focused":{borderColor:"#F2F2F2",backgroundColor:e.palette.common.white},"&:before, &:after":{display:"none"},"& input":{padding:0,fontSize:10},"& .MuiInputBase-input":{paddingRight:4}}));styled(Ke)(({theme:e})=>({opacity:1,paddingTop:0,paddingBottom:0,marginBottom:8,minHeight:"auto",pointerEvents:"none",backgroundColor:e.palette.common.white,"&:hover":{backgroundColor:e.palette.common.white},"&.Mui-focusVisible":{backgroundColor:e.palette.common.white},"&.Mui-disabled":{backgroundColor:e.palette.common.white,opacity:1}}));function M({name:e,helperText:n,getOptionValue:o,getOptionLabel:t,renderOption:l,isOptionEqualToValue:i,getOptionDisabled:c,showSearchInput:a=false,searchPlaceholder:p="Search",showCheckbox:x=true,options:h,...b$1}){let{control:u}=useFormContext(),[s,f]=useState(""),d=useMemo(()=>{if(!a||!s.trim())return h??[];let m=s.toLowerCase().trim();return (h??[]).filter(g=>{let r=(t?t(g):g?.label)??"";return String(r).toLowerCase().includes(m)})},[h,a,s,t]);return jsx(Controller,{name:e,control:u,defaultValue:[],render:({field:m,fieldState:g})=>jsxs(b,{...b$1,...m,options:d,getOptionLabel:t,hasError:!!g.error,helperText:n??g.error?.message,onChange:r=>m.onChange(r),MenuProps:{...b$1.MenuProps,autoFocus:false,disableEnforceFocus:true},children:[a&&jsx(ListSubheader,{disableSticky:true,sx:{backgroundColor:"#fff",pt:1,pb:1},children:jsx(he,{placeholder:p,value:s,onChange:r=>f(r.target.value),onKeyDown:r=>r.stopPropagation(),onKeyUp:r=>r.stopPropagation(),disableUnderline:true,fullWidth:true,inputProps:{"aria-label":p},endAdornment:jsx(Box,{component:"img",src:w$1,alt:"search",sx:{width:14,height:14,flexShrink:0}})})}),d?.map(r=>{let A=m.value?.some(F=>i?i(F,r):F?.id===r?.id),R=c?c(r):false,be=t?t(r):r.label,W=l?l(r):be;return jsx(MenuItem,{value:(o?o(r):r?.id)??"",disabled:R,sx:{fontSize:"12px",backgroundColor:F=>A?"#F8F8F8 !important":F.palette.common.white,"&.Mui-disabled":{opacity:1}},children:x?jsxs(Box,{sx:{display:"flex",alignItems:"center",width:"100%",gap:"8px"},children:[jsx(xe,{checked:A,sx:{...A&&R&&{"& svg rect":{fill:"#BDC1CC"}}}}),W]}):W},(o?o(r):r?.id)??"")})]})})}var Ze=M;var je=useForm;export{Fe as a,Ae as b,Ee as c,We as d,k as e,Te as f,Ue as g,Ze as h,je as i};