@flipdish/portal-library 7.8.0 → 7.9.1

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),t=require("react"),r=require("@mui/material/Breadcrumbs"),a=require("@mui/material/styles"),i=require("@mui/material/useMediaQuery"),l=require("../Link/index.cjs.js"),n=require("../../../icons/ArrowLeft02/index.cjs.js"),s=require("../../../themes/typography.cjs.js");const o=a.styled(r)((({theme:e})=>({"& .MuiBreadcrumbs-separator":{color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(1),marginRight:e.spacing(1)}}))),u=a.styled("button")((({theme:e})=>({display:"inline-flex",alignItems:"center",background:"none",border:"none",color:e.palette.semantic.text["text-weak"],cursor:"pointer",padding:e.spacing(.5),borderRadius:e.radius?.["radius-4"]||"4px",transition:"background-color 0.2s ease-in-out",fontFamily:s.typography.b1Weak.fontFamily,fontSize:s.typography.b1Weak.fontSize,lineHeight:s.typography.b1Weak.lineHeight,fontWeight:s.typography.b1Weak.fontWeight,letterSpacing:s.typography.b1Weak.letterSpacing,"&:hover":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:focus-visible":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),p=a.styled("span")((({theme:e})=>({fontSize:s.typography.b1Weak.fontSize,lineHeight:s.typography.b1Weak.lineHeight,color:e.palette.semantic.text["text-weak"],fontWeight:s.typography.b1Weak.fontWeight,fontFamily:s.typography.b1Weak.fontFamily,letterSpacing:s.typography.b1Weak.letterSpacing}))),c=t.memo((({items:r,type:s="default",className:c,"data-testid":h,ariaLabel:d,ariaLabelEllipsis:b})=>{const[g,f]=t.useState(!1),y=a.useTheme(),m=i(y.breakpoints.down("tablet"));if(!r?.length)return null;const k=[];if(("collapsed"===s||"default"===s&&m)&&r.length>2&&!g){const t=r[0],a=r[r.length-1];if(!t||!a)return null;k.push(e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,iconLeft:e.jsx(n,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`first-${t.label}-${t.href||""}`)),k.push(e.jsx(u,{"aria-label":b??void 0,onClick:()=>f(!0),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),f(!0))},type:"button",children:"..."},"ellipsis")),k.push(e.jsx(p,{"aria-current":"page",children:a.label},`current-${a.label}-${a.href||""}`))}else{const t=r.map(((t,a)=>{const i=0===a;return a===r.length-1?e.jsx(p,{"aria-current":"page",children:t.label},`current-${t.label}-${t.href||""}`):i?e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,iconLeft:e.jsx(n,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`first-${t.label}-${t.href||""}`):e.jsx(l.Link,{fdKey:`breadcrumb-${t.label}`,href:t.href,size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:t.label},`middle-${t.label}-${t.href||""}`)}));k.push(...t)}return e.jsx(o,{"aria-label":d??void 0,className:c,"data-testid":h,separator:"/",children:k})}));c.displayName="BreadCrumbs",module.exports=c;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/atoms/BreadCrumbs/index.tsx"],"sourcesContent":["import { memo, useState } from 'react';\n\nimport BreadcrumbsMUI from '@mui/material/Breadcrumbs';\nimport { styled, useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Link from '@fd/components/atoms/Link';\nimport ArrowLeft02Icon from '@fd/icons/ArrowLeft02';\nimport { typography } from '@fd/themes/typography';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\nexport type BreadCrumbsType = 'collapsed' | 'default';\n\nexport interface BreadCrumbsProps {\n  items: BreadcrumbItem[];\n  type?: BreadCrumbsType;\n  className?: string;\n  'data-testid'?: string;\n  ariaLabel?: string;\n  ariaLabelEllipsis?: string;\n}\n\nconst StyledBreadcrumbs = styled(BreadcrumbsMUI)(({ theme }) => ({\n  '& .MuiBreadcrumbs-separator': {\n    color: theme.palette.semantic.text['text-weak'],\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nconst StyledEllipsisButton = styled('button')(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  background: 'none',\n  border: 'none',\n  color: theme.palette.semantic.text['text-weak'],\n  cursor: 'pointer',\n  padding: theme.spacing(0.5),\n  borderRadius: theme.radius?.['radius-4'] || '4px',\n  transition: 'background-color 0.2s ease-in-out',\n  fontFamily: typography.b1Weak.fontFamily,\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  fontWeight: typography.b1Weak.fontWeight,\n  letterSpacing: typography.b1Weak.letterSpacing,\n\n  '&:hover': {\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledCurrentPage = styled('span')(({ theme }) => ({\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  color: theme.palette.semantic.text['text-weak'],\n  fontWeight: typography.b1Weak.fontWeight,\n  fontFamily: typography.b1Weak.fontFamily,\n  letterSpacing: typography.b1Weak.letterSpacing,\n}));\n\nconst BreadCrumbs = memo(\n  ({\n    items,\n    type = 'default',\n    className,\n    'data-testid': dataTestId,\n    ariaLabel,\n    ariaLabelEllipsis,\n  }: BreadCrumbsProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const theme = useTheme();\n    const isSmallScreen = useMediaQuery(theme.breakpoints.down('tablet'));\n\n    if (!items?.length) {\n      return null;\n    }\n\n    const shouldCollapse = (type === 'collapsed' || (type === 'default' && isSmallScreen)) && items.length > 2 && !isExpanded;\n\n    // Build breadcrumb items array\n    const breadcrumbItems: React.ReactNode[] = [];\n\n    if (shouldCollapse) {\n      const firstItem = items[0];\n      const lastItem = items[items.length - 1];\n      if (!firstItem || !lastItem) {\n        return null;\n      }\n      // First item\n      breadcrumbItems.push(\n        <Link\n          key={`first-${firstItem.label}-${firstItem.href || ''}`}\n          fdKey={`breadcrumb-${firstItem.label}`}\n          href={firstItem.href}\n          iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n          size=\"body\"\n          tone=\"Neutral Weak\"\n          underline={false}\n          weight=\"regular\"\n        >\n          {firstItem.label}\n        </Link>\n      );\n\n      // Ellipsis\n      breadcrumbItems.push(\n        <StyledEllipsisButton\n          key=\"ellipsis\"\n          aria-label={ariaLabelEllipsis ?? undefined}\n          onClick={() => setIsExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              setIsExpanded(true);\n            }\n          }}\n          type=\"button\"\n        >\n          ...\n        </StyledEllipsisButton>\n      );\n\n      // Last item\n      breadcrumbItems.push(\n        <StyledCurrentPage\n          key={`current-${lastItem.label}-${lastItem.href || ''}`}\n          aria-current=\"page\"\n        >\n          {lastItem.label}\n        </StyledCurrentPage>\n      );\n    } else {\n      // Default/expanded mode: show all items\n      const allItems = items.map((item, index) => {\n        const isFirst = index === 0;\n        const isLast = index === items.length - 1;\n\n        if (isLast) {\n          return (\n            <StyledCurrentPage\n              key={`current-${item.label}-${item.href || ''}`}\n              aria-current=\"page\"\n            >\n              {item.label}\n            </StyledCurrentPage>\n          );\n        }\n        if (isFirst) {\n          return (\n            <Link\n              key={`first-${item.label}-${item.href || ''}`}\n              fdKey={`breadcrumb-${item.label}`}\n              href={item.href}\n              iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n              size=\"body\"\n              tone=\"Neutral Weak\"\n              underline={false}\n              weight=\"regular\"\n            >\n              {item.label}\n            </Link>\n          );\n        }\n        return (\n          <Link\n            key={`middle-${item.label}-${item.href || ''}`}\n            fdKey={`breadcrumb-${item.label}`}\n            href={item.href}\n            size=\"body\"\n            tone=\"Neutral Weak\"\n            underline={false}\n            weight=\"regular\"\n          >\n            {item.label}\n          </Link>\n        );\n      });\n      breadcrumbItems.push(...allItems);\n    }\n\n    return (\n      <StyledBreadcrumbs\n        aria-label={ariaLabel ?? undefined}\n        className={className}\n        data-testid={dataTestId}\n        separator=\"/\"\n      >\n        {breadcrumbItems}\n      </StyledBreadcrumbs>\n    );\n  },\n);\n\nBreadCrumbs.displayName = 'BreadCrumbs';\n\nexport default BreadCrumbs;"],"names":["StyledBreadcrumbs","styled","BreadcrumbsMUI","theme","color","palette","semantic","text","marginLeft","spacing","marginRight","StyledEllipsisButton","display","alignItems","background","border","cursor","padding","borderRadius","radius","transition","fontFamily","typography","b1Weak","fontSize","lineHeight","fontWeight","letterSpacing","backgroundColor","fill","outline","stroke","outlineOffset","StyledCurrentPage","BreadCrumbs","memo","items","type","className","dataTestId","ariaLabel","ariaLabelEllipsis","isExpanded","setIsExpanded","useState","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","length","breadcrumbItems","firstItem","lastItem","push","_jsx","Link","fdKey","label","href","iconLeft","ArrowLeft02Icon","size","tone","underline","weight","undefined","onClick","onKeyDown","e","key","preventDefault","children","allItems","map","item","index","isFirst","separator","displayName"],"mappings":"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"}

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

@@ -0,0 +1,20 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+}
+type BreadCrumbsType = 'collapsed' | 'default';
+interface BreadCrumbsProps {
+    items: BreadcrumbItem[];
+    type?: BreadCrumbsType;
+    className?: string;
+    'data-testid'?: string;
+    ariaLabel?: string;
+    ariaLabelEllipsis?: string;
+}
+declare const BreadCrumbs: react.MemoExoticComponent<({ items, type, className, "data-testid": dataTestId, ariaLabel, ariaLabelEllipsis, }: BreadCrumbsProps) => react_jsx_runtime.JSX.Element | null>;
+
+export { BreadCrumbs as default };
+export type { BreadCrumbsProps, BreadCrumbsType, BreadcrumbItem };

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

@@ -0,0 +1,2 @@
+import{jsx as e}from"react/jsx-runtime";import{memo as t,useState as r}from"react";import a from"@mui/material/Breadcrumbs";import{styled as i,useTheme as l}from"@mui/material/styles";import n from"@mui/material/useMediaQuery";import{Link as o}from"../Link/index.js";import s from"../../../icons/ArrowLeft02/index.js";import{typography as c}from"../../../themes/typography.js";const f=i(a)((({theme:e})=>({"& .MuiBreadcrumbs-separator":{color:e.palette.semantic.text["text-weak"],marginLeft:e.spacing(1),marginRight:e.spacing(1)}}))),u=i("button")((({theme:e})=>({display:"inline-flex",alignItems:"center",background:"none",border:"none",color:e.palette.semantic.text["text-weak"],cursor:"pointer",padding:e.spacing(.5),borderRadius:e.radius?.["radius-4"]||"4px",transition:"background-color 0.2s ease-in-out",fontFamily:c.b1Weak.fontFamily,fontSize:c.b1Weak.fontSize,lineHeight:c.b1Weak.lineHeight,fontWeight:c.b1Weak.fontWeight,letterSpacing:c.b1Weak.letterSpacing,"&:hover":{backgroundColor:e.palette.semantic.fill["fill-hover"]},"&:focus-visible":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),m=i("span")((({theme:e})=>({fontSize:c.b1Weak.fontSize,lineHeight:c.b1Weak.lineHeight,color:e.palette.semantic.text["text-weak"],fontWeight:c.b1Weak.fontWeight,fontFamily:c.b1Weak.fontFamily,letterSpacing:c.b1Weak.letterSpacing}))),d=t((({items:t,type:a="default",className:i,"data-testid":c,ariaLabel:d,ariaLabelEllipsis:b})=>{const[p,h]=r(!1),g=l(),k=n(g.breakpoints.down("tablet"));if(!t?.length)return null;const y=[];if(("collapsed"===a||"default"===a&&k)&&t.length>2&&!p){const r=t[0],a=t[t.length-1];if(!r||!a)return null;y.push(e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,iconLeft:e(s,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`first-${r.label}-${r.href||""}`)),y.push(e(u,{"aria-label":b??void 0,onClick:()=>h(!0),onKeyDown:e=>{"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),h(!0))},type:"button",children:"..."},"ellipsis")),y.push(e(m,{"aria-current":"page",children:a.label},`current-${a.label}-${a.href||""}`))}else{const r=t.map(((r,a)=>{const i=0===a;return a===t.length-1?e(m,{"aria-current":"page",children:r.label},`current-${r.label}-${r.href||""}`):i?e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,iconLeft:e(s,{size:"sm"}),size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`first-${r.label}-${r.href||""}`):e(o,{fdKey:`breadcrumb-${r.label}`,href:r.href,size:"body",tone:"Neutral Weak",underline:!1,weight:"regular",children:r.label},`middle-${r.label}-${r.href||""}`)}));y.push(...r)}return e(f,{"aria-label":d??void 0,className:i,"data-testid":c,separator:"/",children:y})}));d.displayName="BreadCrumbs";export{d as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/atoms/BreadCrumbs/index.tsx"],"sourcesContent":["import { memo, useState } from 'react';\n\nimport BreadcrumbsMUI from '@mui/material/Breadcrumbs';\nimport { styled, useTheme } from '@mui/material/styles';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport Link from '@fd/components/atoms/Link';\nimport ArrowLeft02Icon from '@fd/icons/ArrowLeft02';\nimport { typography } from '@fd/themes/typography';\n\nexport interface BreadcrumbItem {\n  label: string;\n  href?: string;\n}\n\nexport type BreadCrumbsType = 'collapsed' | 'default';\n\nexport interface BreadCrumbsProps {\n  items: BreadcrumbItem[];\n  type?: BreadCrumbsType;\n  className?: string;\n  'data-testid'?: string;\n  ariaLabel?: string;\n  ariaLabelEllipsis?: string;\n}\n\nconst StyledBreadcrumbs = styled(BreadcrumbsMUI)(({ theme }) => ({\n  '& .MuiBreadcrumbs-separator': {\n    color: theme.palette.semantic.text['text-weak'],\n    marginLeft: theme.spacing(1),\n    marginRight: theme.spacing(1),\n  },\n}));\n\nconst StyledEllipsisButton = styled('button')(({ theme }) => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  background: 'none',\n  border: 'none',\n  color: theme.palette.semantic.text['text-weak'],\n  cursor: 'pointer',\n  padding: theme.spacing(0.5),\n  borderRadius: theme.radius?.['radius-4'] || '4px',\n  transition: 'background-color 0.2s ease-in-out',\n  fontFamily: typography.b1Weak.fontFamily,\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  fontWeight: typography.b1Weak.fontWeight,\n  letterSpacing: typography.b1Weak.letterSpacing,\n\n  '&:hover': {\n    backgroundColor: theme.palette.semantic.fill['fill-hover'],\n  },\n\n  '&:focus-visible': {\n    outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n    outlineOffset: '2px',\n  },\n}));\n\nconst StyledCurrentPage = styled('span')(({ theme }) => ({\n  fontSize: typography.b1Weak.fontSize,\n  lineHeight: typography.b1Weak.lineHeight,\n  color: theme.palette.semantic.text['text-weak'],\n  fontWeight: typography.b1Weak.fontWeight,\n  fontFamily: typography.b1Weak.fontFamily,\n  letterSpacing: typography.b1Weak.letterSpacing,\n}));\n\nconst BreadCrumbs = memo(\n  ({\n    items,\n    type = 'default',\n    className,\n    'data-testid': dataTestId,\n    ariaLabel,\n    ariaLabelEllipsis,\n  }: BreadCrumbsProps) => {\n    const [isExpanded, setIsExpanded] = useState(false);\n    const theme = useTheme();\n    const isSmallScreen = useMediaQuery(theme.breakpoints.down('tablet'));\n\n    if (!items?.length) {\n      return null;\n    }\n\n    const shouldCollapse = (type === 'collapsed' || (type === 'default' && isSmallScreen)) && items.length > 2 && !isExpanded;\n\n    // Build breadcrumb items array\n    const breadcrumbItems: React.ReactNode[] = [];\n\n    if (shouldCollapse) {\n      const firstItem = items[0];\n      const lastItem = items[items.length - 1];\n      if (!firstItem || !lastItem) {\n        return null;\n      }\n      // First item\n      breadcrumbItems.push(\n        <Link\n          key={`first-${firstItem.label}-${firstItem.href || ''}`}\n          fdKey={`breadcrumb-${firstItem.label}`}\n          href={firstItem.href}\n          iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n          size=\"body\"\n          tone=\"Neutral Weak\"\n          underline={false}\n          weight=\"regular\"\n        >\n          {firstItem.label}\n        </Link>\n      );\n\n      // Ellipsis\n      breadcrumbItems.push(\n        <StyledEllipsisButton\n          key=\"ellipsis\"\n          aria-label={ariaLabelEllipsis ?? undefined}\n          onClick={() => setIsExpanded(true)}\n          onKeyDown={(e) => {\n            if (e.key === 'Enter' || e.key === ' ') {\n              e.preventDefault();\n              setIsExpanded(true);\n            }\n          }}\n          type=\"button\"\n        >\n          ...\n        </StyledEllipsisButton>\n      );\n\n      // Last item\n      breadcrumbItems.push(\n        <StyledCurrentPage\n          key={`current-${lastItem.label}-${lastItem.href || ''}`}\n          aria-current=\"page\"\n        >\n          {lastItem.label}\n        </StyledCurrentPage>\n      );\n    } else {\n      // Default/expanded mode: show all items\n      const allItems = items.map((item, index) => {\n        const isFirst = index === 0;\n        const isLast = index === items.length - 1;\n\n        if (isLast) {\n          return (\n            <StyledCurrentPage\n              key={`current-${item.label}-${item.href || ''}`}\n              aria-current=\"page\"\n            >\n              {item.label}\n            </StyledCurrentPage>\n          );\n        }\n        if (isFirst) {\n          return (\n            <Link\n              key={`first-${item.label}-${item.href || ''}`}\n              fdKey={`breadcrumb-${item.label}`}\n              href={item.href}\n              iconLeft={<ArrowLeft02Icon size=\"sm\" />}\n              size=\"body\"\n              tone=\"Neutral Weak\"\n              underline={false}\n              weight=\"regular\"\n            >\n              {item.label}\n            </Link>\n          );\n        }\n        return (\n          <Link\n            key={`middle-${item.label}-${item.href || ''}`}\n            fdKey={`breadcrumb-${item.label}`}\n            href={item.href}\n            size=\"body\"\n            tone=\"Neutral Weak\"\n            underline={false}\n            weight=\"regular\"\n          >\n            {item.label}\n          </Link>\n        );\n      });\n      breadcrumbItems.push(...allItems);\n    }\n\n    return (\n      <StyledBreadcrumbs\n        aria-label={ariaLabel ?? undefined}\n        className={className}\n        data-testid={dataTestId}\n        separator=\"/\"\n      >\n        {breadcrumbItems}\n      </StyledBreadcrumbs>\n    );\n  },\n);\n\nBreadCrumbs.displayName = 'BreadCrumbs';\n\nexport default BreadCrumbs;"],"names":["StyledBreadcrumbs","styled","BreadcrumbsMUI","theme","color","palette","semantic","text","marginLeft","spacing","marginRight","StyledEllipsisButton","display","alignItems","background","border","cursor","padding","borderRadius","radius","transition","fontFamily","typography","b1Weak","fontSize","lineHeight","fontWeight","letterSpacing","backgroundColor","fill","outline","stroke","outlineOffset","StyledCurrentPage","BreadCrumbs","memo","items","type","className","dataTestId","ariaLabel","ariaLabelEllipsis","isExpanded","setIsExpanded","useState","useTheme","isSmallScreen","useMediaQuery","breakpoints","down","length","breadcrumbItems","firstItem","lastItem","push","_jsx","Link","fdKey","label","href","iconLeft","ArrowLeft02Icon","size","tone","underline","weight","undefined","onClick","onKeyDown","e","key","preventDefault","children","allItems","map","item","index","isFirst","separator","displayName"],"mappings":"yXA0BA,MAAMA,EAAoBC,EAAOC,EAAPD,EAAuB,EAAGE,YAAO,CACzD,8BAA+B,CAC7BC,MAAOD,EAAME,QAAQC,SAASC,KAAK,aACnCC,WAAYL,EAAMM,QAAQ,GAC1BC,YAAaP,EAAMM,QAAQ,QAIzBE,EAAuBV,EAAO,SAAPA,EAAiB,EAAGE,YAAO,CACtDS,QAAS,cACTC,WAAY,SACZC,WAAY,OACZC,OAAQ,OACRX,MAAOD,EAAME,QAAQC,SAASC,KAAK,aACnCS,OAAQ,UACRC,QAASd,EAAMM,QAAQ,IACvBS,aAAcf,EAAMgB,SAAS,aAAe,MAC5CC,WAAY,oCACZC,WAAYC,EAAWC,OAAOF,WAC9BG,SAAUF,EAAWC,OAAOC,SAC5BC,WAAYH,EAAWC,OAAOE,WAC9BC,WAAYJ,EAAWC,OAAOG,WAC9BC,cAAeL,EAAWC,OAAOI,cAEjC,UAAW,CACTC,gBAAiBzB,EAAME,QAAQC,SAASuB,KAAK,eAG/C,kBAAmB,CACjBC,QAAS,aAAa3B,EAAME,QAAQC,SAASyB,OAAO,kBACpDC,cAAe,WAIbC,EAAoBhC,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACjDqB,SAAUF,EAAWC,OAAOC,SAC5BC,WAAYH,EAAWC,OAAOE,WAC9BrB,MAAOD,EAAME,QAAQC,SAASC,KAAK,aACnCmB,WAAYJ,EAAWC,OAAOG,WAC9BL,WAAYC,EAAWC,OAAOF,WAC9BM,cAAeL,EAAWC,OAAOI,kBAG7BO,EAAcC,GAClB,EACEC,QACAC,OAAO,UACPC,YACA,cAAeC,EACfC,YACAC,wBAEA,MAAOC,EAAYC,GAAiBC,GAAS,GACvCzC,EAAQ0C,IACRC,EAAgBC,EAAc5C,EAAM6C,YAAYC,KAAK,WAE3D,IAAKb,GAAOc,OACV,OAAO,KAGT,MAGMC,EAAqC,GAE3C,IALiC,cAATd,GAAkC,YAATA,GAAsBS,IAAmBV,EAAMc,OAAS,IAAMR,EAK3F,CAClB,MAAMU,EAAYhB,EAAM,GAClBiB,EAAWjB,EAAMA,EAAMc,OAAS,GACtC,IAAKE,IAAcC,EACjB,OAAO,KAGTF,EAAgBG,KACdC,EAACC,EAAI,CAEHC,MAAO,cAAcL,EAAUM,QAC/BC,KAAMP,EAAUO,KAChBC,SAAUL,EAACM,EAAe,CAACC,KAAK,OAChCA,KAAK,OACLC,KAAK,eACLC,WAAW,EACXC,OAAO,mBAENb,EAAUM,OATN,SAASN,EAAUM,SAASN,EAAUO,MAAQ,OAcvDR,EAAgBG,KACdC,EAAC5C,gBAEa8B,QAAqByB,EACjCC,QAAS,IAAMxB,GAAc,GAC7ByB,UAAYC,IACI,UAAVA,EAAEC,KAA6B,MAAVD,EAAEC,MACzBD,EAAEE,iBACF5B,GAAc,KAGlBN,KAAK,yBATD,aAgBRc,EAAgBG,KACdC,EAACtB,kBAEc,OAAMuC,SAElBnB,EAASK,OAHL,WAAWL,EAASK,SAASL,EAASM,MAAQ,MAMzD,KAAO,CAEL,MAAMc,EAAWrC,EAAMsC,KAAI,CAACC,EAAMC,KAChC,MAAMC,EAAoB,IAAVD,EAGhB,OAFeA,IAAUxC,EAAMc,OAAS,EAIpCK,EAACtB,EAAiB,CAAA,eAEH,OAAMuC,SAElBG,EAAKjB,OAHD,WAAWiB,EAAKjB,SAASiB,EAAKhB,MAAQ,MAO7CkB,EAEAtB,EAACC,EAAI,CAEHC,MAAO,cAAckB,EAAKjB,QAC1BC,KAAMgB,EAAKhB,KACXC,SAAUL,EAACM,EAAe,CAACC,KAAK,OAChCA,KAAK,OACLC,KAAK,eACLC,WAAW,EACXC,OAAO,UAASO,SAEfG,EAAKjB,OATD,SAASiB,EAAKjB,SAASiB,EAAKhB,MAAQ,MAc7CJ,EAACC,EAAI,CAEHC,MAAO,cAAckB,EAAKjB,QAC1BC,KAAMgB,EAAKhB,KACXG,KAAK,OACLC,KAAK,eACLC,WAAW,EACXC,OAAO,UAASO,SAEfG,EAAKjB,OARD,UAAUiB,EAAKjB,SAASiB,EAAKhB,MAAQ,SAYhDR,EAAgBG,QAAQmB,EAC1B,CAEA,OACElB,EAACvD,EAAiB,CAAA,aACJwC,QAAa0B,EACzB5B,UAAWA,EAAS,cACPC,EACbuC,UAAU,IAAGN,SAEZrB,OAMTjB,EAAY6C,YAAc"}

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

@@ -1,4 +1,4 @@
-import { AutocompleteProps, AutocompleteOption } from '../Autocomplete/index.js';
+import { AutocompleteOption, AutocompleteProps } from '../Autocomplete/index.js';
 
 type ComboboxOption = AutocompleteOption;
 type ComboboxProps = Omit<AutocompleteProps, 'type'>;

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGV,UACbW,EAAWL,EAAa,GAAGN,gBAAiBY,EAC5CC,EAAUN,EAAY,GAAGP,eAAgBY,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAAAA,KAACtC,EAAG,CAAA4B,SAAA,CACFU,EAAAA,KAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,MAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAAAA,IAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAAAA,KAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBT,KAAMA,GAAQD,EACdG,SAvB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GAwB1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAAAA,KAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUI,EACV6B,QAASE,IAIVJ,GAAcG,GACbrB,EAAAA,IAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label?: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Optional label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = label ? `${fdKey}-label` : undefined;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      {label && (\n        <StyledLabelContainer>\n          <FormLabel id={labelId}>\n            {label} {required && <WeakText>{' *'}</WeakText>}\n          </FormLabel>\n          {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n          {!!errorText && (\n            <MuiFormHelperText error id={errorId}>\n              <CancelCircleIcon size={'md'} />\n              {errorText}\n            </MuiFormHelperText>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","undefined","helperId","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"oZAWA,MAAMA,EAAYC,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAAA,OAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAAA,OAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAUN,EAAQ,GAAGJ,eAAgBW,EACrCC,EAAWN,EAAa,GAAGN,gBAAiBW,EAC5CE,EAAUN,EAAY,GAAGP,eAAgBW,EACzCG,EAAc,CAACF,EAAUC,GAASE,OAAOC,SAASC,KAAK,WAAQN,EAIrE,OACEO,EAAAA,KAACtC,EAAG,CAAA4B,SAAA,CACDJ,GACCc,EAAAA,KAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAAAA,KAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAAAA,IAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAAAA,IAACC,EAAiB,CAACF,GAAIR,EAAQJ,SAAGF,IAAkC,OAE/EC,GACDW,OAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAAAA,IAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMTc,EAAAA,IAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBI,EAAS,kBACzBD,EACjBT,KAAMA,GAAQD,EACdG,SAzB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GA0B1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAAA,eAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAAA,eAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAAAA,KAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUG,EACV8B,QAASE,IAIVJ,GAAcG,GACbrB,EAAAA,IAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}

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

@@ -12,7 +12,7 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
     /** Callback fired whenever the selection changes with the event and newly selected value. */
     onChange: (event: react__default.ChangeEvent<HTMLInputElement>, value: string) => void;
     /** Label rendered above the group; accepts plain text or a custom node. */
-    label: react__default.ReactNode;
+    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. */
@@ -29,7 +29,7 @@ interface RadioGroupProps extends Omit<RadioGroupProps$1, 'name' | 'onChange' |
  * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.
  * @param value - Currently selected option value; use null or undefined when no option should be selected.
  * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.
- * @param label - Label rendered above the group; accepts plain text or a custom node.
+ * @param label - Optional label rendered above the group; accepts plain text or a custom node.
  * @param required - Marks the radio group as required and surfaces the required indicator.
  * @param helperText - Helper text displayed below the label to provide additional guidance.
  * @param errorText - Error message shown below the helper text and marks the inputs as invalid.

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = `${fdKey}-label`;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      <StyledLabelContainer>\n        <FormLabel id={labelId}>\n          {label} {required && <WeakText>{' *'}</WeakText>}\n        </FormLabel>\n        {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n        {!!errorText && (\n          <MuiFormHelperText error id={errorId}>\n            <CancelCircleIcon size={'md'} />\n            {errorText}\n          </MuiFormHelperText>\n        )}\n      </StyledLabelContainer>\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","helperId","undefined","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAU,GAAGV,UACbW,EAAWL,EAAa,GAAGN,gBAAiBY,EAC5CC,EAAUN,EAAY,GAAGP,eAAgBY,EACzCE,EAAc,CAACH,EAAUE,GAASE,OAAOC,SAASC,KAAK,WAAQL,EAIrE,OACEM,EAACtC,EAAG,CAAA4B,SAAA,CACFU,EAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAACC,EAAiB,CAACF,GAAIT,EAAQH,SAAGF,IAAkC,OAE/EC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,EAAOL,SAAA,CAClCa,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAKPc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBK,EAAS,kBACzBF,EACjBT,KAAMA,GAAQD,EACdG,SAvB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GAwB1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUI,EACV6B,QAASE,IAIVJ,GAAcG,GACbrB,EAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/RadioGroup/index.tsx"],"sourcesContent":["import React, { isValidElement, type ReactElement } from 'react';\n\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport FormLabel from '@mui/material/FormLabel';\nimport MuiRadioGroup, { type RadioGroupProps as MuiRadioGroupProps } from '@mui/material/RadioGroup';\nimport { styled } from '@mui/material/styles';\n\nimport Box from '@fd/components/atoms/Box';\nimport { type FormControlLabelProps } from '@fd/components/molecules/FormControlLabel';\nimport CancelCircleIcon from '@fd/icons/CancelCircle';\n\nconst StyledBox = styled(Box)(({ theme }) => ({\n  ...{ marginTop: theme.spacing(2), marginBottom: 0 },\n}));\n\nconst StyledLabelContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  marginBottom: theme.spacing(0.5),\n}));\n\nconst ConditionalContainer = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  gap: theme.spacing(0.5),\n  borderLeft: `4px solid ${theme.palette.semantic.stroke['stroke-weak']}`,\n  marginTop: theme.spacing(2),\n  marginLeft: theme.spacing(1.75),\n  paddingLeft: theme.spacing(3.25),\n}));\n\nconst WeakText = styled('span')(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n  marginLeft: theme.spacing(0.5),\n}));\n\n/** Props for a radio group */\nexport interface RadioGroupProps extends Omit<MuiRadioGroupProps, 'name' | 'onChange' | 'value'> {\n  /** Identifier applied to the radio group; also used for the radio name attribute. */\n  fdKey?: string;\n  /** The name used to reference the value of the control. If not provided, falls back to `fdKey`. */\n  name?: string;\n  /** Currently selected option value; use null or undefined when no option should be selected. */\n  value?: string | null;\n  /** Callback fired whenever the selection changes with the event and newly selected value. */\n  onChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;\n  /** Label rendered above the group; accepts plain text or a custom node. */\n  label?: React.ReactNode;\n  /** Marks the radio group as required and surfaces the required indicator. */\n  required?: boolean;\n  /** Helper text displayed below the label to provide additional guidance. */\n  helperText?: string;\n  /** Error message shown below the helper text and marks the inputs as invalid. */\n  errorText?: string;\n  /** The children of the radio group. */\n  children?: React.ReactNode;\n}\n\n/**\n * RadioGroup component is a wrapper component for a radio group.\n *\n * @param fdKey - Identifier applied to the radio group; also used for the radio name attribute.\n * @param name - The name used to reference the value of the control. If not provided, falls back to fdKey.\n * @param value - Currently selected option value; use null or undefined when no option should be selected.\n * @param onChange - Callback fired whenever the selection changes with the event and newly selected value.\n * @param label - Optional label rendered above the group; accepts plain text or a custom node.\n * @param required - Marks the radio group as required and surfaces the required indicator.\n * @param helperText - Helper text displayed below the label to provide additional guidance.\n * @param errorText - Error message shown below the helper text and marks the inputs as invalid.\n * @param children - The children of the radio group.\n * @param groupProps - Additional props to pass to the underlying MUI RadioGroup component.\n * @returns The RadioGroup component.\n */\n\nexport const RadioGroup = ({\n  fdKey = 'radio-default',\n  name,\n  value = '',\n  onChange,\n  label,\n  required = false,\n  helperText,\n  errorText,\n  children,\n  ...groupProps\n}: RadioGroupProps): React.ReactElement => {\n  const labelId = label ? `${fdKey}-label` : undefined;\n  const helperId = helperText ? `${fdKey}-helper` : undefined;\n  const errorId = errorText ? `${fdKey}-error` : undefined;\n  const describedBy = [helperId, errorId].filter(Boolean).join(' ') || undefined;\n\n  const handleChange: MuiRadioGroupProps['onChange'] = (e, newVal) => onChange(e, newVal);\n\n  return (\n    <Box>\n      {label && (\n        <StyledLabelContainer>\n          <FormLabel id={labelId}>\n            {label} {required && <WeakText>{' *'}</WeakText>}\n          </FormLabel>\n          {helperText ? <MuiFormHelperText id={helperId}>{helperText}</MuiFormHelperText> : null}\n\n          {!!errorText && (\n            <MuiFormHelperText error id={errorId}>\n              <CancelCircleIcon size={'md'} />\n              {errorText}\n            </MuiFormHelperText>\n          )}\n        </StyledLabelContainer>\n      )}\n\n      <MuiRadioGroup\n        aria-describedby={describedBy}\n        aria-invalid={errorText ? true : undefined}\n        aria-labelledby={labelId}\n        name={name ?? fdKey}\n        onChange={handleChange}\n        value={value}\n        {...groupProps}\n      >\n        {React.Children.map(children, (child) => {\n          if (!isValidElement(child)) {\n            return child;\n          }\n\n          // Check if child has FormControlLabel-specific props (value and control)\n          // This ensures we only process FormControlLabel components, not arbitrary elements like <Box>\n          const childProps = child.props as Partial<FormControlLabelProps>;\n          if (!('value' in childProps) || !('control' in childProps)) {\n            return child;\n          }\n\n          const formControlLabelProps = childProps as FormControlLabelProps;\n          const radioValue =\n            typeof formControlLabelProps.value === 'string'\n              ? formControlLabelProps.value\n              : String(formControlLabelProps.value ?? '');\n          const isSelected = value === radioValue;\n\n          // Extract Radio component from FormControlLabel's control prop\n          const radioControl = formControlLabelProps.control;\n\n          const optionConditionalChildren = formControlLabelProps.children;\n\n          // Clone the Radio component with updated children and checked state\n          const updatedRadio = isValidElement(radioControl)\n            ? React.cloneElement(radioControl, {\n                ...(radioControl.props as Record<string, unknown>),\n                checked: isSelected,\n                error: !!errorText,\n                name: name ?? fdKey,\n              } as Partial<unknown>)\n            : radioControl;\n\n          return (\n            <StyledBox key={radioValue}>\n              {React.cloneElement(child as ReactElement<FormControlLabelProps>, {\n                ...formControlLabelProps,\n                children: undefined,\n                control: updatedRadio,\n              })}\n\n              {/* conditional block under the selected option */}\n              {isSelected && optionConditionalChildren && (\n                <ConditionalContainer>{optionConditionalChildren}</ConditionalContainer>\n              )}\n            </StyledBox>\n          );\n        })}\n      </MuiRadioGroup>\n    </Box>\n  );\n};\n\nexport default RadioGroup;\n"],"names":["StyledBox","styled","Box","theme","marginTop","spacing","marginBottom","StyledLabelContainer","display","flexDirection","ConditionalContainer","gap","borderLeft","palette","semantic","stroke","marginLeft","paddingLeft","WeakText","color","text","RadioGroup","fdKey","name","value","onChange","label","required","helperText","errorText","children","groupProps","labelId","undefined","helperId","errorId","describedBy","filter","Boolean","join","_jsxs","FormLabel","id","_jsx","MuiFormHelperText","error","CancelCircleIcon","size","MuiRadioGroup","e","newVal","React","Children","map","child","isValidElement","childProps","props","formControlLabelProps","radioValue","String","isSelected","radioControl","control","optionConditionalChildren","updatedRadio","cloneElement","checked"],"mappings":"iYAWA,MAAMA,EAAYC,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjCC,UAAWD,EAAME,QAAQ,GAAIC,aAAc,MAG5CC,EAAuBN,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfH,aAAcH,EAAME,QAAQ,QAGxBK,EAAuBT,EAAOC,EAAPD,EAAY,EAAGE,YAAO,CACjDK,QAAS,OACTC,cAAe,SACfE,IAAKR,EAAME,QAAQ,IACnBO,WAAY,aAAaT,EAAMU,QAAQC,SAASC,OAAO,iBACvDX,UAAWD,EAAME,QAAQ,GACzBW,WAAYb,EAAME,QAAQ,MAC1BY,YAAad,EAAME,QAAQ,UAGvBa,EAAWjB,EAAO,OAAPA,EAAe,EAAGE,YAAO,CACxCgB,MAAOhB,EAAMU,QAAQC,SAASM,KAAK,aACnCJ,WAAYb,EAAME,QAAQ,QAyCfgB,EAAa,EACxBC,QAAQ,gBACRC,OACAC,QAAQ,GACRC,WACAC,QACAC,YAAW,EACXC,aACAC,YACAC,cACGC,MAEH,MAAMC,EAAUN,EAAQ,GAAGJ,eAAgBW,EACrCC,EAAWN,EAAa,GAAGN,gBAAiBW,EAC5CE,EAAUN,EAAY,GAAGP,eAAgBW,EACzCG,EAAc,CAACF,EAAUC,GAASE,OAAOC,SAASC,KAAK,WAAQN,EAIrE,OACEO,EAACtC,EAAG,CAAA4B,SAAA,CACDJ,GACCc,EAACjC,EAAoB,CAAAuB,SAAA,CACnBU,EAACC,EAAS,CAACC,GAAIV,EAAOF,SAAA,CACnBJ,EAAK,IAAGC,GAAYgB,EAACzB,EAAQ,CAAAY,SAAE,UAEjCF,EAAae,EAACC,EAAiB,CAACF,GAAIR,EAAQJ,SAAGF,IAAkC,OAE/EC,GACDW,EAACI,EAAiB,CAACC,OAAK,EAACH,GAAIP,YAC3BQ,EAACG,EAAgB,CAACC,KAAM,OACvBlB,QAMTc,EAACK,EAAa,CAAA,mBACMZ,EAAW,iBACfP,QAAmBI,EAAS,kBACzBD,EACjBT,KAAMA,GAAQD,EACdG,SAzB+C,CAACwB,EAAGC,IAAWzB,EAASwB,EAAGC,GA0B1E1B,MAAOA,KACHO,EAAUD,SAEbqB,EAAMC,SAASC,IAAIvB,GAAWwB,IAC7B,IAAKC,EAAeD,GAClB,OAAOA,EAKT,MAAME,EAAaF,EAAMG,MACzB,KAAM,UAAWD,MAAiB,YAAaA,GAC7C,OAAOF,EAGT,MAAMI,EAAwBF,EACxBG,EACmC,iBAAhCD,EAAsBlC,MACzBkC,EAAsBlC,MACtBoC,OAAOF,EAAsBlC,OAAS,IACtCqC,EAAarC,IAAUmC,EAGvBG,EAAeJ,EAAsBK,QAErCC,EAA4BN,EAAsB5B,SAGlDmC,EAAeV,EAAeO,GAChCX,EAAMe,aAAaJ,EAAc,IAC3BA,EAAaL,MACjBU,QAASN,EACThB,QAAShB,EACTN,KAAMA,GAAQD,IAEhBwC,EAEJ,OACEtB,EAACxC,EAAS,CAAA8B,SAAA,CACPqB,EAAMe,aAAaZ,EAA8C,IAC7DI,EACH5B,cAAUG,EACV8B,QAASE,IAIVJ,GAAcG,GACbrB,EAACjC,EAAoB,CAAAoB,SAAEkC,MATXL"}

package/dist/components/organisms/Heading/Heading.cjs.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var t=require("@mui/material/Toolbar"),i=require("@mui/material/styles"),a=require("@mui/material/Box"),n=require("../../atoms/BreadCrumbs/index.cjs.js"),l=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Typography"),r=require("../../molecules/ButtonGroup/index.cjs.js"),o=require("../../molecules/Combobox/index.cjs.js");const d=i.styled(t)((({theme:e})=>({flexDirection:"column",alignItems:"stretch",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:e.spacing(2),paddingBottom:e.spacing(2)},[e.breakpoints.down("tablet")]:{paddingTop:e.spacing(2),paddingBottom:e.spacing(2)}}))),p=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:e.spacing(.5),minWidth:0,maxWidth:"100%",[e.breakpoints.up("tablet")]:{marginRight:e.spacing(2)}}))),c=i.styled(a)((({theme:e})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:e.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:e.spacing(.5),[e.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:e.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),u=i.styled(a)((({theme:e})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:e.spacing(2),width:"100%",maxWidth:"100%",[e.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:e.spacing(2),flexWrap:"wrap"},[e.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:e.spacing(2),paddingBottom:e.spacing(2),width:"100%"}}))),g=({title:t,buttons:i,description:a,breadcrumbItems:g,selectBoxes:m})=>e.jsxs(d,{children:[e.jsxs(p,{children:[g&&e.jsx(n,{items:g}),t&&e.jsx(s,{variant:"h1Strong",children:t}),a&&e.jsx(s,{color:"semantic.text.text-weak",variant:"captionWeak",children:a}),m?.length?e.jsx(u,{children:m.map((t=>e.jsx(o.Combobox,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),i?.length?e.jsx(c,{children:e.jsx(r,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:i.map((t=>{const i=t.variant;return e.jsx(l.Button,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});exports.Heading=g,exports.default=g;
+//# sourceMappingURL=Heading.cjs.js.map

package/dist/components/organisms/Heading/Heading.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.cjs.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"8cAwCA,MAAMA,EAAgBC,EAAAA,OAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAAA,OAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAAA,KAAClC,EAAa,CAAAmC,SAAA,CApCdD,OAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAAAA,IAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAAAA,IAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAAAA,IAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAAAA,IAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAAAA,IAACS,EAAAA,SAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAAAA,IAACf,EAAkB,CAAAc,SACjBC,EAAAA,IAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAAAA,IAACsB,SAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

package/dist/components/organisms/Heading/Heading.d.ts

@@ -0,0 +1,32 @@
+import react__default from 'react';
+import { BreadcrumbItem } from '../../atoms/BreadCrumbs/index.js';
+import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
+import { ComboboxOption, ComboboxProps } from '../../molecules/Combobox/index.js';
+
+interface ButtonConfig {
+    variant: ButtonType;
+    onClick: () => void;
+    label: string;
+    fdKey: string;
+    disabled?: boolean;
+}
+interface SelectConfig {
+    options: ComboboxOption[];
+    label: string;
+    placeholder?: string;
+    fdKey: string;
+    onChange?: ComboboxProps['onChange'];
+    value?: ComboboxProps['value'];
+    translations: ComboboxProps['translations'];
+}
+interface HeadingProps {
+    title?: string;
+    buttons?: ButtonConfig[];
+    description?: string;
+    breadcrumbItems?: BreadcrumbItem[];
+    selectBoxes?: SelectConfig[];
+}
+declare const Heading: react__default.FC<HeadingProps>;
+
+export { Heading, Heading as default };
+export type { ButtonConfig, HeadingProps, SelectConfig };

package/dist/components/organisms/Heading/Heading.js

@@ -0,0 +1,2 @@
+import{jsxs as t,jsx as e}from"react/jsx-runtime";import"react";import i from"@mui/material/Toolbar";import{styled as a}from"@mui/material/styles";import n from"@mui/material/Box";import o from"../../atoms/BreadCrumbs/index.js";import{Button as l}from"../../atoms/Button/index.js";import r from"@mui/material/Typography";import s from"../../molecules/ButtonGroup/index.js";import{Combobox as p}from"../../molecules/Combobox/index.js";const m=a(i)((({theme:t})=>({flexDirection:"column",alignItems:"stretch",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"flex-start",justifyContent:"space-between",paddingTop:t.spacing(2),paddingBottom:t.spacing(2)},[t.breakpoints.down("tablet")]:{paddingTop:t.spacing(2),paddingBottom:t.spacing(2)}}))),d=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",flex:"1 1 auto",gap:t.spacing(.5),minWidth:0,maxWidth:"100%",[t.breakpoints.up("tablet")]:{marginRight:t.spacing(2)}}))),c=a(n)((({theme:t})=>({display:"flex",justifyContent:"flex-end",alignItems:"center",gap:t.spacing(1),flexShrink:0,alignSelf:"flex-start",paddingTop:t.spacing(.5),[t.breakpoints.down("tablet")]:{justifyContent:"flex-end",marginTop:t.spacing(1),paddingTop:0,alignSelf:"stretch",width:"100%"}}))),g=a(n)((({theme:t})=>({display:"flex",flexDirection:"column",alignItems:"flex-start",gap:t.spacing(2),width:"100%",maxWidth:"100%",[t.breakpoints.up("tablet")]:{flexDirection:"row",alignItems:"center",paddingTop:t.spacing(2),flexWrap:"wrap"},[t.breakpoints.down("tablet")]:{flexDirection:"column",alignItems:"flex-start",paddingTop:t.spacing(2),paddingBottom:t.spacing(2),width:"100%"}}))),f=({title:i,buttons:a,description:n,breadcrumbItems:f,selectBoxes:u})=>t(m,{children:[t(d,{children:[f&&e(o,{items:f}),i&&e(r,{variant:"h1Strong",children:i}),n&&e(r,{color:"semantic.text.text-weak",variant:"captionWeak",children:n}),u?.length?e(g,{children:u.map((t=>e(p,{fdKey:t.fdKey,label:t.label,onChange:t.onChange,options:t.options,placeholder:t.placeholder,translations:t.translations,value:t.value??null},t.fdKey)))}):null]}),a?.length?e(c,{children:e(s,{align:"right",fdKey:"heading-button-group",layout:"horizontal",size:"medium",children:a.map((t=>{const i=t.variant;return e(l,{disabled:t.disabled??!1,fdKey:t.fdKey,onClick:t.onClick,variant:i,children:t.label},t.fdKey)}))})}):null]});export{f as Heading,f as default};
+//# sourceMappingURL=Heading.js.map

package/dist/components/organisms/Heading/Heading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Heading.js","sources":["../../../../src/components/organisms/Heading/Heading.tsx"],"sourcesContent":["import React from 'react';\n\nimport Toolbar from '@mui/material/Toolbar';\n\nimport styled from '@fd/utilities/styledUtilities';\n\nimport Box from '../../atoms/Box';\nimport BreadCrumbs, { type BreadcrumbItem } from '../../atoms/BreadCrumbs';\nimport Button from '../../atoms/Button';\nimport { type ButtonType } from '../../atoms/Button/getButtonStyles';\nimport Typography from '../../atoms/Typography';\nimport  ButtonGroup from \"../../molecules/ButtonGroup\";\nimport {Combobox, type ComboboxOption, type ComboboxProps} from '../../molecules/Combobox';\n\nexport interface ButtonConfig {\n  variant: ButtonType;\n  onClick: () => void;\n  label: string;\n  fdKey: string;\n  disabled?: boolean;\n}\n\nexport interface SelectConfig {\n  options: ComboboxOption[];\n  label: string;\n  placeholder?: string;\n  fdKey: string;\n  onChange?: ComboboxProps['onChange'];\n  value?: ComboboxProps['value'];\n  translations: ComboboxProps['translations'];\n}\n\nexport interface HeadingProps {\n  title?: string;\n  buttons?: ButtonConfig[];\n  description?: string;\n  breadcrumbItems?: BreadcrumbItem[];\n  selectBoxes?: SelectConfig[];\n}\n\nconst StyledToolbar = styled(Toolbar)(({ theme }) => ({\n  flexDirection: 'column',\n  alignItems: 'stretch',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'flex-start',\n    justifyContent: 'space-between',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n  [theme.breakpoints.down('tablet')]: {\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n  },\n}));\n\nconst StyledLeftSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  flex: '1 1 auto',\n  gap: theme.spacing(0.5),\n  minWidth: 0,\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    marginRight: theme.spacing(2),\n  },\n}));\n\nconst StyledRightSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  justifyContent: 'flex-end',\n  alignItems: 'center',\n  gap: theme.spacing(1),\n  flexShrink: 0,\n  alignSelf: 'flex-start',\n  paddingTop: theme.spacing(0.5),\n  [theme.breakpoints.down('tablet')]: {\n    justifyContent: 'flex-end',\n    marginTop: theme.spacing(1),\n    paddingTop: 0,\n    alignSelf: 'stretch',\n    width: '100%',\n  },\n}));\n\nconst StyledSelectedSection = styled(Box)(({ theme }) => ({\n  display: 'flex',\n  flexDirection: 'column',\n  alignItems: 'flex-start',\n  gap: theme.spacing(2),\n  width: '100%',\n  maxWidth: '100%',\n  [theme.breakpoints.up('tablet')]: {\n    flexDirection: 'row',\n    alignItems: 'center',\n    paddingTop: theme.spacing(2),\n    flexWrap: 'wrap',\n  },\n  [theme.breakpoints.down('tablet')]: {\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    paddingTop: theme.spacing(2),\n    paddingBottom: theme.spacing(2),\n    width: '100%',\n  },\n}));\n\nexport const Heading: React.FC<HeadingProps> = ({\n  title,\n  buttons,\n  description,\n  breadcrumbItems,\n  selectBoxes,\n}: HeadingProps) => {\n    const renderSelectedSection = () => {\n      if (!selectBoxes?.length) {\n        return null;\n      }\n\n      return (\n        <StyledSelectedSection>\n          {selectBoxes.map((selectConfig) => (\n            <Combobox\n              key={selectConfig.fdKey}\n              fdKey={selectConfig.fdKey}\n              label={selectConfig.label}\n              onChange={selectConfig.onChange}\n              options={selectConfig.options}\n              placeholder={selectConfig.placeholder}\n              translations={selectConfig.translations}\n              value={selectConfig.value ?? null}\n            />\n          ))}\n        </StyledSelectedSection>\n      );\n    };\n\n  const renderLeftSection = () => (\n    <StyledLeftSection>\n        {breadcrumbItems && <BreadCrumbs items={breadcrumbItems} />}\n        {title && <Typography variant=\"h1Strong\">{title}</Typography>}\n        {description && <Typography color = 'semantic.text.text-weak' variant=\"captionWeak\">{description}</Typography>}\n        {renderSelectedSection()}\n    </StyledLeftSection>\n  );\n\n  const renderRightSection = () => {\n    if (!buttons?.length) {\n      return null;\n    }\n\n    return (\n      <StyledRightSection>\n        <ButtonGroup align=\"right\" fdKey=\"heading-button-group\" layout=\"horizontal\" size=\"medium\">\n          {buttons.map((buttonConfig: ButtonConfig) => {\n            const variant: ButtonType = buttonConfig.variant;\n            return (\n              <Button\n                key={buttonConfig.fdKey}\n                disabled={buttonConfig.disabled ?? false}\n                fdKey={buttonConfig.fdKey}\n                onClick={buttonConfig.onClick}\n                variant={variant}\n              >\n                {buttonConfig.label}\n              </Button>\n            );\n          })}\n        </ButtonGroup>\n      </StyledRightSection>\n    );\n  };\n\n  return (\n    <StyledToolbar>\n        {renderLeftSection()}\n        {renderRightSection()}\n      </StyledToolbar>\n  );\n};\n\nexport default Heading;"],"names":["StyledToolbar","styled","Toolbar","theme","flexDirection","alignItems","breakpoints","up","justifyContent","paddingTop","spacing","paddingBottom","down","StyledLeftSection","Box","display","flex","gap","minWidth","maxWidth","marginRight","StyledRightSection","flexShrink","alignSelf","marginTop","width","StyledSelectedSection","flexWrap","Heading","title","buttons","description","breadcrumbItems","selectBoxes","_jsxs","children","_jsx","BreadCrumbs","items","Typography","variant","color","length","map","selectConfig","Combobox","fdKey","label","onChange","options","placeholder","translations","value","ButtonGroup","align","layout","size","buttonConfig","Button","disabled","onClick"],"mappings":"kbAwCA,MAAMA,EAAgBC,EAAOC,EAAPD,EAAgB,EAAGE,YAAO,CAC9CC,cAAe,SACfC,WAAY,UACZ,CAACF,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,aACZG,eAAgB,gBAChBC,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,IAE/B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCH,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,QAI3BG,EAAoBZ,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC9CY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZW,KAAM,WACNC,IAAKd,EAAMO,QAAQ,IACnBQ,SAAU,EACVC,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCa,YAAajB,EAAMO,QAAQ,QAIzBW,EAAqBpB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAC/CY,QAAS,OACTP,eAAgB,WAChBH,WAAY,SACZY,IAAKd,EAAMO,QAAQ,GACnBY,WAAY,EACZC,UAAW,aACXd,WAAYN,EAAMO,QAAQ,IAC1B,CAACP,EAAMG,YAAYM,KAAK,WAAY,CAClCJ,eAAgB,WAChBgB,UAAWrB,EAAMO,QAAQ,GACzBD,WAAY,EACZc,UAAW,UACXE,MAAO,YAILC,EAAwBzB,EAAOa,EAAPb,EAAY,EAAGE,YAAO,CAClDY,QAAS,OACTX,cAAe,SACfC,WAAY,aACZY,IAAKd,EAAMO,QAAQ,GACnBe,MAAO,OACPN,SAAU,OACV,CAAChB,EAAMG,YAAYC,GAAG,WAAY,CAChCH,cAAe,MACfC,WAAY,SACZI,WAAYN,EAAMO,QAAQ,GAC1BiB,SAAU,QAEZ,CAACxB,EAAMG,YAAYM,KAAK,WAAY,CAClCR,cAAe,SACfC,WAAY,aACZI,WAAYN,EAAMO,QAAQ,GAC1BC,cAAeR,EAAMO,QAAQ,GAC7Be,MAAO,YAIEG,EAAkC,EAC7CC,QACAC,UACAC,cACAC,kBACAC,iBA8DEC,EAAClC,EAAa,CAAAmC,SAAA,CApCdD,EAACrB,EAAiB,CAAAsB,SAAA,CACbH,GAAmBI,EAACC,EAAW,CAACC,MAAON,IACvCH,GAASO,EAACG,EAAU,CAACC,QAAQ,WAAUL,SAAEN,IACzCE,GAAeK,EAACG,EAAU,CAACE,MAAQ,0BAA0BD,QAAQ,cAAaL,SAAEJ,IA1BlFE,GAAaS,OAKhBN,EAACV,EAAqB,CAAAS,SACnBF,EAAYU,KAAKC,GAChBR,EAACS,EAAQ,CAEPC,MAAOF,EAAaE,MACpBC,MAAOH,EAAaG,MACpBC,SAAUJ,EAAaI,SACvBC,QAASL,EAAaK,QACtBC,YAAaN,EAAaM,YAC1BC,aAAcP,EAAaO,aAC3BC,MAAOR,EAAaQ,OAAS,MAPxBR,EAAaE,WAPjB,QA+BNhB,GAASY,OAKZN,EAACf,EAAkB,CAAAc,SACjBC,EAACiB,EAAW,CAACC,MAAM,QAAQR,MAAM,uBAAuBS,OAAO,aAAaC,KAAK,SAAQrB,SACtFL,EAAQa,KAAKc,IACZ,MAAMjB,EAAsBiB,EAAajB,QACzC,OACEJ,EAACsB,EAAM,CAELC,SAAUF,EAAaE,WAAY,EACnCb,MAAOW,EAAaX,MACpBc,QAASH,EAAaG,QACtBpB,QAASA,EAAOL,SAEfsB,EAAaV,OANTU,EAAaX,cAVrB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flipdish/portal-library",
-  "version": "7.8.0",
+  "version": "7.9.1",
   "files": [
     "dist"
   ],
@@ -127,7 +127,7 @@
   },
   "msw": {
     "workerDirectory": [
-      "./"
+      "./public"
     ]
   },
   "scripts": {