@flipdish/portal-library 5.0.3 → 5.1.0

package/dist/components/atoms/TextField/index.cjs.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),l=require("@mui/material/FormHelperText"),t=require("@mui/material/InputAdornment"),d=require("@mui/material/InputLabel"),s=require("@mui/material/styles"),a=require("@mui/material/TextField"),n=require("../../../icons/CancelCircle/index.cjs.js"),u=require("../../../icons/View/index.cjs.js"),o=require("../../../icons/ViewOff/index.cjs.js"),x=require("../IconButton/index.cjs.js");const c=s.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),m=s.styled(a,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"})));module.exports=({disabled:i=!1,errorText:s,fdKey:a,fullWidth:h=!1,helperText:p,hidePasswordAriaLabel:j,label:f,multiline:q=!1,required:b=!1,showPasswordAriaLabel:w,type:y="text",...W})=>{const[v,F]=r.useState(!1),I=p?`${a}-helper-text`:void 0,P=s?`${a}-error-message`:void 0,A=[I,P].filter(Boolean).join(" ")||void 0,B=!!s&&!i,T="password"===y,g=()=>F((e=>!e));return e.jsxs(c,{fullWidth:h,children:[f&&e.jsx(d,{disabled:i,htmlFor:a,required:b,children:f}),p&&e.jsx(l,{disabled:i,id:I,children:p}),B&&e.jsxs(l,{error:!0,id:P,children:[e.jsx(n,{}),s]}),e.jsx(m,{"data-fd":a,disabled:i,error:B,fullWidth:h,id:a,label:"",multiline:q,required:b,slotProps:{input:{endAdornment:(()=>{if(T){if(!w||!j)return;return e.jsx(t,{position:"end",children:e.jsx(x.IconButton,{"aria-label":v?j:w,disabled:i,onClick:g,size:"small",tone:"neutral",variant:"tertiary",children:v?e.jsx(o,{}):e.jsx(u,{})})})}})()},htmlInput:{"aria-describedby":A}},type:T?v?"text":"password":y,variant:"outlined",...W})]})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/Box"),t=require("@mui/material/FormHelperText"),l=require("@mui/material/InputAdornment"),d=require("@mui/material/InputLabel"),s=require("@mui/material/styles"),n=require("@mui/material/TextField"),a=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../../icons/View/index.cjs.js"),u=require("../../../icons/ViewOff/index.cjs.js"),x=require("../IconButton/index.cjs.js");const c=s.styled(i,{shouldForwardProp:e=>"fullWidth"!==e})((({theme:e,fullWidth:r=!1})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),width:r?"100%":"min(364px, 100%)"}))),m=s.styled(n,{shouldForwardProp:e=>"fullWidth"!==e})((({fullWidth:e=!1})=>({display:"flex",width:e?"100%":"auto"})));module.exports=({disabled:i=!1,errorText:s,fdKey:n,fullWidth:h=!1,helperText:p,hidePasswordAriaLabel:j,label:f,multiline:q=!1,required:b=!1,showPasswordAriaLabel:w,type:y="text",startAdornment:A="",endAdornment:W="",...v})=>{const[F,I]=r.useState(!1),P=p?`${n}-helper-text`:void 0,B=s?`${n}-error-message`:void 0,T=[P,B].filter(Boolean).join(" ")||void 0,g=!!s&&!i,C="password"===y,L=()=>I((e=>!e));return e.jsxs(c,{fullWidth:h,children:[f&&e.jsx(d,{disabled:i,htmlFor:n,required:b,children:f}),p&&e.jsx(t,{disabled:i,id:P,children:p}),g&&e.jsxs(t,{error:!0,id:B,children:[e.jsx(a,{}),s]}),e.jsx(m,{"data-fd":n,disabled:i,error:g,fullWidth:h,id:n,label:"",multiline:q,required:b,slotProps:{input:{endAdornment:(()=>{if(C){if(!w||!j)return;return e.jsx(l,{position:"end",children:e.jsx(x.IconButton,{"aria-label":F?j:w,disabled:i,onClick:L,size:"small",tone:"neutral",variant:"tertiary",children:F?e.jsx(u,{}):e.jsx(o,{})})})}if(W)return e.jsx(l,{position:"end",children:W})})(),startAdornment:(()=>{if(A)return e.jsx(l,{position:"start",children:A})})()},htmlInput:{"aria-describedby":T}},type:C?F?"text":"password":y,variant:"outlined",...v})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/TextField/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","endAdornment","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","htmlInput"],"mappings":"geAqCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,0BAGZ,EAChBQ,YAAW,EACXC,YACAC,QACAV,aAAY,EACZW,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeX,EAAa,GAAGD,qBAAsBa,EACrDC,EAAiBf,EAAY,GAAGC,uBAAwBa,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYpB,IAAcD,EAC1BsB,EAAsB,aAATb,EAEbc,EAA0B,IAAYX,GAAiBY,IAAUA,IAmCvE,OACEC,EAAAA,KAACvC,EAAe,CAACM,UAAWA,YACzBa,GACCqB,EAAAA,IAACC,GAAc3B,SAAUA,EAAU4B,QAAS1B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCuB,EAAAA,IAACG,EAAiB,CAAC7B,SAAUA,EAAU8B,GAAIhB,WACxCX,IAIJkB,GACCI,EAAAA,KAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAAAA,IAACO,EAAgB,CAAA,GAEhBhC,KAILyB,EAAAA,IAAC5B,aACUI,EACTF,SAAUA,EACV+B,MAAOV,EACP7B,UAAWA,EACXsC,GAAI5B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV2B,UAAW,CACTC,MAAO,CACLC,aA1DiB,MACzB,GAAId,EAAY,CACd,IAAKd,IAA0BJ,EAC7B,OAGF,OACEsB,EAAAA,IAACW,EAAiB,CAACC,SAAS,MAAKN,SAC/BN,MAACa,EAAAA,WAAU,CAAA,aACG5B,EAAeP,EAAwBI,EACnDR,SAAUA,EACVwC,QAASjB,EACTkB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUX,SAEjBrB,EAAee,EAAAA,IAACkB,EAAW,CAAA,GAAMlB,EAAAA,IAACmB,EAAQ,CAAA,MAInD,GAsCsBC,IAEhBC,UAAW,CACT,mBAAoB9B,IAGxBR,KAvEAa,EACKX,EAAe,OAAS,WAG1BF,EAoEHkC,QAAQ,cACJjC"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n  startAdornment?: string;\n  endAdornment?: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n  startAdornment?: string;\n  endAdornment?: string;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  startAdornment = '',\n  endAdornment = '',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <MuiInputAdornment position=\"end\">\n          {endAdornment}\n        </MuiInputAdornment>\n      )\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if(startAdornment) {\n      return (\n        <MuiInputAdornment position=\"start\" >\n          {startAdornment}\n        </MuiInputAdornment>\n      )\n    }\n    return undefined;\n  }\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"geAyCA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAAA,OAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,0BAGZ,EAChBQ,YAAW,EACXC,YACAC,QACAV,aAAY,EACZW,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,EAAAA,UAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAAA,KAACzC,EAAe,CAACM,UAAWA,YACzBa,GACCuB,EAAAA,IAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAAAA,IAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAAAA,KAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAAAA,IAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAAA,IAAC9B,aACUI,EACTF,SAAUA,EACViC,MAAOV,EACP/B,UAAWA,EACXwC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,MAACY,EAAAA,WAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEjBrB,EAAee,EAAAA,IAACiB,EAAW,CAAA,GAAMjB,EAAAA,IAACkB,EAAQ,CAAA,MAInD,CACA,GAAInC,EACF,OACEiB,EAAAA,IAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAAAA,IAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}

package/dist/components/atoms/TextField/index.d.ts

@@ -8,14 +8,18 @@ type PasswordTextFieldProps = BaseTextFieldProps & {
     type: 'password';
     showPasswordAriaLabel: string;
     hidePasswordAriaLabel: string;
+    startAdornment?: string;
+    endAdornment?: string;
 };
 type GenericTextFieldProps = BaseTextFieldProps & {
     type?: Exclude<TextFieldProps$1['type'], 'password'>;
     showPasswordAriaLabel?: never;
     hidePasswordAriaLabel?: never;
+    startAdornment?: string;
+    endAdornment?: string;
 };
 type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;
-declare const TextField: ({ disabled, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, type, ...props }: TextFieldProps) => JSX.Element;
+declare const TextField: ({ disabled, errorText, fdKey, fullWidth, helperText, hidePasswordAriaLabel, label, multiline, required, showPasswordAriaLabel, type, startAdornment, endAdornment, ...props }: TextFieldProps) => JSX.Element;
 
 export { TextField as default };
 export type { TextFieldProps };

package/dist/components/atoms/TextField/index.js

@@ -1,2 +1,2 @@
-import{jsxs as r,jsx as i}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import l from"@mui/material/FormHelperText";import o from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as a}from"@mui/material/styles";import m from"@mui/material/TextField";import n from"../../../icons/CancelCircle/index.js";import s from"../../../icons/View/index.js";import u from"../../../icons/ViewOff/index.js";import{IconButton as p}from"../IconButton/index.js";const f=a(t,{shouldForwardProp:r=>"fullWidth"!==r})((({theme:r,fullWidth:i=!1})=>({display:"flex",flexDirection:"column",gap:r.spacing(.5),width:i?"100%":"min(364px, 100%)"}))),h=a(m,{shouldForwardProp:r=>"fullWidth"!==r})((({fullWidth:r=!1})=>({display:"flex",width:r?"100%":"auto"}))),c=({disabled:t=!1,errorText:a,fdKey:m,fullWidth:c=!1,helperText:x,hidePasswordAriaLabel:b,label:w,multiline:y=!1,required:W=!1,showPasswordAriaLabel:j,type:v="text",...F})=>{const[P,A]=e(!1),I=x?`${m}-helper-text`:void 0,T=a?`${m}-error-message`:void 0,g=[I,T].filter(Boolean).join(" ")||void 0,q=!!a&&!t,B="password"===v,C=()=>A((r=>!r));return r(f,{fullWidth:c,children:[w&&i(d,{disabled:t,htmlFor:m,required:W,children:w}),x&&i(l,{disabled:t,id:I,children:x}),q&&r(l,{error:!0,id:T,children:[i(n,{}),a]}),i(h,{"data-fd":m,disabled:t,error:q,fullWidth:c,id:m,label:"",multiline:y,required:W,slotProps:{input:{endAdornment:(()=>{if(B){if(!j||!b)return;return i(o,{position:"end",children:i(p,{"aria-label":P?b:j,disabled:t,onClick:C,size:"small",tone:"neutral",variant:"tertiary",children:i(P?u:s,{})})})}})()},htmlInput:{"aria-describedby":g}},type:B?P?"text":"password":v,variant:"outlined",...F})]})};export{c as default};
+import{jsxs as r,jsx as i}from"react/jsx-runtime";import{useState as e}from"react";import t from"@mui/material/Box";import o from"@mui/material/FormHelperText";import l from"@mui/material/InputAdornment";import d from"@mui/material/InputLabel";import{styled as n}from"@mui/material/styles";import a from"@mui/material/TextField";import m from"../../../icons/CancelCircle/index.js";import s from"../../../icons/View/index.js";import u from"../../../icons/ViewOff/index.js";import{IconButton as p}from"../IconButton/index.js";const f=n(t,{shouldForwardProp:r=>"fullWidth"!==r})((({theme:r,fullWidth:i=!1})=>({display:"flex",flexDirection:"column",gap:r.spacing(.5),width:i?"100%":"min(364px, 100%)"}))),h=n(a,{shouldForwardProp:r=>"fullWidth"!==r})((({fullWidth:r=!1})=>({display:"flex",width:r?"100%":"auto"}))),c=({disabled:t=!1,errorText:n,fdKey:a,fullWidth:c=!1,helperText:x,hidePasswordAriaLabel:b,label:w,multiline:y=!1,required:A=!1,showPasswordAriaLabel:W,type:j="text",startAdornment:v="",endAdornment:F="",...P})=>{const[I,T]=e(!1),g=x?`${a}-helper-text`:void 0,q=n?`${a}-error-message`:void 0,B=[g,q].filter(Boolean).join(" ")||void 0,C=!!n&&!t,L="password"===j,V=()=>T((r=>!r));return r(f,{fullWidth:c,children:[w&&i(d,{disabled:t,htmlFor:a,required:A,children:w}),x&&i(o,{disabled:t,id:g,children:x}),C&&r(o,{error:!0,id:q,children:[i(m,{}),n]}),i(h,{"data-fd":a,disabled:t,error:C,fullWidth:c,id:a,label:"",multiline:y,required:A,slotProps:{input:{endAdornment:(()=>{if(L){if(!W||!b)return;return i(l,{position:"end",children:i(p,{"aria-label":I?b:W,disabled:t,onClick:V,size:"small",tone:"neutral",variant:"tertiary",children:i(I?u:s,{})})})}if(F)return i(l,{position:"end",children:F})})(),startAdornment:(()=>{if(v)return i(l,{position:"start",children:v})})()},htmlInput:{"aria-describedby":B}},type:L?I?"text":"password":j,variant:"outlined",...P})]})};export{c as default};
 //# sourceMappingURL=index.js.map

package/dist/components/atoms/TextField/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n\n    return undefined;\n  };\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","endAdornment","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","htmlInput"],"mappings":"4gBAqCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAY,EAChBC,YAAW,EACXC,YACAC,QACAX,aAAY,EACZY,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,UACJC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeX,EAAa,GAAGD,qBAAsBa,EACrDC,EAAiBf,EAAY,GAAGC,uBAAwBa,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYpB,IAAcD,EAC1BsB,EAAsB,aAATb,EAEbc,EAA0B,IAAYX,GAAiBY,IAAUA,IAmCvE,OACEC,EAACxC,EAAe,CAACM,UAAWA,YACzBc,GACCqB,EAACC,GAAc3B,SAAUA,EAAU4B,QAAS1B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCuB,EAACG,EAAiB,CAAC7B,SAAUA,EAAU8B,GAAIhB,WACxCX,IAIJkB,GACCI,EAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAACO,EAAgB,CAAA,GAEhBhC,KAILyB,EAAC7B,aACUK,EACTF,SAAUA,EACV+B,MAAOV,EACP9B,UAAWA,EACXuC,GAAI5B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV2B,UAAW,CACTC,MAAO,CACLC,aA1DiB,MACzB,GAAId,EAAY,CACd,IAAKd,IAA0BJ,EAC7B,OAGF,OACEsB,EAACW,EAAiB,CAACC,SAAS,MAAKN,SAC/BN,EAACa,EAAU,CAAA,aACG5B,EAAeP,EAAwBI,EACnDR,SAAUA,EACVwC,QAASjB,EACTkB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUX,SAEFN,EAAff,EAAgBiC,EAAkBC,EAAP,CAAA,MAIpC,GAsCsBC,IAEhBC,UAAW,CACT,mBAAoB9B,IAGxBR,KAvEAa,EACKX,EAAe,OAAS,WAG1BF,EAoEHkC,QAAQ,cACJjC"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/TextField/index.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiInputAdornment from '@mui/material/InputAdornment';\nimport MuiInputLabel from '@mui/material/InputLabel';\nimport { styled } from '@mui/material/styles';\nimport MuiTextField, { type TextFieldProps as MuiTextFieldProps } from '@mui/material/TextField';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\nimport ViewIcon from '@fd/icons/View';\nimport ViewOffIcon from '@fd/icons/ViewOff';\n\nimport IconButton from '../IconButton';\n\n// Common props for all TextField variants\ntype BaseTextFieldProps = Omit<MuiTextFieldProps, 'error' | 'id' | 'type' | 'variant'> & {\n  errorText?: string;\n  fdKey: string;\n};\n\n// Password TextField variant - requires aria labels\ntype PasswordTextFieldProps = BaseTextFieldProps & {\n  type: 'password';\n  showPasswordAriaLabel: string;\n  hidePasswordAriaLabel: string;\n  startAdornment?: string;\n  endAdornment?: string;\n};\n\n// Generic TextField variant - for all other input types\ntype GenericTextFieldProps = BaseTextFieldProps & {\n  type?: Exclude<MuiTextFieldProps['type'], 'password'>;\n  showPasswordAriaLabel?: never;\n  hidePasswordAriaLabel?: never;\n  startAdornment?: string;\n  endAdornment?: string;\n};\n\nexport type TextFieldProps = GenericTextFieldProps | PasswordTextFieldProps;\n\nconst StyledContainer = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ theme, fullWidth = false }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  width: fullWidth ? '100%' : 'min(364px, 100%)', // Constrain width to a maximum of 100% of the container width\n}));\n\nconst StyledTextField = styled(MuiTextField, {\n  shouldForwardProp: (prop) => prop !== 'fullWidth',\n})<{ fullWidth?: boolean }>(({ fullWidth = false }) => ({\n  display: 'flex',\n  width: fullWidth ? '100%' : 'auto',\n}));\n\nconst TextField = ({\n  disabled = false,\n  errorText,\n  fdKey,\n  fullWidth = false,\n  helperText,\n  hidePasswordAriaLabel,\n  label,\n  multiline = false,\n  required = false,\n  showPasswordAriaLabel,\n  type = 'text',\n  startAdornment = '',\n  endAdornment = '',\n  ...props\n}: TextFieldProps): JSX.Element => {\n  const [showPassword, setShowPassword] = useState<boolean>(false);\n\n  const helperTextId = helperText ? `${fdKey}-helper-text` : undefined;\n  const errorMessageId = errorText ? `${fdKey}-error-message` : undefined;\n\n  // Combine helper text and error message IDs for aria-describedby\n  const ariaDescribedBy = [helperTextId, errorMessageId].filter(Boolean).join(' ') || undefined;\n\n  const isError = !!errorText && !disabled;\n  const isPassword = type === 'password';\n\n  const handleClickShowPassword = (): void => setShowPassword((show) => !show);\n\n  const getFieldType = (): MuiTextFieldProps['type'] => {\n    if (isPassword) {\n      return showPassword ? 'text' : 'password';\n    }\n\n    return type;\n  };\n\n  const renderEndAdornment = (): React.ReactNode => {\n    if (isPassword) {\n      if (!showPasswordAriaLabel || !hidePasswordAriaLabel) {\n        return undefined;\n      }\n\n      return (\n        <MuiInputAdornment position=\"end\">\n          <IconButton\n            aria-label={showPassword ? hidePasswordAriaLabel : showPasswordAriaLabel}\n            disabled={disabled}\n            onClick={handleClickShowPassword}\n            size=\"small\"\n            tone=\"neutral\"\n            variant=\"tertiary\"\n          >\n            {showPassword ? <ViewOffIcon /> : <ViewIcon />}\n          </IconButton>\n        </MuiInputAdornment>\n      );\n    }\n    if (endAdornment) {\n      return (\n        <MuiInputAdornment position=\"end\">\n          {endAdornment}\n        </MuiInputAdornment>\n      )\n    }\n\n    return undefined;\n  };\n\n  const renderStartAdornment = (): React.ReactNode => {\n    if(startAdornment) {\n      return (\n        <MuiInputAdornment position=\"start\" >\n          {startAdornment}\n        </MuiInputAdornment>\n      )\n    }\n    return undefined;\n  }\n\n  return (\n    <StyledContainer fullWidth={fullWidth}>\n      {label && (\n        <MuiInputLabel disabled={disabled} htmlFor={fdKey} required={required}>\n          {label}\n        </MuiInputLabel>\n      )}\n\n      {helperText && (\n        <MuiFormHelperText disabled={disabled} id={helperTextId}>\n          {helperText}\n        </MuiFormHelperText>\n      )}\n\n      {isError && (\n        <MuiFormHelperText error id={errorMessageId}>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <StyledTextField\n        data-fd={fdKey}\n        disabled={disabled}\n        error={isError}\n        fullWidth={fullWidth}\n        id={fdKey}\n        label=\"\" // Remove label from TextField since we're rendering it separately\n        multiline={multiline}\n        required={required}\n        slotProps={{\n          input: {\n            endAdornment: renderEndAdornment(),\n            startAdornment: renderStartAdornment(),\n          },\n          htmlInput: {\n            'aria-describedby': ariaDescribedBy,\n          },\n        }}\n        type={getFieldType()}\n        variant=\"outlined\"\n        {...props}\n      />\n    </StyledContainer>\n  );\n};\n\nexport default TextField;\n"],"names":["StyledContainer","styled","Box","shouldForwardProp","prop","theme","fullWidth","display","flexDirection","gap","spacing","width","StyledTextField","MuiTextField","TextField","disabled","errorText","fdKey","helperText","hidePasswordAriaLabel","label","multiline","required","showPasswordAriaLabel","type","startAdornment","endAdornment","props","showPassword","setShowPassword","useState","helperTextId","undefined","errorMessageId","ariaDescribedBy","filter","Boolean","join","isError","isPassword","handleClickShowPassword","show","_jsxs","_jsx","MuiInputLabel","htmlFor","MuiFormHelperText","id","error","children","CancelCircleIcon","slotProps","input","MuiInputAdornment","position","IconButton","onClick","size","tone","variant","ViewOffIcon","ViewIcon","renderEndAdornment","renderStartAdornment","htmlInput"],"mappings":"4gBAyCA,MAAMA,EAAkBC,EAAOC,EAAK,CAClCC,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGI,QAAOC,aAAY,MAAO,CACvDC,QAAS,OACTC,cAAe,SACfC,IAAKJ,EAAMK,QAAQ,IACnBC,MAAOL,EAAY,OAAS,uBAGxBM,EAAkBX,EAAOY,EAAc,CAC3CV,kBAAoBC,GAAkB,cAATA,GADPH,EAEI,EAAGK,aAAY,MAAO,CAChDC,QAAS,OACTI,MAAOL,EAAY,OAAS,WAGxBQ,EAAY,EAChBC,YAAW,EACXC,YACAC,QACAX,aAAY,EACZY,aACAC,wBACAC,QACAC,aAAY,EACZC,YAAW,EACXC,wBACAC,OAAO,OACPC,iBAAiB,GACjBC,eAAe,MACZC,MAEH,MAAOC,EAAcC,GAAmBC,GAAkB,GAEpDC,EAAeb,EAAa,GAAGD,qBAAsBe,EACrDC,EAAiBjB,EAAY,GAAGC,uBAAwBe,EAGxDE,EAAkB,CAACH,EAAcE,GAAgBE,OAAOC,SAASC,KAAK,WAAQL,EAE9EM,IAAYtB,IAAcD,EAC1BwB,EAAsB,aAATf,EAEbgB,EAA0B,IAAYX,GAAiBY,IAAUA,IAqDvE,OACEC,EAAC1C,EAAe,CAACM,UAAWA,YACzBc,GACCuB,EAACC,GAAc7B,SAAUA,EAAU8B,QAAS5B,EAAOK,SAAUA,WAC1DF,IAIJF,GACCyB,EAACG,EAAiB,CAAC/B,SAAUA,EAAUgC,GAAIhB,WACxCb,IAIJoB,GACCI,EAACI,EAAiB,CAACE,SAAMD,GAAId,EAAcgB,SAAA,CACzCN,EAACO,EAAgB,CAAA,GAEhBlC,KAIL2B,EAAC/B,aACUK,EACTF,SAAUA,EACViC,MAAOV,EACPhC,UAAWA,EACXyC,GAAI9B,EACJG,MAAM,GACNC,UAAWA,EACXC,SAAUA,EACV6B,UAAW,CACTC,MAAO,CACL1B,aA5EiB,MACzB,GAAIa,EAAY,CACd,IAAKhB,IAA0BJ,EAC7B,OAGF,OACEwB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC/BN,EAACY,EAAU,CAAA,aACG3B,EAAeT,EAAwBI,EACnDR,SAAUA,EACVyC,QAAShB,EACTiB,KAAK,QACLC,KAAK,UACLC,QAAQ,WAAUV,SAEFN,EAAff,EAAgBgC,EAAkBC,EAAP,CAAA,MAIpC,CACA,GAAInC,EACF,OACEiB,EAACU,EAAiB,CAACC,SAAS,MAAKL,SAC9BvB,KAoDeoC,GACdrC,eA7CmB,MAC3B,GAAGA,EACD,OACEkB,EAACU,EAAiB,CAACC,SAAS,QAAOL,SAChCxB,KAyCiBsC,IAElBC,UAAW,CACT,mBAAoB9B,IAGxBV,KA1FAe,EACKX,EAAe,OAAS,WAG1BJ,EAuFHmC,QAAQ,cACJhC"}

package/dist/components/molecules/FlipdishStaffContainer/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime");require("react");var i=require("@mui/material/Box"),r=require("@mui/material/styles"),t=require("@mui/material/Typography"),s=require("../../../icons/CustomerSupport/index.cjs.js"),a=require("@mui/material/Grid2");const l=r.styled(i)((({theme:e})=>({backgroundColor:e.palette.grey[200],borderRadius:"4px",padding:e.spacing(2)}))),n=r.styled(a)((({theme:e})=>({alignItems:"center",display:"flex",marginBottom:e.spacing(1.5)}))),d=r.styled(t)((({theme:e})=>({fontWeight:500,marginLeft:e.spacing(1)})));module.exports=({title:i,children:r,isFlipdishStaff:t})=>t?e.jsxs(l,{"data-testid":"flipdish-staff-only-container",children:[e.jsxs(n,{children:[e.jsx(s,{}),e.jsx(d,{children:i})]}),r]}):null;
+//# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/FlipdishStaffContainer/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../../icons/CustomerSupport';\nimport Grid from '../../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n    backgroundColor: theme.palette.grey[200],\n    borderRadius: '4px',\n    padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n    fontWeight: 500,\n    marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n    title: string;\n    children: ReactNode;\n    isFlipdishStaff: boolean;\n}\n\nconst FlipdishStaffContainer = ({ title, children, isFlipdishStaff }: Props): React.ReactNode => {\n    return (\n        isFlipdishStaff ? <StyledContainer data-testid=\"flipdish-staff-only-container\">\n            <TitleContainer>\n                <SupportAgentOutlinedIcon />\n                <Title>{title}</Title>\n            </TitleContainer>\n\n            {children}\n        </StyledContainer> : null\n    );\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","title","children","isFlipdishStaff","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"sQASA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,OAGrBC,EAAiBT,EAAAA,OAAOU,EAAPV,EAAa,EAAGE,YAAO,CAC1CS,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,SAG1BM,EAAQd,EAAAA,OAAOe,EAAPf,EAAmB,EAAGE,YAAO,CACvCc,WAAY,IACZC,WAAYf,EAAMM,QAAQ,sBASC,EAAGU,QAAOC,WAAUC,qBAE3CA,EAAkBC,EAAAA,KAACtB,EAAe,CAAA,cAAa,gCAA+BoB,SAAA,CAC1EE,EAAAA,KAACZ,aACGa,EAAAA,IAACC,EAAwB,IACzBD,MAACR,EAAK,CAAAK,SAAED,OAGXC,KACgB"}

package/dist/components/molecules/FlipdishStaffContainer/index.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+
+interface Props {
+    title: string;
+    children: ReactNode;
+    isFlipdishStaff: boolean;
+}
+declare const FlipdishStaffContainer: ({ title, children, isFlipdishStaff }: Props) => React.ReactNode;
+
+export { FlipdishStaffContainer as default };

package/dist/components/molecules/FlipdishStaffContainer/index.js

@@ -0,0 +1,2 @@
+import{jsxs as i,jsx as t}from"react/jsx-runtime";import"react";import r from"@mui/material/Box";import{styled as e}from"@mui/material/styles";import m from"@mui/material/Typography";import a from"../../../icons/CustomerSupport/index.js";import o from"@mui/material/Grid2";const n=e(r)((({theme:i})=>({backgroundColor:i.palette.grey[200],borderRadius:"4px",padding:i.spacing(2)}))),l=e(o)((({theme:i})=>({alignItems:"center",display:"flex",marginBottom:i.spacing(1.5)}))),p=e(m)((({theme:i})=>({fontWeight:500,marginLeft:i.spacing(1)}))),s=({title:r,children:e,isFlipdishStaff:m})=>m?i(n,{"data-testid":"flipdish-staff-only-container",children:[i(l,{children:[t(a,{}),t(p,{children:r})]}),e]}):null;export{s as default};
+//# sourceMappingURL=index.js.map

package/dist/components/molecules/FlipdishStaffContainer/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../../icons/CustomerSupport';\nimport Grid from '../../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n    backgroundColor: theme.palette.grey[200],\n    borderRadius: '4px',\n    padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n    fontWeight: 500,\n    marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n    title: string;\n    children: ReactNode;\n    isFlipdishStaff: boolean;\n}\n\nconst FlipdishStaffContainer = ({ title, children, isFlipdishStaff }: Props): React.ReactNode => {\n    return (\n        isFlipdishStaff ? <StyledContainer data-testid=\"flipdish-staff-only-container\">\n            <TitleContainer>\n                <SupportAgentOutlinedIcon />\n                <Title>{title}</Title>\n            </TitleContainer>\n\n            {children}\n        </StyledContainer> : null\n    );\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","FlipdishStaffContainer","title","children","isFlipdishStaff","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"iRASA,MAAMA,EAAkBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,OAGrBC,EAAiBT,EAAOU,EAAPV,EAAa,EAAGE,YAAO,CAC1CS,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,SAG1BM,EAAQd,EAAOe,EAAPf,EAAmB,EAAGE,YAAO,CACvCc,WAAY,IACZC,WAAYf,EAAMM,QAAQ,OASxBU,EAAyB,EAAGC,QAAOC,WAAUC,qBAE3CA,EAAkBC,EAACvB,EAAe,CAAA,cAAa,gCAA+BqB,SAAA,CAC1EE,EAACb,aACGc,EAACC,EAAwB,IACzBD,EAACT,EAAK,CAAAM,SAAED,OAGXC,KACgB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "5.0.3",
+  "version": "5.1.0",
   "files": [
     "dist"
   ],

package/dist/components/FlipdishStaffContainer/index.cjs.js

@@ -1,2 +0,0 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var r=require("@mui/material/Box"),i=require("@mui/material/styles"),t=require("@mui/material/Typography"),s=require("../../icons/CustomerSupport/index.cjs.js"),a=require("@mui/material/Grid2");const l=i.styled(r)((({theme:e})=>({backgroundColor:e.palette.grey[200],borderRadius:"4px",padding:e.spacing(2)}))),n=i.styled(a)((({theme:e})=>({alignItems:"center",display:"flex",marginBottom:e.spacing(1.5)}))),d=i.styled(t)((({theme:e})=>({fontWeight:500,marginLeft:e.spacing(1)})));module.exports=({title:r,children:i})=>e.jsxs(l,{"data-testid":"flipdish-staff-only-container",children:[e.jsxs(n,{children:[e.jsx(s,{}),e.jsx(d,{children:r})]}),i]});
-//# sourceMappingURL=index.cjs.js.map

package/dist/components/FlipdishStaffContainer/index.cjs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../icons/CustomerSupport';\nimport Grid from '../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n    backgroundColor: theme.palette.grey[200],\n    borderRadius: '4px',\n    padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n    fontWeight: 500,\n    marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n    title: string;\n    children: ReactNode;\n}\n\nconst FlipdishStaffContainer = ({ title, children }: Props) => {\n    return (\n        <StyledContainer data-testid=\"flipdish-staff-only-container\">\n            <TitleContainer>\n                <SupportAgentOutlinedIcon />\n                <Title>{title}</Title>\n            </TitleContainer>\n\n            {children}\n        </StyledContainer>\n    );\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","title","children","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"mQASA,MAAMA,EAAkBC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,OAGrBC,EAAiBT,EAAAA,OAAOU,EAAPV,EAAa,EAAGE,YAAO,CAC1CS,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,SAG1BM,EAAQd,EAAAA,OAAOe,EAAPf,EAAmB,EAAGE,YAAO,CACvCc,WAAY,IACZC,WAAYf,EAAMM,QAAQ,sBAQC,EAAGU,QAAOC,cAEjCC,OAACrB,EAAe,CAAA,cAAa,gCAA+BoB,SAAA,CACxDC,OAACX,EAAc,CAAAU,SAAA,CACXE,EAAAA,IAACC,MACDD,MAACP,EAAK,CAAAK,SAAED,OAGXC"}

package/dist/components/FlipdishStaffContainer/index.d.ts

@@ -1,10 +0,0 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
-
-interface Props {
-    title: string;
-    children: ReactNode;
-}
-declare const FlipdishStaffContainer: ({ title, children }: Props) => react_jsx_runtime.JSX.Element;
-
-export { FlipdishStaffContainer as default };

package/dist/components/FlipdishStaffContainer/index.js

@@ -1,2 +0,0 @@
-import{jsxs as t,jsx as i}from"react/jsx-runtime";import"react";import r from"@mui/material/Box";import{styled as e}from"@mui/material/styles";import m from"@mui/material/Typography";import o from"../../icons/CustomerSupport/index.js";import a from"@mui/material/Grid2";const n=e(r)((({theme:t})=>({backgroundColor:t.palette.grey[200],borderRadius:"4px",padding:t.spacing(2)}))),p=e(a)((({theme:t})=>({alignItems:"center",display:"flex",marginBottom:t.spacing(1.5)}))),l=e(m)((({theme:t})=>({fontWeight:500,marginLeft:t.spacing(1)}))),s=({title:r,children:e})=>t(n,{"data-testid":"flipdish-staff-only-container",children:[t(p,{children:[i(o,{}),i(l,{children:r})]}),e]});export{s as default};
-//# sourceMappingURL=index.js.map

package/dist/components/FlipdishStaffContainer/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/FlipdishStaffContainer/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport { styled } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\n\nimport SupportAgentOutlinedIcon from '../../icons/CustomerSupport';\nimport Grid from '../atoms/Grid';\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n    backgroundColor: theme.palette.grey[200],\n    borderRadius: '4px',\n    padding: theme.spacing(2),\n}));\n\nconst TitleContainer = styled(Grid)(({ theme }) => ({\n    alignItems: 'center',\n    display: 'flex',\n    marginBottom: theme.spacing(1.5),\n}));\n\nconst Title = styled(Typography)(({ theme }) => ({\n    fontWeight: 500,\n    marginLeft: theme.spacing(1),\n}));\n\ninterface Props {\n    title: string;\n    children: ReactNode;\n}\n\nconst FlipdishStaffContainer = ({ title, children }: Props) => {\n    return (\n        <StyledContainer data-testid=\"flipdish-staff-only-container\">\n            <TitleContainer>\n                <SupportAgentOutlinedIcon />\n                <Title>{title}</Title>\n            </TitleContainer>\n\n            {children}\n        </StyledContainer>\n    );\n};\n\nexport default FlipdishStaffContainer;\n"],"names":["StyledContainer","styled","Box","theme","backgroundColor","palette","grey","borderRadius","padding","spacing","TitleContainer","Grid","alignItems","display","marginBottom","Title","Typography","fontWeight","marginLeft","FlipdishStaffContainer","title","children","_jsxs","_jsx","SupportAgentOutlinedIcon"],"mappings":"8QASA,MAAMA,EAAkBC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAC1CC,gBAAiBD,EAAME,QAAQC,KAAK,KACpCC,aAAc,MACdC,QAASL,EAAMM,QAAQ,OAGrBC,EAAiBT,EAAOU,EAAPV,EAAa,EAAGE,YAAO,CAC1CS,WAAY,SACZC,QAAS,OACTC,aAAcX,EAAMM,QAAQ,SAG1BM,EAAQd,EAAOe,EAAPf,EAAmB,EAAGE,YAAO,CACvCc,WAAY,IACZC,WAAYf,EAAMM,QAAQ,OAQxBU,EAAyB,EAAGC,QAAOC,cAEjCC,EAACtB,EAAe,CAAA,cAAa,gCAA+BqB,SAAA,CACxDC,EAACZ,EAAc,CAAAW,SAAA,CACXE,EAACC,MACDD,EAACR,EAAK,CAAAM,SAAED,OAGXC"}