@flipdish/portal-library 7.3.0 → 7.3.2

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"),d=require("@mui/material/useMediaQuery"),l=require("../../icons/Add/index.cjs.js"),c=require("../../icons/ArrowLeft02/index.cjs.js"),p=require("../../utilities/renderUtilities.cjs.js"),h=require("../../utilities/validation.cjs.js"),g=require("@mui/material/Grid2"),m=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"}))),v=s.styled(g)((({theme:e})=>({[e.breakpoints.down("laptop")]:{width:"100%",paddingTop:e.spacing(2)}}))),y=s.styled(g)((({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)}}))),k=s.styled(g)((({theme:e})=>({paddingTop:e.spacing(2),[e.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"}}))),A=s.styled(g)((()=>({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)}}))),B=s.styled(l)((({theme:e})=>({marginRight:e.spacing(1)}))),C=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)}}))),L=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(g)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),w=s.styled(o)((()=>({lineHeight:"26px"}))),W=s.styled(o)((()=>({fontWeight:"bold"}))),S=s.styled(a)((({theme:e})=>({marginBottom:e.spacing(4)}))),_=({title:t})=>e.jsx(W,{component:"h2",variant:"h5",children:t}),E=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=_,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:l,contextButtons:b,documentTitle:W,fluid:I=!1,fullWidth:P,header:R,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=d(ee.breakpoints.down("tablet")),ie=p.getMicroFrontendAttribute("data-portal-base-url")||"/",ne=!!F&&F.startsWith("https://"),ae=ne?F:void 0!==F?h.joinUrlPaths(ie,F):"";return e.jsx(E,{useAlternateBackground:K,children:e.jsxs(f,{fluid:I,children:[W&&e.jsx(x,{children:W}),N||null,e.jsxs(L,{children:[N&&e.jsx(u,{size:16,variant:"vertical"}),!z&&e.jsxs(e.Fragment,{children:[e.jsxs(y,{container:!0,alignItems:"center",direction:"column",children:[e.jsx(g,{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(k,{container:!0,children:[(Z||V)&&e.jsx(i,{children:e.jsx(C,{"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(_,{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(v,{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(B,{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(v,{children:i})]},`custom-action-button-${t.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))]})]}),!Q&&e.jsx(S,{})]}),e.jsxs(j,{fullWidth:P,children:[R?e.jsx(T,{children:R}):null,e.jsx(m,{identifier:W,somethingWentWrongText:Y,children:e.jsx(e.Fragment,{children:l})})]})]})]})})},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 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;
 //# 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}));\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","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","marginRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","only","marginLeft","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)(({ 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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"}

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 d from"@mui/material/IconButton";import{styled as l,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 h from"../../icons/ArrowLeft02/index.js";import{getMicroFrontendAttribute as g}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 v from"./DocumentTitle.js";import x 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=l("div")((({theme:t,fluid:i})=>({maxWidth:i?"none":T,[t.breakpoints.down("laptop")]:{maxWidth:"none"},padding:t.spacing(2,4),position:"relative",minHeight:"100vh"}))),j=l(f)((({theme:t})=>({[t.breakpoints.down("laptop")]:{width:"100%",paddingTop:t.spacing(2)}}))),A=l(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)}}))),L=l(f)((({theme:t})=>({paddingTop:t.spacing(2),[t.breakpoints.up("laptop")]:{width:"100%",alignItems:"center"}}))),z=l(f)((()=>({flexGrow:1}))),I=l("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=l(s)((({theme:t})=>({marginRight:t.spacing(1)}))),D=l(d,{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=l("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=l(f)((()=>({display:"flex",flexGrow:1,justifyContent:"flex-end"}))),E=l(c)((()=>({lineHeight:"26px"}))),F=l(c)((()=>({fontWeight:"bold"}))),G=l(r)((({theme:t})=>({marginBottom:t.spacing(4)}))),$=({title:i})=>t(F,{component:"h2",variant:"h5",children:i}),S=l("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:d,caption:l,children:c,contextButtons:s,documentTitle:B,fluid:w=!1,fullWidth:W,header:y,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=g("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(C,{fluid:w,children:[B&&t(v,{children:B}),_||null,i(H,{children:[_&&t(k,{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(P,{children:s?.map((i=>t("div",{children:i},`context-button-${e.isValidElement(i)?i.props?.["data-testid"]||i.props?.children:"fallback"}`)))})}),i(L,{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(h,{})})}),i(z,{children:[U?t(U,{}):i(a,{alignItems:"center",display:"flex",gap:2,children:[t($,{title:Q}),tt]}),l&&t(E,{component:"h3",variant:"caption",children:l})]}),M&&i(n,{children:[et&&t(k,{size:56,variant:"vertical"}),t(j,{children:i(o,{"data-testid":`Action-button-${d}`,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"}),d]})})]}),Y?.map((n=>i("div",{children:[et&&t(k,{size:56,variant:"vertical"}),!et&&t(k,{size:16,variant:"vertical"}),t(j,{children:n})]},`custom-action-button-${e.isValidElement(n)?n.props?.["data-testid"]||n.props?.children:"fallback"}`)))]})]}),!X&&t(G,{})]}),i(x,{fullWidth:W,children:[y?t(I,{children:y}):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,W as RIGHT_HORIZONTAL_SPACE_CLASSNAME,y 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 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};
 //# 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}));\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","StyledTitleSection","flexGrow","StyledTopSection","paddingLeft","paddingRight","StyledAdd","Add","marginRight","StyledBackButton","IconButton","shouldForwardProp","prop","hasTitleComponent","margin","only","marginLeft","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)(({ 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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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("@mui/material/Radio");module.exports=e;
+"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})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/atoms/Radio/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/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":"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"}

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

@@ -1,2 +1,23 @@
-import Radio from '@mui/material/Radio';
-export { default } from '@mui/material/Radio';
+import { ReactNode } from 'react';
+import { RadioProps as RadioProps$1 } from '@mui/material/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;
+
+export { Radio as default };
+export type { RadioProps };

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

@@ -1,2 +1,2 @@
-import a from"@mui/material/Radio";export{default}from"@mui/material/Radio";
+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};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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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"}

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),n=require("../../../utilities/renderUtilities.cjs.js");function r(e){return Object.freeze({__proto__:null,default:e})}const i=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Diamond/index.cjs.js"))})))),a=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/Alert/index.cjs.js"))})))),s=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CancelCircle/index.cjs.js"))})))),l=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/CheckmarkCircle/index.cjs.js"))})))),c=n.lazyWithRetry((()=>Promise.resolve().then((function(){return r(require("../../../icons/InformationCircle/index.cjs.js"))})))),o={neutral:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(s,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(a,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(i,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e.jsx(t.Suspense,{fallback:null,children:e.jsx(l,{color:n.palette.semantic.icon["icon-success"]})})},u={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}};exports.getAlertGlobalBackgroundColour=(e,t)=>u.background[t](e),exports.getAlertGlobalBorderColour=(e,t)=>u.border[t](e),exports.getAlertGlobalIcon=(e,t)=>o[t](e),exports.getAlertGlobalTextColour=(e,t)=>u.text[t](e);
+//# sourceMappingURL=alertGlobalTokens.cjs.js.map

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertGlobalTokens.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/alertGlobalTokens.tsx"],"sourcesContent":["import { type ReactElement,Suspense } from 'react';\n\nimport type { Theme } from '@mui/material/styles';\n\nimport { lazyWithRetry } from '@fd/utilities/renderUtilities';\n\nimport type { AlertTones } from '../Alert';\n\nconst DiamondIcon = lazyWithRetry(() => import('@fd/icons/Diamond'));\nconst AlertIcon = lazyWithRetry(() => import('@fd/icons/Alert'));\nconst CancelCircleIcon = lazyWithRetry(() => import('@fd/icons/CancelCircle'));\nconst CheckmarkCircleIcon = lazyWithRetry(() => import('@fd/icons/CheckmarkCircle'));\nconst InformationCircleIcon = lazyWithRetry(() => import('@fd/icons/InformationCircle'));\n\nconst ICONS = {\n  neutral: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />\n    </Suspense>\n  ),\n  brand: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />\n    </Suspense>\n  ),\n  destructive: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n    </Suspense>\n  ),\n  warning: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />\n    </Suspense>\n  ),\n  information: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n    </Suspense>\n  ),\n  'neutral-inverse': (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n    </Suspense>\n  ),\n  'brand-inverse': (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n    </Suspense>\n  ),\n  success: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n    </Suspense>\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (): string => 'transparent',\n    'brand-inverse': (): string => 'transparent',\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n/**\n * Returns the icon element for the given theme and alert tone.\n * Values are looked up from the ICONS map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which icon to render.\n * @returns ReactElement configured for the provided theme and tone.\n */\nexport const getAlertGlobalIcon = (theme: Theme, tone: AlertTones): ReactElement => ICONS[tone](theme);\n/**\n * Returns the background colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.background map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which background colour to use.\n * @returns string containing the background colour for the provided theme and tone.\n */\nexport const getAlertGlobalBackgroundColour = (theme: Theme, tone: AlertTones): string => COLOURS.background[tone](theme);\n/**\n * Returns the border colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.border map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which border colour to use.\n * @returns string containing the border colour for the provided theme and tone.\n */\nexport const getAlertGlobalBorderColour = (theme: Theme, tone: AlertTones): string => COLOURS.border[tone](theme);\n/**\n * Returns the text colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.text map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which text colour to use.\n * @returns string containing the text colour for the provided theme and tone.e.\n */\nexport const getAlertGlobalTextColour = (theme: Theme, tone: AlertTones): string => COLOURS.text[tone](theme);\n"],"names":["DiamondIcon","lazyWithRetry","Promise","resolve","then","_interopNamespaceDefaultOnly","require","AlertIcon","CancelCircleIcon","CheckmarkCircleIcon","InformationCircleIcon","ICONS","neutral","theme","_jsx","Suspense","fallback","children","color","palette","semantic","icon","brand","destructive","warning","information","success","COLOURS","background","fill","border","stroke","text","tone"],"mappings":"yLAQA,MAAMA,EAAcC,EAAAA,eAAc,IAAMC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,EAAAC,QAAO,6CACzCC,EAAYN,EAAAA,eAAc,IAAMC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,EAAAC,QAAO,2CACvCE,EAAmBP,EAAAA,eAAc,IAAMC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,EAAAC,QAAO,kDAC9CG,EAAsBR,EAAAA,eAAc,IAAMC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,EAAAC,QAAO,qDACjDI,EAAwBT,EAAAA,eAAc,IAAMC,QAAAC,UAAAC,MAAA,WAAA,OAAAC,EAAAC,QAAO,uDAEnDK,EAAQ,CACZC,QAAUC,GACRC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACd,EAAW,CAACkB,MAAOL,EAAMM,QAAQC,SAASC,KAAK,mBAGpDC,MAAQT,GACNC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACd,EAAW,CAACkB,MAAOL,EAAMM,QAAQC,SAASC,KAAK,oBAGpDE,YAAcV,GACZC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACN,EAAgB,CAACU,MAAOL,EAAMM,QAAQC,SAASC,KAAK,kBAGzDG,QAAUX,GACRC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACP,EAAS,CAACW,MAAOL,EAAMM,QAAQC,SAASC,KAAK,oBAGlDI,YAAcZ,GACZC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACJ,EAAqB,CAACQ,MAAOL,EAAMM,QAAQC,SAASC,KAAK,wBAG9D,kBAAoBR,GAClBC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACd,EAAW,CAACkB,MAAOL,EAAMM,QAAQC,SAASC,KAAK,oBAGpD,gBAAkBR,GAChBC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACd,EAAW,CAACkB,MAAOL,EAAMM,QAAQC,SAASC,KAAK,oBAGpDK,QAAUb,GACRC,MAACC,EAAAA,SAAQ,CAACC,SAAU,KAAIC,SACtBH,EAAAA,IAACL,EAAmB,CAACS,MAAOL,EAAMM,QAAQC,SAASC,KAAK,qBAKxDM,EAAU,CACdC,WAAY,CACVhB,QAAUC,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,aAC/DP,MAAQT,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,qBAC7DN,YAAcV,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,mBACnEL,QAAUX,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,qBAC/DH,QAAUb,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,qBAC/DJ,YAAcZ,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,yBACnE,kBAAoBhB,GAAyBA,EAAMM,QAAQC,SAASQ,WAAW,sBAC/E,gBAAkBf,GAAyBA,EAAMM,QAAQC,SAASS,KAAK,wBAEzEC,OAAQ,CACNlB,QAAUC,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,eACjET,MAAQT,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,uBAC/DR,YAAcV,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,qBACrEP,QAAUX,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,uBACjEL,QAAUb,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,uBACjEN,YAAcZ,GAAyBA,EAAMM,QAAQC,SAASW,OAAO,2BACrE,kBAAmB,IAAc,cACjC,gBAAiB,IAAc,eAEjCC,KAAM,CACJpB,QAAUC,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aAC/DV,MAAQT,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aAC7DT,YAAcV,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aACnER,QAAUX,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aAC/DN,QAAUb,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aAC/DP,YAAcZ,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,aACnE,kBAAoBnB,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,qBACzE,gBAAkBnB,GAAyBA,EAAMM,QAAQC,SAASY,KAAK,8DAkB7B,CAACnB,EAAcoB,IAA6BN,EAAQC,WAAWK,GAAMpB,sCAQzE,CAACA,EAAcoB,IAA6BN,EAAQG,OAAOG,GAAMpB,8BAhBzE,CAACA,EAAcoB,IAAmCtB,EAAMsB,GAAMpB,oCAwBxD,CAACA,EAAcoB,IAA6BN,EAAQK,KAAKC,GAAMpB"}

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.d.ts

@@ -0,0 +1,38 @@
+import { ReactElement } from 'react';
+import { Theme } from '@mui/material/styles';
+import { AlertTones } from '../Alert/index.js';
+
+/**
+ * Returns the icon element for the given theme and alert tone.
+ * Values are looked up from the ICONS map.
+ * @param theme - MUI theme used to resolve palette colours.
+ * @param tone - Alert tone determining which icon to render.
+ * @returns ReactElement configured for the provided theme and tone.
+ */
+declare const getAlertGlobalIcon: (theme: Theme, tone: AlertTones) => ReactElement;
+/**
+ * Returns the background colour string for the given theme and alert tone.
+ * Values are looked up from the COLOURS.background map.
+ * @param theme - MUI theme used to resolve palette colours.
+ * @param tone - Alert tone determining which background colour to use.
+ * @returns string containing the background colour for the provided theme and tone.
+ */
+declare const getAlertGlobalBackgroundColour: (theme: Theme, tone: AlertTones) => string;
+/**
+ * Returns the border colour string for the given theme and alert tone.
+ * Values are looked up from the COLOURS.border map.
+ * @param theme - MUI theme used to resolve palette colours.
+ * @param tone - Alert tone determining which border colour to use.
+ * @returns string containing the border colour for the provided theme and tone.
+ */
+declare const getAlertGlobalBorderColour: (theme: Theme, tone: AlertTones) => string;
+/**
+ * Returns the text colour string for the given theme and alert tone.
+ * Values are looked up from the COLOURS.text map.
+ * @param theme - MUI theme used to resolve palette colours.
+ * @param tone - Alert tone determining which text colour to use.
+ * @returns string containing the text colour for the provided theme and tone.e.
+ */
+declare const getAlertGlobalTextColour: (theme: Theme, tone: AlertTones) => string;
+
+export { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour };

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{Suspense as t}from"react";import{lazyWithRetry as n}from"../../../utilities/renderUtilities.js";const a=n((()=>import("../../../icons/Diamond/index.js"))),i=n((()=>import("../../../icons/Alert/index.js"))),r=n((()=>import("../../../icons/CancelCircle/index.js"))),l=n((()=>import("../../../icons/CheckmarkCircle/index.js"))),c=n((()=>import("../../../icons/InformationCircle/index.js"))),s={neutral:n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-strong"]})}),brand:n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-primary"]})}),destructive:n=>e(t,{fallback:null,children:e(r,{color:n.palette.semantic.icon["icon-error"]})}),warning:n=>e(t,{fallback:null,children:e(i,{color:n.palette.semantic.icon["icon-warning"]})}),information:n=>e(t,{fallback:null,children:e(c,{color:n.palette.semantic.icon["icon-information"]})}),"neutral-inverse":n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-inverse"]})}),"brand-inverse":n=>e(t,{fallback:null,children:e(a,{color:n.palette.semantic.icon["icon-inverse"]})}),success:n=>e(t,{fallback:null,children:e(l,{color:n.palette.semantic.icon["icon-success"]})})},o={background:{neutral:e=>e.palette.semantic.fill["fill-weak"],brand:e=>e.palette.semantic.fill["fill-primary-weak"],destructive:e=>e.palette.semantic.fill["fill-error-weak"],warning:e=>e.palette.semantic.fill["fill-warning-weak"],success:e=>e.palette.semantic.fill["fill-success-weak"],information:e=>e.palette.semantic.fill["fill-information-weak"],"neutral-inverse":e=>e.palette.semantic.background["background-inverse"],"brand-inverse":e=>e.palette.semantic.fill["fill-primary-strong"]},border:{neutral:e=>e.palette.semantic.stroke["stroke-weak"],brand:e=>e.palette.semantic.stroke["stroke-primary-weak"],destructive:e=>e.palette.semantic.stroke["stroke-error-weak"],warning:e=>e.palette.semantic.stroke["stroke-warning-weak"],success:e=>e.palette.semantic.stroke["stroke-success-weak"],information:e=>e.palette.semantic.stroke["stroke-information-weak"],"neutral-inverse":()=>"transparent","brand-inverse":()=>"transparent"},text:{neutral:e=>e.palette.semantic.text["text-weak"],brand:e=>e.palette.semantic.text["text-weak"],destructive:e=>e.palette.semantic.text["text-weak"],warning:e=>e.palette.semantic.text["text-weak"],success:e=>e.palette.semantic.text["text-weak"],information:e=>e.palette.semantic.text["text-weak"],"neutral-inverse":e=>e.palette.semantic.text["text-inverse-weak"],"brand-inverse":e=>e.palette.semantic.text["text-inverse-weak"]}},m=(e,t)=>s[t](e),k=(e,t)=>o.background[t](e),p=(e,t)=>o.border[t](e),d=(e,t)=>o.text[t](e);export{k as getAlertGlobalBackgroundColour,p as getAlertGlobalBorderColour,m as getAlertGlobalIcon,d as getAlertGlobalTextColour};
+//# sourceMappingURL=alertGlobalTokens.js.map

package/dist/components/molecules/AlertGlobal/alertGlobalTokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"alertGlobalTokens.js","sources":["../../../../src/components/molecules/AlertGlobal/alertGlobalTokens.tsx"],"sourcesContent":["import { type ReactElement,Suspense } from 'react';\n\nimport type { Theme } from '@mui/material/styles';\n\nimport { lazyWithRetry } from '@fd/utilities/renderUtilities';\n\nimport type { AlertTones } from '../Alert';\n\nconst DiamondIcon = lazyWithRetry(() => import('@fd/icons/Diamond'));\nconst AlertIcon = lazyWithRetry(() => import('@fd/icons/Alert'));\nconst CancelCircleIcon = lazyWithRetry(() => import('@fd/icons/CancelCircle'));\nconst CheckmarkCircleIcon = lazyWithRetry(() => import('@fd/icons/CheckmarkCircle'));\nconst InformationCircleIcon = lazyWithRetry(() => import('@fd/icons/InformationCircle'));\n\nconst ICONS = {\n  neutral: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-strong']} />\n    </Suspense>\n  ),\n  brand: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-primary']} />\n    </Suspense>\n  ),\n  destructive: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <CancelCircleIcon color={theme.palette.semantic.icon['icon-error']} />\n    </Suspense>\n  ),\n  warning: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <AlertIcon color={theme.palette.semantic.icon['icon-warning']} />\n    </Suspense>\n  ),\n  information: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <InformationCircleIcon color={theme.palette.semantic.icon['icon-information']} />\n    </Suspense>\n  ),\n  'neutral-inverse': (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n    </Suspense>\n  ),\n  'brand-inverse': (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <DiamondIcon color={theme.palette.semantic.icon['icon-inverse']} />\n    </Suspense>\n  ),\n  success: (theme: Theme): ReactElement => (\n    <Suspense fallback={null}>\n      <CheckmarkCircleIcon color={theme.palette.semantic.icon['icon-success']} />\n    </Suspense>\n  ),\n};\n\nconst COLOURS = {\n  background: {\n    neutral: (theme: Theme): string => theme.palette.semantic.fill['fill-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.fill['fill-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.fill['fill-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.fill['fill-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.fill['fill-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.fill['fill-information-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.background['background-inverse'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.fill['fill-primary-strong'],\n  },\n  border: {\n    neutral: (theme: Theme): string => theme.palette.semantic.stroke['stroke-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.stroke['stroke-primary-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.stroke['stroke-error-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.stroke['stroke-warning-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.stroke['stroke-success-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.stroke['stroke-information-weak'],\n    'neutral-inverse': (): string => 'transparent',\n    'brand-inverse': (): string => 'transparent',\n  },\n  text: {\n    neutral: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    brand: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    destructive: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    warning: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    success: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    information: (theme: Theme): string => theme.palette.semantic.text['text-weak'],\n    'neutral-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n    'brand-inverse': (theme: Theme): string => theme.palette.semantic.text['text-inverse-weak'],\n  },\n};\n/**\n * Returns the icon element for the given theme and alert tone.\n * Values are looked up from the ICONS map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which icon to render.\n * @returns ReactElement configured for the provided theme and tone.\n */\nexport const getAlertGlobalIcon = (theme: Theme, tone: AlertTones): ReactElement => ICONS[tone](theme);\n/**\n * Returns the background colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.background map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which background colour to use.\n * @returns string containing the background colour for the provided theme and tone.\n */\nexport const getAlertGlobalBackgroundColour = (theme: Theme, tone: AlertTones): string => COLOURS.background[tone](theme);\n/**\n * Returns the border colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.border map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which border colour to use.\n * @returns string containing the border colour for the provided theme and tone.\n */\nexport const getAlertGlobalBorderColour = (theme: Theme, tone: AlertTones): string => COLOURS.border[tone](theme);\n/**\n * Returns the text colour string for the given theme and alert tone.\n * Values are looked up from the COLOURS.text map.\n * @param theme - MUI theme used to resolve palette colours.\n * @param tone - Alert tone determining which text colour to use.\n * @returns string containing the text colour for the provided theme and tone.e.\n */\nexport const getAlertGlobalTextColour = (theme: Theme, tone: AlertTones): string => COLOURS.text[tone](theme);\n"],"names":["DiamondIcon","lazyWithRetry","import","AlertIcon","CancelCircleIcon","CheckmarkCircleIcon","InformationCircleIcon","ICONS","neutral","theme","_jsx","Suspense","fallback","children","color","palette","semantic","icon","brand","destructive","warning","information","success","COLOURS","background","fill","border","stroke","text","getAlertGlobalIcon","tone","getAlertGlobalBackgroundColour","getAlertGlobalBorderColour","getAlertGlobalTextColour"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Alert"),i=require("@mui/material/Box"),l=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),o=require("../ButtonGroup/index.cjs.js"),r=require("../../../icons/Cancel/index.cjs.js"),s=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),u=require("./alertGlobalTokens.cjs.js");const g=s.styled(a,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:u.getAlertGlobalBackgroundColour(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u.getAlertGlobalBorderColour(e,t),color:u.getAlertGlobalTextColour(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),p=s.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),m=t.memo((({description:t,tone:a="neutral",onClose:s,action:m,className:f,closeAriaLabel:x="Close","data-fd":h})=>{const b=d(),y=c(b.breakpoints.down("tablet")),j=(m?Array.isArray(m)?m:[m]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e.jsx(l.Button,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),A=[];return j.length&&!y&&A.push(e.jsx(o,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:j},"action-group-action")),s&&A.push(e.jsx(n.IconButton,{"aria-label":x,"data-fd":"close-button",onClick:s,size:"small",tone:"neutral",variant:"tertiary",children:e.jsx(r,{})},"close")),e.jsx(g,{action:A.length?e.jsx(p,{children:A}):void 0,className:f,"data-fd":h,icon:u.getAlertGlobalIcon(b,a),role:"alert",tone:a,children:e.jsxs(i,{className:"fd-alert-message",children:[e.jsx(i,{className:"fd-alert-description",children:t}),y&&j.length?e.jsx(o,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:j}):null]})})}));m.displayName="AlertGlobal",module.exports=m;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n    return (\n      <Button\n        key={uniqueKey}\n        data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n        fdKey={actionItem.label}\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    )\n  }\n  );\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n        {actionButtons}\n      </ButtonGroup>\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

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

@@ -0,0 +1,62 @@
+import * as react from 'react';
+import { ReactElement } from 'react';
+import { ButtonType } from '@fd/components/atoms/Button/getButtonStyles';
+import { AlertTones } from '@fd/components/molecules/Alert';
+
+/**
+ * Global alert component for prominent, page-level messages.
+ *
+ * - Renders an icon and description with optional actions and a close button
+ * - `action` accepts a single action object or an array of action objects
+ *   (use an array to render multiple buttons side-by-side)
+ * - Consumers are responsible for providing localized strings for any
+ *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).
+ */
+interface AlertGlobalProps {
+    /**
+     * Message content shown in the alert. Provide a localized string.
+     */
+    description: string;
+    /**
+     * Visual tone of the alert which controls icon and colors.
+     * Defaults to `neutral`.
+     */
+    tone?: AlertTones;
+    /**
+     * Called when the close button is pressed. When omitted, no close button is rendered.
+     */
+    onClose?: () => void;
+    /**
+     * One or more actions to render as buttons. A single object renders one button;
+     * an array renders multiple buttons. Provide localized `label` values.
+     */
+    action?: AlertAction | AlertAction[];
+    /**
+     * Accessible label for the close icon button. Provide a localized string.
+     * Defaults to "Close".
+     */
+    closeAriaLabel?: string;
+    /** Optional CSS class name for the root element. */
+    className?: string;
+    /** Optional test id for the root element. */
+    'data-fd'?: string;
+}
+/**
+ * Describes a user action rendered as a button in the alert.
+ */
+interface AlertAction {
+    /** Optional unique identifier for this action. Recommended for stable React keys. */
+    id?: string;
+    /** Button text. Provide a localized string. */
+    label: string;
+    /** Visual variant of the button. Defaults to `secondary`. */
+    type?: ButtonType;
+    /** Click handler for the action. */
+    onClick: () => void;
+    /** Optional test id applied to the button. */
+    'data-fd'?: string;
+}
+declare const AlertGlobal: react.MemoExoticComponent<({ description, tone, onClose, action, className, closeAriaLabel, "data-fd": dataFd, }: AlertGlobalProps) => ReactElement>;
+
+export { AlertGlobal as default };
+export type { AlertAction, AlertGlobalProps };

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

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as a}from"react";import i from"@mui/material/Alert";import o from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import{IconButton as l}from"../../atoms/IconButton/index.js";import r from"../ButtonGroup/index.js";import s from"../../../icons/Cancel/index.js";import{styled as c}from"@mui/material/styles";import d from"@mui/material/useMediaQuery";import m from"@mui/material/styles/useTheme";import{getAlertGlobalTextColour as p,getAlertGlobalBorderColour as u,getAlertGlobalBackgroundColour as f,getAlertGlobalIcon as g}from"./alertGlobalTokens.js";const h=c(i,{shouldForwardProp:e=>!["tone"].includes(e)})((({theme:e,tone:t})=>({alignItems:"center",backgroundColor:f(e,t),borderBottom:"1px solid",borderRadius:0,borderColor:u(e,t),color:p(e,t),padding:e.spacing(3),paddingTop:e.spacing(1.5),paddingBottom:e.spacing(1.5),width:"100%",display:"flex",position:"relative","& .MuiAlert-icon":{alignSelf:"flex-start"},"& .MuiAlert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),flexGrow:1,minWidth:0},"& .MuiAlert-action":{display:"flex",alignItems:"center",gap:e.spacing(3),marginLeft:"auto"},"& .MuiAlert-action .MuiIconButton-root":{outline:"none",boxShadow:"none",border:"none"},"& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible":{outline:"none",boxShadow:"none"},"& .fd-alert-message":{display:"flex",alignItems:"center",gap:e.spacing(2),width:"100%"},"& .fd-alert-description":{flexGrow:1,minWidth:0},"& .fd-alert-actions-inline":{marginLeft:"auto",display:"none"},"& .fd-alert-actions-action":{display:"flex"},[e.breakpoints.down("tablet")]:{"& .fd-alert-message":{flexDirection:"column",alignItems:"stretch",gap:e.spacing(2)},"& .fd-alert-actions-inline":{marginLeft:0,marginTop:e.spacing(2),width:"100%",justifyContent:"flex-end",display:"flex"},"& .fd-alert-actions-action":{display:"none"},"& .MuiAlert-action":{position:"absolute",top:e.spacing(3),right:e.spacing(3),marginLeft:0}}}))),y=c(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(3)}))),b=a((({description:a,tone:i="neutral",onClose:c,action:p,className:u,closeAriaLabel:f="Close","data-fd":b})=>{const x=m(),w=d(x.breakpoints.down("tablet")),A=(p?Array.isArray(p)?p:[p]:[]).map((t=>{const a=t.id??`${t.label.replace(/\s+/g,"-").toLowerCase()}-${t.type??"type"}`;return e(n,{"data-fd":t["data-fd"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`,fdKey:t.label,onClick:t.onClick,size:"small",tone:"neutral",variant:t.type??"secondary",children:t.label},a)})),C=[];return A.length&&!w&&C.push(e(r,{align:"right",className:"fd-alert-actions-action",layout:"horizontal",size:"small",children:A},"action-group-action")),c&&C.push(e(l,{"aria-label":f,"data-fd":"close-button",onClick:c,size:"small",tone:"neutral",variant:"tertiary",children:e(s,{})},"close")),e(h,{action:C.length?e(y,{children:C}):void 0,className:u,"data-fd":b,icon:g(x,i),role:"alert",tone:i,children:t(o,{className:"fd-alert-message",children:[e(o,{className:"fd-alert-description",children:a}),w&&A.length?e(r,{align:"right",className:"fd-alert-actions-inline",layout:"horizontal",size:"small",children:A}):null]})})}));b.displayName="AlertGlobal";export{b as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertGlobal/index.tsx"],"sourcesContent":["import { memo, type ReactElement, type ReactNode } from \"react\";\n\nimport MuiAlert from \"@mui/material/Alert\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport type { ButtonType } from \"@fd/components/atoms/Button/getButtonStyles\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport type { AlertTones } from \"@fd/components/molecules/Alert\";\nimport ButtonGroup from \"@fd/components/molecules/ButtonGroup\";\nimport CancelIcon from \"@fd/icons/Cancel\";\nimport styled from \"@fd/utilities/styledUtilities\";\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nimport { getAlertGlobalBackgroundColour, getAlertGlobalBorderColour, getAlertGlobalIcon, getAlertGlobalTextColour } from \"./alertGlobalTokens\";\n\n/**\n * Global alert component for prominent, page-level messages.\n *\n * - Renders an icon and description with optional actions and a close button\n * - `action` accepts a single action object or an array of action objects\n *   (use an array to render multiple buttons side-by-side)\n * - Consumers are responsible for providing localized strings for any\n *   user-visible text (e.g. `description`, action `label`, `closeAriaLabel`).\n */\nexport interface AlertGlobalProps {\n  /**\n   * Message content shown in the alert. Provide a localized string.\n   */\n  description: string;\n  /**\n   * Visual tone of the alert which controls icon and colors.\n   * Defaults to `neutral`.\n   */\n  tone?: AlertTones;\n  /**\n   * Called when the close button is pressed. When omitted, no close button is rendered.\n   */\n  onClose?: () => void;\n  /**\n   * One or more actions to render as buttons. A single object renders one button;\n   * an array renders multiple buttons. Provide localized `label` values.\n   */\n  action?: AlertAction | AlertAction[];\n  /**\n   * Accessible label for the close icon button. Provide a localized string.\n   * Defaults to \"Close\".\n   */\n  closeAriaLabel?: string;\n  /** Optional CSS class name for the root element. */\n  className?: string;\n  /** Optional test id for the root element. */\n  'data-fd'?: string;\n}\n\n/**\n * Describes a user action rendered as a button in the alert.\n */\nexport interface AlertAction {\n  /** Optional unique identifier for this action. Recommended for stable React keys. */\n  id?: string;\n  /** Button text. Provide a localized string. */\n  label: string;\n  /** Visual variant of the button. Defaults to `secondary`. */\n  type?: ButtonType;\n  /** Click handler for the action. */\n  onClick: () => void;\n  /** Optional test id applied to the button. */\n  'data-fd'?: string;\n}\n\ninterface StyledAlertProps {\n  tone: AlertTones;\n}\n\nconst StyledGlobalAlert = styled(MuiAlert, {\n  shouldForwardProp: (prop: string): boolean => !['tone'].includes(prop),\n})<StyledAlertProps>(({ theme, tone }) => ({\n  alignItems: 'center',\n  backgroundColor: getAlertGlobalBackgroundColour(theme, tone),\n  borderBottom: '1px solid',\n  borderRadius: 0,\n  borderColor: getAlertGlobalBorderColour(theme, tone),\n  color: getAlertGlobalTextColour(theme, tone),\n  padding: theme.spacing(3),\n  paddingTop: theme.spacing(1.5),\n  paddingBottom: theme.spacing(1.5),\n  width: '100%',\n  display: 'flex',\n  position: 'relative',\n  '& .MuiAlert-icon': {\n    alignSelf: 'flex-start',\n  },\n  '& .MuiAlert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .MuiAlert-action': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(3),\n    marginLeft: 'auto',\n  },\n  '& .MuiAlert-action .MuiIconButton-root': {\n    outline: 'none',\n    boxShadow: 'none',\n    border: 'none',\n  },\n  '& .MuiAlert-action .MuiIconButton-root:focus, & .MuiAlert-action .MuiIconButton-root:focus-visible': {\n    outline: 'none',\n    boxShadow: 'none',\n  },\n  // Inline actions inside message container\n  '& .fd-alert-message': {\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(2),\n    width: '100%',\n  },\n  '& .fd-alert-description': {\n    flexGrow: 1,\n    minWidth: 0,\n  },\n  '& .fd-alert-actions-inline': {\n    marginLeft: 'auto',\n    display: 'none',\n  },\n  '& .fd-alert-actions-action': {\n    display: 'flex',\n  },\n  // Mobile layout: stack and right-align button group below description\n  [theme.breakpoints.down('tablet')]: {\n    '& .fd-alert-message': {\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      gap: theme.spacing(2),\n    },\n    '& .fd-alert-actions-inline': {\n      marginLeft: 0,\n      marginTop: theme.spacing(2),\n      width: '100%',\n      justifyContent: 'flex-end',\n      display: 'flex',\n    },\n    '& .fd-alert-actions-action': {\n      display: 'none',\n    },\n    '& .MuiAlert-action': {\n      position: 'absolute',\n      top: theme.spacing(3),\n      right: theme.spacing(3),\n      marginLeft: 0,\n    },\n  },\n}));\n\nconst ActionContainer = styled(Box)(({ theme }): Record<string, unknown> => ({\n  display: 'flex',\n  alignItems: 'center',\n  gap: theme.spacing(3),\n}));\n\nconst AlertGlobalComponent = ({\n  description,\n  tone = 'neutral',\n  onClose,\n  action,\n  className,\n  closeAriaLabel = 'Close',\n  'data-fd': dataFd,\n}: AlertGlobalProps): ReactElement => {\n  const theme = useTheme();\n  const isMobile = useMediaQuery(theme.breakpoints.down('tablet'));\n\n  const actionsArray = action ? (Array.isArray(action) ? action : [action]) : [];\n  const actionButtons = actionsArray.map((actionItem) => {\n    const uniqueKey = actionItem.id ?? `${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}-${actionItem.type ?? 'type'}`\n    return (\n      <Button\n        key={uniqueKey}\n        data-fd={actionItem['data-fd'] ?? `action-button-${actionItem.label.replace(/\\s+/g, '-').toLowerCase()}`}\n        fdKey={actionItem.label}\n        onClick={actionItem.onClick}\n        size=\"small\"\n        tone=\"neutral\"\n        variant={actionItem.type ?? 'secondary'}\n      >\n        {actionItem.label}\n      </Button>\n    )\n  }\n  );\n\n  const nodes: ReactNode[] = [];\n  if (actionButtons.length && !isMobile) {\n    nodes.push(\n      <ButtonGroup key=\"action-group-action\" align=\"right\" className=\"fd-alert-actions-action\" layout=\"horizontal\" size=\"small\">\n        {actionButtons}\n      </ButtonGroup>\n    );\n  }\n  if (onClose) {\n    nodes.push(\n      <IconButton\n        key=\"close\"\n        aria-label={closeAriaLabel}\n        data-fd=\"close-button\"\n        onClick={onClose}\n        size=\"small\"\n        tone=\"neutral\"\n        variant=\"tertiary\"\n      >\n        <CancelIcon />\n      </IconButton>\n    );\n  }\n\n  return (\n    <StyledGlobalAlert\n      action={nodes.length ? <ActionContainer>{nodes}</ActionContainer> : undefined}\n      className={className}\n      data-fd={dataFd}\n      icon={getAlertGlobalIcon(theme, tone)}\n      role=\"alert\"\n      tone={tone}\n    >\n      <Box className=\"fd-alert-message\">\n        <Box className=\"fd-alert-description\">{description}</Box>\n        {isMobile && actionButtons.length ? (\n          <ButtonGroup align=\"right\" className=\"fd-alert-actions-inline\" layout=\"horizontal\" size=\"small\">\n            {actionButtons}\n          </ButtonGroup>\n        ) : null}\n      </Box>\n    </StyledGlobalAlert>\n  );\n};\n\nconst AlertGlobal = memo(AlertGlobalComponent);\nAlertGlobal.displayName = 'AlertGlobal';\n\nexport default AlertGlobal;\n"],"names":["StyledGlobalAlert","styled","MuiAlert","shouldForwardProp","prop","includes","theme","tone","alignItems","backgroundColor","getAlertGlobalBackgroundColour","borderBottom","borderRadius","borderColor","getAlertGlobalBorderColour","color","getAlertGlobalTextColour","padding","spacing","paddingTop","paddingBottom","width","display","position","alignSelf","gap","flexGrow","minWidth","marginLeft","outline","boxShadow","border","breakpoints","down","flexDirection","marginTop","justifyContent","top","right","ActionContainer","Box","AlertGlobal","memo","description","onClose","action","className","closeAriaLabel","dataFd","useTheme","isMobile","useMediaQuery","actionButtons","Array","isArray","map","actionItem","uniqueKey","id","label","replace","toLowerCase","type","_jsx","Button","fdKey","onClick","size","variant","children","nodes","length","push","ButtonGroup","align","layout","IconButton","CancelIcon","undefined","icon","getAlertGlobalIcon","role","_jsxs","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Modal"),i=require("@mui/material/Box"),r=require("../../atoms/Button/index.cjs.js"),o=require("@mui/material/Typography"),n=require("@mui/material/Stack"),s=require("@mui/material/styles"),l=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),c=require("../../../themes/tokens/breakpoints/breakpoints.cjs.js"),u=require("../../atoms/IconContainer/index.cjs.js"),m=require("../../Spacer/index.cjs.js");const p={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},x=e=>p.iconContainer[e](),h=s.styled(i,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(c.breakpointValues.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),g=s.styled("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),b=s.styled(n)({justifyContent:"flex-start",alignItems:"center"}),f=s.styled(i)((({theme:e})=>({[e.breakpoints.down(c.breakpointValues.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),j=t.memo((({open:t,onClose:i,tone:n="default",size:s="large",title:p,description:j,property:y,actions:v=[],className:w,"data-testid":k,children:q})=>{const z=d(),$=l(z.breakpoints.down(c.breakpointValues.tablet)),C="string"==typeof y,B=v.length>0;return e.jsx(a,{"aria-describedby":`modal-description-${k??"default"}`,"aria-labelledby":`modal-title-${k??"default"}`,className:w,"data-testid":k,onClose:i,open:t,children:e.jsxs(h,{size:s,tone:n,children:[e.jsxs(f,{children:[y&&e.jsxs(e.Fragment,{children:[C?e.jsx(g,{alt:p??"Modal image",src:y}):e.jsx(u,{icon:y,style:"filled",tone:x(n)}),e.jsx(m,{size:16,variant:"horizontal"})]}),p&&e.jsx(o,{component:"h2",id:`modal-title-${k??"default"}`,variant:"h3Strong",children:p}),p&&j&&e.jsx(m,{size:8,variant:"horizontal"}),j&&e.jsx(o,{color:z.palette.semantic.text["text-weak"],id:`modal-description-${k??"default"}`,variant:"b1Weak",children:j}),q&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),q]})]}),B&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),e.jsx(b,{direction:$?"column":"row-reverse",spacing:2,children:e.jsx(b,{direction:$?"column-reverse":"row-reverse",spacing:2,width:$?"100%":"fit-content",children:v.map(((t,a)=>{const{label:i,id:o,...n}=t;return e.jsx(r.Button,{fdKey:o??`modal-action-${i.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:$,...n,children:i},o??`modal-action-${a}-${i.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));j.displayName="Modal",module.exports=j;
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),a=require("@mui/material/Modal"),i=require("@mui/material/Box"),r=require("../../atoms/Button/index.cjs.js"),o=require("@mui/material/Typography"),n=require("@mui/material/Stack"),s=require("@mui/material/styles"),l=require("@mui/material/useMediaQuery"),d=require("@mui/material/styles/useTheme"),c=require("../../../themes/tokens/breakpoints/breakpoints.cjs.js"),u=require("../../atoms/IconContainer/index.cjs.js"),m=require("../../Spacer/index.cjs.js");const p={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},x=e=>p.iconContainer[e](),h=s.styled(i,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(c.breakpointValues.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),g=s.styled("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),b=s.styled(n)({justifyContent:"flex-start",alignItems:"center"}),f=s.styled(i)((({theme:e})=>({[e.breakpoints.down(c.breakpointValues.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),j=t.memo((({open:t,onClose:i,tone:n="default",size:s="large",title:p,description:j,property:y,actions:w=[],className:v,"data-testid":k,children:q})=>{const z=d(),$=l(z.breakpoints.down(c.breakpointValues.tablet)),C="string"==typeof y,B=w.length>0;return e.jsx(a,{"aria-describedby":`modal-description-${k??"default"}`,"aria-labelledby":`modal-title-${k??"default"}`,className:v,"data-testid":k,onClose:i,open:t,children:e.jsxs(h,{size:s,tone:n,children:[e.jsxs(f,{children:[y&&e.jsxs(e.Fragment,{children:[C?e.jsx(g,{alt:p??"Modal image",src:y}):e.jsx(u,{icon:y,style:"filled",tone:x(n)}),e.jsx(m,{size:16,variant:"horizontal"})]}),p&&e.jsx(o,{component:"h2",id:`modal-title-${k??"default"}`,variant:"h3Strong",children:p}),p&&j&&e.jsx(m,{size:8,variant:"horizontal"}),j&&e.jsx(o,{color:z.palette.semantic.text["text-weak"],id:`modal-description-${k??"default"}`,variant:"b1Weak",children:j}),q&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),q]})]}),B&&e.jsxs(e.Fragment,{children:[e.jsx(m,{size:24,variant:"horizontal"}),e.jsx(b,{direction:$?"column":"row-reverse",spacing:2,children:e.jsx(b,{direction:$?"column-reverse":"row",spacing:2,width:$?"100%":"fit-content",children:w.map(((t,a)=>{const{label:i,id:o,...n}=t;return e.jsx(r.Button,{fdKey:o??`modal-action-${i.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:$,...n,children:i},o??`modal-action-${a}-${i.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));j.displayName="Modal",module.exports=j;
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row-reverse'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"2gBAyDA,MAAMA,EAAU,CACdC,cAAe,CACbC,QAAS,IAA0B,UACnCC,YAAa,IAA0B,gBAQrCC,EAAwBC,GACrBL,EAAQC,cAAcI,KAQzBC,EAAiBC,EAAAA,OAAOC,EAAK,CACjCC,kBAAoBC,IAAU,CAAC,OAAQ,QAAQC,SAASD,IADnCH,EAEC,EAAGK,QAAOC,WAAM,CACtCC,SAAU,WACVC,gBAAiBH,EAAMI,QAAQC,SAASC,WAAW,sBACnDC,OAAQ,OACRC,aAAcR,EAAMS,OAAO,aAC3BC,QAASV,EAAMW,QAAQ,GACvBC,UAAW,4EACXC,QAAS,OACTC,UAAW,OACXC,UAAW,OAGXC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,SAAmB,UAATlB,EAAmB,QAAU,QACvCmB,MAAO,eAAepB,EAAMW,QAAQ,MAGpC,CAACX,EAAMqB,YAAYC,KAAKC,EAAAA,iBAAiBC,SAAU,IAEpC,UAATvB,GAAoB,CACtBkB,SAAU,eAAenB,EAAMW,QAAQ,MACvCS,MAAO,eAAepB,EAAMW,QAAQ,MACpCK,IAAK,OACLS,OAAQzB,EAAMW,QAAQ,GACtBM,KAAMjB,EAAMW,QAAQ,GACpBe,MAAO1B,EAAMW,QAAQ,GACrBO,UAAW,OACXJ,UAAW,OACXC,UAAW,OAEXY,QAAS,OACTC,cAAe,aAIJ,UAAT3B,GAAoB,CACtB4B,OAAQ,eAAe7B,EAAMW,QAAQ,MACrCG,UAAW,eAAed,EAAMW,QAAQ,MACxCI,UAAW,OAEXY,QAAS,OACTC,cAAe,eAKfE,EAAcnC,EAAAA,OAAO,MAAPA,EAAc,EAAGK,YAAO,CAC1CoB,MAAO,OACPS,OAAQ,OACRrB,aAAcR,EAAMS,OAAO,gBAGvBsB,EAAoBpC,EAAAA,OAAOqC,EAAPrC,CAAc,CACtCsC,eAAgB,aAChBC,WAAY,WAGRC,EAAyBxC,EAAAA,OAAOC,EAAPD,EAAY,EAAGK,YAAO,CACnD,CAACA,EAAMqB,YAAYC,KAAKC,EAAAA,iBAAiBC,SAAU,CACjDY,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,cACXC,cAAetC,EAAMW,QAAQ,QAW3B4B,EAAQC,EAAAA,MACZ,EACEC,OACAC,UACAjD,OAAO,UACPQ,OAAO,QACP0C,QACAC,cACAC,WACAC,UAAU,GACVC,YACA,cAAeC,EACfC,eAEA,MAAMjD,EAAQkD,IACRC,EAAmBC,EAAcpD,EAAMqB,YAAYC,KAAKC,EAAAA,iBAAiBC,SAEzE6B,EAAiC,iBAAbR,EACpBS,EAAoBR,EAAQS,OAAS,EAE3C,OACEC,EAAAA,IAACC,EAAQ,CAAA,mBACW,qBAAqBT,GAAc,YAAW,kBAC/C,eAAeA,GAAc,YAC9CD,UAAWA,EAAS,cACPC,EACbN,QAASA,EACTD,KAAMA,EAAIQ,SAEVS,EAAAA,KAAChE,EAAc,CAACO,KAAMA,EAAMR,KAAMA,EAAIwD,SAAA,CACpCS,EAAAA,KAACvB,EAAsB,CAAAc,SAAA,CACpBJ,GACCa,6BACGL,EACCG,EAAAA,IAAC1B,EAAW,CAAC6B,IAAKhB,GAAS,cAAeiB,IAAKf,IAE/CW,MAACK,EAAa,CAACC,KAAMjB,EAAUkB,MAAM,SAAStE,KAAMD,EAAqBC,KAE3E+D,EAAAA,IAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,kBAG7BtB,GACCa,MAACU,EAAU,CAACC,UAAU,KAAKC,GAAI,eAAepB,GAAc,YAAaiB,QAAQ,WAAUhB,SACxFN,IAGJA,GAASC,GAAeY,EAAAA,IAACQ,EAAM,CAAC/D,KAAM,EAAGgE,QAAQ,eACjDrB,GACCY,EAAAA,IAACU,EAAU,CACTG,MAAOrE,EAAMI,QAAQC,SAASiE,KAAK,aACnCF,GAAI,qBAAqBpB,GAAc,YACvCiB,QAAQ,SAAQhB,SAEfL,IAGJK,GACCS,OAAAa,EAAAA,SAAA,CAAAtB,SAAA,CACEO,MAACQ,GAAO/D,KAAM,GAAIgE,QAAQ,eACzBhB,QAINK,GACCI,EAAAA,2BACEF,EAAAA,IAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,eAC1BT,EAAAA,IAACzB,EAAiB,CAACyC,UAAWrB,EAAmB,SAAW,cAAexC,QAAS,EAACsC,SACnFO,EAAAA,IAACzB,EAAiB,CAChByC,UAAWrB,EAAmB,iBAAmB,MACjDxC,QAAS,EACTS,MAAO+B,EAAmB,OAAS,uBAElCL,EAAQ2B,KAAI,CAACC,EAAQC,KACpB,MAAMC,MAAEA,EAAKR,GAAEA,KAAOS,GAAgBH,EACtC,OACElB,EAAAA,IAACsB,EAAAA,OAAM,CAELC,MAAOX,GAAM,gBAAgBQ,EAAMI,QAAQ,OAAQ,KAAKC,gBACxDC,UAAW/B,KACP0B,WAEHD,GALIR,GAAM,gBAAgBO,KAASC,EAAMI,QAAQ,OAAQ,KAAKC,mCAmBvF1C,EAAM4C,YAAc"}

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

@@ -1,2 +1,2 @@
-import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as a}from"react";import o from"@mui/material/Modal";import r from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import l from"@mui/material/Typography";import s from"@mui/material/Stack";import{styled as d}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import c from"@mui/material/styles/useTheme";import{breakpointValues as p}from"../../../themes/tokens/breakpoints/breakpoints.js";import u from"../../atoms/IconContainer/index.js";import h from"../../Spacer/index.js";const f={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},g=e=>f.iconContainer[e](),x=d(r,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(p.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),b=d("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),w=d(s)({justifyContent:"flex-start",alignItems:"center"}),v=d(r)((({theme:e})=>({[e.breakpoints.down(p.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),y=a((({open:a,onClose:r,tone:s="default",size:d="large",title:f,description:y,property:k,actions:z=[],className:$,"data-testid":C,children:j})=>{const H=c(),M=m(H.breakpoints.down(p.tablet)),S="string"==typeof k,W=z.length>0;return e(o,{"aria-describedby":`modal-description-${C??"default"}`,"aria-labelledby":`modal-title-${C??"default"}`,className:$,"data-testid":C,onClose:r,open:a,children:t(x,{size:d,tone:s,children:[t(v,{children:[k&&t(i,{children:[S?e(b,{alt:f??"Modal image",src:k}):e(u,{icon:k,style:"filled",tone:g(s)}),e(h,{size:16,variant:"horizontal"})]}),f&&e(l,{component:"h2",id:`modal-title-${C??"default"}`,variant:"h3Strong",children:f}),f&&y&&e(h,{size:8,variant:"horizontal"}),y&&e(l,{color:H.palette.semantic.text["text-weak"],id:`modal-description-${C??"default"}`,variant:"b1Weak",children:y}),j&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),j]})]}),W&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),e(w,{direction:M?"column":"row-reverse",spacing:2,children:e(w,{direction:M?"column-reverse":"row-reverse",spacing:2,width:M?"100%":"fit-content",children:z.map(((t,i)=>{const{label:a,id:o,...r}=t;return e(n,{fdKey:o??`modal-action-${a.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:M,...r,children:a},o??`modal-action-${i}-${a.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));y.displayName="Modal";export{y as default};
+import{jsx as e,jsxs as t,Fragment as i}from"react/jsx-runtime";import{memo as a}from"react";import o from"@mui/material/Modal";import r from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import l from"@mui/material/Typography";import s from"@mui/material/Stack";import{styled as d}from"@mui/material/styles";import m from"@mui/material/useMediaQuery";import c from"@mui/material/styles/useTheme";import{breakpointValues as p}from"../../../themes/tokens/breakpoints/breakpoints.js";import u from"../../atoms/IconContainer/index.js";import h from"../../Spacer/index.js";const f={iconContainer:{default:()=>"neutral",destructive:()=>"destructive"}},g=e=>f.iconContainer[e](),x=d(r,{shouldForwardProp:e=>!["tone","size"].includes(e)})((({theme:e,size:t})=>({position:"absolute",backgroundColor:e.palette.semantic.background["background-overlay"],border:"none",borderRadius:e.radius["radius-16"],padding:e.spacing(4),boxShadow:"0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)",outline:"none",maxHeight:"90vh",overflowY:"auto",top:"50%",left:"50%",transform:"translate(-50%, -50%)",maxWidth:"large"===t?"700px":"500px",width:`calc(100% - ${e.spacing(4)})`,[e.breakpoints.down(p.tablet)]:{..."small"===t&&{maxWidth:`calc(100% - ${e.spacing(4)})`,width:`calc(100% - ${e.spacing(4)})`,top:"auto",bottom:e.spacing(2),left:e.spacing(2),right:e.spacing(2),transform:"none",maxHeight:"70vh",overflowY:"auto",display:"flex",flexDirection:"column"},..."large"===t&&{height:`calc(100% - ${e.spacing(4)})`,maxHeight:`calc(100% - ${e.spacing(4)})`,overflowY:"auto",display:"flex",flexDirection:"column"}}}))),b=d("img")((({theme:e})=>({width:"100%",height:"auto",borderRadius:e.radius["radius-8"]}))),w=d(s)({justifyContent:"flex-start",alignItems:"center"}),y=d(r)((({theme:e})=>({[e.breakpoints.down(p.tablet)]:{flexGrow:1,display:"flex",flexDirection:"column",minHeight:"min-content",paddingBottom:e.spacing(3)}}))),v=a((({open:a,onClose:r,tone:s="default",size:d="large",title:f,description:v,property:k,actions:z=[],className:$,"data-testid":C,children:j})=>{const H=c(),M=m(H.breakpoints.down(p.tablet)),S="string"==typeof k,W=z.length>0;return e(o,{"aria-describedby":`modal-description-${C??"default"}`,"aria-labelledby":`modal-title-${C??"default"}`,className:$,"data-testid":C,onClose:r,open:a,children:t(x,{size:d,tone:s,children:[t(y,{children:[k&&t(i,{children:[S?e(b,{alt:f??"Modal image",src:k}):e(u,{icon:k,style:"filled",tone:g(s)}),e(h,{size:16,variant:"horizontal"})]}),f&&e(l,{component:"h2",id:`modal-title-${C??"default"}`,variant:"h3Strong",children:f}),f&&v&&e(h,{size:8,variant:"horizontal"}),v&&e(l,{color:H.palette.semantic.text["text-weak"],id:`modal-description-${C??"default"}`,variant:"b1Weak",children:v}),j&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),j]})]}),W&&t(i,{children:[e(h,{size:24,variant:"horizontal"}),e(w,{direction:M?"column":"row-reverse",spacing:2,children:e(w,{direction:M?"column-reverse":"row",spacing:2,width:M?"100%":"fit-content",children:z.map(((t,i)=>{const{label:a,id:o,...r}=t;return e(n,{fdKey:o??`modal-action-${a.replace(/\s+/g,"-").toLowerCase()}`,fullWidth:M,...r,children:a},o??`modal-action-${i}-${a.replace(/\s+/g,"-").toLowerCase()}`)}))})})]})]})})}));v.displayName="Modal";export{v as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row-reverse'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"mlBAyDA,MAAMA,EAAU,CACdC,cAAe,CACbC,QAAS,IAA0B,UACnCC,YAAa,IAA0B,gBAQrCC,EAAwBC,GACrBL,EAAQC,cAAcI,KAQzBC,EAAiBC,EAAOC,EAAK,CACjCC,kBAAoBC,IAAU,CAAC,OAAQ,QAAQC,SAASD,IADnCH,EAEC,EAAGK,QAAOC,WAAM,CACtCC,SAAU,WACVC,gBAAiBH,EAAMI,QAAQC,SAASC,WAAW,sBACnDC,OAAQ,OACRC,aAAcR,EAAMS,OAAO,aAC3BC,QAASV,EAAMW,QAAQ,GACvBC,UAAW,4EACXC,QAAS,OACTC,UAAW,OACXC,UAAW,OAGXC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,SAAmB,UAATlB,EAAmB,QAAU,QACvCmB,MAAO,eAAepB,EAAMW,QAAQ,MAGpC,CAACX,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,IAEpC,UAATvB,GAAoB,CACtBkB,SAAU,eAAenB,EAAMW,QAAQ,MACvCS,MAAO,eAAepB,EAAMW,QAAQ,MACpCK,IAAK,OACLS,OAAQzB,EAAMW,QAAQ,GACtBM,KAAMjB,EAAMW,QAAQ,GACpBe,MAAO1B,EAAMW,QAAQ,GACrBO,UAAW,OACXJ,UAAW,OACXC,UAAW,OAEXY,QAAS,OACTC,cAAe,aAIJ,UAAT3B,GAAoB,CACtB4B,OAAQ,eAAe7B,EAAMW,QAAQ,MACrCG,UAAW,eAAed,EAAMW,QAAQ,MACxCI,UAAW,OAEXY,QAAS,OACTC,cAAe,eAKfE,EAAcnC,EAAO,MAAPA,EAAc,EAAGK,YAAO,CAC1CoB,MAAO,OACPS,OAAQ,OACRrB,aAAcR,EAAMS,OAAO,gBAGvBsB,EAAoBpC,EAAOqC,EAAPrC,CAAc,CACtCsC,eAAgB,aAChBC,WAAY,WAGRC,EAAyBxC,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CACnD,CAACA,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,CACjDY,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,cACXC,cAAetC,EAAMW,QAAQ,QAW3B4B,EAAQC,GACZ,EACEC,OACAC,UACAjD,OAAO,UACPQ,OAAO,QACP0C,QACAC,cACAC,WACAC,UAAU,GACVC,YACA,cAAeC,EACfC,eAEA,MAAMjD,EAAQkD,IACRC,EAAmBC,EAAcpD,EAAMqB,YAAYC,KAAKC,EAAiBC,SAEzE6B,EAAiC,iBAAbR,EACpBS,EAAoBR,EAAQS,OAAS,EAE3C,OACEC,EAACC,EAAQ,CAAA,mBACW,qBAAqBT,GAAc,YAAW,kBAC/C,eAAeA,GAAc,YAC9CD,UAAWA,EAAS,cACPC,EACbN,QAASA,EACTD,KAAMA,EAAIQ,SAEVS,EAAChE,EAAc,CAACO,KAAMA,EAAMR,KAAMA,EAAIwD,SAAA,CACpCS,EAACvB,EAAsB,CAAAc,SAAA,CACpBJ,GACCa,eACGL,EACCG,EAAC1B,EAAW,CAAC6B,IAAKhB,GAAS,cAAeiB,IAAKf,IAE/CW,EAACK,EAAa,CAACC,KAAMjB,EAAUkB,MAAM,SAAStE,KAAMD,EAAqBC,KAE3E+D,EAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,kBAG7BtB,GACCa,EAACU,EAAU,CAACC,UAAU,KAAKC,GAAI,eAAepB,GAAc,YAAaiB,QAAQ,WAAUhB,SACxFN,IAGJA,GAASC,GAAeY,EAACQ,EAAM,CAAC/D,KAAM,EAAGgE,QAAQ,eACjDrB,GACCY,EAACU,EAAU,CACTG,MAAOrE,EAAMI,QAAQC,SAASiE,KAAK,aACnCF,GAAI,qBAAqBpB,GAAc,YACvCiB,QAAQ,SAAQhB,SAEfL,IAGJK,GACCS,EAAAa,EAAA,CAAAtB,SAAA,CACEO,EAACQ,GAAO/D,KAAM,GAAIgE,QAAQ,eACzBhB,QAINK,GACCI,eACEF,EAACQ,EAAM,CAAC/D,KAAM,GAAIgE,QAAQ,eAC1BT,EAACzB,EAAiB,CAACyC,UAAWrB,EAAmB,SAAW,cAAexC,QAAS,EAACsC,SACnFO,EAACzB,EAAiB,CAChByC,UAAWrB,EAAmB,iBAAmB,cACjDxC,QAAS,EACTS,MAAO+B,EAAmB,OAAS,uBAElCL,EAAQ2B,KAAI,CAACC,EAAQC,KACpB,MAAMC,MAAEA,EAAKR,GAAEA,KAAOS,GAAgBH,EACtC,OACElB,EAACsB,EAAM,CAELC,MAAOX,GAAM,gBAAgBQ,EAAMI,QAAQ,OAAQ,KAAKC,gBACxDC,UAAW/B,KACP0B,WAEHD,GALIR,GAAM,gBAAgBO,KAASC,EAAMI,QAAQ,OAAQ,KAAKC,mCAmBvF1C,EAAM4C,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var r=require("@mui/material/RadioGroup");module.exports=r;
+"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)}))})]})};
 //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/RadioGroup/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/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"}

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

@@ -1,2 +1,29 @@
-import RadioGroup from '@mui/material/RadioGroup';
-export { default } from '@mui/material/RadioGroup';
+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;
+};
+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;
+    /** 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. */
+    required?: boolean;
+    /** Helper text displayed below the label to provide additional guidance. */
+    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[];
+}
+declare const RadioGroup: ({ fdKey, value, onChange, label, required, helperText, errorText, options, ...groupProps }: RadioGroupProps) => react__default.ReactElement;
+
+export { RadioGroup as default };
+export type { RadioGroupProps, RadioOption };

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

@@ -1,2 +1,2 @@
-import o from"@mui/material/RadioGroup";export{default}from"@mui/material/RadioGroup";
+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};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"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"}

package/package.json

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