@flipdish/portal-library 7.3.2 → 7.3.4

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

@@ -1,2 +1,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Button"),a=require("@mui/material/Divider"),r=require("@mui/material/IconButton"),s=require("@mui/material/styles"),o=require("@mui/material/Typography"),l=require("@mui/material/useMediaQuery"),d=require("../../icons/Add/index.cjs.js"),c=require("../../icons/ArrowLeft02/index.cjs.js"),p=require("../../utilities/renderUtilities.cjs.js"),g=require("../../utilities/validation.cjs.js"),m=require("@mui/material/Grid2"),h=require("../FDErrorBoundary/index.cjs.js"),u=require("../Spacer/index.cjs.js"),x=require("./DocumentTitle.cjs.js"),j=require("./FullWidthContainer.cjs.js");const b=1112,f=s.styled("div")((({theme:e,fluid:t})=>({maxWidth:t?"none":b,[e.breakpoints.down("laptop")]:{maxWidth:"none"},padding:e.spacing(2,4),position:"relative",minHeight:"100vh"}))),y=s.styled(m)((({theme:e})=>({[e.breakpoints.down("laptop")]:{width:"100%",paddingTop:e.spacing(2)}}))),k=s.styled(m)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),v=s.styled(m)((({theme:e})=>({paddingTop:e.spacing(2),[e.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(-3),marginRight:e.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2),marginRight:e.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),A=s.styled(m)((()=>({flexGrow:1}))),T=s.styled("div")((({theme:e})=>({maxWidth:b,paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),L=s.styled(d)((({theme:e})=>({marginRight:e.spacing(1)}))),B=s.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e})((({theme:e,hasTitleComponent:t})=>({margin:t?e.spacing(-.75,2,-1.5,-1.5):e.spacing(-1.5,2,-1.5,-1.5),[e.breakpoints.only("tablet")]:{marginLeft:e.spacing(-2)},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2)}}))),C=s.styled("div")((({theme:e})=>({maxWidth:b,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("tablet")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),q=s.styled(m)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),w=s.styled(o)((()=>({lineHeight:"26px"}))),W=s.styled(o)((()=>({fontWeight:"bold"}))),I=s.styled(a)((({theme:e})=>({marginBottom:e.spacing(4)}))),S=({title:t})=>e.jsx(W,{component:"h2",variant:"h5",children:t}),_=s.styled("div")((({useAlternateBackground:e,theme:t})=>({backgroundColor:e?t.palette.semantic.background["background-alternate"]:t.palette.semantic.background["background-base"],width:"100%",height:"100%"})));exports.HORIZONTAL_SPACE_CLASSNAME="horizontal-content-space",exports.LEFT_HORIZONTAL_SPACE_CLASSNAME="left-horizontal-content-space",exports.PageTitle=S,exports.RIGHT_HORIZONTAL_SPACE_CLASSNAME="right-horizontal-content-space",exports.VERTICAL_SPACE_CLASSNAME="vertical-content-space",exports.default=a=>{const{actionBtnTitle:r,caption:o,children:d,contextButtons:b,documentTitle:W,fluid:E=!1,fullWidth:R,header:P,hideHeader:z,actionButtonLink:F,openLinkInNewTab:H=!1,pageHeader:N,showActionButton:M,showAddIcon:O,title:D,titleComponent:G,toPrevious:V,toParent:Z,strictToParent:$,navigate:U,hideDivider:Q=!1,customActionButtons:J,useAlternateBackground:K=!1,titleComponentAfter:X,errorBoundarySomethingWentWrongText:Y}=a,ee=s.useTheme(),te=l(ee.breakpoints.down("tablet")),ie=p.getMicroFrontendAttribute("data-portal-base-url")||"/",ne=!!F&&F.startsWith("https://"),ae=ne?F:void 0!==F?g.joinUrlPaths(ie,F):"";return e.jsx(_,{useAlternateBackground:K,children:e.jsxs(f,{fluid:E,children:[W&&e.jsx(x,{children:W}),N||null,e.jsxs(C,{children:[N&&e.jsx(u,{size:16,variant:"vertical"}),!z&&e.jsxs(e.Fragment,{children:[e.jsxs(k,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(m,{container:!0,alignContent:"space-between",direction:"row",children:e.jsx(q,{children:b?.map((i=>e.jsx("div",{children:i},`context-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),e.jsxs(v,{container:!0,children:[(Z||V)&&e.jsx(i,{children:e.jsx(B,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!G,onClick:()=>{V?U(-1):Z&&$||Z&&history.length<3?U(Z):U(-1)},children:e.jsx(c,{})})}),e.jsxs(A,{children:[G?e.jsx(G,{}):e.jsxs(i,{alignItems:"center",display:"flex",gap:2,children:[e.jsx(S,{title:D}),X]}),o&&e.jsx(w,{component:"h3",variant:"caption",children:o})]}),M&&e.jsxs(e.Fragment,{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),e.jsx(y,{children:e.jsxs(n,{"data-testid":`Action-button-${r}`,fullWidth:!0,href:H||ne?ae:"",onClick:H||ne?()=>{}:()=>{U(F)},rel:H?"noopener noreferrer":void 0,target:H?"_blank":void 0,variant:"contained",children:[O&&e.jsx(L,{size:"sm"}),r]})})]}),J?.map((i=>e.jsxs("div",{children:[te&&e.jsx(u,{size:56,variant:"vertical"}),!te&&e.jsx(u,{size:16,variant:"vertical"}),e.jsx(y,{children:i})]},`custom-action-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))]})]}),!Q&&e.jsx(I,{})]}),e.jsxs(j,{fullWidth:R,children:[P?e.jsx(T,{children:P}):null,e.jsx(h,{identifier:W,somethingWentWrongText:Y,children:e.jsx(e.Fragment,{children:d})})]})]})]})})},exports.maxWidth=b;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Button"),a=require("@mui/material/Divider"),r=require("@mui/material/IconButton"),s=require("@mui/material/styles"),o=require("@mui/material/Typography"),l=require("@mui/material/useMediaQuery"),d=require("../../icons/Add/index.cjs.js"),c=require("../../icons/ArrowLeft02/index.cjs.js"),p=require("../../utilities/renderUtilities.cjs.js"),g=require("../../utilities/validation.cjs.js"),m=require("@mui/material/Grid2"),h=require("../FDErrorBoundary/index.cjs.js"),u=require("../Spacer/index.cjs.js"),x=require("./DocumentTitle.cjs.js"),j=require("./FullWidthContainer.cjs.js");const f=1112,b=s.styled("div")((({theme:e,fluid:t})=>({maxWidth:t?"none":f,[e.breakpoints.down("laptop")]:{maxWidth:"none"},padding:e.spacing(2,4),position:"relative",minHeight:"100vh"}))),y=s.styled(m)((({theme:e})=>({[e.breakpoints.down("laptop")]:{width:"100%",paddingTop:e.spacing(2)}}))),k=s.styled(m)((({theme:e})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:e.spacing(3),paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(3)}}))),v=s.styled(m,{shouldForwardProp:e=>"stackAboveTitle"!==e})((({theme:e,stackAboveTitle:t})=>({paddingTop:e.spacing(2),...t?{flexDirection:"column",alignItems:"flex-start"}:{},[e.breakpoints.up("laptop")]:{width:"100%",alignItems:t?"flex-start":"center",...t?{flexDirection:"column"}:{}},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(-3),marginRight:e.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(-2),marginRight:e.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),A=s.styled(m)((()=>({flexGrow:1}))),T=s.styled("div")((({theme:e})=>({maxWidth:f,paddingBottom:e.spacing(3),[e.breakpoints.down("laptop")]:{paddingBottom:e.spacing(2),paddingLeft:e.spacing(2),paddingRight:e.spacing(2)}}))),C=s.styled(d)((({theme:e})=>({marginRight:e.spacing(1)}))),L=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",justifyContent:"flex-start",marginBottom:e.spacing(1),marginLeft:e.spacing(-2)}))),B=s.styled(r,{shouldForwardProp:e=>"hasTitleComponent"!==e&&"alignWithContent"!==e})((({theme:e,hasTitleComponent:t,alignWithContent:i})=>{const n=t?e.spacing(-.75):e.spacing(-1.5),a=e.spacing(-1.5);return{marginTop:n,marginRight:e.spacing(.5),marginBottom:a,marginLeft:i?0:e.spacing(-1.5),padding:0,[e.breakpoints.only("tablet")]:{marginLeft:i?0:e.spacing(-2)},[e.breakpoints.only("base")]:{marginLeft:i?0:e.spacing(-2)}}})),W=s.styled("div")((({theme:e})=>({maxWidth:f,marginLeft:e.spacing(6),marginRight:e.spacing(4),paddingBottom:e.spacing(2),[e.breakpoints.only("tablet")]:{marginLeft:12,marginRight:e.spacing(3)},[e.breakpoints.only("mobile")]:{marginLeft:e.spacing(3),marginRight:e.spacing(3),maxWidth:"none"},[e.breakpoints.only("base")]:{marginLeft:e.spacing(2),marginRight:e.spacing(2),maxWidth:"none"}}))),w=s.styled(m)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),q=s.styled(o)((({theme:e})=>({lineHeight:"26px",color:e.palette.semantic.text["text-weak"]}))),I=s.styled(o)((()=>({fontWeight:"bold"}))),R=s.styled(a)((({theme:e})=>({marginBottom:e.spacing(4)}))),S=({title:t})=>e.jsx(I,{component:"h2",variant:"h5",children:t}),_=s.styled("div")((({useAlternateBackground:e,theme:t})=>({backgroundColor:e?t.palette.semantic.background["background-alternate"]:t.palette.semantic.background["background-base"],width:"100%",height:"100%"})));exports.HORIZONTAL_SPACE_CLASSNAME="horizontal-content-space",exports.LEFT_HORIZONTAL_SPACE_CLASSNAME="left-horizontal-content-space",exports.PageTitle=S,exports.RIGHT_HORIZONTAL_SPACE_CLASSNAME="right-horizontal-content-space",exports.VERTICAL_SPACE_CLASSNAME="vertical-content-space",exports.default=a=>{const{actionBtnTitle:r,caption:o,children:d,contextButtons:f,documentTitle:I,fluid:E=!1,fullWidth:P,header:F,hideHeader:z,actionButtonLink:D,openLinkInNewTab:H=!1,pageHeader:N,showActionButton:M,showAddIcon:O,title:G,titleComponent:V,toPrevious:Z,toParent:$,toParentCaption:U,strictToParent:Q,navigate:J,hideDivider:K=!1,customActionButtons:X,useAlternateBackground:Y=!1,titleComponentAfter:ee,errorBoundarySomethingWentWrongText:te}=a,ie=s.useTheme(),ne=l(ie.breakpoints.down("tablet")),ae=p.getMicroFrontendAttribute("data-portal-base-url")||"/",re=!!D&&D.startsWith("https://"),se=re?D:void 0!==D?g.joinUrlPaths(ae,D):"";return e.jsx(_,{useAlternateBackground:Y,children:e.jsxs(b,{fluid:E,children:[I&&e.jsx(x,{children:I}),N||null,e.jsxs(W,{children:[N&&e.jsx(u,{size:16,variant:"vertical"}),!z&&e.jsxs(e.Fragment,{children:[e.jsxs(k,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(m,{container:!0,alignContent:"space-between",direction:"row",children:e.jsx(w,{children:f?.map((i=>e.jsx("div",{children:i},`context-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),e.jsxs(v,{container:!0,stackAboveTitle:!!U,children:[($||Z)&&e.jsxs(L,{children:[e.jsx(B,{alignWithContent:!!U,"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!V,onClick:()=>{Z?J(-1):$&&Q||$&&history.length<3?J($):J(-1)},children:e.jsx(c,{})}),U&&e.jsx(q,{component:"h3",variant:"caption",children:U})]}),e.jsxs(A,{children:[V?e.jsx(V,{}):e.jsxs(i,{alignItems:"center",display:"flex",gap:2,children:[e.jsx(S,{title:G}),ee]}),o&&e.jsx(q,{component:"h3",variant:"caption",children:o})]}),M&&e.jsxs(e.Fragment,{children:[ne&&e.jsx(u,{size:56,variant:"vertical"}),e.jsx(y,{children:e.jsxs(n,{"data-testid":`Action-button-${r}`,fullWidth:!0,href:H||re?se:"",onClick:H||re?()=>{}:()=>{J(D)},rel:H?"noopener noreferrer":void 0,target:H?"_blank":void 0,variant:"contained",children:[O&&e.jsx(C,{size:"sm"}),r]})})]}),X?.map((i=>e.jsxs("div",{children:[ne&&e.jsx(u,{size:56,variant:"vertical"}),!ne&&e.jsx(u,{size:16,variant:"vertical"}),e.jsx(y,{children:i})]},`custom-action-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))]})]}),!K&&e.jsx(R,{})]}),e.jsxs(j,{fullWidth:P,children:[F?e.jsx(T,{children:F}):null,e.jsx(h,{identifier:I,somethingWentWrongText:te,children:e.jsx(e.Fragment,{children:d})})]})]})]})})},exports.maxWidth=f;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n  maxWidth: fluid ? 'none' : maxWidth,\n  [theme.breakpoints.down('laptop')]: {\n    maxWidth: 'none',\n  },\n  padding: theme.spacing(2, 4),\n  position: 'relative',\n  minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n  [theme.breakpoints.down('laptop')]: {\n    width: '100%',\n    paddingTop: theme.spacing(2),\n  },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n  flexWrap: 'nowrap',\n  alignItems: 'flex-start',\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n  paddingTop: theme.spacing(2),\n  [theme.breakpoints.up('laptop')]: {\n    width: '100%',\n    alignItems: 'center',\n  },\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(-3),\n    marginRight: theme.spacing(-3),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n  maxWidth,\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingBottom: theme.spacing(2),\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n  marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n  shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n  margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: theme.spacing(-2),\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n  },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n  maxWidth,\n  marginLeft: theme.spacing(6),\n  marginRight: theme.spacing(4),\n  paddingBottom: theme.spacing(2),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: 12,\n    marginRight: theme.spacing(3),\n  },\n\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(3),\n    maxWidth: 'none',\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    maxWidth: 'none',\n  },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n  lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n  fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n  <StyledPageTitle component=\"h2\" variant=\"h5\">\n    {title}\n  </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n  ({ useAlternateBackground, theme }) => ({\n    backgroundColor: useAlternateBackground\n      ? theme.palette.semantic.background['background-alternate']\n      : theme.palette.semantic.background['background-base'],\n    width: '100%',\n    height: '100%',\n  }),\n);\n\nexport interface Props {\n  actionBtnTitle?: string;\n  caption?: ReactNode;\n  children: ReactNode;\n  contextButtons?: ReactNode[];\n  documentTitle: string;\n  fluid?: boolean;\n  fullWidth?: boolean;\n  header?: ReactNode;\n  hideHeader?: boolean;\n  actionButtonLink?: string;\n  pageHeader?: ReactNode;\n  showActionButton?: boolean;\n  showAddIcon?: boolean;\n  title: ReactNode;\n  titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n  titleComponentAfter?: ReactNode;\n  toPrevious?: boolean;\n  toParent?: string;\n  strictToParent?: boolean;\n  openLinkInNewTab?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  navigate: (to: any) => void;\n  hideDivider?: boolean;\n  customActionButtons?: ReactNode[];\n  useAlternateBackground?: boolean;\n  errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n  const {\n    actionBtnTitle,\n    caption,\n    children,\n    contextButtons,\n    documentTitle,\n    fluid = false,\n    fullWidth,\n    header,\n    hideHeader,\n    actionButtonLink,\n    openLinkInNewTab = false,\n    pageHeader,\n    showActionButton,\n    showAddIcon,\n    title,\n    titleComponent: TitleComponent,\n    toPrevious,\n    toParent,\n    strictToParent,\n    navigate,\n    hideDivider = false,\n    customActionButtons,\n    useAlternateBackground = false,\n    titleComponentAfter,\n    errorBoundarySomethingWentWrongText,\n  } = props;\n  const theme = useTheme();\n\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n  const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n  const getActionButtonLink = (): string => {\n    if (actionButtonWithHttps) {\n      return actionButtonLink as string;\n    }\n    if (actionButtonLink !== undefined) {\n      return joinUrlPaths(baseUrl, actionButtonLink);\n    }\n    return '';\n  };\n  const actionButtonLinkFinal = getActionButtonLink();\n\n  return (\n    <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n      <StyledWrapper fluid={fluid}>\n        {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n        {pageHeader || null}\n        <StyledInnerWrapper>\n          {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n          {!hideHeader && (\n            <>\n              <StyledHeader container alignItems=\"center\" direction=\"column\">\n                <Grid container alignContent=\"space-between\" direction=\"row\">\n                  <StyledHeaderContainer>\n                    {contextButtons?.map((button) => (\n                      <div\n                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                        key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                      >\n                        {button}\n                      </div>\n                    ))}\n                  </StyledHeaderContainer>\n                </Grid>\n                <StyledTitleContainer container>\n                  {(toParent || toPrevious) && (\n                    <Box>\n                      <StyledBackButton\n                        aria-label=\"Back\"\n                        component={'button'}\n                        data-testid=\"back_button\"\n                        hasTitleComponent={!!TitleComponent}\n                        onClick={() => {\n                          if (toPrevious) {\n                            navigate(-1);\n                          } else if (toParent && strictToParent) {\n                            navigate(toParent);\n                          } else if (toParent && history.length < historyMinLength) {\n                            navigate(toParent);\n                          } else {\n                            navigate(-1);\n                          }\n                        }}\n                      >\n                        <ArrowLeft02 />\n                      </StyledBackButton>\n                    </Box>\n                  )}\n\n                  <StyledTitleSection>\n                    {TitleComponent ? (\n                      <TitleComponent />\n                    ) : (\n                      <Box alignItems=\"center\" display=\"flex\" gap={2}>\n                        <PageTitle title={title} />\n                        {titleComponentAfter}\n                      </Box>\n                    )}\n                    {caption && (\n                      <StyledCaption component=\"h3\" variant=\"caption\">\n                        {caption}\n                      </StyledCaption>\n                    )}\n                  </StyledTitleSection>\n\n                  {showActionButton && (\n                    <>\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>\n                        <Button\n                          data-testid={`Action-button-${actionBtnTitle}`}\n                          fullWidth={true}\n                          href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                          onClick={\n                            !openLinkInNewTab && !actionButtonWithHttps\n                              ? (): void => {\n                                  navigate(actionButtonLink);\n                                }\n                              : (): void => {}\n                          }\n                          rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                          target={openLinkInNewTab ? '_blank' : undefined}\n                          variant=\"contained\"\n                        >\n                          {showAddIcon && <StyledAdd size=\"sm\" />}\n                          {actionBtnTitle}\n                        </Button>\n                      </StyledActionButtonGrid>\n                    </>\n                  )}\n                  {customActionButtons?.map((button) => (\n                    <div\n                      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                      key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                    >\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n                    </div>\n                  ))}\n                </StyledTitleContainer>\n              </StyledHeader>\n              {!hideDivider && <StyledPageDivider />}\n            </>\n          )}\n          <FullWidthContainer fullWidth={fullWidth}>\n            {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n            <FDErrorBoundary\n              identifier={documentTitle}\n              somethingWentWrongText={errorBoundarySomethingWentWrongText}\n            >\n              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n              <>{children}</>\n            </FDErrorBoundary>\n          </FullWidthContainer>\n        </StyledInnerWrapper>\n      </StyledWrapper>\n    </StyledPageContainer>\n  );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","only","marginLeft","marginRight","flexDirection","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n  maxWidth: fluid ? 'none' : maxWidth,\n  [theme.breakpoints.down('laptop')]: {\n    maxWidth: 'none',\n  },\n  padding: theme.spacing(2, 4),\n  position: 'relative',\n  minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n  [theme.breakpoints.down('laptop')]: {\n    width: '100%',\n    paddingTop: theme.spacing(2),\n  },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n  flexWrap: 'nowrap',\n  alignItems: 'flex-start',\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\nconst StyledTitleContainer = styled(Grid, {\n  shouldForwardProp: (prop) => prop !== 'stackAboveTitle',\n})<{ stackAboveTitle?: boolean }>(({ theme, stackAboveTitle }) => ({\n  paddingTop: theme.spacing(2),\n  ...(stackAboveTitle ? { flexDirection: 'column', alignItems: 'flex-start' } : {}),\n  [theme.breakpoints.up('laptop')]: {\n    width: '100%',\n    alignItems: stackAboveTitle ? 'flex-start' : 'center',\n    ...(stackAboveTitle ? { flexDirection: 'column' } : {}),\n  },\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(-3),\n    marginRight: theme.spacing(-3),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n  maxWidth,\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingBottom: theme.spacing(2),\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n  marginRight: theme.spacing(1),\n}));\n\nconst StyledBackRow = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  marginBottom: theme.spacing(1),\n  marginLeft: theme.spacing(-2),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n  shouldForwardProp: (prop) => prop !== 'hasTitleComponent' && prop !== 'alignWithContent',\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any; alignWithContent?: boolean }>(\n  ({ theme, hasTitleComponent, alignWithContent }) => {\n    const marginTop = hasTitleComponent ? theme.spacing(-0.75) : theme.spacing(-1.5);\n    const marginBottom = theme.spacing(-1.5);\n    const marginRight = theme.spacing(0.5);\n    const marginLeft = alignWithContent ? 0 : theme.spacing(-1.5);\n\n    return {\n      marginTop,\n      marginRight,\n      marginBottom,\n      marginLeft,\n      padding: 0,\n\n      [theme.breakpoints.only('tablet')]: {\n        marginLeft: alignWithContent ? 0 : theme.spacing(-2),\n      },\n\n      [theme.breakpoints.only('base')]: {\n        marginLeft: alignWithContent ? 0 : theme.spacing(-2),\n      },\n    };\n  },\n);\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n  maxWidth,\n  marginLeft: theme.spacing(6),\n  marginRight: theme.spacing(4),\n  paddingBottom: theme.spacing(2),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: 12,\n    marginRight: theme.spacing(3),\n  },\n\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(3),\n    maxWidth: 'none',\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    maxWidth: 'none',\n  },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(({ theme }) => ({\n  lineHeight: '26px',\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n  fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n  <StyledPageTitle component=\"h2\" variant=\"h5\">\n    {title}\n  </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n  ({ useAlternateBackground, theme }) => ({\n    backgroundColor: useAlternateBackground\n      ? theme.palette.semantic.background['background-alternate']\n      : theme.palette.semantic.background['background-base'],\n    width: '100%',\n    height: '100%',\n  }),\n);\n\nexport interface Props {\n  actionBtnTitle?: string;\n  caption?: ReactNode;\n  children: ReactNode;\n  contextButtons?: ReactNode[];\n  documentTitle: string;\n  fluid?: boolean;\n  fullWidth?: boolean;\n  header?: ReactNode;\n  hideHeader?: boolean;\n  actionButtonLink?: string;\n  pageHeader?: ReactNode;\n  showActionButton?: boolean;\n  showAddIcon?: boolean;\n  title: ReactNode;\n  titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n  titleComponentAfter?: ReactNode;\n  toPrevious?: boolean;\n  toParent?: string;\n  toParentCaption?: string;\n  strictToParent?: boolean;\n  openLinkInNewTab?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  navigate: (to: any) => void;\n  hideDivider?: boolean;\n  customActionButtons?: ReactNode[];\n  useAlternateBackground?: boolean;\n  errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n  const {\n    actionBtnTitle,\n    caption,\n    children,\n    contextButtons,\n    documentTitle,\n    fluid = false,\n    fullWidth,\n    header,\n    hideHeader,\n    actionButtonLink,\n    openLinkInNewTab = false,\n    pageHeader,\n    showActionButton,\n    showAddIcon,\n    title,\n    titleComponent: TitleComponent,\n    toPrevious,\n    toParent,\n    toParentCaption,\n    strictToParent,\n    navigate,\n    hideDivider = false,\n    customActionButtons,\n    useAlternateBackground = false,\n    titleComponentAfter,\n    errorBoundarySomethingWentWrongText,\n  } = props;\n  const theme = useTheme();\n\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n  const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n  const getActionButtonLink = (): string => {\n    if (actionButtonWithHttps) {\n      return actionButtonLink as string;\n    }\n    if (actionButtonLink !== undefined) {\n      return joinUrlPaths(baseUrl, actionButtonLink);\n    }\n    return '';\n  };\n  const actionButtonLinkFinal = getActionButtonLink();\n\n  return (\n    <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n      <StyledWrapper fluid={fluid}>\n        {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n        {pageHeader || null}\n        <StyledInnerWrapper>\n          {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n          {!hideHeader && (\n            <>\n              <StyledHeader container alignItems=\"center\" direction=\"column\">\n                <Grid container alignContent=\"space-between\" direction=\"row\">\n                  <StyledHeaderContainer>\n                    {contextButtons?.map((button) => (\n                      <div\n                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                        key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                      >\n                        {button}\n                      </div>\n                    ))}\n                  </StyledHeaderContainer>\n                </Grid>\n                <StyledTitleContainer container stackAboveTitle={!!toParentCaption}>\n                  {(toParent || toPrevious) && (\n                  <StyledBackRow>\n                      <StyledBackButton\n                        alignWithContent={!!toParentCaption}\n                        aria-label=\"Back\"\n                        component={'button'}\n                        data-testid=\"back_button\"\n                        hasTitleComponent={!!TitleComponent}\n                        onClick={() => {\n                          if (toPrevious) {\n                            navigate(-1);\n                          } else if (toParent && strictToParent) {\n                            navigate(toParent);\n                          } else if (toParent && history.length < historyMinLength) {\n                            navigate(toParent);\n                          } else {\n                            navigate(-1);\n                          }\n                        }}\n                      >\n                        <ArrowLeft02 />\n                      </StyledBackButton>\n                      {toParentCaption && (\n                        <StyledCaption component=\"h3\" variant=\"caption\">\n                          {toParentCaption}\n                        </StyledCaption>\n                      )}\n                    </StyledBackRow>\n                  )}\n\n                  <StyledTitleSection>\n                    {TitleComponent ? (\n                      <TitleComponent />\n                    ) : (\n                      <Box alignItems=\"center\" display=\"flex\" gap={2}>\n                        <PageTitle title={title} />\n                        {titleComponentAfter}\n                      </Box>\n                    )}\n                    {caption && (\n                      <StyledCaption component=\"h3\" variant=\"caption\">\n                        {caption}\n                      </StyledCaption>\n                    )}\n                  </StyledTitleSection>\n\n                  {showActionButton && (\n                    <>\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>\n                        <Button\n                          data-testid={`Action-button-${actionBtnTitle}`}\n                          fullWidth={true}\n                          href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                          onClick={\n                            !openLinkInNewTab && !actionButtonWithHttps\n                              ? (): void => {\n                                  navigate(actionButtonLink);\n                                }\n                              : (): void => {}\n                          }\n                          rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                          target={openLinkInNewTab ? '_blank' : undefined}\n                          variant=\"contained\"\n                        >\n                          {showAddIcon && <StyledAdd size=\"sm\" />}\n                          {actionBtnTitle}\n                        </Button>\n                      </StyledActionButtonGrid>\n                    </>\n                  )}\n                  {customActionButtons?.map((button) => (\n                    <div\n                      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                      key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                    >\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n                    </div>\n                  ))}\n                </StyledTitleContainer>\n              </StyledHeader>\n              {!hideDivider && <StyledPageDivider />}\n            </>\n          )}\n          <FullWidthContainer fullWidth={fullWidth}>\n            {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n            <FDErrorBoundary\n              identifier={documentTitle}\n              somethingWentWrongText={errorBoundarySomethingWentWrongText}\n            >\n              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n              <>{children}</>\n            </FDErrorBoundary>\n          </FullWidthContainer>\n        </StyledInnerWrapper>\n      </StyledWrapper>\n    </StyledPageContainer>\n  );\n};\n\nexport default PageLayout;\n"],"names":["maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","shouldForwardProp","prop","stackAboveTitle","flexDirection","up","only","marginLeft","marginRight","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackRow","Box","display","justifyContent","marginBottom","StyledBackButton","IconButton","hasTitleComponent","alignWithContent","marginTop","StyledInnerWrapper","StyledHeaderContainer","StyledCaption","Typography","lineHeight","color","palette","semantic","text","StyledPageTitle","fontWeight","StyledPageDivider","Divider","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","background","height","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","toParentCaption","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}

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

@@ -27,6 +27,7 @@ interface Props {
     titleComponentAfter?: ReactNode;
     toPrevious?: boolean;
     toParent?: string;
+    toParentCaption?: string;
     strictToParent?: boolean;
     openLinkInNewTab?: boolean;
     navigate: (to: any) => void;

package/dist/components/PageLayout/index.js

@@ -1,2 +1,2 @@
-import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import e from"react";import a from"@mui/material/Box";import o from"@mui/material/Button";import r from"@mui/material/Divider";import l from"@mui/material/IconButton";import{styled as d,useTheme as p}from"@mui/material/styles";import c from"@mui/material/Typography";import m from"@mui/material/useMediaQuery";import s from"../../icons/Add/index.js";import g from"../../icons/ArrowLeft02/index.js";import{getMicroFrontendAttribute as h}from"../../utilities/renderUtilities.js";import{joinUrlPaths as u}from"../../utilities/validation.js";import f from"@mui/material/Grid2";import b from"../FDErrorBoundary/index.js";import k from"../Spacer/index.js";import x from"./DocumentTitle.js";import v from"./FullWidthContainer.js";const B="horizontal-content-space",w="left-horizontal-content-space",y="right-horizontal-content-space",W="vertical-content-space",T=1112,L=d("div")((({theme:t,fluid:i})=>({maxWidth:i?"none":T,[t.breakpoints.down("laptop")]:{maxWidth:"none"},padding:t.spacing(2,4),position:"relative",minHeight:"100vh"}))),C=d(f)((({theme:t})=>({[t.breakpoints.down("laptop")]:{width:"100%",paddingTop:t.spacing(2)}}))),j=d(f)((({theme:t})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:t.spacing(3),paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(3)}}))),A=d(f)((({theme:t})=>({paddingTop:t.spacing(2),[t.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(-3),marginRight:t.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2),marginRight:t.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),I=d(f)((()=>({flexGrow:1}))),z=d("div")((({theme:t})=>({maxWidth:T,paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingBottom:t.spacing(2),paddingLeft:t.spacing(2),paddingRight:t.spacing(2)}}))),R=d(s)((({theme:t})=>({marginRight:t.spacing(1)}))),D=d(l,{shouldForwardProp:t=>"hasTitleComponent"!==t})((({theme:t,hasTitleComponent:i})=>({margin:i?t.spacing(-.75,2,-1.5,-1.5):t.spacing(-1.5,2,-1.5,-1.5),[t.breakpoints.only("tablet")]:{marginLeft:t.spacing(-2)},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2)}}))),H=d("div")((({theme:t})=>({maxWidth:T,marginLeft:t.spacing(6),marginRight:t.spacing(4),paddingBottom:t.spacing(2),[t.breakpoints.only("tablet")]:{marginLeft:12,marginRight:t.spacing(3)},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(3),marginRight:t.spacing(3),maxWidth:"none"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(2),marginRight:t.spacing(2),maxWidth:"none"}}))),P=d(f)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),E=d(c)((()=>({lineHeight:"26px"}))),F=d(c)((()=>({fontWeight:"bold"}))),G=d(r)((({theme:t})=>({marginBottom:t.spacing(4)}))),$=({title:i})=>t(F,{component:"h2",variant:"h5",children:i}),S=d("div")((({useAlternateBackground:t,theme:i})=>({backgroundColor:t?i.palette.semantic.background["background-alternate"]:i.palette.semantic.background["background-base"],width:"100%",height:"100%"}))),V=r=>{const{actionBtnTitle:l,caption:d,children:c,contextButtons:s,documentTitle:B,fluid:w=!1,fullWidth:y,header:W,hideHeader:T,actionButtonLink:F,openLinkInNewTab:V=!1,pageHeader:_,showActionButton:M,showAddIcon:N,title:Q,titleComponent:U,toPrevious:q,toParent:J,strictToParent:K,navigate:O,hideDivider:X=!1,customActionButtons:Y,useAlternateBackground:Z=!1,titleComponentAfter:tt,errorBoundarySomethingWentWrongText:it}=r,nt=p(),et=m(nt.breakpoints.down("tablet")),at=h("data-portal-base-url")||"/",ot=!!F&&F.startsWith("https://"),rt=ot?F:void 0!==F?u(at,F):"";return t(S,{useAlternateBackground:Z,children:i(L,{fluid:w,children:[B&&t(x,{children:B}),_||null,i(H,{children:[_&&t(k,{size:16,variant:"vertical"}),!T&&i(n,{children:[i(j,{container:!0,alignItems:"center",direction:"column",children:[t(f,{container:!0,alignContent:"space-between",direction:"row",children:t(P,{children:s?.map((i=>t("div",{children:i},`context-button-${e.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),i(A,{container:!0,children:[(J||q)&&t(a,{children:t(D,{"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!U,onClick:()=>{q?O(-1):J&&K||J&&history.length<3?O(J):O(-1)},children:t(g,{})})}),i(I,{children:[U?t(U,{}):i(a,{alignItems:"center",display:"flex",gap:2,children:[t($,{title:Q}),tt]}),d&&t(E,{component:"h3",variant:"caption",children:d})]}),M&&i(n,{children:[et&&t(k,{size:56,variant:"vertical"}),t(C,{children:i(o,{"data-testid":`Action-button-${l}`,fullWidth:!0,href:V||ot?rt:"",onClick:V||ot?()=>{}:()=>{O(F)},rel:V?"noopener noreferrer":void 0,target:V?"_blank":void 0,variant:"contained",children:[N&&t(R,{size:"sm"}),l]})})]}),Y?.map((n=>i("div",{children:[et&&t(k,{size:56,variant:"vertical"}),!et&&t(k,{size:16,variant:"vertical"}),t(C,{children:n})]},`custom-action-button-${e.isValidElement(n)?n.props?.["data-testid"]||n.props?.children:"fallback"}`)))]})]}),!X&&t(G,{})]}),i(v,{fullWidth:y,children:[W?t(z,{children:W}):null,t(b,{identifier:B,somethingWentWrongText:it,children:t(n,{children:c})})]})]})]})})};export{B as HORIZONTAL_SPACE_CLASSNAME,w as LEFT_HORIZONTAL_SPACE_CLASSNAME,$ as PageTitle,y as RIGHT_HORIZONTAL_SPACE_CLASSNAME,W as VERTICAL_SPACE_CLASSNAME,V as default,T as maxWidth};
+import{jsx as t,jsxs as i,Fragment as n}from"react/jsx-runtime";import e from"react";import a from"@mui/material/Box";import o from"@mui/material/Button";import r from"@mui/material/Divider";import l from"@mui/material/IconButton";import{styled as c,useTheme as p}from"@mui/material/styles";import s from"@mui/material/Typography";import d from"@mui/material/useMediaQuery";import m from"../../icons/Add/index.js";import g from"../../icons/ArrowLeft02/index.js";import{getMicroFrontendAttribute as h}from"../../utilities/renderUtilities.js";import{joinUrlPaths as u}from"../../utilities/validation.js";import f from"@mui/material/Grid2";import b from"../FDErrorBoundary/index.js";import x from"../Spacer/index.js";import k from"./DocumentTitle.js";import v from"./FullWidthContainer.js";const B="horizontal-content-space",w="left-horizontal-content-space",W="right-horizontal-content-space",y="vertical-content-space",T=1112,C=c("div")((({theme:t,fluid:i})=>({maxWidth:i?"none":T,[t.breakpoints.down("laptop")]:{maxWidth:"none"},padding:t.spacing(2,4),position:"relative",minHeight:"100vh"}))),L=c(f)((({theme:t})=>({[t.breakpoints.down("laptop")]:{width:"100%",paddingTop:t.spacing(2)}}))),A=c(f)((({theme:t})=>({flexWrap:"nowrap",alignItems:"flex-start",paddingTop:t.spacing(3),paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(3)}}))),j=c(f,{shouldForwardProp:t=>"stackAboveTitle"!==t})((({theme:t,stackAboveTitle:i})=>({paddingTop:t.spacing(2),...i?{flexDirection:"column",alignItems:"flex-start"}:{},[t.breakpoints.up("laptop")]:{width:"100%",alignItems:i?"flex-start":"center",...i?{flexDirection:"column"}:{}},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(-3),marginRight:t.spacing(-3),flexDirection:"column",alignItems:"flex-start"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(-2),marginRight:t.spacing(-2),flexDirection:"column",alignItems:"flex-start"}}))),I=c(f)((()=>({flexGrow:1}))),R=c("div")((({theme:t})=>({maxWidth:T,paddingBottom:t.spacing(3),[t.breakpoints.down("laptop")]:{paddingBottom:t.spacing(2),paddingLeft:t.spacing(2),paddingRight:t.spacing(2)}}))),z=c(m)((({theme:t})=>({marginRight:t.spacing(1)}))),D=c(a)((({theme:t})=>({display:"flex",alignItems:"center",justifyContent:"flex-start",marginBottom:t.spacing(1),marginLeft:t.spacing(-2)}))),P=c(l,{shouldForwardProp:t=>"hasTitleComponent"!==t&&"alignWithContent"!==t})((({theme:t,hasTitleComponent:i,alignWithContent:n})=>{const e=i?t.spacing(-.75):t.spacing(-1.5),a=t.spacing(-1.5);return{marginTop:e,marginRight:t.spacing(.5),marginBottom:a,marginLeft:n?0:t.spacing(-1.5),padding:0,[t.breakpoints.only("tablet")]:{marginLeft:n?0:t.spacing(-2)},[t.breakpoints.only("base")]:{marginLeft:n?0:t.spacing(-2)}}})),F=c("div")((({theme:t})=>({maxWidth:T,marginLeft:t.spacing(6),marginRight:t.spacing(4),paddingBottom:t.spacing(2),[t.breakpoints.only("tablet")]:{marginLeft:12,marginRight:t.spacing(3)},[t.breakpoints.only("mobile")]:{marginLeft:t.spacing(3),marginRight:t.spacing(3),maxWidth:"none"},[t.breakpoints.only("base")]:{marginLeft:t.spacing(2),marginRight:t.spacing(2),maxWidth:"none"}}))),H=c(f)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),E=c(s)((({theme:t})=>({lineHeight:"26px",color:t.palette.semantic.text["text-weak"]}))),G=c(s)((()=>({fontWeight:"bold"}))),$=c(r)((({theme:t})=>({marginBottom:t.spacing(4)}))),S=({title:i})=>t(G,{component:"h2",variant:"h5",children:i}),V=c("div")((({useAlternateBackground:t,theme:i})=>({backgroundColor:t?i.palette.semantic.background["background-alternate"]:i.palette.semantic.background["background-base"],width:"100%",height:"100%"}))),_=r=>{const{actionBtnTitle:l,caption:c,children:s,contextButtons:m,documentTitle:B,fluid:w=!1,fullWidth:W,header:y,hideHeader:T,actionButtonLink:G,openLinkInNewTab:_=!1,pageHeader:M,showActionButton:N,showAddIcon:Q,title:U,titleComponent:q,toPrevious:J,toParent:K,toParentCaption:O,strictToParent:X,navigate:Y,hideDivider:Z=!1,customActionButtons:tt,useAlternateBackground:it=!1,titleComponentAfter:nt,errorBoundarySomethingWentWrongText:et}=r,at=p(),ot=d(at.breakpoints.down("tablet")),rt=h("data-portal-base-url")||"/",lt=!!G&&G.startsWith("https://"),ct=lt?G:void 0!==G?u(rt,G):"";return t(V,{useAlternateBackground:it,children:i(C,{fluid:w,children:[B&&t(k,{children:B}),M||null,i(F,{children:[M&&t(x,{size:16,variant:"vertical"}),!T&&i(n,{children:[i(A,{container:!0,alignItems:"center",direction:"column",children:[t(f,{container:!0,alignContent:"space-between",direction:"row",children:t(H,{children:m?.map((i=>t("div",{children:i},`context-button-${e.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),i(j,{container:!0,stackAboveTitle:!!O,children:[(K||J)&&i(D,{children:[t(P,{alignWithContent:!!O,"aria-label":"Back",component:"button","data-testid":"back_button",hasTitleComponent:!!q,onClick:()=>{J?Y(-1):K&&X||K&&history.length<3?Y(K):Y(-1)},children:t(g,{})}),O&&t(E,{component:"h3",variant:"caption",children:O})]}),i(I,{children:[q?t(q,{}):i(a,{alignItems:"center",display:"flex",gap:2,children:[t(S,{title:U}),nt]}),c&&t(E,{component:"h3",variant:"caption",children:c})]}),N&&i(n,{children:[ot&&t(x,{size:56,variant:"vertical"}),t(L,{children:i(o,{"data-testid":`Action-button-${l}`,fullWidth:!0,href:_||lt?ct:"",onClick:_||lt?()=>{}:()=>{Y(G)},rel:_?"noopener noreferrer":void 0,target:_?"_blank":void 0,variant:"contained",children:[Q&&t(z,{size:"sm"}),l]})})]}),tt?.map((n=>i("div",{children:[ot&&t(x,{size:56,variant:"vertical"}),!ot&&t(x,{size:16,variant:"vertical"}),t(L,{children:n})]},`custom-action-button-${e.isValidElement(n)?n.props?.["data-testid"]||n.props?.children:"fallback"}`)))]})]}),!Z&&t($,{})]}),i(v,{fullWidth:W,children:[y?t(R,{children:y}):null,t(b,{identifier:B,somethingWentWrongText:et,children:t(n,{children:s})})]})]})]})})};export{B as HORIZONTAL_SPACE_CLASSNAME,w as LEFT_HORIZONTAL_SPACE_CLASSNAME,S as PageTitle,W as RIGHT_HORIZONTAL_SPACE_CLASSNAME,y as VERTICAL_SPACE_CLASSNAME,_ as default,T as maxWidth};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n  maxWidth: fluid ? 'none' : maxWidth,\n  [theme.breakpoints.down('laptop')]: {\n    maxWidth: 'none',\n  },\n  padding: theme.spacing(2, 4),\n  position: 'relative',\n  minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n  [theme.breakpoints.down('laptop')]: {\n    width: '100%',\n    paddingTop: theme.spacing(2),\n  },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n  flexWrap: 'nowrap',\n  alignItems: 'flex-start',\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\nconst StyledTitleContainer = styled(Grid)(({ theme }) => ({\n  paddingTop: theme.spacing(2),\n  [theme.breakpoints.up('laptop')]: {\n    width: '100%',\n    alignItems: 'center',\n  },\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(-3),\n    marginRight: theme.spacing(-3),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n  maxWidth,\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingBottom: theme.spacing(2),\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n  marginRight: theme.spacing(1),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n  shouldForwardProp: (prop) => prop !== 'hasTitleComponent',\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any }>(({ theme, hasTitleComponent }) => ({\n  margin: hasTitleComponent ? theme.spacing(-0.75, 2, -1.5, -1.5) : theme.spacing(-1.5, 2, -1.5, -1.5),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: theme.spacing(-2),\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n  },\n}));\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n  maxWidth,\n  marginLeft: theme.spacing(6),\n  marginRight: theme.spacing(4),\n  paddingBottom: theme.spacing(2),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: 12,\n    marginRight: theme.spacing(3),\n  },\n\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(3),\n    maxWidth: 'none',\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    maxWidth: 'none',\n  },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(() => ({\n  lineHeight: '26px',\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n  fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n  <StyledPageTitle component=\"h2\" variant=\"h5\">\n    {title}\n  </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n  ({ useAlternateBackground, theme }) => ({\n    backgroundColor: useAlternateBackground\n      ? theme.palette.semantic.background['background-alternate']\n      : theme.palette.semantic.background['background-base'],\n    width: '100%',\n    height: '100%',\n  }),\n);\n\nexport interface Props {\n  actionBtnTitle?: string;\n  caption?: ReactNode;\n  children: ReactNode;\n  contextButtons?: ReactNode[];\n  documentTitle: string;\n  fluid?: boolean;\n  fullWidth?: boolean;\n  header?: ReactNode;\n  hideHeader?: boolean;\n  actionButtonLink?: string;\n  pageHeader?: ReactNode;\n  showActionButton?: boolean;\n  showAddIcon?: boolean;\n  title: ReactNode;\n  titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n  titleComponentAfter?: ReactNode;\n  toPrevious?: boolean;\n  toParent?: string;\n  strictToParent?: boolean;\n  openLinkInNewTab?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  navigate: (to: any) => void;\n  hideDivider?: boolean;\n  customActionButtons?: ReactNode[];\n  useAlternateBackground?: boolean;\n  errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n  const {\n    actionBtnTitle,\n    caption,\n    children,\n    contextButtons,\n    documentTitle,\n    fluid = false,\n    fullWidth,\n    header,\n    hideHeader,\n    actionButtonLink,\n    openLinkInNewTab = false,\n    pageHeader,\n    showActionButton,\n    showAddIcon,\n    title,\n    titleComponent: TitleComponent,\n    toPrevious,\n    toParent,\n    strictToParent,\n    navigate,\n    hideDivider = false,\n    customActionButtons,\n    useAlternateBackground = false,\n    titleComponentAfter,\n    errorBoundarySomethingWentWrongText,\n  } = props;\n  const theme = useTheme();\n\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n  const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n  const getActionButtonLink = (): string => {\n    if (actionButtonWithHttps) {\n      return actionButtonLink as string;\n    }\n    if (actionButtonLink !== undefined) {\n      return joinUrlPaths(baseUrl, actionButtonLink);\n    }\n    return '';\n  };\n  const actionButtonLinkFinal = getActionButtonLink();\n\n  return (\n    <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n      <StyledWrapper fluid={fluid}>\n        {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n        {pageHeader || null}\n        <StyledInnerWrapper>\n          {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n          {!hideHeader && (\n            <>\n              <StyledHeader container alignItems=\"center\" direction=\"column\">\n                <Grid container alignContent=\"space-between\" direction=\"row\">\n                  <StyledHeaderContainer>\n                    {contextButtons?.map((button) => (\n                      <div\n                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                        key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                      >\n                        {button}\n                      </div>\n                    ))}\n                  </StyledHeaderContainer>\n                </Grid>\n                <StyledTitleContainer container>\n                  {(toParent || toPrevious) && (\n                    <Box>\n                      <StyledBackButton\n                        aria-label=\"Back\"\n                        component={'button'}\n                        data-testid=\"back_button\"\n                        hasTitleComponent={!!TitleComponent}\n                        onClick={() => {\n                          if (toPrevious) {\n                            navigate(-1);\n                          } else if (toParent && strictToParent) {\n                            navigate(toParent);\n                          } else if (toParent && history.length < historyMinLength) {\n                            navigate(toParent);\n                          } else {\n                            navigate(-1);\n                          }\n                        }}\n                      >\n                        <ArrowLeft02 />\n                      </StyledBackButton>\n                    </Box>\n                  )}\n\n                  <StyledTitleSection>\n                    {TitleComponent ? (\n                      <TitleComponent />\n                    ) : (\n                      <Box alignItems=\"center\" display=\"flex\" gap={2}>\n                        <PageTitle title={title} />\n                        {titleComponentAfter}\n                      </Box>\n                    )}\n                    {caption && (\n                      <StyledCaption component=\"h3\" variant=\"caption\">\n                        {caption}\n                      </StyledCaption>\n                    )}\n                  </StyledTitleSection>\n\n                  {showActionButton && (\n                    <>\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>\n                        <Button\n                          data-testid={`Action-button-${actionBtnTitle}`}\n                          fullWidth={true}\n                          href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                          onClick={\n                            !openLinkInNewTab && !actionButtonWithHttps\n                              ? (): void => {\n                                  navigate(actionButtonLink);\n                                }\n                              : (): void => {}\n                          }\n                          rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                          target={openLinkInNewTab ? '_blank' : undefined}\n                          variant=\"contained\"\n                        >\n                          {showAddIcon && <StyledAdd size=\"sm\" />}\n                          {actionBtnTitle}\n                        </Button>\n                      </StyledActionButtonGrid>\n                    </>\n                  )}\n                  {customActionButtons?.map((button) => (\n                    <div\n                      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                      key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                    >\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n                    </div>\n                  ))}\n                </StyledTitleContainer>\n              </StyledHeader>\n              {!hideDivider && <StyledPageDivider />}\n            </>\n          )}\n          <FullWidthContainer fullWidth={fullWidth}>\n            {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n            <FDErrorBoundary\n              identifier={documentTitle}\n              somethingWentWrongText={errorBoundarySomethingWentWrongText}\n            >\n              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n              <>{children}</>\n            </FDErrorBoundary>\n          </FullWidthContainer>\n        </StyledInnerWrapper>\n      </StyledWrapper>\n    </StyledPageContainer>\n  );\n};\n\nexport default PageLayout;\n"],"names":["HORIZONTAL_SPACE_CLASSNAME","LEFT_HORIZONTAL_SPACE_CLASSNAME","RIGHT_HORIZONTAL_SPACE_CLASSNAME","VERTICAL_SPACE_CLASSNAME","maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","up","only","marginLeft","marginRight","flexDirection","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","StyledInnerWrapper","StyledHeaderContainer","display","justifyContent","StyledCaption","Typography","lineHeight","StyledPageTitle","fontWeight","StyledPageDivider","Divider","marginBottom","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","palette","semantic","background","height","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","Box","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../src/components/PageLayout/index.tsx"],"sourcesContent":["import React, { type ComponentType, type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button from '@mui/material/Button';\nimport Divider from '@mui/material/Divider';\nimport IconButton from '@mui/material/IconButton';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Add from '../../icons/Add';\nimport ArrowLeft02 from '../../icons/ArrowLeft02';\nimport { getMicroFrontendAttribute } from '../../utilities/renderUtilities';\nimport { joinUrlPaths } from '../../utilities/validation';\nimport Grid from '../atoms/Grid';\nimport FDErrorBoundary from '../FDErrorBoundary';\nimport Spacer from '../Spacer';\nimport DocumentTitle from './DocumentTitle';\nimport FullWidthContainer from './FullWidthContainer';\n\nexport const HORIZONTAL_SPACE_CLASSNAME = 'horizontal-content-space';\nexport const LEFT_HORIZONTAL_SPACE_CLASSNAME = 'left-horizontal-content-space';\nexport const RIGHT_HORIZONTAL_SPACE_CLASSNAME = 'right-horizontal-content-space';\nexport const VERTICAL_SPACE_CLASSNAME = 'vertical-content-space';\nexport const maxWidth = 1112;\nconst historyMinLength = 3;\n\nconst StyledWrapper = styled('div')<{ fluid: boolean }>(({ theme, fluid }) => ({\n  maxWidth: fluid ? 'none' : maxWidth,\n  [theme.breakpoints.down('laptop')]: {\n    maxWidth: 'none',\n  },\n  padding: theme.spacing(2, 4),\n  position: 'relative',\n  minHeight: '100vh',\n}));\n\nconst StyledActionButtonGrid = styled(Grid)(({ theme }) => ({\n  [theme.breakpoints.down('laptop')]: {\n    width: '100%',\n    paddingTop: theme.spacing(2),\n  },\n}));\n\nconst StyledHeader = styled(Grid)(({ theme }) => ({\n  flexWrap: 'nowrap',\n  alignItems: 'flex-start',\n  paddingTop: theme.spacing(3),\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\nconst StyledTitleContainer = styled(Grid, {\n  shouldForwardProp: (prop) => prop !== 'stackAboveTitle',\n})<{ stackAboveTitle?: boolean }>(({ theme, stackAboveTitle }) => ({\n  paddingTop: theme.spacing(2),\n  ...(stackAboveTitle ? { flexDirection: 'column', alignItems: 'flex-start' } : {}),\n  [theme.breakpoints.up('laptop')]: {\n    width: '100%',\n    alignItems: stackAboveTitle ? 'flex-start' : 'center',\n    ...(stackAboveTitle ? { flexDirection: 'column' } : {}),\n  },\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(-3),\n    marginRight: theme.spacing(-3),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(-2),\n    marginRight: theme.spacing(-2),\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n  },\n}));\n\nconst StyledTitleSection = styled(Grid)(() => ({\n  flexGrow: 1,\n}));\n\nconst StyledTopSection = styled('div')(({ theme }) => ({\n  maxWidth,\n  paddingBottom: theme.spacing(3),\n\n  [theme.breakpoints.down('laptop')]: {\n    paddingBottom: theme.spacing(2),\n    paddingLeft: theme.spacing(2),\n    paddingRight: theme.spacing(2),\n  },\n}));\n\nconst StyledAdd = styled(Add)(({ theme }) => ({\n  marginRight: theme.spacing(1),\n}));\n\nconst StyledBackRow = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'flex-start',\n  marginBottom: theme.spacing(1),\n  marginLeft: theme.spacing(-2),\n}));\n\nconst StyledBackButton = styled(IconButton, {\n  shouldForwardProp: (prop) => prop !== 'hasTitleComponent' && prop !== 'alignWithContent',\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n})<{ hasTitleComponent: boolean; component: any; alignWithContent?: boolean }>(\n  ({ theme, hasTitleComponent, alignWithContent }) => {\n    const marginTop = hasTitleComponent ? theme.spacing(-0.75) : theme.spacing(-1.5);\n    const marginBottom = theme.spacing(-1.5);\n    const marginRight = theme.spacing(0.5);\n    const marginLeft = alignWithContent ? 0 : theme.spacing(-1.5);\n\n    return {\n      marginTop,\n      marginRight,\n      marginBottom,\n      marginLeft,\n      padding: 0,\n\n      [theme.breakpoints.only('tablet')]: {\n        marginLeft: alignWithContent ? 0 : theme.spacing(-2),\n      },\n\n      [theme.breakpoints.only('base')]: {\n        marginLeft: alignWithContent ? 0 : theme.spacing(-2),\n      },\n    };\n  },\n);\n\nconst StyledInnerWrapper = styled('div')(({ theme }) => ({\n  maxWidth,\n  marginLeft: theme.spacing(6),\n  marginRight: theme.spacing(4),\n  paddingBottom: theme.spacing(2),\n\n  [theme.breakpoints.only('tablet')]: {\n    marginLeft: 12,\n    marginRight: theme.spacing(3),\n  },\n\n  [theme.breakpoints.only('mobile')]: {\n    marginLeft: theme.spacing(3),\n    marginRight: theme.spacing(3),\n    maxWidth: 'none',\n  },\n\n  [theme.breakpoints.only('base')]: {\n    marginLeft: theme.spacing(2),\n    marginRight: theme.spacing(2),\n    maxWidth: 'none',\n  },\n}));\n\nconst StyledHeaderContainer = styled(Grid)(() => ({\n  display: 'flex',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n}));\nconst StyledCaption = styled(Typography)<{ component: string }>(({ theme }) => ({\n  lineHeight: '26px',\n  color: theme.palette.semantic.text['text-weak'],\n}));\n\nconst StyledPageTitle = styled(Typography)<{ component: string }>(() => ({\n  fontWeight: 'bold',\n}));\n\nconst StyledPageDivider = styled(Divider)(({ theme }) => ({\n  marginBottom: theme.spacing(4),\n}));\n\nexport const PageTitle = ({ title }: { title: ReactNode | string }): JSX.Element => (\n  <StyledPageTitle component=\"h2\" variant=\"h5\">\n    {title}\n  </StyledPageTitle>\n);\n\nconst StyledPageContainer = styled('div')<{ useAlternateBackground: boolean }>(\n  ({ useAlternateBackground, theme }) => ({\n    backgroundColor: useAlternateBackground\n      ? theme.palette.semantic.background['background-alternate']\n      : theme.palette.semantic.background['background-base'],\n    width: '100%',\n    height: '100%',\n  }),\n);\n\nexport interface Props {\n  actionBtnTitle?: string;\n  caption?: ReactNode;\n  children: ReactNode;\n  contextButtons?: ReactNode[];\n  documentTitle: string;\n  fluid?: boolean;\n  fullWidth?: boolean;\n  header?: ReactNode;\n  hideHeader?: boolean;\n  actionButtonLink?: string;\n  pageHeader?: ReactNode;\n  showActionButton?: boolean;\n  showAddIcon?: boolean;\n  title: ReactNode;\n  titleComponent?: ComponentType<React.PropsWithChildren<unknown>>;\n  titleComponentAfter?: ReactNode;\n  toPrevious?: boolean;\n  toParent?: string;\n  toParentCaption?: string;\n  strictToParent?: boolean;\n  openLinkInNewTab?: boolean;\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  navigate: (to: any) => void;\n  hideDivider?: boolean;\n  customActionButtons?: ReactNode[];\n  useAlternateBackground?: boolean;\n  errorBoundarySomethingWentWrongText: string;\n}\n\nconst PageLayout = (props: Props): JSX.Element => {\n  const {\n    actionBtnTitle,\n    caption,\n    children,\n    contextButtons,\n    documentTitle,\n    fluid = false,\n    fullWidth,\n    header,\n    hideHeader,\n    actionButtonLink,\n    openLinkInNewTab = false,\n    pageHeader,\n    showActionButton,\n    showAddIcon,\n    title,\n    titleComponent: TitleComponent,\n    toPrevious,\n    toParent,\n    toParentCaption,\n    strictToParent,\n    navigate,\n    hideDivider = false,\n    customActionButtons,\n    useAlternateBackground = false,\n    titleComponentAfter,\n    errorBoundarySomethingWentWrongText,\n  } = props;\n  const theme = useTheme();\n\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const baseUrl = getMicroFrontendAttribute('data-portal-base-url') || '/';\n  const actionButtonWithHttps: boolean = !!actionButtonLink && actionButtonLink.startsWith('https://');\n  const getActionButtonLink = (): string => {\n    if (actionButtonWithHttps) {\n      return actionButtonLink as string;\n    }\n    if (actionButtonLink !== undefined) {\n      return joinUrlPaths(baseUrl, actionButtonLink);\n    }\n    return '';\n  };\n  const actionButtonLinkFinal = getActionButtonLink();\n\n  return (\n    <StyledPageContainer useAlternateBackground={useAlternateBackground}>\n      <StyledWrapper fluid={fluid}>\n        {documentTitle && <DocumentTitle>{documentTitle}</DocumentTitle>}\n\n        {pageHeader || null}\n        <StyledInnerWrapper>\n          {pageHeader && <Spacer size={16} variant=\"vertical\" />}\n          {!hideHeader && (\n            <>\n              <StyledHeader container alignItems=\"center\" direction=\"column\">\n                <Grid container alignContent=\"space-between\" direction=\"row\">\n                  <StyledHeaderContainer>\n                    {contextButtons?.map((button) => (\n                      <div\n                        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                        key={`context-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                      >\n                        {button}\n                      </div>\n                    ))}\n                  </StyledHeaderContainer>\n                </Grid>\n                <StyledTitleContainer container stackAboveTitle={!!toParentCaption}>\n                  {(toParent || toPrevious) && (\n                  <StyledBackRow>\n                      <StyledBackButton\n                        alignWithContent={!!toParentCaption}\n                        aria-label=\"Back\"\n                        component={'button'}\n                        data-testid=\"back_button\"\n                        hasTitleComponent={!!TitleComponent}\n                        onClick={() => {\n                          if (toPrevious) {\n                            navigate(-1);\n                          } else if (toParent && strictToParent) {\n                            navigate(toParent);\n                          } else if (toParent && history.length < historyMinLength) {\n                            navigate(toParent);\n                          } else {\n                            navigate(-1);\n                          }\n                        }}\n                      >\n                        <ArrowLeft02 />\n                      </StyledBackButton>\n                      {toParentCaption && (\n                        <StyledCaption component=\"h3\" variant=\"caption\">\n                          {toParentCaption}\n                        </StyledCaption>\n                      )}\n                    </StyledBackRow>\n                  )}\n\n                  <StyledTitleSection>\n                    {TitleComponent ? (\n                      <TitleComponent />\n                    ) : (\n                      <Box alignItems=\"center\" display=\"flex\" gap={2}>\n                        <PageTitle title={title} />\n                        {titleComponentAfter}\n                      </Box>\n                    )}\n                    {caption && (\n                      <StyledCaption component=\"h3\" variant=\"caption\">\n                        {caption}\n                      </StyledCaption>\n                    )}\n                  </StyledTitleSection>\n\n                  {showActionButton && (\n                    <>\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>\n                        <Button\n                          data-testid={`Action-button-${actionBtnTitle}`}\n                          fullWidth={true}\n                          href={openLinkInNewTab || actionButtonWithHttps ? actionButtonLinkFinal : ''}\n                          onClick={\n                            !openLinkInNewTab && !actionButtonWithHttps\n                              ? (): void => {\n                                  navigate(actionButtonLink);\n                                }\n                              : (): void => {}\n                          }\n                          rel={openLinkInNewTab ? 'noopener noreferrer' : undefined}\n                          target={openLinkInNewTab ? '_blank' : undefined}\n                          variant=\"contained\"\n                        >\n                          {showAddIcon && <StyledAdd size=\"sm\" />}\n                          {actionBtnTitle}\n                        </Button>\n                      </StyledActionButtonGrid>\n                    </>\n                  )}\n                  {customActionButtons?.map((button) => (\n                    <div\n                      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access\n                      key={`custom-action-button-${React.isValidElement(button) ? button.props?.['data-testid'] || button.props?.children : 'fallback'}`}\n                    >\n                      {isMobile && <Spacer size={56} variant=\"vertical\" />}\n                      {!isMobile && <Spacer size={16} variant=\"vertical\" />}\n                      <StyledActionButtonGrid>{button}</StyledActionButtonGrid>\n                    </div>\n                  ))}\n                </StyledTitleContainer>\n              </StyledHeader>\n              {!hideDivider && <StyledPageDivider />}\n            </>\n          )}\n          <FullWidthContainer fullWidth={fullWidth}>\n            {header ? <StyledTopSection>{header}</StyledTopSection> : null}\n            <FDErrorBoundary\n              identifier={documentTitle}\n              somethingWentWrongText={errorBoundarySomethingWentWrongText}\n            >\n              {/* eslint-disable-next-line react/jsx-no-useless-fragment */}\n              <>{children}</>\n            </FDErrorBoundary>\n          </FullWidthContainer>\n        </StyledInnerWrapper>\n      </StyledWrapper>\n    </StyledPageContainer>\n  );\n};\n\nexport default PageLayout;\n"],"names":["HORIZONTAL_SPACE_CLASSNAME","LEFT_HORIZONTAL_SPACE_CLASSNAME","RIGHT_HORIZONTAL_SPACE_CLASSNAME","VERTICAL_SPACE_CLASSNAME","maxWidth","StyledWrapper","styled","theme","fluid","breakpoints","down","padding","spacing","position","minHeight","StyledActionButtonGrid","Grid","width","paddingTop","StyledHeader","flexWrap","alignItems","paddingBottom","StyledTitleContainer","shouldForwardProp","prop","stackAboveTitle","flexDirection","up","only","marginLeft","marginRight","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","StyledBackRow","Box","display","justifyContent","marginBottom","StyledBackButton","IconButton","hasTitleComponent","alignWithContent","marginTop","StyledInnerWrapper","StyledHeaderContainer","StyledCaption","Typography","lineHeight","color","palette","semantic","text","StyledPageTitle","fontWeight","StyledPageDivider","Divider","PageTitle","title","_jsx","component","variant","children","StyledPageContainer","useAlternateBackground","backgroundColor","background","height","PageLayout","props","actionBtnTitle","caption","contextButtons","documentTitle","fullWidth","header","hideHeader","actionButtonLink","openLinkInNewTab","pageHeader","showActionButton","showAddIcon","titleComponent","TitleComponent","toPrevious","toParent","toParentCaption","strictToParent","navigate","hideDivider","customActionButtons","titleComponentAfter","errorBoundarySomethingWentWrongText","useTheme","isMobile","useMediaQuery","baseUrl","getMicroFrontendAttribute","actionButtonWithHttps","startsWith","actionButtonLinkFinal","undefined","joinUrlPaths","_jsxs","DocumentTitle","Spacer","size","_Fragment","container","direction","alignContent","map","button","React","isValidElement","onClick","history","length","ArrowLeft02","gap","Button","href","rel","target","FullWidthContainer","FDErrorBoundary","identifier","somethingWentWrongText"],"mappings":"mxBAoBO,MAAMA,EAA6B,2BAC7BC,EAAkC,gCAClCC,EAAmC,iCACnCC,EAA2B,yBAC3BC,EAAW,KAGlBC,EAAgBC,EAAO,MAAPA,EAAkC,EAAGC,QAAOC,YAAO,CACvEJ,SAAUI,EAAQ,OAASJ,EAC3B,CAACG,EAAME,YAAYC,KAAK,WAAY,CAClCN,SAAU,QAEZO,QAASJ,EAAMK,QAAQ,EAAG,GAC1BC,SAAU,WACVC,UAAW,YAGPC,EAAyBT,EAAOU,EAAPV,EAAa,EAAGC,YAAO,CACpD,CAACA,EAAME,YAAYC,KAAK,WAAY,CAClCO,MAAO,OACPC,WAAYX,EAAMK,QAAQ,QAIxBO,EAAeb,EAAOU,EAAPV,EAAa,EAAGC,YAAO,CAC1Ca,SAAU,SACVC,WAAY,aACZH,WAAYX,EAAMK,QAAQ,GAC1BU,cAAef,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYC,KAAK,WAAY,CAClCQ,WAAYX,EAAMK,QAAQ,GAC1BU,cAAef,EAAMK,QAAQ,QAI3BW,EAAuBjB,EAAOU,EAAM,CACxCQ,kBAAoBC,GAAkB,oBAATA,GADFnB,EAEK,EAAGC,QAAOmB,sBAAiB,CAC3DR,WAAYX,EAAMK,QAAQ,MACtBc,EAAkB,CAAEC,cAAe,SAAUN,WAAY,cAAiB,GAC9E,CAACd,EAAME,YAAYmB,GAAG,WAAY,CAChCX,MAAO,OACPI,WAAYK,EAAkB,aAAe,YACzCA,EAAkB,CAAEC,cAAe,UAAa,CAAA,GAEtD,CAACpB,EAAME,YAAYoB,KAAK,WAAY,CAClCC,WAAYvB,EAAMK,YAClBmB,YAAaxB,EAAMK,YACnBe,cAAe,SACfN,WAAY,cAEd,CAACd,EAAME,YAAYoB,KAAK,SAAU,CAChCC,WAAYvB,EAAMK,YAClBmB,YAAaxB,EAAMK,YACnBe,cAAe,SACfN,WAAY,kBAIVW,EAAqB1B,EAAOU,EAAPV,EAAa,KAAA,CACtC2B,SAAU,MAGNC,EAAmB5B,EAAO,MAAPA,EAAc,EAAGC,YAAO,CAC/CH,WACAkB,cAAef,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYC,KAAK,WAAY,CAClCY,cAAef,EAAMK,QAAQ,GAC7BuB,YAAa5B,EAAMK,QAAQ,GAC3BwB,aAAc7B,EAAMK,QAAQ,QAI1ByB,EAAY/B,EAAOgC,EAAPhC,EAAY,EAAGC,YAAO,CACtCwB,YAAaxB,EAAMK,QAAQ,OAGvB2B,EAAgBjC,EAAOkC,EAAPlC,EAAY,EAAGC,YAAO,CAC1CkC,QAAS,OACTpB,WAAY,SACZqB,eAAgB,aAChBC,aAAcpC,EAAMK,QAAQ,GAC5BkB,WAAYvB,EAAMK,gBAGdgC,EAAmBtC,EAAOuC,EAAY,CAC1CrB,kBAAoBC,GAAkB,sBAATA,GAAyC,qBAATA,GADtCnB,EAIvB,EAAGC,QAAOuC,oBAAmBC,uBAC3B,MAAMC,EAAYF,EAAoBvC,EAAMK,SAAQ,KAASL,EAAMK,cAC7D+B,EAAepC,EAAMK,cAI3B,MAAO,CACLoC,YACAjB,YALkBxB,EAAMK,QAAQ,IAMhC+B,eACAb,WANiBiB,EAAmB,EAAIxC,EAAMK,SAAQ,KAOtDD,QAAS,EAET,CAACJ,EAAME,YAAYoB,KAAK,WAAY,CAClCC,WAAYiB,EAAmB,EAAIxC,EAAMK,SAAQ,IAGnD,CAACL,EAAME,YAAYoB,KAAK,SAAU,CAChCC,WAAYiB,EAAmB,EAAIxC,EAAMK,SAAQ,QAMnDqC,EAAqB3C,EAAO,MAAPA,EAAc,EAAGC,YAAO,CACjDH,WACA0B,WAAYvB,EAAMK,QAAQ,GAC1BmB,YAAaxB,EAAMK,QAAQ,GAC3BU,cAAef,EAAMK,QAAQ,GAE7B,CAACL,EAAME,YAAYoB,KAAK,WAAY,CAClCC,WAAY,GACZC,YAAaxB,EAAMK,QAAQ,IAG7B,CAACL,EAAME,YAAYoB,KAAK,WAAY,CAClCC,WAAYvB,EAAMK,QAAQ,GAC1BmB,YAAaxB,EAAMK,QAAQ,GAC3BR,SAAU,QAGZ,CAACG,EAAME,YAAYoB,KAAK,SAAU,CAChCC,WAAYvB,EAAMK,QAAQ,GAC1BmB,YAAaxB,EAAMK,QAAQ,GAC3BR,SAAU,YAIR8C,EAAwB5C,EAAOU,EAAPV,EAAa,KAAA,CACzCmC,QAAS,OACTR,SAAU,EACVS,eAAgB,eAEZS,EAAgB7C,EAAO8C,EAAP9C,EAA0C,EAAGC,YAAO,CACxE8C,WAAY,OACZC,MAAO/C,EAAMgD,QAAQC,SAASC,KAAK,iBAG/BC,EAAkBpD,EAAO8C,EAAP9C,EAA0C,KAAA,CAChEqD,WAAY,WAGRC,EAAoBtD,EAAOuD,EAAPvD,EAAgB,EAAGC,YAAO,CAClDoC,aAAcpC,EAAMK,QAAQ,OAGjBkD,EAAY,EAAGC,WAC1BC,EAACN,EAAe,CAACO,UAAU,KAAKC,QAAQ,KAAIC,SACzCJ,IAICK,EAAsB9D,EAAO,MAAPA,EAC1B,EAAG+D,yBAAwB9D,YAAO,CAChC+D,gBAAiBD,EACb9D,EAAMgD,QAAQC,SAASe,WAAW,wBAClChE,EAAMgD,QAAQC,SAASe,WAAW,mBACtCtD,MAAO,OACPuD,OAAQ,WAkCNC,EAAcC,IAClB,MAAMC,eACJA,EAAcC,QACdA,EAAOT,SACPA,EAAQU,eACRA,EAAcC,cACdA,EAAatE,MACbA,GAAQ,EAAKuE,UACbA,EAASC,OACTA,EAAMC,WACNA,EAAUC,iBACVA,EAAgBC,iBAChBA,GAAmB,EAAKC,WACxBA,EAAUC,iBACVA,EAAgBC,YAChBA,EAAWvB,MACXA,EACAwB,eAAgBC,EAAcC,WAC9BA,EAAUC,SACVA,EAAQC,gBACRA,EAAeC,eACfA,EAAcC,SACdA,EAAQC,YACRA,GAAc,EAAKC,oBACnBA,GAAmB1B,uBACnBA,IAAyB,EAAK2B,oBAC9BA,GAAmBC,oCACnBA,IACEvB,EACEnE,GAAQ2F,IAERC,GAAWC,EAAc7F,GAAME,YAAYC,KAAK,WAEhD2F,GAAUC,EAA0B,yBAA2B,IAC/DC,KAAmCrB,GAAoBA,EAAiBsB,WAAW,YAUnFC,GARAF,GACKrB,OAEgBwB,IAArBxB,EACKyB,EAAaN,GAASnB,GAExB,GAIT,OACElB,EAACI,GAAoBC,uBAAwBA,GAAsBF,SACjEyC,EAACvG,EAAa,CAACG,MAAOA,YACnBsE,GAAiBd,EAAC6C,EAAa,CAAA1C,SAAEW,IAEjCM,GAAc,KACfwB,EAAC3D,EAAkB,CAAAkB,SAAA,CAChBiB,GAAcpB,EAAC8C,EAAM,CAACC,KAAM,GAAI7C,QAAQ,cACvCe,GACA2B,EAAAI,EAAA,CAAA7C,SAAA,CACEyC,EAACzF,EAAY,CAAC8F,WAAS,EAAC5F,WAAW,SAAS6F,UAAU,mBACpDlD,EAAChD,EAAI,CAACiG,aAAUE,aAAa,gBAAgBD,UAAU,MAAK/C,SAC1DH,EAACd,YACE2B,GAAgBuC,KAAKC,GACpBrD,kBAIGqD,GAFI,kBAAkBC,EAAMC,eAAeF,GAAUA,EAAO3C,QAAQ,gBAAkB2C,EAAO3C,OAAOP,SAAW,oBAOxHyC,EAACrF,GAAqB0F,WAAS,EAACvF,kBAAmBiE,aAC/CD,GAAYD,IACdmB,EAACrE,EAAa,CAAA4B,SAAA,CACVH,EAACpB,EAAgB,CACfG,mBAAoB4C,eACT,OACX1B,UAAW,uBACC,cACZnB,oBAAqB0C,EACrBgC,QAAS,KACH/B,EACFI,GAAS,GACAH,GAAYE,GAEZF,GAAY+B,QAAQC,OAzRhC,EAwRG7B,EAASH,GAITG,GAAS,IAEZ1B,SAEDH,EAAC2D,EAAW,CAAA,KAEbhC,GACC3B,EAACb,EAAa,CAACc,UAAU,KAAKC,QAAQ,UAASC,SAC5CwB,OAMTiB,EAAC5E,EAAkB,CAAAmC,SAAA,CAChBqB,EACCxB,EAACwB,EAAc,IAEfoB,EAACpE,EAAG,CAACnB,WAAW,SAASoB,QAAQ,OAAOmF,IAAK,EAACzD,SAAA,CAC5CH,EAACF,EAAS,CAACC,MAAOA,IACjBiC,MAGJpB,GACCZ,EAACb,EAAa,CAACc,UAAU,KAAKC,QAAQ,UAASC,SAC5CS,OAKNS,GACCuB,EAAAI,EAAA,CAAA7C,SAAA,CACGgC,IAAYnC,EAAC8C,EAAM,CAACC,KAAM,GAAI7C,QAAQ,aACvCF,EAACjD,EAAsB,CAAAoD,SACrByC,EAACiB,EAAM,CAAA,cACQ,iBAAiBlD,IAC9BI,WAAW,EACX+C,KAAM3C,GAAoBoB,GAAwBE,GAAwB,GAC1Ee,QACGrC,GAAqBoB,GAIlB,OAHA,KACEV,EAASX,IAIjB6C,IAAK5C,EAAmB,2BAAwBuB,EAChDsB,OAAQ7C,EAAmB,cAAWuB,EACtCxC,QAAQ,YAAWC,SAAA,CAElBmB,GAAetB,EAAC3B,GAAU0E,KAAK,OAC/BpC,UAKRoB,IAAqBqB,KAAKC,GACzBT,EAAA,MAAA,CAAAzC,SAAA,CAIGgC,IAAYnC,EAAC8C,EAAM,CAACC,KAAM,GAAI7C,QAAQ,cACrCiC,IAAYnC,EAAC8C,EAAM,CAACC,KAAM,GAAI7C,QAAQ,aACxCF,EAACjD,YAAwBsG,MAJpB,wBAAwBC,EAAMC,eAAeF,GAAUA,EAAO3C,QAAQ,gBAAkB2C,EAAO3C,OAAOP,SAAW,uBAS5H2B,GAAe9B,EAACJ,EAAiB,OAGvCgD,EAACqB,GAAmBlD,UAAWA,EAASZ,SAAA,CACrCa,EAAShB,EAAC9B,EAAgB,CAAAiC,SAAEa,IAA6B,KAC1DhB,EAACkE,EAAe,CACdC,WAAYrD,EACZsD,uBAAwBnC,YAGxBjC,EAAAgD,EAAA,CAAA7C,SAAGA"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("@mui/material/Avatar");module.exports=r;
+"use strict";var e=require("react/jsx-runtime"),t=require("@mui/material/Avatar"),r=require("../../../themes/tokens/typography/font-family.cjs.js"),o=require("../../../themes/tokens/typography/font-size.cjs.js"),i=require("../../../themes/typography.cjs.js");const s=require("@mui/material/styles").styled(t,{shouldForwardProp:e=>"size"!==e&&"type"!==e})((({theme:e,size:t="medium",type:s})=>{const a={small:o.fontSize.desktop.caption,medium:o.fontSize.desktop.h4,large:o.fontSize.desktop.h3},l={small:"32",medium:"48",large:"64"}[t],n="photo"!==s?{borderRadius:"8px"}:{};return{fontStyle:"normal",fontWeight:600,fontFamily:r.fontFamily.desktop.body,fontSize:a[t],color:e.palette.grey[700],backgroundColor:"#f5f5f5",width:`${l}px`,height:`${l}px`,border:"1px solid #ddd",...n,[e.breakpoints.down("tablet")]:{...i.getMobileTextStyle({small:"caption",medium:"h4",large:"h3"}[t])}}}));module.exports=t=>{const{type:r,fdKey:o}=t;return e.jsx(s,{alt:t.alt||t.type,"data-fd":o,size:t.size,src:(()=>{switch(r){case"logo":case"photo":return t.src;default:return}})(),type:t.type,variant:"photo"===r?"circular":"rounded",children:(()=>{switch(r){case"icon":return t.icon;case"initials":return t.initials;default:return null}})()})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' | 'medium' | 'small' | undefined;\ntype Type = 'icon' | 'initials' | 'logo' | 'photo' | undefined;\n\ninterface CommonProps {\n    /** Size of the avatar, defaults to 'medium' */\n    size?: Size;\n    /** Test ID for testing and automation */\n    fdKey?: string;\n    /** Alternative text for the avatar image */\n    alt?: string;\n}\n\ninterface LogoProps {\n    /** Type of avatar - displays a logo image */\n    type: 'logo'\n    /** Source URL for the logo image */\n    src: string;\n    /** Alternative text for the logo image */\n    alt: string;\n}\n\ninterface PhotoProps {\n    /** Type of avatar - displays a photo image */\n    type: 'photo'\n    /** Source URL for the photo image */\n    src: string;\n    /** Alternative text for the photo image */\n    alt: string;\n}\n\ninterface InitialsProps {\n    /** Type of avatar - displays initials text */\n    type: 'initials'\n    /** Initials text to display in the avatar */\n    initials: string;\n}\n\ninterface IconProps {\n    /** Type of avatar - displays an icon */\n    type?: 'icon'\n    /** Icon component to display in the avatar */\n    icon?: React.ReactNode;\n}\n\n/** Props for the Avatar component */\nexport type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n    size: Size;\n    type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n    shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n    const pixels = {\n        small: '32',\n        medium: '48',\n        large: '64'\n    } as const;\n\n    const fontSizes = {\n        small: fontSize.desktop.caption,\n        medium: fontSize.desktop.h4,\n        large: fontSize.desktop.h3,\n    }\n\n    const mobileKeys = {\n        small: 'caption' ,\n        medium: 'h4',\n        large: 'h3',\n    } as const;\n\n    const dim = pixels[size];\n\n    const customBorderRadius = type !== 'photo' ? {\n        borderRadius: '8px'\n    } : {};\n\n    return {\n        fontStyle: 'normal',\n        fontWeight: 600,\n        fontFamily: fontFamily.desktop.body,\n        fontSize: fontSizes[size],\n        color: theme.palette.grey[700],\n        backgroundColor: '#f5f5f5',\n        width: `${dim}px`,\n        height: `${dim}px`,\n        border: `1px solid #ddd`,\n        ...customBorderRadius,\n        [theme.breakpoints.down('tablet')]: {\n            ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n        },\n    };\n});\n\n/**\n * Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n    const { type, fdKey } = props;\n\n    const getVariant = (): MuiAvatarProps['variant'] => {\n        switch (type) {\n            case 'photo':\n                return 'circular'\n            case 'logo':\n            default:\n                return 'rounded'\n        }\n    }\n\n    const getChildren = (): React.ReactNode => {\n        switch (type) {\n            case 'icon':\n                return props.icon;\n            case 'initials':\n                return props.initials;\n            default:\n                return null;\n        }\n    }\n\n    const getSrc = (): string | undefined => {\n        switch (type) {\n            case 'logo':\n            case 'photo':\n                return props.src;\n            default:\n                return undefined;\n        }\n    }\n\n    return (\n        <StyledAvatar\n            alt={props.alt || props.type}\n            data-fd={fdKey}\n            size={props.size}\n            src={getSrc()}\n            type={props.type}\n            variant={getVariant()}>\n            {getChildren()}\n        </StyledAvatar>\n    );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"mQA4DA,MAAMA,kCAAeC,OAAOC,EAAW,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD/BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAE7C,MAMMC,EAAY,CACdC,MAAOC,EAAAA,SAASC,QAAQC,QACxBC,OAAQH,EAAAA,SAASC,QAAQG,GACzBC,MAAOL,EAAAA,SAASC,QAAQK,IAStBC,EAlBS,CACXR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeQT,GAEbY,EAA8B,UAATX,EAAmB,CAC1CY,aAAc,OACd,CAAA,EAEJ,MAAO,CACHC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAAA,WAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC7BC,EAAAA,mBAxBQ,CACfxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAqB8BT,wBAUN4B,IAEnC,MAAM3B,KAAEA,EAAI4B,MAAEA,GAAUD,EAiCxB,OACIE,MAACpC,GACGqC,IAAKH,EAAMG,KAAOH,EAAM3B,KAAI,UACnB4B,EACT7B,KAAM4B,EAAM5B,KACZgC,IAfO,MACX,OAAQ/B,GACJ,IAAK,OACL,IAAK,QACD,OAAO2B,EAAMI,IACjB,QACI,SASCC,GACLhC,KAAM2B,EAAM3B,KACZiC,QApCK,UADDjC,EAEO,WAGA,UAgCUkC,SA5BT,MAChB,OAAQlC,GACJ,IAAK,OACD,OAAO2B,EAAMQ,KACjB,IAAK,WACD,OAAOR,EAAMS,SACjB,QACI,OAAO,OAsBVC"}

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

@@ -1,2 +1,48 @@
-import Avatar from '@mui/material/Avatar';
-export { AvatarProps, default } from '@mui/material/Avatar';
+type Size = 'large' | 'medium' | 'small' | undefined;
+interface CommonProps {
+    /** Size of the avatar, defaults to 'medium' */
+    size?: Size;
+    /** Test ID for testing and automation */
+    fdKey?: string;
+    /** Alternative text for the avatar image */
+    alt?: string;
+}
+interface LogoProps {
+    /** Type of avatar - displays a logo image */
+    type: 'logo';
+    /** Source URL for the logo image */
+    src: string;
+    /** Alternative text for the logo image */
+    alt: string;
+}
+interface PhotoProps {
+    /** Type of avatar - displays a photo image */
+    type: 'photo';
+    /** Source URL for the photo image */
+    src: string;
+    /** Alternative text for the photo image */
+    alt: string;
+}
+interface InitialsProps {
+    /** Type of avatar - displays initials text */
+    type: 'initials';
+    /** Initials text to display in the avatar */
+    initials: string;
+}
+interface IconProps {
+    /** Type of avatar - displays an icon */
+    type?: 'icon';
+    /** Icon component to display in the avatar */
+    icon?: React.ReactNode;
+}
+/** Props for the Avatar component */
+type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);
+/**
+ * Avatar component displays user avatars in different formats: photos, logos, initials, or icons.
+ * The component automatically adjusts styling based on the avatar type - photos use circular shape
+ * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).
+ */
+declare const Avatar: React.FC<AvatarProps>;
+
+export { Avatar as default };
+export type { AvatarProps };

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

@@ -1,2 +1,2 @@
-import a from"@mui/material/Avatar";export{default}from"@mui/material/Avatar";
+import{jsx as t}from"react/jsx-runtime";import e from"@mui/material/Avatar";import{fontFamily as o}from"../../../themes/tokens/typography/font-family.js";import{fontSize as r}from"../../../themes/tokens/typography/font-size.js";import{getMobileTextStyle as a}from"../../../themes/typography.js";import{styled as i}from"@mui/material/styles";const s=i(e,{shouldForwardProp:t=>"size"!==t&&"type"!==t})((({theme:t,size:e="medium",type:i})=>{const s={small:r.desktop.caption,medium:r.desktop.h4,large:r.desktop.h3},m={small:"32",medium:"48",large:"64"}[e],p="photo"!==i?{borderRadius:"8px"}:{};return{fontStyle:"normal",fontWeight:600,fontFamily:o.desktop.body,fontSize:s[e],color:t.palette.grey[700],backgroundColor:"#f5f5f5",width:`${m}px`,height:`${m}px`,border:"1px solid #ddd",...p,[t.breakpoints.down("tablet")]:{...a({small:"caption",medium:"h4",large:"h3"}[e])}}})),m=e=>{const{type:o,fdKey:r}=e;return t(s,{alt:e.alt||e.type,"data-fd":r,size:e.size,src:(()=>{switch(o){case"logo":case"photo":return e.src;default:return}})(),type:e.type,variant:"photo"===o?"circular":"rounded",children:(()=>{switch(o){case"icon":return e.icon;case"initials":return e.initials;default:return null}})()})};export{m as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Avatar/index.tsx"],"sourcesContent":["import MuiAvatar, { type AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';\nimport type { CSSObject } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { fontSize } from '@fd/themes/tokens/typography/font-size';\nimport { getMobileTextStyle } from '@fd/themes/typography';\nimport styled from '@fd/utilities/styledUtilities';\n\ntype Size = 'large' | 'medium' | 'small' | undefined;\ntype Type = 'icon' | 'initials' | 'logo' | 'photo' | undefined;\n\ninterface CommonProps {\n    /** Size of the avatar, defaults to 'medium' */\n    size?: Size;\n    /** Test ID for testing and automation */\n    fdKey?: string;\n    /** Alternative text for the avatar image */\n    alt?: string;\n}\n\ninterface LogoProps {\n    /** Type of avatar - displays a logo image */\n    type: 'logo'\n    /** Source URL for the logo image */\n    src: string;\n    /** Alternative text for the logo image */\n    alt: string;\n}\n\ninterface PhotoProps {\n    /** Type of avatar - displays a photo image */\n    type: 'photo'\n    /** Source URL for the photo image */\n    src: string;\n    /** Alternative text for the photo image */\n    alt: string;\n}\n\ninterface InitialsProps {\n    /** Type of avatar - displays initials text */\n    type: 'initials'\n    /** Initials text to display in the avatar */\n    initials: string;\n}\n\ninterface IconProps {\n    /** Type of avatar - displays an icon */\n    type?: 'icon'\n    /** Icon component to display in the avatar */\n    icon?: React.ReactNode;\n}\n\n/** Props for the Avatar component */\nexport type AvatarProps = CommonProps & (IconProps | InitialsProps | LogoProps | PhotoProps);\n\ntype StyledAvatarProps = MuiAvatarProps & {\n    size: Size;\n    type: Type;\n}\n\nconst StyledAvatar = styled(MuiAvatar, {\n    shouldForwardProp: (prop) => prop !== 'size' && prop !== 'type',\n})<StyledAvatarProps>(({ theme, size = 'medium', type }): CSSObject => {\n\n    const pixels = {\n        small: '32',\n        medium: '48',\n        large: '64'\n    } as const;\n\n    const fontSizes = {\n        small: fontSize.desktop.caption,\n        medium: fontSize.desktop.h4,\n        large: fontSize.desktop.h3,\n    }\n\n    const mobileKeys = {\n        small: 'caption' ,\n        medium: 'h4',\n        large: 'h3',\n    } as const;\n\n    const dim = pixels[size];\n\n    const customBorderRadius = type !== 'photo' ? {\n        borderRadius: '8px'\n    } : {};\n\n    return {\n        fontStyle: 'normal',\n        fontWeight: 600,\n        fontFamily: fontFamily.desktop.body,\n        fontSize: fontSizes[size],\n        color: theme.palette.grey[700],\n        backgroundColor: '#f5f5f5',\n        width: `${dim}px`,\n        height: `${dim}px`,\n        border: `1px solid #ddd`,\n        ...customBorderRadius,\n        [theme.breakpoints.down('tablet')]: {\n            ...getMobileTextStyle(mobileKeys[size]), // mobile typography override\n        },\n    };\n});\n\n/**\n * Avatar component displays user avatars in different formats: photos, logos, initials, or icons.\n * The component automatically adjusts styling based on the avatar type - photos use circular shape\n * while logos use rounded corners. Size can be controlled via the size prop (small, medium, large).\n */\nconst Avatar: React.FC<AvatarProps> = (props) => {\n\n    const { type, fdKey } = props;\n\n    const getVariant = (): MuiAvatarProps['variant'] => {\n        switch (type) {\n            case 'photo':\n                return 'circular'\n            case 'logo':\n            default:\n                return 'rounded'\n        }\n    }\n\n    const getChildren = (): React.ReactNode => {\n        switch (type) {\n            case 'icon':\n                return props.icon;\n            case 'initials':\n                return props.initials;\n            default:\n                return null;\n        }\n    }\n\n    const getSrc = (): string | undefined => {\n        switch (type) {\n            case 'logo':\n            case 'photo':\n                return props.src;\n            default:\n                return undefined;\n        }\n    }\n\n    return (\n        <StyledAvatar\n            alt={props.alt || props.type}\n            data-fd={fdKey}\n            size={props.size}\n            src={getSrc()}\n            type={props.type}\n            variant={getVariant()}>\n            {getChildren()}\n        </StyledAvatar>\n    );\n};\n\nexport default Avatar;"],"names":["StyledAvatar","styled","MuiAvatar","shouldForwardProp","prop","theme","size","type","fontSizes","small","fontSize","desktop","caption","medium","h4","large","h3","dim","customBorderRadius","borderRadius","fontStyle","fontWeight","fontFamily","body","color","palette","grey","backgroundColor","width","height","border","breakpoints","down","getMobileTextStyle","Avatar","props","fdKey","_jsx","alt","src","getSrc","variant","children","icon","initials","getChildren"],"mappings":"qVA4DA,MAAMA,EAAeC,EAAOC,EAAW,CACnCC,kBAAoBC,GAAkB,SAATA,GAA4B,SAATA,GAD/BH,EAEC,EAAGI,QAAOC,OAAO,SAAUC,WAE7C,MAMMC,EAAY,CACdC,MAAOC,EAASC,QAAQC,QACxBC,OAAQH,EAASC,QAAQG,GACzBC,MAAOL,EAASC,QAAQK,IAStBC,EAlBS,CACXR,MAAO,KACPI,OAAQ,KACRE,MAAO,MAeQT,GAEbY,EAA8B,UAATX,EAAmB,CAC1CY,aAAc,OACd,CAAA,EAEJ,MAAO,CACHC,UAAW,SACXC,WAAY,IACZC,WAAYA,EAAWX,QAAQY,KAC/Bb,SAAUF,EAAUF,GACpBkB,MAAOnB,EAAMoB,QAAQC,KAAK,KAC1BC,gBAAiB,UACjBC,MAAO,GAAGX,MACVY,OAAQ,GAAGZ,MACXa,OAAQ,oBACLZ,EACH,CAACb,EAAM0B,YAAYC,KAAK,WAAY,IAC7BC,EAxBQ,CACfxB,MAAO,UACPI,OAAQ,KACRE,MAAO,MAqB8BT,SAUvC4B,EAAiCC,IAEnC,MAAM5B,KAAEA,EAAI6B,MAAEA,GAAUD,EAiCxB,OACIE,EAACrC,GACGsC,IAAKH,EAAMG,KAAOH,EAAM5B,KAAI,UACnB6B,EACT9B,KAAM6B,EAAM7B,KACZiC,IAfO,MACX,OAAQhC,GACJ,IAAK,OACL,IAAK,QACD,OAAO4B,EAAMI,IACjB,QACI,SASCC,GACLjC,KAAM4B,EAAM5B,KACZkC,QApCK,UADDlC,EAEO,WAGA,UAgCUmC,SA5BT,MAChB,OAAQnC,GACJ,IAAK,OACD,OAAO4B,EAAMQ,KACjB,IAAK,WACD,OAAOR,EAAMS,SACjB,QACI,OAAO,OAsBVC"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("react");var i=require("@mui/material/Box"),l=require("@mui/material/FormControlLabel"),t=require("@mui/material/Radio"),s=require("@mui/material/styles");const r=s.styled("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),a=({error:i=!1,disabled:l=!1,size:t="medium"})=>{const a=s.useTheme(),o=l?a.palette.semantic.fill["fill-disabled"]:i?a.palette.semantic.fill["fill-error-strong"]:a.palette.semantic.stroke["stroke-strong"],n="small"===t?24:32,d=i?a.palette.semantic.fill["fill-error-weak"]:a.palette.semantic.fill["fill-inverse-strong"];return e.jsx(r,{children:e.jsx("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:e.jsx("circle",{cx:"10",cy:"10",fill:d,r:"9",stroke:o,strokeWidth:"1"})})})},o=({error:i=!1,disabled:l=!1,size:t="medium"})=>{const a=s.useTheme(),o=l?a.palette.action.disabled:i?a.palette.semantic.fill["fill-error-strong"]:a.palette.semantic.fill["fill-selected"],n="small"===t?24:32;return e.jsx(r,{children:e.jsxs("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:[e.jsx("circle",{cx:"10",cy:"10",fill:o,r:"9",stroke:o,strokeWidth:"1"}),e.jsx("circle",{cx:"10",cy:"10",fill:a.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},n=s.styled(t)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),d=s.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),c=s.styled(l,{shouldForwardProp:e=>"disabled"!==e&&"error"!==e&&"size"!==e})((({theme:e,size:i="medium"})=>({columnGap:"small"===i?e.spacing(1):e.spacing(1.5),marginTop:e.spacing(2),marginLeft:e.spacing(0),"& .MuiFormControlLabel-label":{..."small"===i?{fontSize:"14px"}:{}}}))),p=s.styled(i)((({theme:e})=>({position:"relative",display:"flex",flexDirection:"column",gap:e.spacing(.5),marginTop:e.spacing(1.5),paddingBottom:e.spacing(1),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25),borderLeft:`4px solid ${e.palette.divider}`,height:"76px"})));module.exports=({disabled:i=!1,size:l="medium",label:t,fdKey:s="basic-radio",error:r=!1,children:m,...f})=>{const u=r&&!i;return e.jsxs(d,{children:[e.jsx(c,{control:e.jsx(n,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:e.jsx(o,{disabled:i,error:u,size:l}),"data-fd":s,disabled:i,icon:e.jsx(a,{disabled:i,error:u,size:l}),size:l,...f}),disabled:i,error:u,label:t||null,size:l}),m&&e.jsx(p,{children:m})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),i=require("@mui/material/Radio"),t=require("@mui/material/styles"),l=require("@mui/material/Box");const s=t.styled("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),r=({error:i=!1,disabled:l=!1,size:r="medium"})=>{const o=t.useTheme(),a=l?o.palette.semantic.fill["fill-disabled"]:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.stroke["stroke-strong"],n="small"===r?24:32,d=i?o.palette.semantic.fill["fill-error-weak"]:o.palette.semantic.fill["fill-inverse-strong"];return e.jsx(s,{children:e.jsx("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:e.jsx("circle",{cx:"10",cy:"10",fill:d,r:"9",stroke:a,strokeWidth:"1"})})})},o=({error:i=!1,disabled:l=!1,size:r="medium"})=>{const o=t.useTheme(),a=l?o.palette.action.disabled:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.fill["fill-selected"],n="small"===r?24:32;return e.jsx(s,{children:e.jsxs("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:[e.jsx("circle",{cx:"10",cy:"10",fill:a,r:"9",stroke:a,strokeWidth:"1"}),e.jsx("circle",{cx:"10",cy:"10",fill:o.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},a=t.styled(i)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),n=t.styled(l)((()=>({margin:0,position:"relative"}))),d=({disabled:i=!1,size:t="medium",fdKey:l="basic-radio",error:s=!1,checked:d,...c})=>{const p=s&&!i;return e.jsx(n,{children:e.jsx(a,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checked:d,checkedIcon:e.jsx(o,{disabled:i,error:p,size:t}),"data-fd":l,disabled:i,icon:e.jsx(r,{disabled:i,error:p,size:t}),size:t,...c})})};exports.Radio=d,exports.default=d;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n  display: 'inline-flex',\n  borderRadius: '50%',\n  position: 'relative',\n  'input:focus ~ &': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '95%',\n    height: '95%',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: 'opacity 150ms ease',\n  },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const strokeColor = disabled\n    ? theme.palette.semantic.fill['fill-disabled']\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'];\n  const svgSize = size === 'small' ? 24 : 32;\n  const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillBackground}\n          r=\"9\"\n          stroke={strokeColor}\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const fillColor = disabled\n    ? theme.palette.action.disabled\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.fill['fill-selected'];\n  const svgSize = size === 'small' ? 24 : 32;\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillColor}\n          r=\"9\"\n          stroke={fillColor}\n          strokeWidth=\"1\"\n        />\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={theme.palette.semantic.fill['fill-inverse-strong']}\n          r=\"3\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  padding: 0,\n  '&:hover:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n  '&:active:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-press'],\n  },\n}));\n\n// Custom Radio props extending MUI Radio props\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** The size of the radio. */\n  size?: 'medium' | 'small';\n  /** The label of the radio. */\n  label?: ReactNode;\n  /** Whether the radio is required. */\n  required?: boolean;\n  /** The identifier of the radio. */\n  fdKey?: string;\n  /** Whether the radio is in an error state. */\n  error?: boolean;\n  /** The children of the radio. */\n  children?: ReactNode;\n};\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\n/** Styled FormControlLabel props */\ninterface StyledFormControlLabelProps {\n  disabled?: boolean;\n  error?: boolean;\n  size?: 'medium' | 'small';\n}\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'disabled' && prop !== 'error' && prop !== 'size',\n})<StyledFormControlLabelProps>(({ theme, size = 'medium' }) => ({\n  columnGap: size === 'small' ? theme.spacing(1) : theme.spacing(1.5), // 8px for small, 12px for medium\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(0),\n  '& .MuiFormControlLabel-label': {\n    ...(size === 'small'\n      ? { fontSize: '14px' }\n      : {}),\n  },\n}));\n\nconst StyledConditionalContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  marginTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n  borderLeft: `4px solid ${theme.palette.divider}`,\n  height: '76px',\n}));\n\nconst Radio = ({\n  disabled = false,\n  size = 'medium',\n  label,\n  fdKey = 'basic-radio',\n  error = false,\n  children,\n  ...props\n}: RadioProps): React.ReactElement => {\n  const isError = error && !disabled;\n\n  return (\n    <StyledContainer>\n      <StyledFormControlLabel\n        control={\n          <StyledRadio\n            disableFocusRipple\n            disableRipple\n            disableTouchRipple\n            checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n            data-fd={fdKey}\n            disabled={disabled}\n            icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n            size={size}\n            {...props}\n          />\n        }\n        disabled={disabled}\n        error={isError}\n        label={label || null}\n        size={size}\n      />\n\n      {children && (\n        <StyledConditionalContainer>\n          {children}\n        </StyledConditionalContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledContainer","Box","flexDirection","gap","spacing","StyledFormControlLabel","MuiFormControlLabel","shouldForwardProp","prop","columnGap","marginTop","marginLeft","fontSize","StyledConditionalContainer","paddingBottom","paddingLeft","borderLeft","divider","label","fdKey","props","isError","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"mNAOA,MAAMA,EAAcC,EAAAA,OAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EAAQnB,EAAMK,QAAQC,SAASkB,KAAK,mBAAqBxB,EAAMK,QAAQC,SAASkB,KAAK,uBAC5G,OACEG,EAAAA,IAAC7B,EAAW,CAAA8B,SACVD,EAAAA,WAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAME,EACNM,EAAE,IACFzB,OAAQgB,EACRU,YAAY,WAQhBC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,MAAC7B,EAAW,CAAA8B,SACVS,EAAAA,KAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMW,EACNH,EAAE,IACFzB,OAAQ4B,EACRF,YAAY,MAEdN,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAClCQ,EAAE,YAQNM,EAAcvC,EAAAA,OAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAsB3CkB,EAAkB3C,EAAAA,OAAO4C,EAAP5C,EAAY,EAAGC,YAAO,CAC5CC,QAAS,OACT2C,cAAe,SACfC,IAAK7C,EAAM8C,QAAQ,QAUfC,EAAyBhD,EAAAA,OAAOiD,EAAqB,CACzDC,kBAAoBC,GAAkB,aAATA,GAAgC,UAATA,GAA6B,SAATA,GAD3CnD,EAEC,EAAGC,QAAOqB,OAAO,aAAU,CACzD8B,UAAoB,UAAT9B,EAAmBrB,EAAM8C,QAAQ,GAAK9C,EAAM8C,QAAQ,KAC/DM,UAAWpD,EAAM8C,QAAQ,GACzBO,WAAYrD,EAAM8C,QAAQ,GAC1B,+BAAgC,IACjB,UAATzB,EACA,CAAEiC,SAAU,QACZ,QAIFC,EAA6BxD,EAAAA,OAAO4C,EAAP5C,EAAY,EAAGC,YAAO,CACvDG,SAAU,WACVF,QAAS,OACT2C,cAAe,SACfC,IAAK7C,EAAM8C,QAAQ,IACnBM,UAAWpD,EAAM8C,QAAQ,KACzBU,cAAexD,EAAM8C,QAAQ,GAC7BO,WAAYrD,EAAM8C,QAAQ,MAC1BW,YAAazD,EAAM8C,QAAQ,MAC3BY,WAAY,aAAa1D,EAAMK,QAAQsD,UACvC7C,OAAQ,0BAGI,EACZM,YAAW,EACXC,OAAO,SACPuC,QACAC,QAAQ,cACR1C,SAAQ,EACRS,cACGkC,MAEH,MAAMC,EAAU5C,IAAUC,EAE1B,OACEiB,EAAAA,KAACK,EAAe,CAAAd,SAAA,CACdD,EAAAA,IAACoB,EAAsB,CACrBiB,QACErC,EAAAA,IAACW,EAAW,CACV2B,sBACAC,eAAa,EACbC,oBAAkB,EAClBC,YAAazC,EAAAA,IAACO,EAAgB,CAACd,SAAUA,EAAUD,MAAO4C,EAAS1C,KAAMA,cAChEwC,EACTzC,SAAUA,EACViD,KAAM1C,EAAAA,IAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO4C,EAAS1C,KAAMA,IACpEA,KAAMA,KACFyC,IAGR1C,SAAUA,EACVD,MAAO4C,EACPH,MAAOA,GAAS,KAChBvC,KAAMA,IAGPO,GACCD,EAAAA,IAAC4B,EAA0B,CAAA3B,SACxBA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n  display: 'inline-flex',\n  borderRadius: '50%',\n  position: 'relative',\n  'input:focus ~ &': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '95%',\n    height: '95%',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: 'opacity 150ms ease',\n  },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const strokeColor = disabled\n    ? theme.palette.semantic.fill['fill-disabled']\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'];\n  const svgSize = size === 'small' ? 24 : 32;\n  const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillBackground}\n          r=\"9\"\n          stroke={strokeColor}\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const fillColor = disabled\n    ? theme.palette.action.disabled\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.fill['fill-selected'];\n  const svgSize = size === 'small' ? 24 : 32;\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillColor}\n          r=\"9\"\n          stroke={fillColor}\n          strokeWidth=\"1\"\n        />\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={theme.palette.semantic.fill['fill-inverse-strong']}\n          r=\"3\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  padding: 0,\n  '&:hover:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n  '&:active:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-press'],\n  },\n}));\n\n/** Props for a radio */\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** The size of the radio. */\n  size?: 'medium' | 'small';\n  /** Whether the radio is required. */\n  required?: boolean;\n  /** The identifier of the radio. */\n  fdKey?: string;\n  /** Whether the radio is in an error state. */\n  error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n  margin: 0,\n  position: 'relative',\n}));\n\n/**\n * Radio component is a wrapper component for a radio.\n *\n * @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n  disabled = false,\n  size = 'medium',\n  fdKey = 'basic-radio',\n  error = false,\n  checked,\n  ...props\n}: RadioProps): React.ReactElement => {\n  const isError = error && !disabled;\n\n  return (\n    <StyledRadioContainer>\n      <StyledRadio\n        disableFocusRipple\n        disableRipple\n        disableTouchRipple\n        checked={checked}\n        checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n        data-fd={fdKey}\n        disabled={disabled}\n        icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n        size={size}\n        {...props}\n      />\n    </StyledRadioContainer>\n  );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"yMAKA,MAAMA,EAAcC,EAAAA,OAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EAAQnB,EAAMK,QAAQC,SAASkB,KAAK,mBAAqBxB,EAAMK,QAAQC,SAASkB,KAAK,uBAC5G,OACEG,EAAAA,IAAC7B,EAAW,CAAA8B,SACVD,EAAAA,WAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAME,EACNM,EAAE,IACFzB,OAAQgB,EACRU,YAAY,WAQhBC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,EAAAA,WACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,MAAC7B,EAAW,CAAA8B,SACVS,EAAAA,KAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMW,EACNH,EAAE,IACFzB,OAAQ4B,EACRF,YAAY,MAEdN,EAAAA,IAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAClCQ,EAAE,YAQNM,EAAcvC,EAAAA,OAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAAA,OAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAAAA,IAACe,EAAoB,CAAAd,SACnBD,EAAAA,IAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAAAA,IAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAAAA,IAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}

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

@@ -1,23 +1,30 @@
-import { ReactNode } from 'react';
 import { RadioProps as RadioProps$1 } from '@mui/material/Radio';
 
+/** Props for a radio */
 type RadioProps = Omit<RadioProps$1, 'size'> & {
     /** Whether the radio is disabled. */
     disabled?: boolean;
     /** The size of the radio. */
     size?: 'medium' | 'small';
-    /** The label of the radio. */
-    label?: ReactNode;
     /** Whether the radio is required. */
     required?: boolean;
     /** The identifier of the radio. */
     fdKey?: string;
     /** Whether the radio is in an error state. */
     error?: boolean;
-    /** The children of the radio. */
-    children?: ReactNode;
 };
-declare const Radio: ({ disabled, size, label, fdKey, error, children, ...props }: RadioProps) => React.ReactElement;
+/**
+ * Radio component is a wrapper component for a radio.
+ *
+ * @param checked - Whether the radio is checked.
+ * @param size - The size of the radio.
+ * @param fdKey - The identifier of the radio.
+ * @param disabled - Whether the radio is disabled.
+ * @param error - Whether the radio is in an error state.
+ * @param props - Additional props to pass to the underlying MUI Radio component.
+ * @returns The Radio component.
+ */
+declare const Radio: ({ disabled, size, fdKey, error, checked, ...props }: RadioProps) => React.ReactElement;
 
-export { Radio as default };
+export { Radio, Radio as default };
 export type { RadioProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as i}from"react/jsx-runtime";import"react";import l from"@mui/material/Box";import t from"@mui/material/FormControlLabel";import r from"@mui/material/Radio";import{styled as a,useTheme as o}from"@mui/material/styles";const s=a("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),n=({error:e=!1,disabled:l=!1,size:t="medium"})=>{const r=o(),a=l?r.palette.semantic.fill["fill-disabled"]:e?r.palette.semantic.fill["fill-error-strong"]:r.palette.semantic.stroke["stroke-strong"],n="small"===t?24:32,d=e?r.palette.semantic.fill["fill-error-weak"]:r.palette.semantic.fill["fill-inverse-strong"];return i(s,{children:i("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:i("circle",{cx:"10",cy:"10",fill:d,r:"9",stroke:a,strokeWidth:"1"})})})},d=({error:l=!1,disabled:t=!1,size:r="medium"})=>{const a=o(),n=t?a.palette.action.disabled:l?a.palette.semantic.fill["fill-error-strong"]:a.palette.semantic.fill["fill-selected"],d="small"===r?24:32;return i(s,{children:e("svg",{fill:"none",height:d,viewBox:"0 0 20 20",width:d,children:[i("circle",{cx:"10",cy:"10",fill:n,r:"9",stroke:n,strokeWidth:"1"}),i("circle",{cx:"10",cy:"10",fill:a.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},c=a(r)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),p=a(l)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5)}))),m=a(t,{shouldForwardProp:e=>"disabled"!==e&&"error"!==e&&"size"!==e})((({theme:e,size:i="medium"})=>({columnGap:"small"===i?e.spacing(1):e.spacing(1.5),marginTop:e.spacing(2),marginLeft:e.spacing(0),"& .MuiFormControlLabel-label":{..."small"===i?{fontSize:"14px"}:{}}}))),f=a(l)((({theme:e})=>({position:"relative",display:"flex",flexDirection:"column",gap:e.spacing(.5),marginTop:e.spacing(1.5),paddingBottom:e.spacing(1),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25),borderLeft:`4px solid ${e.palette.divider}`,height:"76px"}))),u=({disabled:l=!1,size:t="medium",label:r,fdKey:a="basic-radio",error:o=!1,children:s,...u})=>{const g=o&&!l;return e(p,{children:[i(m,{control:i(c,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checkedIcon:i(d,{disabled:l,error:g,size:t}),"data-fd":a,disabled:l,icon:i(n,{disabled:l,error:g,size:t}),size:t,...u}),disabled:l,error:g,label:r||null,size:t}),s&&i(f,{children:s})]})};export{u as default};
+import{jsx as e,jsxs as i}from"react/jsx-runtime";import t from"@mui/material/Radio";import{styled as l,useTheme as r}from"@mui/material/styles";import o from"@mui/material/Box";const s=l("span")((({theme:e})=>({display:"inline-flex",borderRadius:"50%",position:"relative","input:focus ~ &":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"},"&::before":{content:'""',position:"absolute",top:"50%",left:"50%",transform:"translate(-50%, -50%)",width:"95%",height:"95%",borderRadius:"50%",pointerEvents:"none",opacity:0,transition:"opacity 150ms ease"}}))),a=({error:i=!1,disabled:t=!1,size:l="medium"})=>{const o=r(),a=t?o.palette.semantic.fill["fill-disabled"]:i?o.palette.semantic.fill["fill-error-strong"]:o.palette.semantic.stroke["stroke-strong"],n="small"===l?24:32,c=i?o.palette.semantic.fill["fill-error-weak"]:o.palette.semantic.fill["fill-inverse-strong"];return e(s,{children:e("svg",{fill:"none",height:n,viewBox:"0 0 20 20",width:n,children:e("circle",{cx:"10",cy:"10",fill:c,r:"9",stroke:a,strokeWidth:"1"})})})},n=({error:t=!1,disabled:l=!1,size:o="medium"})=>{const a=r(),n=l?a.palette.action.disabled:t?a.palette.semantic.fill["fill-error-strong"]:a.palette.semantic.fill["fill-selected"],c="small"===o?24:32;return e(s,{children:i("svg",{fill:"none",height:c,viewBox:"0 0 20 20",width:c,children:[e("circle",{cx:"10",cy:"10",fill:n,r:"9",stroke:n,strokeWidth:"1"}),e("circle",{cx:"10",cy:"10",fill:a.palette.semantic.fill["fill-inverse-strong"],r:"3"})]})})},c=l(t)((({theme:e})=>({padding:0,"&:hover:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:active:not(.Mui-disabled) span::before":{opacity:1,backgroundColor:e.palette.semantic.fill["fill-press"]}}))),d=l(o)((()=>({margin:0,position:"relative"}))),p=({disabled:i=!1,size:t="medium",fdKey:l="basic-radio",error:r=!1,checked:o,...s})=>{const p=r&&!i;return e(d,{children:e(c,{disableFocusRipple:!0,disableRipple:!0,disableTouchRipple:!0,checked:o,checkedIcon:e(n,{disabled:i,error:p,size:t}),"data-fd":l,disabled:i,icon:e(a,{disabled:i,error:p,size:t}),size:t,...s})})};export{p as Radio,p as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import { type ReactNode } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormControlLabel from '@mui/material/FormControlLabel';\nimport MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n  display: 'inline-flex',\n  borderRadius: '50%',\n  position: 'relative',\n  'input:focus ~ &': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '95%',\n    height: '95%',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: 'opacity 150ms ease',\n  },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const strokeColor = disabled\n    ? theme.palette.semantic.fill['fill-disabled']\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'];\n  const svgSize = size === 'small' ? 24 : 32;\n  const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillBackground}\n          r=\"9\"\n          stroke={strokeColor}\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const fillColor = disabled\n    ? theme.palette.action.disabled\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.fill['fill-selected'];\n  const svgSize = size === 'small' ? 24 : 32;\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillColor}\n          r=\"9\"\n          stroke={fillColor}\n          strokeWidth=\"1\"\n        />\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={theme.palette.semantic.fill['fill-inverse-strong']}\n          r=\"3\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  padding: 0,\n  '&:hover:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n  '&:active:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-press'],\n  },\n}));\n\n// Custom Radio props extending MUI Radio props\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** The size of the radio. */\n  size?: 'medium' | 'small';\n  /** The label of the radio. */\n  label?: ReactNode;\n  /** Whether the radio is required. */\n  required?: boolean;\n  /** The identifier of the radio. */\n  fdKey?: string;\n  /** Whether the radio is in an error state. */\n  error?: boolean;\n  /** The children of the radio. */\n  children?: ReactNode;\n};\n\nconst StyledContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n}));\n\n/** Styled FormControlLabel props */\ninterface StyledFormControlLabelProps {\n  disabled?: boolean;\n  error?: boolean;\n  size?: 'medium' | 'small';\n}\n\nconst StyledFormControlLabel = styled(MuiFormControlLabel, {\n  shouldForwardProp: (prop) => prop !== 'disabled' && prop !== 'error' && prop !== 'size',\n})<StyledFormControlLabelProps>(({ theme, size = 'medium' }) => ({\n  columnGap: size === 'small' ? theme.spacing(1) : theme.spacing(1.5), // 8px for small, 12px for medium\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(0),\n  '& .MuiFormControlLabel-label': {\n    ...(size === 'small'\n      ? { fontSize: '14px' }\n      : {}),\n  },\n}));\n\nconst StyledConditionalContainer = styled(Box)(({ theme }) => ({\n  position: 'relative',\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  marginTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n  borderLeft: `4px solid ${theme.palette.divider}`,\n  height: '76px',\n}));\n\nconst Radio = ({\n  disabled = false,\n  size = 'medium',\n  label,\n  fdKey = 'basic-radio',\n  error = false,\n  children,\n  ...props\n}: RadioProps): React.ReactElement => {\n  const isError = error && !disabled;\n\n  return (\n    <StyledContainer>\n      <StyledFormControlLabel\n        control={\n          <StyledRadio\n            disableFocusRipple\n            disableRipple\n            disableTouchRipple\n            checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n            data-fd={fdKey}\n            disabled={disabled}\n            icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n            size={size}\n            {...props}\n          />\n        }\n        disabled={disabled}\n        error={isError}\n        label={label || null}\n        size={size}\n      />\n\n      {children && (\n        <StyledConditionalContainer>\n          {children}\n        </StyledConditionalContainer>\n      )}\n    </StyledContainer>\n  );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledContainer","Box","flexDirection","gap","spacing","StyledFormControlLabel","MuiFormControlLabel","shouldForwardProp","prop","columnGap","marginTop","marginLeft","fontSize","StyledConditionalContainer","paddingBottom","paddingLeft","borderLeft","divider","Radio","label","fdKey","props","isError","control","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/Radio/index.tsx"],"sourcesContent":["import MuiRadio, { type RadioProps as MuiRadioProps } from '@mui/material/Radio';\nimport { styled, useTheme } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\n\nconst IconWrapper = styled('span')(({ theme }) => ({\n  display: 'inline-flex',\n  borderRadius: '50%',\n  position: 'relative',\n  'input:focus ~ &': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n  '&::before': {\n    content: '\"\"',\n    position: 'absolute',\n    top: '50%',\n    left: '50%',\n    transform: 'translate(-50%, -50%)',\n    width: '95%',\n    height: '95%',\n    borderRadius: '50%',\n    pointerEvents: 'none',\n    opacity: 0,\n    transition: 'opacity 150ms ease',\n  },\n}));\n\n// Custom unchecked icon - gray or red border circle\nconst RadioUncheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const strokeColor = disabled\n    ? theme.palette.semantic.fill['fill-disabled']\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.stroke['stroke-strong'];\n  const svgSize = size === 'small' ? 24 : 32;\n  const fillBackground = error ? theme.palette.semantic.fill['fill-error-weak'] : theme.palette.semantic.fill['fill-inverse-strong'];\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillBackground}\n          r=\"9\"\n          stroke={strokeColor}\n          strokeWidth=\"1\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Custom checked icon - blue or red filled circle with white center dot\nconst RadioCheckedIcon = ({\n  error = false,\n  disabled = false,\n  size = 'medium'\n}: {\n  error?: boolean;\n  disabled?: boolean;\n  size?: 'medium' | 'small';\n}): React.ReactElement => {\n  const theme = useTheme();\n  const fillColor = disabled\n    ? theme.palette.action.disabled\n    : error\n      ? theme.palette.semantic.fill['fill-error-strong']\n      : theme.palette.semantic.fill['fill-selected'];\n  const svgSize = size === 'small' ? 24 : 32;\n  return (\n    <IconWrapper>\n      <svg fill=\"none\" height={svgSize} viewBox=\"0 0 20 20\" width={svgSize}>\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={fillColor}\n          r=\"9\"\n          stroke={fillColor}\n          strokeWidth=\"1\"\n        />\n        <circle\n          cx=\"10\"\n          cy=\"10\"\n          fill={theme.palette.semantic.fill['fill-inverse-strong']}\n          r=\"3\"\n        />\n      </svg>\n    </IconWrapper>\n  );\n};\n\n// Styled Radio with custom icons\nconst StyledRadio = styled(MuiRadio)(({ theme }) => ({\n  padding: 0,\n  '&:hover:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n  '&:active:not(.Mui-disabled) span::before': {\n    opacity: 1,\n    backgroundColor: theme.palette.semantic.fill['fill-press'],\n  },\n}));\n\n/** Props for a radio */\nexport type RadioProps = Omit<MuiRadioProps, 'size'> & {\n  /** Whether the radio is disabled. */\n  disabled?: boolean;\n  /** The size of the radio. */\n  size?: 'medium' | 'small';\n  /** Whether the radio is required. */\n  required?: boolean;\n  /** The identifier of the radio. */\n  fdKey?: string;\n  /** Whether the radio is in an error state. */\n  error?: boolean;\n};\n\nconst StyledRadioContainer = styled(Box)(() => ({\n  margin: 0,\n  position: 'relative',\n}));\n\n/**\n * Radio component is a wrapper component for a radio.\n *\n * @param checked - Whether the radio is checked.\n * @param size - The size of the radio.\n * @param fdKey - The identifier of the radio.\n * @param disabled - Whether the radio is disabled.\n * @param error - Whether the radio is in an error state.\n * @param props - Additional props to pass to the underlying MUI Radio component.\n * @returns The Radio component.\n */\nexport const Radio = ({\n  disabled = false,\n  size = 'medium',\n  fdKey = 'basic-radio',\n  error = false,\n  checked,\n  ...props\n}: RadioProps): React.ReactElement => {\n  const isError = error && !disabled;\n\n  return (\n    <StyledRadioContainer>\n      <StyledRadio\n        disableFocusRipple\n        disableRipple\n        disableTouchRipple\n        checked={checked}\n        checkedIcon={<RadioCheckedIcon disabled={disabled} error={isError} size={size} />}\n        data-fd={fdKey}\n        disabled={disabled}\n        icon={<RadioUncheckedIcon disabled={disabled} error={isError} size={size} />}\n        size={size}\n        {...props}\n      />\n    </StyledRadioContainer>\n  );\n};\n\nexport default Radio;\n"],"names":["IconWrapper","styled","theme","display","borderRadius","position","outline","palette","semantic","stroke","outlineOffset","content","top","left","transform","width","height","pointerEvents","opacity","transition","RadioUncheckedIcon","error","disabled","size","useTheme","strokeColor","fill","svgSize","fillBackground","_jsx","children","viewBox","cx","cy","r","strokeWidth","RadioCheckedIcon","fillColor","action","_jsxs","StyledRadio","MuiRadio","padding","backgroundColor","StyledRadioContainer","Box","margin","Radio","fdKey","checked","props","isError","disableFocusRipple","disableRipple","disableTouchRipple","checkedIcon","icon"],"mappings":"kLAKA,MAAMA,EAAcC,EAAO,OAAPA,EAAe,EAAGC,YAAO,CAC3CC,QAAS,cACTC,aAAc,MACdC,SAAU,WACV,kBAAmB,CACjBC,QAAS,aAAaJ,EAAMK,QAAQC,SAASC,OAAO,kBACpDC,cAAe,OAEjB,YAAa,CACXC,QAAS,KACTN,SAAU,WACVO,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,MAAO,MACPC,OAAQ,MACRZ,aAAc,MACda,cAAe,OACfC,QAAS,EACTC,WAAY,0BAKVC,EAAqB,EACzBC,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRC,EAAcH,EAChBpB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BL,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASC,OAAO,iBAC9BkB,EAAmB,UAATJ,EAAmB,GAAK,GAClCK,EAAiBP,EAAQnB,EAAMK,QAAQC,SAASkB,KAAK,mBAAqBxB,EAAMK,QAAQC,SAASkB,KAAK,uBAC5G,OACEG,EAAC7B,EAAW,CAAA8B,SACVD,SAAKH,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,EAAOG,SAClED,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAME,EACNM,EAAE,IACFzB,OAAQgB,EACRU,YAAY,WAQhBC,EAAmB,EACvBf,SAAQ,EACRC,YAAW,EACXC,OAAO,aAMP,MAAMrB,EAAQsB,IACRa,EAAYf,EACdpB,EAAMK,QAAQ+B,OAAOhB,SACrBD,EACEnB,EAAMK,QAAQC,SAASkB,KAAK,qBAC5BxB,EAAMK,QAAQC,SAASkB,KAAK,iBAC5BC,EAAmB,UAATJ,EAAmB,GAAK,GACxC,OACEM,EAAC7B,EAAW,CAAA8B,SACVS,EAAA,MAAA,CAAKb,KAAK,OAAOV,OAAQW,EAASI,QAAQ,YAAYhB,MAAOY,YAC3DE,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMW,EACNH,EAAE,IACFzB,OAAQ4B,EACRF,YAAY,MAEdN,EAAA,SAAA,CACEG,GAAG,KACHC,GAAG,KACHP,KAAMxB,EAAMK,QAAQC,SAASkB,KAAK,uBAClCQ,EAAE,YAQNM,EAAcvC,EAAOwC,EAAPxC,EAAiB,EAAGC,YAAO,CAC7CwC,QAAS,EACT,0CAA2C,CACzCxB,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,eAE/C,2CAA4C,CAC1CR,QAAS,EACTyB,gBAAiBzC,EAAMK,QAAQC,SAASkB,KAAK,mBAkB3CkB,EAAuB3C,EAAO4C,EAAP5C,EAAY,KAAA,CACvC6C,OAAQ,EACRzC,SAAU,eAcC0C,EAAQ,EACnBzB,YAAW,EACXC,OAAO,SACPyB,QAAQ,cACR3B,SAAQ,EACR4B,aACGC,MAEH,MAAMC,EAAU9B,IAAUC,EAE1B,OACEO,EAACe,EAAoB,CAAAd,SACnBD,EAACW,EAAW,CACVY,oBAAkB,EAClBC,eAAa,EACbC,sBACAL,QAASA,EACTM,YAAa1B,EAACO,GAAiBd,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IAAQ,UACxEyB,EACT1B,SAAUA,EACVkC,KAAM3B,EAACT,EAAkB,CAACE,SAAUA,EAAUD,MAAO8B,EAAS5B,KAAMA,IACpEA,KAAMA,KACF2B"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("@mui/material/FormControlLabel");module.exports=r;
+"use strict";var e=require("react/jsx-runtime"),a=require("react"),r=require("@mui/material/FormControlLabel");module.exports=({size:l="medium",control:t,label:i,disabled:s,value:o,children:d,className:u,"data-fd-variant":c,...n})=>{const m=a.cloneElement(t,{...t.props,size:l,disabled:s,value:o}),b=`MuiFormControlLabel-size${l.charAt(0).toUpperCase()+l.slice(1)}`,v=u?`${b} ${u}`:b;return e.jsx(r,{className:v,control:m,"data-fd-variant":c,disabled:s,label:i,value:o,...n})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/FormControlLabel/index.tsx"],"sourcesContent":["import { cloneElement, type ReactElement } from 'react';\n\nimport MuiFormControlLabel, { type FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material/FormControlLabel';\n\n/** Props for a form control label */\nexport interface FormControlLabelProps extends Omit<MuiFormControlLabelProps, 'control' | 'label' | 'size'> {\n  /** The control of the form control label. */\n  control: ReactElement;\n  /** The label of the form control label. */\n  label: React.ReactNode;\n  /** The value of the form control label. */\n  value: unknown;\n  /** The identifier of the form control label. */\n  fdKey?: string;\n  /** The size of the form control label. */\n  size?: 'medium' | 'small';\n  /** The children of the form control label. */\n  children?: React.ReactNode;\n  /** The class name of the form control label. */\n  className?: string;\n  /** The data-fd-variant of the form control label. */\n  'data-fd-variant'?: string;\n  /** Whether the form control label is disabled. */\n  disabled?: boolean;\n}\n\nconst FormControlLabel = ({ size = 'medium', control, label, disabled, value, children, className, 'data-fd-variant': dataFdVariant, ...props }: FormControlLabelProps): ReactElement => {\n  // Clone the control element and pass props to it\n  const controlWithProps = cloneElement(control, {\n    ...(control.props as Record<string, unknown>),\n    size,\n    disabled,\n    value,\n  } as Partial<unknown>);\n\n  const sizeClassName = `MuiFormControlLabel-size${size.charAt(0).toUpperCase() + size.slice(1)}`;\n  const mergedClassName = className ? `${sizeClassName} ${className}` : sizeClassName;\n\n  return (\n    <MuiFormControlLabel\n      className={mergedClassName}\n      control={controlWithProps}\n      data-fd-variant={dataFdVariant}\n      disabled={disabled}\n      label={label}\n      value={value}\n      {...props}\n    />\n  );\n};\n\n/**\n * FormControlLabel component is a wrapper component for a form control label.\n *\n * @param props - The props of the form control label.\n * @returns The FormControlLabel component.\n */\nexport default FormControlLabel;"],"names":["size","control","label","disabled","value","children","className","dataFdVariant","props","controlWithProps","cloneElement","sizeClassName","charAt","toUpperCase","slice","mergedClassName","_jsx","MuiFormControlLabel"],"mappings":"8HA0ByB,EAAGA,OAAO,SAAUC,UAASC,QAAOC,WAAUC,QAAOC,WAAUC,YAAW,kBAAmBC,KAAkBC,MAEtI,MAAMC,EAAmBC,EAAAA,aAAaT,EAAS,IACzCA,EAAQO,MACZR,OACAG,WACAC,UAGIO,EAAgB,2BAA2BX,EAAKY,OAAO,GAAGC,cAAgBb,EAAKc,MAAM,KACrFC,EAAkBT,EAAY,GAAGK,KAAiBL,IAAcK,EAEtE,OACEK,EAAAA,IAACC,EAAmB,CAClBX,UAAWS,EACXd,QAASQ,EAAgB,kBACRF,EACjBJ,SAAUA,EACVD,MAAOA,EACPE,MAAOA,KACHI"}

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

@@ -1,2 +1,28 @@
-import FormControlLabel from '@mui/material/FormControlLabel';
-export { default } from '@mui/material/FormControlLabel';
+import { ReactElement } from 'react';
+import { FormControlLabelProps as FormControlLabelProps$1 } from '@mui/material/FormControlLabel';
+
+/** Props for a form control label */
+interface FormControlLabelProps extends Omit<FormControlLabelProps$1, 'control' | 'label' | 'size'> {
+    /** The control of the form control label. */
+    control: ReactElement;
+    /** The label of the form control label. */
+    label: React.ReactNode;
+    /** The value of the form control label. */
+    value: unknown;
+    /** The identifier of the form control label. */
+    fdKey?: string;
+    /** The size of the form control label. */
+    size?: 'medium' | 'small';
+    /** The children of the form control label. */
+    children?: React.ReactNode;
+    /** The class name of the form control label. */
+    className?: string;
+    /** The data-fd-variant of the form control label. */
+    'data-fd-variant'?: string;
+    /** Whether the form control label is disabled. */
+    disabled?: boolean;
+}
+declare const FormControlLabel: ({ size, control, label, disabled, value, children, className, "data-fd-variant": dataFdVariant, ...props }: FormControlLabelProps) => ReactElement;
+
+export { FormControlLabel as default };
+export type { FormControlLabelProps };

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

@@ -1,2 +1,2 @@
-import o from"@mui/material/FormControlLabel";export{default}from"@mui/material/FormControlLabel";
+import{jsx as a}from"react/jsx-runtime";import{cloneElement as e}from"react";import r from"@mui/material/FormControlLabel";const l=({size:l="medium",control:t,label:o,disabled:i,value:s,children:m,className:d,"data-fd-variant":c,...n})=>{const u=e(t,{...t.props,size:l,disabled:i,value:s}),p=`MuiFormControlLabel-size${l.charAt(0).toUpperCase()+l.slice(1)}`;return a(r,{className:d?`${p} ${d}`:p,control:u,"data-fd-variant":c,disabled:i,label:o,value:s,...n})};export{l as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/FormControlLabel/index.tsx"],"sourcesContent":["import { cloneElement, type ReactElement } from 'react';\n\nimport MuiFormControlLabel, { type FormControlLabelProps as MuiFormControlLabelProps } from '@mui/material/FormControlLabel';\n\n/** Props for a form control label */\nexport interface FormControlLabelProps extends Omit<MuiFormControlLabelProps, 'control' | 'label' | 'size'> {\n  /** The control of the form control label. */\n  control: ReactElement;\n  /** The label of the form control label. */\n  label: React.ReactNode;\n  /** The value of the form control label. */\n  value: unknown;\n  /** The identifier of the form control label. */\n  fdKey?: string;\n  /** The size of the form control label. */\n  size?: 'medium' | 'small';\n  /** The children of the form control label. */\n  children?: React.ReactNode;\n  /** The class name of the form control label. */\n  className?: string;\n  /** The data-fd-variant of the form control label. */\n  'data-fd-variant'?: string;\n  /** Whether the form control label is disabled. */\n  disabled?: boolean;\n}\n\nconst FormControlLabel = ({ size = 'medium', control, label, disabled, value, children, className, 'data-fd-variant': dataFdVariant, ...props }: FormControlLabelProps): ReactElement => {\n  // Clone the control element and pass props to it\n  const controlWithProps = cloneElement(control, {\n    ...(control.props as Record<string, unknown>),\n    size,\n    disabled,\n    value,\n  } as Partial<unknown>);\n\n  const sizeClassName = `MuiFormControlLabel-size${size.charAt(0).toUpperCase() + size.slice(1)}`;\n  const mergedClassName = className ? `${sizeClassName} ${className}` : sizeClassName;\n\n  return (\n    <MuiFormControlLabel\n      className={mergedClassName}\n      control={controlWithProps}\n      data-fd-variant={dataFdVariant}\n      disabled={disabled}\n      label={label}\n      value={value}\n      {...props}\n    />\n  );\n};\n\n/**\n * FormControlLabel component is a wrapper component for a form control label.\n *\n * @param props - The props of the form control label.\n * @returns The FormControlLabel component.\n */\nexport default FormControlLabel;"],"names":["FormControlLabel","size","control","label","disabled","value","children","className","dataFdVariant","props","controlWithProps","cloneElement","sizeClassName","charAt","toUpperCase","slice","_jsx","MuiFormControlLabel"],"mappings":"2HA0BA,MAAMA,EAAmB,EAAGC,OAAO,SAAUC,UAASC,QAAOC,WAAUC,QAAOC,WAAUC,YAAW,kBAAmBC,KAAkBC,MAEtI,MAAMC,EAAmBC,EAAaT,EAAS,IACzCA,EAAQO,MACZR,OACAG,WACAC,UAGIO,EAAgB,2BAA2BX,EAAKY,OAAO,GAAGC,cAAgBb,EAAKc,MAAM,KAG3F,OACEC,EAACC,EAAmB,CAClBV,UAJoBA,EAAY,GAAGK,KAAiBL,IAAcK,EAKlEV,QAASQ,EAAgB,kBACRF,EACjBJ,SAAUA,EACVD,MAAOA,EACPE,MAAOA,KACHI"}

package/dist/components/molecules/RadioGroup/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"),a=require("@mui/material/FormLabel"),t=require("@mui/material/RadioGroup"),n=require("@mui/material/styles"),s=require("../../../icons/CancelCircle/index.cjs.js"),o=require("../../atoms/Radio/index.cjs.js");const d=n.styled(i)((({theme:e})=>({marginBottom:e.spacing(0)}))),m=n.styled(i)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),c=n.styled("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)})));module.exports=({fdKey:n="radio-default",value:u="",onChange:x,label:h,required:j=!1,helperText:p,errorText:v,options:q,...g})=>{const y=`${n}-label`,b=p?`${n}-helper`:void 0,f=v?`${n}-error`:void 0,B=[b,f].filter(Boolean).join(" ")||void 0;return e.jsxs(i,{children:[e.jsxs(m,{children:[e.jsxs(a,{id:y,children:[h," ",j&&e.jsx(c,{children:" *"})]}),p?e.jsx(l,{id:b,children:p}):null,!!v&&e.jsxs(l,{error:!0,id:f,children:[e.jsx(s,{size:"md"}),v]})]}),e.jsx(t,{"aria-describedby":B,"aria-invalid":!!v||void 0,"aria-labelledby":y,name:n,onChange:(e,r)=>x(r),value:u,...g,children:q.map((i=>{const l=u===i.value,{value:a,children:t,...s}=i,m=l&&t?r.isValidElement(t)?r.cloneElement(t,{required:j,error:!!v}):t:void 0;return e.jsx(d,{children:e.jsx(o,{...s,error:!!v,name:n,value:a,children:m})},a)}))})]})};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/FormHelperText"),l=require("@mui/material/FormLabel"),a=require("@mui/material/RadioGroup"),t=require("@mui/material/styles"),n=require("@mui/material/Box");require("@mui/material/FormControlLabel");var o=require("../../../icons/CancelCircle/index.cjs.js");const s=t.styled(n)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),d=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),c=t.styled(n)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),m=t.styled("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),u=({fdKey:t="radio-default",value:u="",onChange:p,label:x,required:h=!1,helperText:g,errorText:f,children:j,...v})=>{const y=`${t}-label`,b=g?`${t}-helper`:void 0,q=f?`${t}-error`:void 0,C=[b,q].filter(Boolean).join(" ")||void 0;return e.jsxs(n,{children:[e.jsxs(d,{children:[e.jsxs(l,{id:y,children:[x," ",h&&e.jsx(m,{children:" *"})]}),g?e.jsx(i,{id:b,children:g}):null,!!f&&e.jsxs(i,{error:!0,id:q,children:[e.jsx(o,{size:"md"}),f]})]}),e.jsx(a,{"aria-describedby":C,"aria-invalid":!!f||void 0,"aria-labelledby":y,name:t,onChange:(e,r)=>p(e,r),value:u,...v,children:r.Children.map(j,(i=>{if(!r.isValidElement(i))return i;const l=i.props;if(!("value"in l)||!("control"in l))return i;const a=l,n="string"==typeof a.value?a.value:String(a.value??""),o=u===n,d=a.control,m=a.children,p=r.isValidElement(d)?r.cloneElement(d,{...d.props,checked:o,error:!!f,name:t}):d;return e.jsxs(s,{children:[r.cloneElement(i,{...a,children:void 0,control:p}),o&&m&&e.jsx(c,{children:m})]},n)}))})]})};exports.RadioGroup=u,exports.default=u;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport Radio, { type RadioProps } from '../../atoms/Radio';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...({ marginBottom: theme.spacing(0) }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\nexport type RadioOption = Omit<\n  RadioProps,\n  'aria-describedby' | 'checked' | 'name' | 'onChange' | 'required'\n> & {\n  value: string;\n};\n\nexport interface RadioGroupProps\n  extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the newly selected value. */\n  onChange: (value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** Collection of radio options to render; each item maps to a Radio component. */\n  options: RadioOption[];\n}\n\nconst RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  options,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (_e, newVal) => onChange(newVal);\n\n  return (\n    <Box>\n\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? (\n          <MuiFormHelperText id={helperId}>\n            {helperText}\n          </MuiFormHelperText>\n        ) : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={\"md\"} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {options.map((opt) => {\n          const isSelected = (value) === opt.value;\n          const { value: optionValue, children, ...radioProps } = opt;\n\n          // Clone children and pass required/error props when selected\n          const enhancedChildren = isSelected && children\n            ? isValidElement(children)\n              ? React.cloneElement(children, { required, error: !!errorText } as Partial<unknown>)\n              : children\n            : undefined;\n\n          return (\n            <StyledBox key={optionValue}>\n              <Radio\n                {...radioProps}\n                error={!!errorText}\n                name={fdKey}\n                value={optionValue}>\n                {enhancedChildren}\n              </Radio>\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginBottom","spacing","StyledLabelContainer","display","flexDirection","WeakText","color","palette","semantic","text","marginLeft","fdKey","value","onChange","label","required","helperText","errorText","options","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","children","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","_e","newVal","map","opt","isSelected","optionValue","radioProps","enhancedChildren","isValidElement","React","cloneElement","Radio"],"mappings":"2VAYA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,aAAcD,EAAME,QAAQ,OAG9BC,EAAuBL,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDI,QAAS,OACTC,cAAe,SACfJ,aAAcD,EAAME,QAAQ,QAGxBI,EAAWR,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCO,MAAOP,EAAMQ,QAAQC,SAASC,KAAK,aACnCC,WAAYX,EAAME,QAAQ,uBA8BT,EACjBU,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,aACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAAC9B,EAAG,CAAA+B,SAAA,CAEFD,OAAC1B,EAAoB,CAAA2B,SAAA,CACnBD,EAAAA,KAACE,EAAS,CAACC,GAAIX,EAAOS,SAAA,CACnBf,EAAK,IAAGC,GAAYiB,EAAAA,IAAC3B,EAAQ,CAAAwB,SAAE,UAEjCb,EACCgB,EAAAA,IAACC,EAAiB,CAACF,GAAIV,EAAQQ,SAC5Bb,IAED,OAEDC,GACDW,EAAAA,KAACK,EAAiB,CAACC,OAAK,EAACH,GAAIR,EAAOM,SAAA,CAClCG,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBnB,QAMPe,EAAAA,IAACK,EAAa,CAAA,mBACMb,mBACJP,QAAmBK,EAAS,kBACzBF,EACjBkB,KAAM3B,EACNE,SA7B+C,CAAC0B,EAAIC,IAAW3B,EAAS2B,GA8BxE5B,MAAOA,KACHO,EAAUU,SAEbX,EAAQuB,KAAKC,IACZ,MAAMC,EAAa,IAAYD,EAAI9B,OAC3BA,MAAOgC,EAAWf,SAAEA,KAAagB,GAAeH,EAGlDI,EAAmBH,GAAcd,EACnCkB,EAAAA,eAAelB,GACbmB,EAAMC,aAAapB,EAAU,CAAEd,WAAUmB,QAASjB,IAClDY,OACFP,EAEJ,OACEU,EAAAA,IAACpC,EAAS,CAAAiC,SACRG,EAAAA,IAACkB,EAAK,IACAL,EACJX,QAASjB,EACTqB,KAAM3B,EACNC,MAAOgC,EAAWf,SACjBiB,KANWF"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps\n  extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? (\n          <MuiFormHelperText id={helperId}>\n            {helperText}\n          </MuiFormHelperText>\n        ) : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={\"md\"} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n              ...(radioControl.props as Record<string, unknown>),\n              checked: isSelected,\n              error: !!errorText,\n              name: fdKey,\n            } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>\n                  {optionConditionalChildren}\n                </ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG7CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAuCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAAA,KAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EACCe,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAC5BF,IAED,OAEDC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,oBAChBF,EACjBiB,KAAM1B,EACNE,SA5B+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GA6B1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EAAoD,iBAAhCD,EAAsBnC,MAAqBmC,EAAsBnC,MAAQqC,OAAOF,EAAsBnC,OAAS,IACnIsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC7BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAENwC,EAEJ,OACEvB,EAAAA,KAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAAA,IAAChC,EAAoB,CAAAmB,SAClBmC,MAVSL"}

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

@@ -1,17 +1,14 @@
 import react__default from 'react';
 import { RadioGroupProps as RadioGroupProps$1 } from '@mui/material/RadioGroup';
-import { RadioProps } from '../../atoms/Radio/index.js';
 
-type RadioOption = Omit<RadioProps, 'aria-describedby' | 'checked' | 'name' | 'onChange' | 'required'> & {
-    value: string;
-};
+/** Props for a radio group */
 interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' | 'value'> {
     /** Identifier applied to the radio group; also used for the radio name attribute. */
     fdKey?: string;
     /** Currently selected option value; use null or undefined when no option should be selected. */
     value?: string | null;
-    /** Callback fired whenever the selection changes with the newly selected value. */
-    onChange: (value: string) => void;
+    /** Callback fired whenever the selection changes with the event and newly selected value. */
+    onChange: (event: react__default.ChangeEvent<HTMLInputElement>, value: string) => void;
     /** Label rendered above the group; accepts plain text or a custom node. */
     label: react__default.ReactNode;
     /** Marks the radio group as required and surfaces the required indicator. */
@@ -20,10 +17,24 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
     helperText?: string;
     /** Error message shown below the helper text and marks the inputs as invalid. */
     errorText?: string;
-    /** Collection of radio options to render; each item maps to a Radio component. */
-    options: RadioOption[];
+    /** The children of the radio group. */
+    children?: react__default.ReactNode;
 }
-declare const RadioGroup: ({ fdKey, value, onChange, label, required, helperText, errorText, options, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
+/**
+ * RadioGroup component is a wrapper component for a radio group.
+ *
+ * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.
+ * @param value - Currently selected option value; use null or undefined when no option should be selected.
+ * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.
+ * @param label - Label rendered above the group; accepts plain text or a custom node.
+ * @param required - Marks the radio group as required and surfaces the required indicator.
+ * @param helperText - Helper text displayed below the label to provide additional guidance.
+ * @param errorText - Error message shown below the helper text and marks the inputs as invalid.
+ * @param children - The children of the radio group.
+ * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.
+ * @returns The RadioGroup component.
+ */
+declare const RadioGroup: ({ fdKey, value, onChange, label, required, helperText, errorText, children, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
 
-export { RadioGroup as default };
-export type { RadioGroupProps, RadioOption };
+export { RadioGroup, RadioGroup as default };
+export type { RadioGroupProps };

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

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import a from"@mui/material/Box";import l from"@mui/material/FormHelperText";import t from"@mui/material/FormLabel";import m from"@mui/material/RadioGroup";import{styled as n}from"@mui/material/styles";import d from"../../../icons/CancelCircle/index.js";import c from"../../atoms/Radio/index.js";const p=n(a)((({theme:e})=>({marginBottom:e.spacing(0)}))),s=n(a)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),u=n("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),h=({fdKey:n="radio-default",value:h="",onChange:f,label:x,required:v=!1,helperText:g,errorText:b,options:y,...j})=>{const B=`${n}-label`,C=g?`${n}-helper`:void 0,T=b?`${n}-error`:void 0,$=[C,T].filter(Boolean).join(" ")||void 0;return e(a,{children:[e(s,{children:[e(t,{id:B,children:[x," ",v&&r(u,{children:" *"})]}),g?r(l,{id:C,children:g}):null,!!b&&e(l,{error:!0,id:T,children:[r(d,{size:"md"}),b]})]}),r(m,{"aria-describedby":$,"aria-invalid":!!b||void 0,"aria-labelledby":B,name:n,onChange:(e,r)=>f(r),value:h,...j,children:y.map((e=>{const a=h===e.value,{value:l,children:t,...m}=e,d=a&&t?o(t)?i.cloneElement(t,{required:v,error:!!b}):t:void 0;return r(p,{children:r(c,{...m,error:!!b,name:n,value:l,children:d})},l)}))})]})};export{h as default};
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import i,{isValidElement as o}from"react";import t from"@mui/material/FormHelperText";import a from"@mui/material/FormLabel";import n from"@mui/material/RadioGroup";import{styled as l}from"@mui/material/styles";import m from"@mui/material/Box";import"@mui/material/FormControlLabel";import c from"../../../icons/CancelCircle/index.js";const d=l(m)((({theme:e})=>({marginTop:e.spacing(2),marginBottom:0}))),p=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",marginBottom:e.spacing(.5)}))),s=l(m)((({theme:e})=>({display:"flex",flexDirection:"column",gap:e.spacing(.5),borderLeft:`4px solid ${e.palette.semantic.stroke["stroke-weak"]}`,marginTop:e.spacing(2),marginLeft:e.spacing(1.75),paddingLeft:e.spacing(3.25)}))),u=l("span")((({theme:e})=>({color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(.5)}))),f=({fdKey:l="radio-default",value:f="",onChange:h,label:g,required:x=!1,helperText:v,errorText:b,children:y,...C})=>{const L=`${l}-label`,k=v?`${l}-helper`:void 0,T=b?`${l}-error`:void 0,B=[k,T].filter(Boolean).join(" ")||void 0;return e(m,{children:[e(p,{children:[e(a,{id:L,children:[g," ",x&&r(u,{children:" *"})]}),v?r(t,{id:k,children:v}):null,!!b&&e(t,{error:!0,id:T,children:[r(c,{size:"md"}),b]})]}),r(n,{"aria-describedby":B,"aria-invalid":!!b||void 0,"aria-labelledby":L,name:l,onChange:(e,r)=>h(e,r),value:f,...C,children:i.Children.map(y,(t=>{if(!o(t))return t;const a=t.props;if(!("value"in a)||!("control"in a))return t;const n=a,m="string"==typeof n.value?n.value:String(n.value??""),c=f===m,p=n.control,u=n.children,h=o(p)?i.cloneElement(p,{...p.props,checked:c,error:!!b,name:l}):p;return e(d,{children:[i.cloneElement(t,{...n,children:void 0,control:h}),c&&u&&r(s,{children:u})]},m)}))})]})};export{f as RadioGroup,f as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement } from 'react';\n\nimport Box from '@mui/material/Box';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nimport Radio, { type RadioProps } from '../../atoms/Radio';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...({ marginBottom: theme.spacing(0) }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\nexport type RadioOption = Omit<\n  RadioProps,\n  'aria-describedby' | 'checked' | 'name' | 'onChange' | 'required'\n> & {\n  value: string;\n};\n\nexport interface RadioGroupProps\n  extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the newly selected value. */\n  onChange: (value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** Collection of radio options to render; each item maps to a Radio component. */\n  options: RadioOption[];\n}\n\nconst RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  options,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (_e, newVal) => onChange(newVal);\n\n  return (\n    <Box>\n\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? (\n          <MuiFormHelperText id={helperId}>\n            {helperText}\n          </MuiFormHelperText>\n        ) : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={\"md\"} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {options.map((opt) => {\n          const isSelected = (value) === opt.value;\n          const { value: optionValue, children, ...radioProps } = opt;\n\n          // Clone children and pass required/error props when selected\n          const enhancedChildren = isSelected && children\n            ? isValidElement(children)\n              ? React.cloneElement(children, { required, error: !!errorText } as Partial<unknown>)\n              : children\n            : undefined;\n\n          return (\n            <StyledBox key={optionValue}>\n              <Radio\n                {...radioProps}\n                error={!!errorText}\n                name={fdKey}\n                value={optionValue}>\n                {enhancedChildren}\n              </Radio>\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginBottom","spacing","StyledLabelContainer","display","flexDirection","WeakText","color","palette","semantic","text","marginLeft","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","options","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","children","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","_e","newVal","map","opt","isSelected","optionValue","radioProps","enhancedChildren","isValidElement","React","cloneElement","Radio"],"mappings":"oYAYA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,aAAcD,EAAME,QAAQ,OAG9BC,EAAuBL,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDI,QAAS,OACTC,cAAe,SACfJ,aAAcD,EAAME,QAAQ,QAGxBI,EAAWR,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCO,MAAOP,EAAMQ,QAAQC,SAASC,KAAK,aACnCC,WAAYX,EAAME,QAAQ,QA8BtBU,EAAa,EACjBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,aACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAC/B,EAAG,CAAAgC,SAAA,CAEFD,EAAC3B,EAAoB,CAAA4B,SAAA,CACnBD,EAACE,EAAS,CAACC,GAAIX,EAAOS,SAAA,CACnBf,EAAK,IAAGC,GAAYiB,EAAC5B,EAAQ,CAAAyB,SAAE,UAEjCb,EACCgB,EAACC,EAAiB,CAACF,GAAIV,EAAQQ,SAC5Bb,IAED,OAEDC,GACDW,EAACK,EAAiB,CAACC,OAAK,EAACH,GAAIR,EAAOM,SAAA,CAClCG,EAACG,EAAgB,CAACC,KAAM,OACvBnB,QAMPe,EAACK,EAAa,CAAA,mBACMb,mBACJP,QAAmBK,EAAS,kBACzBF,EACjBkB,KAAM3B,EACNE,SA7B+C,CAAC0B,EAAIC,IAAW3B,EAAS2B,GA8BxE5B,MAAOA,KACHO,EAAUU,SAEbX,EAAQuB,KAAKC,IACZ,MAAMC,EAAa,IAAYD,EAAI9B,OAC3BA,MAAOgC,EAAWf,SAAEA,KAAagB,GAAeH,EAGlDI,EAAmBH,GAAcd,EACnCkB,EAAelB,GACbmB,EAAMC,aAAapB,EAAU,CAAEd,WAAUmB,QAASjB,IAClDY,OACFP,EAEJ,OACEU,EAACrC,EAAS,CAAAkC,SACRG,EAACkB,EAAK,IACAL,EACJX,QAASjB,EACTqB,KAAM3B,EACNC,MAAOgC,EAAWf,SACjBiB,KANWF"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...({ marginTop: theme.spacing(2), marginBottom: 0 }),\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps\n  extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? (\n          <MuiFormHelperText id={helperId}>\n            {helperText}\n          </MuiFormHelperText>\n        ) : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={\"md\"} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue = typeof formControlLabelProps.value === 'string' ? formControlLabelProps.value : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n              ...(radioControl.props as Record<string, unknown>),\n              checked: isSelected,\n              error: !!errorText,\n              name: fdKey,\n            } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>\n                  {optionConditionalChildren}\n                </ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n}\n\nexport default RadioGroup;"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","name","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CAChCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG7CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAuCfgB,EAAa,EACxBC,QAAQ,gBACRC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAGH,MAAMC,EAAU,GAAGT,UACbU,EAAWL,EAAa,GAAGL,gBAAiBW,EAC5CC,EAAUN,EAAY,GAAGN,eAAgBW,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACrC,EAAG,CAAA2B,SAAA,CACFU,EAAChC,EAAoB,CAAAsB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACxB,EAAQ,CAAAW,SAAE,UAEjCF,EACCe,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAC5BF,IAED,OAEDC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,oBAChBF,EACjBiB,KAAM1B,EACNE,SA5B+C,CAACyB,EAAGC,IAAW1B,EAASyB,EAAGC,GA6B1E3B,MAAOA,KACHO,EAAUD,SAEbsB,EAAMC,SAASC,IAAIxB,GAAWyB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EAAoD,iBAAhCD,EAAsBnC,MAAqBmC,EAAsBnC,MAAQqC,OAAOF,EAAsBnC,OAAS,IACnIsC,EAAatC,IAAUoC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB7B,SAGlDoC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC7BA,EAAaL,MACjBU,QAASN,EACTjB,QAAShB,EACToB,KAAM1B,IAENwC,EAEJ,OACEvB,EAACvC,EAAS,CAAA6B,SAAA,CACPsB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH7B,cAAUI,EACV8B,QAASE,IAIVJ,GAAcG,GACbtB,EAAChC,EAAoB,CAAAmB,SAClBmC,MAVSL"}

package/dist/themes/overrides/formControlLabelOverrides.cjs.js

@@ -1,2 +1,2 @@
-"use strict";require("@mui/material/styles");var t=require("../tokens/typography/font-family.cjs.js"),e=require("../typography.cjs.js");exports.formControlLabelOverrides=o=>({styleOverrides:{root:{"& .MuiTypography-root":{...e.typography.b1Weak,[o.breakpoints.down("tablet")]:{fontFamily:t.fontFamily.mobile.body,...e.getMobileTextStyle("b1")}},"& .MuiFormControlLabel-label":{color:o.palette.semantic.text["text-strong"]},"& .Mui-disabled":{color:`${o.palette.semantic.text["text-disabled"]} !important`}}}});
+"use strict";require("@mui/material/styles");var e=require("../tokens/typography/font-family.cjs.js"),t=require("../typography.cjs.js");exports.formControlLabelOverrides=o=>({styleOverrides:{root:{padding:0,marginLeft:0,"& .MuiTypography-root":{...t.typography.b1Weak,[o.breakpoints.down("tablet")]:{fontFamily:e.fontFamily.mobile.body,...t.getMobileTextStyle("b1")}},"& .MuiFormControlLabel-label":{color:o.palette.semantic.text["text-strong"]},"& .Mui-disabled":{color:`${o.palette.semantic.text["text-disabled"]} !important`},"&.MuiFormControlLabel-sizeSmall":{columnGap:o.spacing(1)},"&.MuiFormControlLabel-sizeMedium":{columnGap:o.spacing(1.5)},'&[data-fd-variant="radio"]':{"&.MuiFormControlLabel-sizeSmall":{"& .MuiFormControlLabel-label":{fontSize:"14px"}}}}}});
 //# sourceMappingURL=formControlLabelOverrides.cjs.js.map

package/dist/themes/overrides/formControlLabelOverrides.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"formControlLabelOverrides.cjs.js","sources":["../../../src/themes/overrides/formControlLabelOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\nexport const formControlLabelOverrides = (baseTheme: Theme): Components<Theme>['MuiFormControlLabel'] => ({\n  styleOverrides: {\n    root: {\n      '& .MuiTypography-root': {\n        ...typography.b1Weak,\n        [baseTheme.breakpoints.down('tablet')]: {\n          fontFamily: fontFamily.mobile.body,\n          ...getMobileTextStyle('b1'),\n        },\n      },\n      '& .MuiFormControlLabel-label': {\n        color: baseTheme.palette.semantic.text['text-strong'],\n      },\n      '& .Mui-disabled': {\n        color: `${baseTheme.palette.semantic.text['text-disabled']} !important`,\n      },\n    },\n  },\n});"],"names":["baseTheme","styleOverrides","root","typography","b1Weak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","color","palette","semantic","text"],"mappings":"0KAK0CA,IAAgB,CACxDC,eAAgB,CACdC,KAAM,CACJ,wBAAyB,IACpBC,EAAAA,WAAWC,OACd,CAACJ,EAAUK,YAAYC,KAAK,WAAY,CACtCC,WAAYA,EAAAA,WAAWC,OAAOC,QAC3BC,EAAAA,mBAAmB,QAG1B,+BAAgC,CAC9BC,MAAOX,EAAUY,QAAQC,SAASC,KAAK,gBAEzC,kBAAmB,CACjBH,MAAO,GAAGX,EAAUY,QAAQC,SAASC,KAAK"}
+{"version":3,"file":"formControlLabelOverrides.cjs.js","sources":["../../../src/themes/overrides/formControlLabelOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\nexport const formControlLabelOverrides = (baseTheme: Theme): Components<Theme>['MuiFormControlLabel'] => ({\n  styleOverrides: {\n    root: {\n      padding: 0,\n      marginLeft: 0,\n      '& .MuiTypography-root': {\n        ...typography.b1Weak,\n        [baseTheme.breakpoints.down('tablet')]: {\n          fontFamily: fontFamily.mobile.body,\n          ...getMobileTextStyle('b1'),\n        },\n      },\n      '& .MuiFormControlLabel-label': {\n        color: baseTheme.palette.semantic.text['text-strong'],\n      },\n      '& .Mui-disabled': {\n        color: `${baseTheme.palette.semantic.text['text-disabled']} !important`,\n      },\n      '&.MuiFormControlLabel-sizeSmall': {\n        columnGap: baseTheme.spacing(1),\n      },\n      '&.MuiFormControlLabel-sizeMedium': {\n        columnGap: baseTheme.spacing(1.5),\n      },\n      '&[data-fd-variant=\"radio\"]': {\n        '&.MuiFormControlLabel-sizeSmall': {\n          '& .MuiFormControlLabel-label': {\n            fontSize: '14px',\n          },\n        },\n      },\n    },\n  },\n});"],"names":["baseTheme","styleOverrides","root","padding","marginLeft","typography","b1Weak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","color","palette","semantic","text","columnGap","spacing","fontSize"],"mappings":"0KAK0CA,IAAgB,CACxDC,eAAgB,CACdC,KAAM,CACJC,QAAS,EACTC,WAAY,EACZ,wBAAyB,IACpBC,EAAAA,WAAWC,OACd,CAACN,EAAUO,YAAYC,KAAK,WAAY,CACtCC,WAAYA,EAAAA,WAAWC,OAAOC,QAC3BC,EAAAA,mBAAmB,QAG1B,+BAAgC,CAC9BC,MAAOb,EAAUc,QAAQC,SAASC,KAAK,gBAEzC,kBAAmB,CACjBH,MAAO,GAAGb,EAAUc,QAAQC,SAASC,KAAK,+BAE5C,kCAAmC,CACjCC,UAAWjB,EAAUkB,QAAQ,IAE/B,mCAAoC,CAClCD,UAAWjB,EAAUkB,QAAQ,MAE/B,6BAA8B,CAC5B,kCAAmC,CACjC,+BAAgC,CAC9BC,SAAU"}

package/dist/themes/overrides/formControlLabelOverrides.js

@@ -1,2 +1,2 @@
-import"@mui/material/styles";import{fontFamily as t}from"../tokens/typography/font-family.js";import{getMobileTextStyle as o,typography as e}from"../typography.js";const r=r=>({styleOverrides:{root:{"& .MuiTypography-root":{...e.b1Weak,[r.breakpoints.down("tablet")]:{fontFamily:t.mobile.body,...o("b1")}},"& .MuiFormControlLabel-label":{color:r.palette.semantic.text["text-strong"]},"& .Mui-disabled":{color:`${r.palette.semantic.text["text-disabled"]} !important`}}}});export{r as formControlLabelOverrides};
+import"@mui/material/styles";import{fontFamily as o}from"../tokens/typography/font-family.js";import{getMobileTextStyle as t,typography as a}from"../typography.js";const e=e=>({styleOverrides:{root:{padding:0,marginLeft:0,"& .MuiTypography-root":{...a.b1Weak,[e.breakpoints.down("tablet")]:{fontFamily:o.mobile.body,...t("b1")}},"& .MuiFormControlLabel-label":{color:e.palette.semantic.text["text-strong"]},"& .Mui-disabled":{color:`${e.palette.semantic.text["text-disabled"]} !important`},"&.MuiFormControlLabel-sizeSmall":{columnGap:e.spacing(1)},"&.MuiFormControlLabel-sizeMedium":{columnGap:e.spacing(1.5)},'&[data-fd-variant="radio"]':{"&.MuiFormControlLabel-sizeSmall":{"& .MuiFormControlLabel-label":{fontSize:"14px"}}}}}});export{e as formControlLabelOverrides};
 //# sourceMappingURL=formControlLabelOverrides.js.map

package/dist/themes/overrides/formControlLabelOverrides.js.map

@@ -1 +1 @@
-{"version":3,"file":"formControlLabelOverrides.js","sources":["../../../src/themes/overrides/formControlLabelOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\nexport const formControlLabelOverrides = (baseTheme: Theme): Components<Theme>['MuiFormControlLabel'] => ({\n  styleOverrides: {\n    root: {\n      '& .MuiTypography-root': {\n        ...typography.b1Weak,\n        [baseTheme.breakpoints.down('tablet')]: {\n          fontFamily: fontFamily.mobile.body,\n          ...getMobileTextStyle('b1'),\n        },\n      },\n      '& .MuiFormControlLabel-label': {\n        color: baseTheme.palette.semantic.text['text-strong'],\n      },\n      '& .Mui-disabled': {\n        color: `${baseTheme.palette.semantic.text['text-disabled']} !important`,\n      },\n    },\n  },\n});"],"names":["formControlLabelOverrides","baseTheme","styleOverrides","root","typography","b1Weak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","color","palette","semantic","text"],"mappings":"0KAKaA,EAA6BC,IAAgB,CACxDC,eAAgB,CACdC,KAAM,CACJ,wBAAyB,IACpBC,EAAWC,OACd,CAACJ,EAAUK,YAAYC,KAAK,WAAY,CACtCC,WAAYA,EAAWC,OAAOC,QAC3BC,EAAmB,QAG1B,+BAAgC,CAC9BC,MAAOX,EAAUY,QAAQC,SAASC,KAAK,gBAEzC,kBAAmB,CACjBH,MAAO,GAAGX,EAAUY,QAAQC,SAASC,KAAK"}
+{"version":3,"file":"formControlLabelOverrides.js","sources":["../../../src/themes/overrides/formControlLabelOverrides.ts"],"sourcesContent":["import { type Components, type Theme } from '@mui/material/styles';\n\nimport { fontFamily } from '@fd/themes/tokens/typography/font-family';\nimport { getMobileTextStyle, typography } from '@fd/themes/typography';\n\nexport const formControlLabelOverrides = (baseTheme: Theme): Components<Theme>['MuiFormControlLabel'] => ({\n  styleOverrides: {\n    root: {\n      padding: 0,\n      marginLeft: 0,\n      '& .MuiTypography-root': {\n        ...typography.b1Weak,\n        [baseTheme.breakpoints.down('tablet')]: {\n          fontFamily: fontFamily.mobile.body,\n          ...getMobileTextStyle('b1'),\n        },\n      },\n      '& .MuiFormControlLabel-label': {\n        color: baseTheme.palette.semantic.text['text-strong'],\n      },\n      '& .Mui-disabled': {\n        color: `${baseTheme.palette.semantic.text['text-disabled']} !important`,\n      },\n      '&.MuiFormControlLabel-sizeSmall': {\n        columnGap: baseTheme.spacing(1),\n      },\n      '&.MuiFormControlLabel-sizeMedium': {\n        columnGap: baseTheme.spacing(1.5),\n      },\n      '&[data-fd-variant=\"radio\"]': {\n        '&.MuiFormControlLabel-sizeSmall': {\n          '& .MuiFormControlLabel-label': {\n            fontSize: '14px',\n          },\n        },\n      },\n    },\n  },\n});"],"names":["formControlLabelOverrides","baseTheme","styleOverrides","root","padding","marginLeft","typography","b1Weak","breakpoints","down","fontFamily","mobile","body","getMobileTextStyle","color","palette","semantic","text","columnGap","spacing","fontSize"],"mappings":"0KAKaA,EAA6BC,IAAgB,CACxDC,eAAgB,CACdC,KAAM,CACJC,QAAS,EACTC,WAAY,EACZ,wBAAyB,IACpBC,EAAWC,OACd,CAACN,EAAUO,YAAYC,KAAK,WAAY,CACtCC,WAAYA,EAAWC,OAAOC,QAC3BC,EAAmB,QAG1B,+BAAgC,CAC9BC,MAAOb,EAAUc,QAAQC,SAASC,KAAK,gBAEzC,kBAAmB,CACjBH,MAAO,GAAGb,EAAUc,QAAQC,SAASC,KAAK,+BAE5C,kCAAmC,CACjCC,UAAWjB,EAAUkB,QAAQ,IAE/B,mCAAoC,CAClCD,UAAWjB,EAAUkB,QAAQ,MAE/B,6BAA8B,CAC5B,kCAAmC,CACjC,+BAAgC,CAC9BC,SAAU"}

package/package.json

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