@flipdish/portal-library 5.9.1 → 6.0.1

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),l=require("../../atoms/Button/index.cjs.js");const i=t.styled("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,a="reverse"===i;return{display:"flex",flexDirection:n?a?"column-reverse":"column":a?"row-reverse":"row",justifyContent:n||"left"===r?a?"flex-end":"flex-start":"center"===r?"center":a?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}}));module.exports=({children:t,align:n="right",layout:a="horizontal",size:o="medium",order:s="default",fullWidthChildren:d,gap:u,fdKey:c,className:h,...m})=>{const f=u??("small"===o?1:"large"===o?3:2),p="vertical"===a||!!d,g=e=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g);return r.cloneElement(t,{children:l})}if(e.type!==l.Button)return e;const t=e.props,i={};return void 0===t.size&&(i.size=o),p&&void 0===t.fullWidth&&(i.fullWidth=!0),Object.keys(i).length>0?r.cloneElement(e,i):e},y=r.Children.map(t,g);return e.jsx(i,{...m,align:n,className:h,"data-fd":c,gap:f,layout:a,order:s,role:m.role??"group",children:y})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),t=require("@mui/material/styles"),l=require("../../atoms/Button/index.cjs.js");const i=t.styled("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,a="reverse"===i;return{display:"flex",flexDirection:n?a?"column-reverse":"column":a?"row-reverse":"row",justifyContent:n||"left"===r?a?"flex-end":"flex-start":"center"===r?"center":a?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}}));module.exports=({children:t,align:n="right",layout:a="horizontal",size:s="medium",order:o="default",fullWidthChildren:d,gap:u,fdKey:c,className:h,...m})=>{const f=u??("small"===s?1:"large"===s?3:2),p="vertical"===a||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l.Button)return e;const i=e.props,n={};return void 0===i.size&&(n.size=s),p&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e.jsx(i,{...m,align:n,className:h,"data-fd":c,gap:f,layout:a,order:o,role:m.role??"group",children:y})};
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n    isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n        isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n        // Ensure full-width children in vertical layout as a fallback\n        // Increase specificity so it overrides any child width styles\n        '&& > *': {\n          width: '100%',\n          maxWidth: '100%',\n        },\n      }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps { size?: 'large' | 'medium' | 'small'; fullWidth?: boolean }\n\n  const enhanceChild = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild);\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","cloneElement","Button","childProps","newProps","undefined","fullWidth","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"kJAmBA,MAAMA,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHFK,EACI,WACA,aAKU,WAAVL,EACE,SAEFK,EACI,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGA,SAAU,CACRO,MAAO,OACPC,SAAU,SAGZ,sBAIY,EAClBC,WACAb,QAAQ,QACRE,SAAS,aACTY,OAAO,SACPX,QAAQ,UACRY,oBACAd,MACAe,QACAC,eACGC,MAEH,MAAMC,EAAclB,IAAiB,UAATa,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXlB,KAAiCa,EAI7DM,EAAgBC,IACpB,IAAKC,EAAMC,eAAeF,GAAO,OAAOA,EAExC,GAAIA,EAAKG,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWL,EACXM,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMlB,SAAUQ,GACnE,OAAOE,EAAMS,aAAaL,EAAU,CAAEd,SAAUe,GAClD,CAEA,GAAIN,EAAKG,OAASQ,EAAAA,OAAQ,OAAOX,EAEjC,MAAMY,EAAaZ,EAAKS,MAClBI,EAAqC,CAAA,EAK3C,YAHwBC,IAApBF,EAAWpB,OAAoBqB,EAASrB,KAAOA,GAC/CM,QAAsDgB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAEnFC,OAAOC,KAAKJ,GAAUK,OAAS,EAAIjB,EAAMS,aAAaV,EAAMa,GAAYb,GAG3EmB,EAAmBlB,EAAMM,SAASC,IAAIjB,EAAUQ,GAEtD,OACEqB,MAAChD,EAAe,IACVwB,EACJlB,MAAOA,EACPiB,UAAWA,YACFD,EACTf,IAAKkB,EACLjB,OAAQA,EACRC,MAAOA,EACPwC,KAAMzB,EAAKyB,MAAQ,iBAElBF"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"kJAmBA,MAAMA,EAAkBC,EAAAA,OAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,sBAIY,EAClBC,WACAb,QAAQ,QACRE,SAAS,aACTY,OAAO,SACPX,QAAQ,UACRY,oBACAd,MACAe,QACAC,eACGC,MAEH,MAAMC,EAAclB,IAAiB,UAATa,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXlB,KAAiCa,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAAA,OAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdrC,MAAOoB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,MAACnD,EAAe,IACVwB,EACJlB,MAAOA,EACPiB,UAAWA,YACFD,EACTf,IAAKkB,EACLjB,OAAQA,EACRC,MAAOA,EACP2C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}

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

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"react";import{styled as t}from"@mui/material/styles";import{Button as l}from"../../atoms/Button/index.js";const i=t("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,o="reverse"===i;return{display:"flex",flexDirection:n?o?"column-reverse":"column":o?"row-reverse":"row",justifyContent:n||"left"===r?o?"flex-end":"flex-start":"center"===r?"center":o?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}})),n=({children:t,align:n="right",layout:o="horizontal",size:a="medium",order:d="default",fullWidthChildren:s,gap:m,fdKey:c,className:u,...f})=>{const p=m??("small"===a?1:"large"===a?3:2),h="vertical"===o||!!s,g=e=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g);return r.cloneElement(t,{children:l})}if(e.type!==l)return e;const t=e.props,i={};return void 0===t.size&&(i.size=a),h&&void 0===t.fullWidth&&(i.fullWidth=!0),Object.keys(i).length>0?r.cloneElement(e,i):e},y=r.Children.map(t,g);return e(i,{...f,align:n,className:u,"data-fd":c,gap:p,layout:o,order:d,role:f.role??"group",children:y})};export{n as default};
+import{jsx as e}from"react/jsx-runtime";import r from"react";import{styled as t}from"@mui/material/styles";import{Button as l}from"../../atoms/Button/index.js";const i=t("div",{shouldForwardProp:e=>!["align","gap","layout","order"].includes(e)})((({theme:e,align:r="right",gap:t=2,layout:l="horizontal",order:i="default"})=>{const n="vertical"===l,o="reverse"===i;return{display:"flex",flexDirection:n?o?"column-reverse":"column":o?"row-reverse":"row",justifyContent:n||"left"===r?o?"flex-end":"flex-start":"center"===r?"center":o?"flex-start":"flex-end",alignItems:n?"stretch":"center",gap:e.spacing(t),width:"100%",...n?{"&& > *":{width:"100%",maxWidth:"100%"}}:{}}})),n=({children:t,align:n="right",layout:o="horizontal",size:a="medium",order:s="default",fullWidthChildren:d,gap:m,fdKey:c,className:u,...f})=>{const p=m??("small"===a?1:"large"===a?3:2),h="vertical"===o||!!d,g=(e,t)=>{if(!r.isValidElement(e))return e;if(e.type===r.Fragment){const t=e,l=r.Children.map(t.props.children,g)?.reverse();return r.cloneElement(t,{children:l})}if(e.type!==l)return e;const i=e.props,n={};return void 0===i.size&&(n.size=a),h&&void 0===i.fullWidth&&(n.fullWidth=!0),n.style={...i.style,order:t},Object.keys(n).length>0?r.cloneElement(e,n):e},y=r.Children.map(t,g);return e(i,{...f,align:n,className:u,"data-fd":c,gap:p,layout:o,order:s,role:f.role??"group",children:y})};export{n as default};
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n    isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n        isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n        // Ensure full-width children in vertical layout as a fallback\n        // Increase specificity so it overrides any child width styles\n        '&& > *': {\n          width: '100%',\n          maxWidth: '100%',\n        },\n      }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps { size?: 'large' | 'medium' | 'small'; fullWidth?: boolean }\n\n  const enhanceChild = (node: React.ReactNode): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild);\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","ButtonGroup","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","cloneElement","Button","childProps","newProps","undefined","fullWidth","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"gKAmBA,MAAMA,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHFK,EACI,WACA,aAKU,WAAVL,EACE,SAEFK,EACI,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGA,SAAU,CACRO,MAAO,OACPC,SAAU,SAGZ,OAIFC,EAAc,EAClBC,WACAd,QAAQ,QACRE,SAAS,aACTa,OAAO,SACPZ,QAAQ,UACRa,oBACAf,MACAgB,QACAC,eACGC,MAEH,MAAMC,EAAcnB,IAAiB,UAATc,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXnB,KAAiCc,EAI7DM,EAAgBC,IACpB,IAAKC,EAAMC,eAAeF,GAAO,OAAOA,EAExC,GAAIA,EAAKG,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWL,EACXM,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMlB,SAAUQ,GACnE,OAAOE,EAAMS,aAAaL,EAAU,CAAEd,SAAUe,GAClD,CAEA,GAAIN,EAAKG,OAASQ,EAAQ,OAAOX,EAEjC,MAAMY,EAAaZ,EAAKS,MAClBI,EAAqC,CAAA,EAK3C,YAHwBC,IAApBF,EAAWpB,OAAoBqB,EAASrB,KAAOA,GAC/CM,QAAsDgB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAEnFC,OAAOC,KAAKJ,GAAUK,OAAS,EAAIjB,EAAMS,aAAaV,EAAMa,GAAYb,GAG3EmB,EAAmBlB,EAAMM,SAASC,IAAIjB,EAAUQ,GAEtD,OACEqB,EAACjD,EAAe,IACVyB,EACJnB,MAAOA,EACPkB,UAAWA,YACFD,EACThB,IAAKmB,EACLlB,OAAQA,EACRC,MAAOA,EACPyC,KAAMzB,EAAKyB,MAAQ,iBAElBF"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/ButtonGroup/index.tsx"],"sourcesContent":["import React from 'react';\n\nimport { styled } from '@mui/material/styles';\n\nimport Button from '../../atoms/Button';\n\nexport interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {\n  children: React.ReactNode;\n  align?: 'center' | 'left' | 'right';\n  layout?: 'horizontal' | 'vertical';\n  size?: 'large' | 'medium' | 'small';\n  order?: 'default' | 'reverse';\n  fullWidthChildren?: boolean;\n  gap?: number;\n  fdKey?: string;\n}\n\ntype StyledProps = Pick<ButtonGroupProps, 'align' | 'gap' | 'layout' | 'order'>;\n\nconst StyledContainer = styled('div', {\n  shouldForwardProp: (prop) => !['align', 'gap', 'layout', 'order'].includes(prop as string),\n})<StyledProps>(({ theme, align = 'right', gap = 2, layout = 'horizontal', order = 'default' }) => {\n  const isVertical = layout === 'vertical';\n  const isReverse = order === 'reverse';\n\n  const flexDirection = isVertical\n    ? isReverse\n      ? 'column-reverse'\n      : 'column'\n    : isReverse\n      ? 'row-reverse'\n      : 'row';\n\n  const justifyContent = isVertical\n    ? // keep items visually at the top whether reversed or not\n      isReverse\n      ? 'flex-end'\n      : 'flex-start'\n    : align === 'left'\n      ? isReverse\n        ? 'flex-end'\n        : 'flex-start'\n      : align === 'center'\n        ? 'center'\n        : // align === 'right'\n          isReverse\n          ? 'flex-start'\n          : 'flex-end';\n\n  return {\n    display: 'flex',\n    flexDirection,\n    justifyContent,\n    alignItems: isVertical ? 'stretch' : 'center',\n    gap: theme.spacing(gap),\n    width: '100%',\n    ...(isVertical\n      ? {\n          // Ensure full-width children in vertical layout as a fallback\n          // Increase specificity so it overrides any child width styles\n          '&& > *': {\n            width: '100%',\n            maxWidth: '100%',\n          },\n        }\n      : {}),\n  };\n});\n\nconst ButtonGroup = ({\n  children,\n  align = 'right',\n  layout = 'horizontal',\n  size = 'medium',\n  order = 'default',\n  fullWidthChildren,\n  gap,\n  fdKey,\n  className,\n  ...rest\n}: ButtonGroupProps): JSX.Element => {\n  const resolvedGap = gap ?? (size === 'small' ? 1 : size === 'large' ? 3 : 2);\n  const resolvedFullWidthChildren = layout === 'vertical' ? true : !!fullWidthChildren;\n\n  interface ButtonLikeProps {\n    size?: 'large' | 'medium' | 'small';\n    fullWidth?: boolean;\n    style?: React.CSSProperties;\n  }\n\n  const enhanceChild = (node: React.ReactNode, index: number): React.ReactNode => {\n    if (!React.isValidElement(node)) return node;\n\n    if (node.type === React.Fragment) {\n      const fragment = node as React.ReactElement<{ children?: React.ReactNode }>;\n      const mappedChildren = React.Children.map(fragment.props.children, enhanceChild)?.reverse();\n      return React.cloneElement(fragment, { children: mappedChildren });\n    }\n\n    if (node.type !== Button) return node;\n\n    const childProps = node.props as ButtonLikeProps;\n    const newProps: Partial<ButtonLikeProps> = {};\n\n    if (childProps.size === undefined) newProps.size = size;\n    if (resolvedFullWidthChildren && childProps.fullWidth === undefined) newProps.fullWidth = true;\n\n    newProps.style = {\n      ...childProps.style,\n      order: index,\n    };\n\n    return Object.keys(newProps).length > 0 ? React.cloneElement(node, newProps) : node;\n  };\n\n  const enhancedChildren = React.Children.map(children, enhanceChild);\n\n  return (\n    <StyledContainer\n      {...rest}\n      align={align}\n      className={className}\n      data-fd={fdKey}\n      gap={resolvedGap}\n      layout={layout}\n      order={order}\n      role={rest.role ?? 'group'}\n    >\n      {enhancedChildren}\n    </StyledContainer>\n  );\n};\n\nexport default ButtonGroup;\n"],"names":["StyledContainer","styled","shouldForwardProp","prop","includes","theme","align","gap","layout","order","isVertical","isReverse","display","flexDirection","justifyContent","alignItems","spacing","width","maxWidth","ButtonGroup","children","size","fullWidthChildren","fdKey","className","rest","resolvedGap","resolvedFullWidthChildren","enhanceChild","node","index","React","isValidElement","type","Fragment","fragment","mappedChildren","Children","map","props","reverse","cloneElement","Button","childProps","newProps","undefined","fullWidth","style","Object","keys","length","enhancedChildren","_jsx","role"],"mappings":"gKAmBA,MAAMA,EAAkBC,EAAO,MAAO,CACpCC,kBAAoBC,IAAU,CAAC,QAAS,MAAO,SAAU,SAASC,SAASD,IADrDF,EAER,EAAGI,QAAOC,QAAQ,QAASC,MAAM,EAAGC,SAAS,aAAcC,QAAQ,cACjF,MAAMC,EAAwB,aAAXF,EACbG,EAAsB,YAAVF,EA0BlB,MAAO,CACLG,QAAS,OACTC,cA1BoBH,EAClBC,EACE,iBACA,SACFA,EACE,cACA,MAqBJG,eAnBqBJ,GAKT,SAAVJ,EAHAK,EACE,WACA,aAKU,WAAVL,EACE,SAEAK,EACE,aACA,WAMRI,WAAYL,EAAa,UAAY,SACrCH,IAAKF,EAAMW,QAAQT,GACnBU,MAAO,UACHP,EACA,CAGE,SAAU,CACRO,MAAO,OACPC,SAAU,SAGd,OAIFC,EAAc,EAClBC,WACAd,QAAQ,QACRE,SAAS,aACTa,OAAO,SACPZ,QAAQ,UACRa,oBACAf,MACAgB,QACAC,eACGC,MAEH,MAAMC,EAAcnB,IAAiB,UAATc,EAAmB,EAAa,UAATA,EAAmB,EAAI,GACpEM,EAAuC,aAAXnB,KAAiCc,EAQ7DM,EAAe,CAACC,EAAuBC,KAC3C,IAAKC,EAAMC,eAAeH,GAAO,OAAOA,EAExC,GAAIA,EAAKI,OAASF,EAAMG,SAAU,CAChC,MAAMC,EAAWN,EACXO,EAAiBL,EAAMM,SAASC,IAAIH,EAASI,MAAMnB,SAAUQ,IAAeY,UAClF,OAAOT,EAAMU,aAAaN,EAAU,CAAEf,SAAUgB,GAClD,CAEA,GAAIP,EAAKI,OAASS,EAAQ,OAAOb,EAEjC,MAAMc,EAAad,EAAKU,MAClBK,EAAqC,CAAA,EAU3C,YARwBC,IAApBF,EAAWtB,OAAoBuB,EAASvB,KAAOA,GAC/CM,QAAsDkB,IAAzBF,EAAWG,YAAyBF,EAASE,WAAY,GAE1FF,EAASG,MAAQ,IACZJ,EAAWI,MACdtC,MAAOqB,GAGFkB,OAAOC,KAAKL,GAAUM,OAAS,EAAInB,EAAMU,aAAaZ,EAAMe,GAAYf,GAG3EsB,EAAmBpB,EAAMM,SAASC,IAAIlB,EAAUQ,GAEtD,OACEwB,EAACpD,EAAe,IACVyB,EACJnB,MAAOA,EACPkB,UAAWA,YACFD,EACThB,IAAKmB,EACLlB,OAAQA,EACRC,MAAOA,EACP4C,KAAM5B,EAAK4B,MAAQ,iBAElBF"}

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

@@ -0,0 +1,2 @@
+"use strict";var e=require("react/jsx-runtime"),r=require("react"),i=require("@mui/material/FormControl"),a=require("@mui/material/FormGroup"),s=require("@mui/material/FormHelperText"),t=require("@mui/material/FormLabel"),n=require("../../atoms/Checkbox/index.cjs.js"),d=require("../../Spacer/index.cjs.js"),l=require("../../../icons/CancelCircle/index.cjs.js");module.exports=({fdKey:o,options:c,value:u,size:m="medium",label:x,hintText:j,errorText:h,valid:q=!0,required:b=!1,onChange:f})=>{const[v,p]=r.useState([]),z=u??v,C=e=>{const{name:r,checked:i}=e.target,a=i?[...z,r]:z.filter((e=>e!==r));void 0===u&&p(a),f&&f(e,a)},$=!q&&!!h;return e.jsxs(i,{"data-fd":o,children:[e.jsx(t,{"data-fd":`${o}-label`,required:b,children:x}),j&&e.jsx(s,{"data-fd":`${o}-hint`,children:j}),e.jsx(d,{size:4,variant:"horizontal"}),$&&e.jsxs(s,{error:!0,children:[e.jsx(l,{}),h]}),e.jsx(d,{size:8,variant:"horizontal"}),e.jsx(a,{"data-fd":`${o}-checkboxes`,children:c.map((r=>{const i=z.includes(r.name);return e.jsx(n,{checked:i,disabled:r.disabled,fdKey:`${o}-${r.name}`,label:r.label,name:r.name,onChange:C,size:m,valid:q},r.name)}))})]})};
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent,useState } from 'react';\n\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport Spacer from '@fd/components/Spacer';\nimport CancelCircleIcon from '@fd/icons/CancelCircle'\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <MuiFormControl data-fd={fdKey}>\n      <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n        {label}\n      </MuiFormLabel>\n\n      {hintText && (\n        <MuiFormHelperText data-fd={`${fdKey}-hint`}>\n          {hintText}\n        </MuiFormHelperText>\n      )}\n\n      <Spacer size={4} variant=\"horizontal\" />\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <Spacer size={8} variant=\"horizontal\" />\n\n      <MuiFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </MuiFormGroup>\n    </MuiFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","MuiFormControl","children","_jsx","MuiFormLabel","MuiFormHelperText","Spacer","variant","error","CancelCircleIcon","MuiFormGroup","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"yXAkCsB,EACpBA,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAAA,SAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAAAA,KAACC,aAAwBzB,EAAK0B,SAAA,CAC5BC,EAAAA,IAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQkB,SACxDtB,IAGFC,GACCsB,MAACE,EAAiB,CAAA,UAAU,GAAG7B,kBAC5BK,IAILsB,EAAAA,IAACG,EAAM,CAAC3B,KAAM,EAAG4B,QAAQ,eAExBR,GACCC,EAAAA,KAACK,EAAiB,CAACG,OAAK,EAAAN,SAAA,CACtBC,EAAAA,IAACM,EAAgB,IAEhB3B,KAILqB,MAACG,GAAO3B,KAAM,EAAG4B,QAAQ,eAEzBJ,EAAAA,IAACO,EAAY,CAAA,UAAU,GAAGlC,eAAkB0B,SACzCzB,EAAQkC,KAAKC,IACZ,MAAMC,EAAYxB,EAAcyB,SAASF,EAAOpB,MAEhD,OACEW,EAAAA,IAACY,EAAQ,CAEPrB,QAASmB,EACTG,SAAUJ,EAAOI,SACjBxC,MAAO,GAAGA,KAASoC,EAAOpB,OAC1BZ,MAAOgC,EAAOhC,MACdY,KAAMoB,EAAOpB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF6B,EAAOpB"}

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

@@ -0,0 +1,27 @@
+import { ChangeEvent } from 'react';
+
+interface CheckboxOption {
+    name: string;
+    label: string;
+    disabled?: boolean;
+}
+interface CheckboxGroupProps {
+    fdKey: string;
+    options: CheckboxOption[];
+    label: string;
+    /**
+     * The selected values. When provided, the component is controlled.
+     * When omitted, the component is uncontrolled and manages its own state.
+     */
+    value?: string[];
+    size?: 'medium' | 'small';
+    hintText?: string;
+    errorText?: string;
+    valid?: boolean;
+    required?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;
+}
+declare const CheckboxGroup: ({ fdKey, options, value, size, label, hintText, errorText, valid, required, onChange, }: CheckboxGroupProps) => JSX.Element;
+
+export { CheckboxGroup as default };
+export type { CheckboxOption };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as r}from"react/jsx-runtime";import{useState as a}from"react";import i from"@mui/material/FormControl";import o from"@mui/material/FormGroup";import t from"@mui/material/FormHelperText";import m from"@mui/material/FormLabel";import n from"../../atoms/Checkbox/index.js";import d from"../../Spacer/index.js";import l from"../../../icons/CancelCircle/index.js";const c=({fdKey:c,options:s,value:f,size:h="medium",label:p,hintText:u,errorText:x,valid:b=!0,required:v=!1,onChange:z})=>{const[C,$]=a([]),j=f??C,k=e=>{const{name:r,checked:a}=e.target,i=a?[...j,r]:j.filter((e=>e!==r));void 0===f&&$(i),z&&z(e,i)},F=!b&&!!x;return e(i,{"data-fd":c,children:[r(m,{"data-fd":`${c}-label`,required:v,children:p}),u&&r(t,{"data-fd":`${c}-hint`,children:u}),r(d,{size:4,variant:"horizontal"}),F&&e(t,{error:!0,children:[r(l,{}),x]}),r(d,{size:8,variant:"horizontal"}),r(o,{"data-fd":`${c}-checkboxes`,children:s.map((e=>{const a=j.includes(e.name);return r(n,{checked:a,disabled:e.disabled,fdKey:`${c}-${e.name}`,label:e.label,name:e.name,onChange:k,size:h,valid:b},e.name)}))})]})};export{c as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/CheckboxGroup/index.tsx"],"sourcesContent":["import { type ChangeEvent,useState } from 'react';\n\nimport MuiFormControl from '@mui/material/FormControl';\nimport MuiFormGroup from '@mui/material/FormGroup';\nimport MuiFormHelperText from '@mui/material/FormHelperText';\nimport MuiFormLabel from '@mui/material/FormLabel';\n\nimport Checkbox from '@fd/components/atoms/Checkbox';\nimport Spacer from '@fd/components/Spacer';\nimport CancelCircleIcon from '@fd/icons/CancelCircle'\n\nexport interface CheckboxOption {\n  name: string;\n  label: string;\n  disabled?: boolean;\n}\n\ninterface CheckboxGroupProps {\n  fdKey: string;\n  options: CheckboxOption[];\n  label: string;\n  /**\n   * The selected values. When provided, the component is controlled.\n   * When omitted, the component is uncontrolled and manages its own state.\n   */\n  value?: string[];\n  size?: 'medium' | 'small';\n  hintText?: string;\n  errorText?: string;\n  valid?: boolean;\n  required?: boolean;\n  onChange?: (event: ChangeEvent<HTMLInputElement>, checkedOptions: string[]) => void;\n}\n\nconst CheckboxGroup = ({\n  fdKey,\n  options,\n  value,\n  size = 'medium',\n  label,\n  hintText,\n  errorText,\n  valid = true,\n  required = false,\n  onChange,\n}: CheckboxGroupProps): JSX.Element => {\n  const [internalValue, setInternalValue] = useState<string[]>([]);\n\n  const resolvedValue = value ?? internalValue;\n\n  const handleChange = (event: ChangeEvent<HTMLInputElement>): void => {\n    const { name: optionName, checked } = event.target;\n\n    const newValue = checked\n      ? [...resolvedValue, optionName]\n      : resolvedValue.filter((name) => name !== optionName);\n\n    // If value is undefined, we're in uncontrolled mode - update internal state\n    if (value === undefined) {\n      setInternalValue(newValue);\n    }\n\n    if (onChange) {\n      onChange(event, newValue);\n    }\n  };\n\n  const isError = !valid && !!errorText;\n\n  return (\n    <MuiFormControl data-fd={fdKey}>\n      <MuiFormLabel data-fd={`${fdKey}-label`} required={required}>\n        {label}\n      </MuiFormLabel>\n\n      {hintText && (\n        <MuiFormHelperText data-fd={`${fdKey}-hint`}>\n          {hintText}\n        </MuiFormHelperText>\n      )}\n\n      <Spacer size={4} variant=\"horizontal\" />\n\n      {isError && (\n        <MuiFormHelperText error>\n          <CancelCircleIcon />\n\n          {errorText}\n        </MuiFormHelperText>\n      )}\n\n      <Spacer size={8} variant=\"horizontal\" />\n\n      <MuiFormGroup data-fd={`${fdKey}-checkboxes`}>\n        {options.map((option) => {\n          const isChecked = resolvedValue.includes(option.name);\n\n          return (\n            <Checkbox\n              key={option.name}\n              checked={isChecked}\n              disabled={option.disabled}\n              fdKey={`${fdKey}-${option.name}`}\n              label={option.label}\n              name={option.name}\n              onChange={handleChange}\n              size={size}\n              valid={valid}\n            />\n          );\n        })}\n      </MuiFormGroup>\n    </MuiFormControl>\n  );\n};\n\nexport default CheckboxGroup;\n"],"names":["CheckboxGroup","fdKey","options","value","size","label","hintText","errorText","valid","required","onChange","internalValue","setInternalValue","useState","resolvedValue","handleChange","event","name","optionName","checked","target","newValue","filter","undefined","isError","_jsxs","MuiFormControl","children","_jsx","MuiFormLabel","MuiFormHelperText","Spacer","variant","error","CancelCircleIcon","MuiFormGroup","map","option","isChecked","includes","Checkbox","disabled"],"mappings":"4XAkCA,MAAMA,EAAgB,EACpBC,QACAC,UACAC,QACAC,OAAO,SACPC,QACAC,WACAC,YACAC,SAAQ,EACRC,YAAW,EACXC,eAEA,MAAOC,EAAeC,GAAoBC,EAAmB,IAEvDC,EAAgBX,GAASQ,EAEzBI,EAAgBC,IACpB,MAAQC,KAAMC,EAAUC,QAAEA,GAAYH,EAAMI,OAEtCC,EAAWF,EACb,IAAIL,EAAeI,GACnBJ,EAAcQ,QAAQL,GAASA,IAASC,SAG9BK,IAAVpB,GACFS,EAAiBS,GAGfX,GACFA,EAASM,EAAOK,IAIdG,GAAWhB,KAAWD,EAE5B,OACEkB,EAACC,aAAwBzB,EAAK0B,SAAA,CAC5BC,EAACC,EAAY,CAAA,UAAU,GAAG5B,UAAeQ,SAAUA,EAAQkB,SACxDtB,IAGFC,GACCsB,EAACE,EAAiB,CAAA,UAAU,GAAG7B,kBAC5BK,IAILsB,EAACG,EAAM,CAAC3B,KAAM,EAAG4B,QAAQ,eAExBR,GACCC,EAACK,EAAiB,CAACG,OAAK,EAAAN,SAAA,CACtBC,EAACM,EAAgB,IAEhB3B,KAILqB,EAACG,GAAO3B,KAAM,EAAG4B,QAAQ,eAEzBJ,EAACO,EAAY,CAAA,UAAU,GAAGlC,eAAkB0B,SACzCzB,EAAQkC,KAAKC,IACZ,MAAMC,EAAYxB,EAAcyB,SAASF,EAAOpB,MAEhD,OACEW,EAACY,EAAQ,CAEPrB,QAASmB,EACTG,SAAUJ,EAAOI,SACjBxC,MAAO,GAAGA,KAASoC,EAAOpB,OAC1BZ,MAAOgC,EAAOhC,MACdY,KAAMoB,EAAOpB,KACbP,SAAUK,EACVX,KAAMA,EACNI,MAAOA,GARF6B,EAAOpB"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button, { type ButtonProps } from '@mui/material/Button';\nimport MuiModal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'color' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\nconst getButtonTone = (tone: ModalTones): ButtonProps['color'] => {\n  return COLOURS.button[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n    const buttonTone = getButtonTone(tone);\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        open={open}\n        onClose={onClose}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row'} spacing={2}>\n                {actions.map((action) => {\n                  const { label, id, ...buttonProps } = action;\n                  return (\n                    <Button\n                      key={id || `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                      color={buttonTone}\n                      fullWidth={isTabletOrMobile}\n                      {...buttonProps}\n                    >\n                      {label}\n                    </Button>\n                  );\n                })}\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","button","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","buttonTone","getButtonTone","_jsx","MuiModal","_jsxs","_Fragment","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","direction","map","action","label","buttonProps","Button","fullWidth","replace","toLowerCase","displayName"],"mappings":"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"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row-reverse'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}

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

@@ -1,13 +1,13 @@
 import * as react from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps } from '@mui/material/Button';
+import { ButtonProps } from '@fd/components/atoms/Button';
 
 /** Visual tone of the modal */
 type ModalTones = 'default' | 'destructive';
 /** Size variants for the modal */
 type ModalSizes = 'large' | 'small';
 /** Action button configuration for Modal */
-interface ModalAction extends Omit<ButtonProps, 'color' | 'fullWidth'> {
+interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {
     /** Label text for the button */
     label: string;
     /** Optional unique identifier for the button */

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Button, { type ButtonProps } from '@mui/material/Button';\nimport MuiModal from '@mui/material/Modal';\nimport Stack from '@mui/material/Stack';\nimport { styled, useTheme } from '@mui/material/styles';\nimport Typography from '@mui/material/Typography';\nimport useMediaQuery from '@mui/material/useMediaQuery';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'color' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\nconst getButtonTone = (tone: ModalTones): ButtonProps['color'] => {\n  return COLOURS.button[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n    const buttonTone = getButtonTone(tone);\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        open={open}\n        onClose={onClose}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row'} spacing={2}>\n                {actions.map((action) => {\n                  const { label, id, ...buttonProps } = action;\n                  return (\n                    <Button\n                      key={id || `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                      color={buttonTone}\n                      fullWidth={isTabletOrMobile}\n                      {...buttonProps}\n                    >\n                      {label}\n                    </Button>\n                  );\n                })}\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","button","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","buttonTone","getButtonTone","_jsx","MuiModal","_jsxs","_Fragment","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","direction","map","action","label","buttonProps","Button","fullWidth","replace","toLowerCase","displayName"],"mappings":"miBAuDA,MAAMA,EAAU,CACdC,cAAe,CACbC,QAAS,IAA0B,UACnCC,YAAa,IAA0B,eAEzCC,OAAQ,CACNF,QAAS,IAA4B,UACrCC,YAAa,IAA4B,UAIvCE,EAAwBC,GACrBN,EAAQC,cAAcK,KAYzBC,EAAiBC,EAAOC,EAAK,CACjCC,kBAAoBC,IAAU,CAAC,OAAQ,QAAQC,SAASD,IADnCH,EAEC,EAAGK,QAAOC,WAAM,CACtCC,SAAU,WACVC,gBAAiBH,EAAMI,QAAQC,SAASC,WAAW,sBACnDC,OAAQ,OACRC,aAAcR,EAAMS,OAAO,aAC3BC,QAASV,EAAMW,QAAQ,GACvBC,UAAW,4EACXC,QAAS,OACTC,UAAW,OACXC,UAAW,OAGXC,IAAK,MACLC,KAAM,MACNC,UAAW,wBACXC,SAAmB,UAATlB,EAAmB,QAAU,QACvCmB,MAAO,eAAepB,EAAMW,QAAQ,MAGpC,CAACX,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,IAEpC,UAATvB,GAAoB,CACtBkB,SAAU,eAAenB,EAAMW,QAAQ,MACvCS,MAAO,eAAepB,EAAMW,QAAQ,MACpCK,IAAK,OACLS,OAAQzB,EAAMW,QAAQ,GACtBM,KAAMjB,EAAMW,QAAQ,GACpBe,MAAO1B,EAAMW,QAAQ,GACrBO,UAAW,OACXJ,UAAW,OACXC,UAAW,OAEXY,QAAS,OACTC,cAAe,aAIJ,UAAT3B,GAAoB,CACtB4B,OAAQ,eAAe7B,EAAMW,QAAQ,MACrCG,UAAW,eAAed,EAAMW,QAAQ,MACxCI,UAAW,OAEXY,QAAS,OACTC,cAAe,eAKfE,EAAcnC,EAAO,MAAPA,EAAc,EAAGK,YAAO,CAC1CoB,MAAO,OACPS,OAAQ,OACRrB,aAAcR,EAAMS,OAAO,gBAGvBsB,EAAoBpC,EAAOqC,EAAPrC,CAAc,CACtCsC,eAAgB,aAChBC,WAAY,WAGRC,EAAyBxC,EAAOC,EAAPD,EAAY,EAAGK,YAAO,CACnD,CAACA,EAAMqB,YAAYC,KAAKC,EAAiBC,SAAU,CACjDY,SAAU,EACVT,QAAS,OACTC,cAAe,SACfS,UAAW,cACXC,cAAetC,EAAMW,QAAQ,QAW3B4B,EAAQC,GACZ,EACEC,OACAC,UACAjD,OAAO,UACPQ,OAAO,QACP0C,QACAC,cACAC,WACAC,UAAU,GACVC,YACA,cAAeC,EACfC,eAEA,MAAMjD,EAAQkD,IACRC,EAAmBC,EAAcpD,EAAMqB,YAAYC,KAAKC,EAAiBC,SAEzE6B,EAAiC,iBAAbR,EACpBS,EAAoBR,EAAQS,OAAS,EACrCC,EA1GY,CAAC/D,GACdN,EAAQI,OAAOE,KAyGDgE,CAAchE,GAEjC,OACEiE,EAACC,EAAQ,CAAA,mBACW,qBAAqBX,GAAc,YAAW,kBAC/C,eAAeA,GAAc,YAC9CD,UAAWA,EAAS,cACPC,EACbP,KAAMA,EACNC,QAASA,WAETkB,EAAClE,EAAc,CAACO,KAAMA,EAAMR,KAAMA,EAAIwD,SAAA,CACpCW,EAACzB,EAAsB,CAAAc,SAAA,CACpBJ,GACCe,EAAAC,EAAA,CAAAZ,SAAA,CACGI,EACCK,EAAC5B,EAAW,CAACgC,IAAKnB,GAAS,cAAeoB,IAAKlB,IAE/Ca,EAACM,EAAa,CAACC,KAAMpB,EAAUqB,MAAM,SAASzE,KAAMD,EAAqBC,KAE3EiE,EAACS,EAAM,CAAClE,KAAM,GAAImE,QAAQ,kBAG7BzB,GACCe,EAACW,EAAU,CAACC,UAAU,KAAKC,GAAI,eAAevB,GAAc,YAAaoB,QAAQ,WAAUnB,SACxFN,IAGJA,GAASC,GAAec,EAACS,EAAM,CAAClE,KAAM,EAAGmE,QAAQ,eACjDxB,GACCc,EAACW,EAAU,CACTG,MAAOxE,EAAMI,QAAQC,SAASoE,KAAK,aACnCF,GAAI,qBAAqBvB,GAAc,YACvCoB,QAAQ,SAAQnB,SAEfL,IAGJK,GACCW,EAAAC,EAAA,CAAAZ,SAAA,CACES,EAACS,EAAM,CAAClE,KAAM,GAAImE,QAAQ,eACzBnB,QAINK,GACCM,EAAAC,EAAA,CAAAZ,SAAA,CACES,EAACS,EAAM,CAAClE,KAAM,GAAImE,QAAQ,eAC1BV,EAAC3B,EAAiB,CAAC2C,UAAWvB,EAAmB,SAAW,MAAOxC,QAAS,EAACsC,SAC1EH,EAAQ6B,KAAKC,IACZ,MAAMC,MAAEA,EAAKN,GAAEA,KAAOO,GAAgBF,EACtC,OACElB,EAACqB,EAAM,CAELP,MAAOhB,EACPwB,UAAW7B,KACP2B,WAEHD,GALIN,GAAM,gBAAgBM,EAAMI,QAAQ,OAAQ,KAAKC,iCAkB5E3C,EAAM4C,YAAc"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Modal/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo } from 'react';\n\nimport MuiModal from '@mui/material/Modal';\n\nimport Box from '@fd/components/atoms/Box';\nimport Button, { type ButtonProps } from '@fd/components/atoms/Button';\nimport Typography from '@fd/components/atoms/Typography';\nimport Stack from '@fd/components/molecules/Stack';\nimport styled from '@fd/utilities/styledUtilities';\nimport useMediaQuery from '@fd/utilities/useMediaQuery';\nimport useTheme from '@fd/utilities/useTheme';\n\nimport { breakpointValues } from '../../../themes/tokens/breakpoints/breakpoints';\nimport IconContainer, { type IconContainerTones } from '../../atoms/IconContainer';\nimport Spacer from '../../Spacer';\n\n/** Visual tone of the modal */\nexport type ModalTones = 'default' | 'destructive';\n\n/** Size variants for the modal */\nexport type ModalSizes = 'large' | 'small';\n\n/** Action button configuration for Modal */\nexport interface ModalAction extends Omit<ButtonProps, 'children' | 'fdKey' | 'fullWidth'> {\n  /** Label text for the button */\n  label: string;\n  /** Optional unique identifier for the button */\n  id?: string;\n}\n\n/** Props for the Modal component */\nexport interface ModalProps {\n  /** Whether the modal is open */\n  open: boolean;\n  /** Callback function when the modal is closed */\n  onClose: () => void;\n  /** Visual tone of the modal */\n  tone?: ModalTones;\n  /** Size variant of the modal */\n  size?: ModalSizes;\n  /** Main heading text of the modal */\n  title?: string;\n  /** Detailed description text of the modal */\n  description?: string;\n  /** Property element to display - can be an image URL (string) or an icon component (ReactNode) */\n  property?: React.ReactNode | string;\n  /** Array of action buttons to display */\n  actions?: ModalAction[];\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing and automation */\n  'data-testid'?: string;\n  /** Content to display in the modal */\n  children?: React.ReactNode;\n}\n\nconst COLOURS = {\n  iconContainer: {\n    default: (): IconContainerTones => 'neutral',\n    destructive: (): IconContainerTones => 'destructive',\n  },\n  button: {\n    default: (): ButtonProps['color'] => 'primary',\n    destructive: (): ButtonProps['color'] => 'error',\n  },\n};\n\nconst getIconContainerTone = (tone: ModalTones): IconContainerTones => {\n  return COLOURS.iconContainer[tone]();\n};\n\ninterface StyledModalBoxProps {\n  tone: ModalTones;\n  size: ModalSizes;\n}\n\nconst StyledModalBox = styled(Box, {\n  shouldForwardProp: (prop) => !['tone', 'size'].includes(prop as string),\n})<StyledModalBoxProps>(({ theme, size }) => ({\n  position: 'absolute',\n  backgroundColor: theme.palette.semantic.background['background-overlay'],\n  border: 'none',\n  borderRadius: theme.radius['radius-16'],\n  padding: theme.spacing(4),\n  boxShadow: '0px 1px 6px 0px rgba(0, 0, 0, 0.10), 0px 8px 16px 0px rgba(0, 0, 0, 0.15)', // TODO: Pull shadow from tokens when setup\n  outline: 'none',\n  maxHeight: '90vh',\n  overflowY: 'auto',\n\n  // Desktop styles (default)\n  top: '50%',\n  left: '50%',\n  transform: 'translate(-50%, -50%)',\n  maxWidth: size === 'large' ? '700px' : '500px',\n  width: `calc(100% - ${theme.spacing(4)})`,\n\n  // Tablet & Mobile styles\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    // Small size at bottom of screen\n    ...(size === 'small' && {\n      maxWidth: `calc(100% - ${theme.spacing(4)})`,\n      width: `calc(100% - ${theme.spacing(4)})`,\n      top: 'auto',\n      bottom: theme.spacing(2),\n      left: theme.spacing(2),\n      right: theme.spacing(2),\n      transform: 'none',\n      maxHeight: '70vh',\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n\n    // Large size takes full screen\n    ...(size === 'large' && {\n      height: `calc(100% - ${theme.spacing(4)})`,\n      maxHeight: `calc(100% - ${theme.spacing(4)})`,\n      overflowY: 'auto',\n      // Flex layout to push buttons to bottom when content is small\n      display: 'flex',\n      flexDirection: 'column',\n    }),\n  },\n}));\n\nconst StyledImage = styled('img')(({ theme }) => ({\n  width: '100%',\n  height: 'auto',\n  borderRadius: theme.radius['radius-8'],\n}));\n\nconst StyledButtonStack = styled(Stack)({\n  justifyContent: 'flex-start',\n  alignItems: 'center',\n});\n\nconst StyledContentContainer = styled(Box)(({ theme }) => ({\n  [theme.breakpoints.down(breakpointValues.tablet)]: {\n    flexGrow: 1,\n    display: 'flex',\n    flexDirection: 'column',\n    minHeight: 'min-content',\n    paddingBottom: theme.spacing(3),\n  },\n}));\n\n/**\n * Modal component is used to display content that temporarily blocks interaction with the main view.\n * It creates a focused mode for completing tasks or viewing important information without leaving the current page.\n *\n * The component is wrapped with React.memo to optimize performance by preventing unnecessary\n * re-renders when the component's props haven't changed.\n */\nconst Modal = memo(\n  ({\n    open,\n    onClose,\n    tone = 'default',\n    size = 'large',\n    title,\n    description,\n    property,\n    actions = [],\n    className,\n    'data-testid': dataTestId,\n    children,\n  }: ModalProps) => {\n    const theme = useTheme();\n    const isTabletOrMobile = useMediaQuery(theme.breakpoints.down(breakpointValues.tablet));\n\n    const isImageUrl = typeof property === 'string';\n    const showButtonSection = actions.length > 0;\n\n    return (\n      <MuiModal\n        aria-describedby={`modal-description-${dataTestId ?? 'default'}`}\n        aria-labelledby={`modal-title-${dataTestId ?? 'default'}`}\n        className={className}\n        data-testid={dataTestId}\n        onClose={onClose}\n        open={open}\n      >\n        <StyledModalBox size={size} tone={tone}>\n          <StyledContentContainer>\n            {property && (\n              <>\n                {isImageUrl ? (\n                  <StyledImage alt={title ?? 'Modal image'} src={property} />\n                ) : (\n                  <IconContainer icon={property} style=\"filled\" tone={getIconContainerTone(tone)} />\n                )}\n                <Spacer size={16} variant=\"horizontal\" />\n              </>\n            )}\n            {title && (\n              <Typography component=\"h2\" id={`modal-title-${dataTestId ?? 'default'}`} variant=\"h3Strong\">\n                {title}\n              </Typography>\n            )}\n            {title && description && <Spacer size={8} variant=\"horizontal\" />}\n            {description && (\n              <Typography\n                color={theme.palette.semantic.text['text-weak']}\n                id={`modal-description-${dataTestId ?? 'default'}`}\n                variant=\"b1Weak\"\n              >\n                {description}\n              </Typography>\n            )}\n            {children && (\n              <>\n                <Spacer size={24} variant=\"horizontal\" />\n                {children}\n              </>\n            )}\n          </StyledContentContainer>\n          {showButtonSection && (\n            <>\n              <Spacer size={24} variant=\"horizontal\" />\n              <StyledButtonStack direction={isTabletOrMobile ? 'column' : 'row-reverse'} spacing={2}>\n                <StyledButtonStack\n                  direction={isTabletOrMobile ? 'column-reverse' : 'row-reverse'}\n                  spacing={2}\n                  width={isTabletOrMobile ? '100%' : 'fit-content'}\n                >\n                  {actions.map((action, index) => {\n                    const { label, id, ...buttonProps } = action;\n                    return (\n                      <Button\n                        key={id ?? `modal-action-${index}-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fdKey={id ?? `modal-action-${label.replace(/\\s+/g, '-').toLowerCase()}`}\n                        fullWidth={isTabletOrMobile}\n                        {...buttonProps}\n                      >\n                        {label}\n                      </Button>\n                    );\n                  })}\n                </StyledButtonStack>\n              </StyledButtonStack>\n            </>\n          )}\n        </StyledModalBox>\n      </MuiModal>\n    );\n  },\n);\n\nModal.displayName = 'Modal';\n\nexport default Modal;\n"],"names":["COLOURS","iconContainer","default","destructive","getIconContainerTone","tone","StyledModalBox","styled","Box","shouldForwardProp","prop","includes","theme","size","position","backgroundColor","palette","semantic","background","border","borderRadius","radius","padding","spacing","boxShadow","outline","maxHeight","overflowY","top","left","transform","maxWidth","width","breakpoints","down","breakpointValues","tablet","bottom","right","display","flexDirection","height","StyledImage","StyledButtonStack","Stack","justifyContent","alignItems","StyledContentContainer","flexGrow","minHeight","paddingBottom","Modal","memo","open","onClose","title","description","property","actions","className","dataTestId","children","useTheme","isTabletOrMobile","useMediaQuery","isImageUrl","showButtonSection","length","_jsx","MuiModal","_jsxs","alt","src","IconContainer","icon","style","Spacer","variant","Typography","component","id","color","text","_Fragment","direction","map","action","index","label","buttonProps","Button","fdKey","replace","toLowerCase","fullWidth","displayName"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react"),require("@mui/material/Pagination");var t=require("@mui/material/usePagination/usePagination"),a=require("@mui/material/Box"),i=require("../../atoms/Button/index.cjs.js"),n=require("../../atoms/IconButton/index.cjs.js"),r=require("@mui/material/Typography"),s=require("@mui/material/Stack"),o=require("../../../icons/ArrowLeft02/index.cjs.js"),d=require("../../../icons/ArrowRight02/index.cjs.js"),l=require("@mui/material/styles"),c=require("@mui/material/useMediaQuery"),p=require("@mui/material/styles/useTheme");const u=l.styled("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),g=l.styled("nav")((({theme:e,willRenderRowsPerPage:t})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:t?"space-between":"center",paddingLeft:e.spacing(1),paddingRight:e.spacing(1),gap:e.spacing(2)}))),x=l.styled(n.IconButton)((({theme:e})=>({borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,"&:hover":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:focus":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:active":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:disabled":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`}}))),b=l.styled(r)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),m=l.styled(i.Button)((()=>({textDecoration:"none"}))),y=(e,t,a,i)=>{const n=t*(e-1)+1,r=t*e;return`${i.showing} ${n} - ${r} ${i.of} ${t*a}`},k=({pageCount:i=1,boundaryPageCount:r=1,disabled:l=!1,rowsPerPage:k,page:j,onChange:h,size:v="medium",translations:f})=>{const w=c((e=>e.breakpoints.down("tablet"))),{items:C}=t({boundaryCount:r,count:i,disabled:l,onChange:h,page:j}),P=p();if(w){const t=C.find((e=>"previous"===e.type)),a=C.find((e=>"next"===e.type));return e.jsxs(u,{children:[!!t&&e.jsx(n.IconButton,{"aria-label":f.previousPageAriaLabel,"data-testid":"pagination-prev-btn-mobile",disabled:l||t.disabled,onClick:t.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(o,{color:P.palette.semantic.text["text-weak"],size:"md"})}),e.jsx(s,{alignItems:"center",flexGrow:1,children:e.jsxs(b,{"data-testid":"pagination-page-mobile",variant:"captionWeak",children:[j," ",f.of," ",i]})}),!!a&&e.jsx(n.IconButton,{"aria-label":f.nextPageAriaLabel,"data-testid":"pagination-next-btn-mobile",disabled:l||a.disabled,onClick:a.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(d,{color:P.palette.semantic.text["text-weak"],size:"md"})})]})}const q="number"==typeof k;return e.jsxs(g,{willRenderRowsPerPage:q,children:[e.jsx(s,{alignItems:"center",direction:"row",gap:P.spacing(1),children:C.map((t=>"previous"===t.type?e.jsx(m,{"aria-label":f.previousPageAriaLabel,"data-testid":"pagination-prev-btn",disabled:l||t.disabled,fdKey:"pagination-prev-btn",onClick:t.onClick,size:v,startIcon:e.jsx(o,{color:P.palette.semantic.text["text-weak"],size:"md"}),tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:f.previous})},t.type):"start-ellipsis"===t.type||"end-ellipsis"===t.type?e.jsx(a,{children:e.jsx(b,{"data-testid":"pagination-ellipsis",variant:"captionWeak",children:"..."})},t.type):"next"===t.type?e.jsx(m,{"aria-label":f.nextPageAriaLabel,"data-testid":"pagination-next-btn",disabled:l||t.disabled,endIcon:e.jsx(d,{color:P.palette.semantic.text["text-weak"],size:"md"}),fdKey:"pagination-next-btn",onClick:t.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:f.next})},t.type):t.selected?e.jsx(x,{"aria-label":f.selectedPageAriaLabel,"data-testid":"pagination-current-page",disabled:l||t.disabled,fdKey:"pagination-page",onClick:t.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:t.page})},t.page):e.jsx(n.IconButton,{"aria-label":`${f.paginationPageAriaLabel} ${t.page}`,"data-testid":"pagination-page",disabled:l||t.disabled,fdKey:"pagination-page",onClick:t.onClick,size:v,tone:"neutral",variant:"tertiary",children:e.jsx(b,{variant:"captionWeak",children:t.page})},t.page)))}),e.jsx(s,{alignItems:"center",flexGrow:0,children:"number"==typeof k&&e.jsx(b,{"data-testid":"pagination-page-range",variant:"captionWeak",children:y(j,k,i,f)})})]})};exports.Pagination=k,exports.default=k;
+//# sourceMappingURL=index.cjs.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/Pagination/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { type PaginationProps as MUIPaginationProps } from \"@mui/material/Pagination\";\nimport usePagination from \"@mui/material/usePagination/usePagination\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport Typography from \"@fd/components/atoms/Typography\";\nimport Stack from '@fd/components/molecules/Stack';\nimport ArrowLeft02Icon from \"@fd/icons/ArrowLeft02\";\nimport ArrowRight02Icon from \"@fd/icons/ArrowRight02\";\nimport styled from \"@fd/utilities/styledUtilities\"\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nconst StyledPaginationMobileContainer = styled('nav')(({theme}) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: 'space-between',\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(2),\n}));\n\nconst StyledPaginationDesktopContainer = styled('nav')<{ willRenderRowsPerPage: boolean }>(({theme, willRenderRowsPerPage}) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: willRenderRowsPerPage ? 'space-between' : 'center',\n  paddingLeft: theme.spacing(1),\n  paddingRight: theme.spacing(1),\n  gap: theme.spacing(2),\n}));\n\nconst StyledSelectedPageBtn = styled(IconButton)(({ theme }) =>({\n  borderRadius: theme.radius['radius-8'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  '&:hover': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:focus': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:active': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:disabled': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}))\n\nconst StyledPrevNextBtn = styled(Button)(() =>({\n  textDecoration: 'none',\n}))\n\nconst getPaginationStatus = (page: number, rowsPerPage: number, pageCount: number, translations: PaginationTranslations): string => {\n  const start = rowsPerPage * (page - 1) + 1;\n  const end = rowsPerPage * page;\n  return `${translations.showing} ${start} - ${end} ${translations.of} ${rowsPerPage * pageCount}`;\n}\n\nexport interface PaginationTranslations {\n  previousPageAriaLabel: string;\n  nextPageAriaLabel: string;\n  selectedPageAriaLabel: string;\n  paginationPageAriaLabel: string;\n  next: string;\n  previous: string;\n  showing: string;\n  of: string;\n}\n\nexport interface PaginationProps {\n  pageCount?: number;\n  boundaryPageCount?: number;\n  disabled?: boolean;\n  rowsPerPage?: number;\n  size?: 'medium' | 'small';\n  page: number;\n  onChange: MUIPaginationProps['onChange'];\n  translations: PaginationTranslations\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  pageCount = 1,\n  boundaryPageCount = 1,\n  disabled = false,\n  rowsPerPage,\n  page,\n  onChange,\n  size = 'medium',\n  translations,\n}) => {\n  const isMobile = useMediaQuery((theme) => theme.breakpoints.down('tablet'));\n  const { items } = usePagination({\n    boundaryCount: boundaryPageCount,\n    count: pageCount,\n    disabled,\n    onChange,\n    page\n  });\n\n  const theme = useTheme();\n\n  if (isMobile) {\n    const previousBtn = items.find(item => item.type === 'previous');\n    const nextBtn = items.find(item => item.type === 'next');\n    return (\n      <StyledPaginationMobileContainer>\n        {\n          !!previousBtn &&\n            <IconButton\n              aria-label={translations.previousPageAriaLabel}\n              data-testid=\"pagination-prev-btn-mobile\"\n              disabled={disabled || previousBtn.disabled}\n              onClick={previousBtn.onClick}\n              size={size}\n              tone='neutral'\n              variant='tertiary'\n            >\n              <ArrowLeft02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />\n            </IconButton>\n        }\n        <Stack alignItems='center' flexGrow={1}>\n          <StyledTypography data-testid=\"pagination-page-mobile\" variant=\"captionWeak\">\n            {page} {translations.of} {pageCount}\n          </StyledTypography>\n        </Stack>\n        {\n          !!nextBtn &&\n            <IconButton\n              aria-label={translations.nextPageAriaLabel}\n              data-testid=\"pagination-next-btn-mobile\"\n              disabled={disabled || nextBtn.disabled}\n              onClick={nextBtn.onClick}\n              size={size}\n              tone='neutral'\n              variant='tertiary'\n            >\n              <ArrowRight02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />\n            </IconButton>\n        }\n\n      </StyledPaginationMobileContainer>\n    );\n  }\n\n  const willRenderRowsPerPage = typeof rowsPerPage === \"number\";\n\n  return (\n    <StyledPaginationDesktopContainer willRenderRowsPerPage={willRenderRowsPerPage}>\n      <Stack\n        alignItems='center'\n        direction='row'\n        gap={theme.spacing(1)}\n      >\n        {items.map((item) => {\n          if (item.type === 'previous') {\n            return (\n              <StyledPrevNextBtn\n                key={item.type}\n                aria-label={translations.previousPageAriaLabel}\n                data-testid=\"pagination-prev-btn\"\n                disabled={disabled || item.disabled}\n                fdKey=\"pagination-prev-btn\"\n                onClick={item.onClick}\n                size={size}\n                startIcon={<ArrowLeft02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {translations.previous}\n                </StyledTypography>\n              </StyledPrevNextBtn>\n            )\n          }\n\n          if (item.type === 'start-ellipsis' || item.type === 'end-ellipsis') {\n            return (\n              <Box\n                key={item.type}\n              >\n                <StyledTypography data-testid=\"pagination-ellipsis\" variant=\"captionWeak\">\n                  ...\n                </StyledTypography>\n\n              </Box>\n            )\n          }\n\n          if (item.type === \"next\") {\n            return (\n              <StyledPrevNextBtn\n                key={item.type}\n                aria-label={translations.nextPageAriaLabel}\n                data-testid=\"pagination-next-btn\"\n                disabled={disabled || item.disabled}\n                endIcon={<ArrowRight02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />}\n                fdKey=\"pagination-next-btn\"\n                onClick={item.onClick}\n                size={size}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {translations.next}\n                </StyledTypography>\n              </StyledPrevNextBtn>\n            )\n          }\n\n          if (item.selected) {\n            return (\n              <StyledSelectedPageBtn\n                key={item.page}\n                aria-label={translations.selectedPageAriaLabel}\n                data-testid=\"pagination-current-page\"\n                disabled={disabled || item.disabled}\n                fdKey=\"pagination-page\"\n                onClick={item.onClick}\n                size={size}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {item.page}\n                </StyledTypography>\n              </StyledSelectedPageBtn>\n            )\n          }\n\n          return (\n            <IconButton\n              key={item.page}\n              aria-label={`${translations.paginationPageAriaLabel} ${item.page}`}\n              data-testid=\"pagination-page\"\n              disabled={disabled || item.disabled}\n              fdKey=\"pagination-page\"\n              onClick={item.onClick}\n              size={size}\n              tone=\"neutral\"\n              variant=\"tertiary\"\n            >\n              <StyledTypography variant=\"captionWeak\">\n                {item.page}\n              </StyledTypography>\n            </IconButton>\n          )\n        })}\n      </Stack>\n      <Stack\n        alignItems='center'\n        flexGrow={0}\n      >\n        {typeof rowsPerPage === \"number\" && (\n          <StyledTypography data-testid=\"pagination-page-range\" variant=\"captionWeak\">\n            {getPaginationStatus(page, rowsPerPage, pageCount, translations)}\n          </StyledTypography>\n        )}\n      </Stack>\n    </StyledPaginationDesktopContainer>\n  );\n}\n\nexport default Pagination;"],"names":["StyledPaginationMobileContainer","styled","theme","display","flexDirection","alignItems","width","justifyContent","padding","spacing","gap","StyledPaginationDesktopContainer","willRenderRowsPerPage","paddingLeft","paddingRight","StyledSelectedPageBtn","IconButton","borderRadius","radius","border","palette","semantic","stroke","StyledTypography","Typography","color","text","StyledPrevNextBtn","Button","textDecoration","getPaginationStatus","page","rowsPerPage","pageCount","translations","start","end","showing","of","Pagination","boundaryPageCount","disabled","onChange","size","isMobile","useMediaQuery","breakpoints","down","items","usePagination","boundaryCount","count","useTheme","previousBtn","find","item","type","nextBtn","_jsxs","children","_jsx","previousPageAriaLabel","onClick","tone","variant","ArrowLeft02Icon","Stack","flexGrow","nextPageAriaLabel","ArrowRight02Icon","direction","map","fdKey","startIcon","previous","Box","endIcon","next","selected","selectedPageAriaLabel","paginationPageAriaLabel"],"mappings":"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"}

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

@@ -0,0 +1,27 @@
+import react__default from 'react';
+import { PaginationProps as PaginationProps$1 } from '@mui/material/Pagination';
+
+interface PaginationTranslations {
+    previousPageAriaLabel: string;
+    nextPageAriaLabel: string;
+    selectedPageAriaLabel: string;
+    paginationPageAriaLabel: string;
+    next: string;
+    previous: string;
+    showing: string;
+    of: string;
+}
+interface PaginationProps {
+    pageCount?: number;
+    boundaryPageCount?: number;
+    disabled?: boolean;
+    rowsPerPage?: number;
+    size?: 'medium' | 'small';
+    page: number;
+    onChange: PaginationProps$1['onChange'];
+    translations: PaginationTranslations;
+}
+declare const Pagination: react__default.FC<PaginationProps>;
+
+export { Pagination, Pagination as default };
+export type { PaginationProps, PaginationTranslations };

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

@@ -0,0 +1,2 @@
+import{jsxs as e,jsx as a}from"react/jsx-runtime";import"react";import"@mui/material/Pagination";import t from"@mui/material/usePagination/usePagination";import i from"@mui/material/Box";import{Button as n}from"../../atoms/Button/index.js";import{IconButton as r}from"../../atoms/IconButton/index.js";import o from"@mui/material/Typography";import s from"@mui/material/Stack";import d from"../../../icons/ArrowLeft02/index.js";import l from"../../../icons/ArrowRight02/index.js";import{styled as p}from"@mui/material/styles";import c from"@mui/material/useMediaQuery";import m from"@mui/material/styles/useTheme";const g=p("nav")((({theme:e})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:"space-between",padding:e.spacing(.5),gap:e.spacing(2)}))),u=p("nav")((({theme:e,willRenderRowsPerPage:a})=>({display:"flex",flexDirection:"row",alignItems:"center",width:"100%",justifyContent:a?"space-between":"center",paddingLeft:e.spacing(1),paddingRight:e.spacing(1),gap:e.spacing(2)}))),b=p(r)((({theme:e})=>({borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`,"&:hover":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:focus":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:active":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`},"&:disabled":{borderRadius:e.radius["radius-8"],border:`1px solid ${e.palette.semantic.stroke["stroke-strong"]}`}}))),x=p(o)((({theme:e})=>({color:e.palette.semantic.text["text-weak"]}))),k=p(n)((()=>({textDecoration:"none"}))),f=(e,a,t,i)=>{const n=a*(e-1)+1,r=a*e;return`${i.showing} ${n} - ${r} ${i.of} ${a*t}`},h=({pageCount:n=1,boundaryPageCount:o=1,disabled:p=!1,rowsPerPage:h,page:y,onChange:v,size:w="medium",translations:C})=>{const P=c((e=>e.breakpoints.down("tablet"))),{items:$}=t({boundaryCount:o,count:n,disabled:p,onChange:v,page:y}),z=m();if(P){const t=$.find((e=>"previous"===e.type)),i=$.find((e=>"next"===e.type));return e(g,{children:[!!t&&a(r,{"aria-label":C.previousPageAriaLabel,"data-testid":"pagination-prev-btn-mobile",disabled:p||t.disabled,onClick:t.onClick,size:w,tone:"neutral",variant:"tertiary",children:a(d,{color:z.palette.semantic.text["text-weak"],size:"md"})}),a(s,{alignItems:"center",flexGrow:1,children:e(x,{"data-testid":"pagination-page-mobile",variant:"captionWeak",children:[y," ",C.of," ",n]})}),!!i&&a(r,{"aria-label":C.nextPageAriaLabel,"data-testid":"pagination-next-btn-mobile",disabled:p||i.disabled,onClick:i.onClick,size:w,tone:"neutral",variant:"tertiary",children:a(l,{color:z.palette.semantic.text["text-weak"],size:"md"})})]})}return e(u,{willRenderRowsPerPage:"number"==typeof h,children:[a(s,{alignItems:"center",direction:"row",gap:z.spacing(1),children:$.map((e=>"previous"===e.type?a(k,{"aria-label":C.previousPageAriaLabel,"data-testid":"pagination-prev-btn",disabled:p||e.disabled,fdKey:"pagination-prev-btn",onClick:e.onClick,size:w,startIcon:a(d,{color:z.palette.semantic.text["text-weak"],size:"md"}),tone:"neutral",variant:"tertiary",children:a(x,{variant:"captionWeak",children:C.previous})},e.type):"start-ellipsis"===e.type||"end-ellipsis"===e.type?a(i,{children:a(x,{"data-testid":"pagination-ellipsis",variant:"captionWeak",children:"..."})},e.type):"next"===e.type?a(k,{"aria-label":C.nextPageAriaLabel,"data-testid":"pagination-next-btn",disabled:p||e.disabled,endIcon:a(l,{color:z.palette.semantic.text["text-weak"],size:"md"}),fdKey:"pagination-next-btn",onClick:e.onClick,size:w,tone:"neutral",variant:"tertiary",children:a(x,{variant:"captionWeak",children:C.next})},e.type):e.selected?a(b,{"aria-label":C.selectedPageAriaLabel,"data-testid":"pagination-current-page",disabled:p||e.disabled,fdKey:"pagination-page",onClick:e.onClick,size:w,tone:"neutral",variant:"tertiary",children:a(x,{variant:"captionWeak",children:e.page})},e.page):a(r,{"aria-label":`${C.paginationPageAriaLabel} ${e.page}`,"data-testid":"pagination-page",disabled:p||e.disabled,fdKey:"pagination-page",onClick:e.onClick,size:w,tone:"neutral",variant:"tertiary",children:a(x,{variant:"captionWeak",children:e.page})},e.page)))}),a(s,{alignItems:"center",flexGrow:0,children:"number"==typeof h&&a(x,{"data-testid":"pagination-page-range",variant:"captionWeak",children:f(y,h,n,C)})})]})};export{h as Pagination,h as default};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/molecules/Pagination/index.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { type PaginationProps as MUIPaginationProps } from \"@mui/material/Pagination\";\nimport usePagination from \"@mui/material/usePagination/usePagination\";\n\nimport Box from \"@fd/components/atoms/Box\";\nimport Button from \"@fd/components/atoms/Button\";\nimport IconButton from \"@fd/components/atoms/IconButton\";\nimport Typography from \"@fd/components/atoms/Typography\";\nimport Stack from '@fd/components/molecules/Stack';\nimport ArrowLeft02Icon from \"@fd/icons/ArrowLeft02\";\nimport ArrowRight02Icon from \"@fd/icons/ArrowRight02\";\nimport styled from \"@fd/utilities/styledUtilities\"\nimport useMediaQuery from \"@fd/utilities/useMediaQuery\";\nimport useTheme from \"@fd/utilities/useTheme\";\n\nconst StyledPaginationMobileContainer = styled('nav')(({theme}) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: 'space-between',\n  padding: theme.spacing(0.5),\n  gap: theme.spacing(2),\n}));\n\nconst StyledPaginationDesktopContainer = styled('nav')<{ willRenderRowsPerPage: boolean }>(({theme, willRenderRowsPerPage}) => ({\n  display: 'flex',\n  flexDirection: 'row',\n  alignItems: 'center',\n  width: '100%',\n  justifyContent: willRenderRowsPerPage ? 'space-between' : 'center',\n  paddingLeft: theme.spacing(1),\n  paddingRight: theme.spacing(1),\n  gap: theme.spacing(2),\n}));\n\nconst StyledSelectedPageBtn = styled(IconButton)(({ theme }) =>({\n  borderRadius: theme.radius['radius-8'],\n  border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  '&:hover': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:focus': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:active': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n  '&:disabled': {\n    borderRadius: theme.radius['radius-8'],\n    border: `1px solid ${theme.palette.semantic.stroke['stroke-strong']}`,\n  },\n}));\n\nconst StyledTypography = styled(Typography)(({ theme }) => ({\n  color: theme.palette.semantic.text['text-weak'],\n}))\n\nconst StyledPrevNextBtn = styled(Button)(() =>({\n  textDecoration: 'none',\n}))\n\nconst getPaginationStatus = (page: number, rowsPerPage: number, pageCount: number, translations: PaginationTranslations): string => {\n  const start = rowsPerPage * (page - 1) + 1;\n  const end = rowsPerPage * page;\n  return `${translations.showing} ${start} - ${end} ${translations.of} ${rowsPerPage * pageCount}`;\n}\n\nexport interface PaginationTranslations {\n  previousPageAriaLabel: string;\n  nextPageAriaLabel: string;\n  selectedPageAriaLabel: string;\n  paginationPageAriaLabel: string;\n  next: string;\n  previous: string;\n  showing: string;\n  of: string;\n}\n\nexport interface PaginationProps {\n  pageCount?: number;\n  boundaryPageCount?: number;\n  disabled?: boolean;\n  rowsPerPage?: number;\n  size?: 'medium' | 'small';\n  page: number;\n  onChange: MUIPaginationProps['onChange'];\n  translations: PaginationTranslations\n}\n\nexport const Pagination: React.FC<PaginationProps> = ({\n  pageCount = 1,\n  boundaryPageCount = 1,\n  disabled = false,\n  rowsPerPage,\n  page,\n  onChange,\n  size = 'medium',\n  translations,\n}) => {\n  const isMobile = useMediaQuery((theme) => theme.breakpoints.down('tablet'));\n  const { items } = usePagination({\n    boundaryCount: boundaryPageCount,\n    count: pageCount,\n    disabled,\n    onChange,\n    page\n  });\n\n  const theme = useTheme();\n\n  if (isMobile) {\n    const previousBtn = items.find(item => item.type === 'previous');\n    const nextBtn = items.find(item => item.type === 'next');\n    return (\n      <StyledPaginationMobileContainer>\n        {\n          !!previousBtn &&\n            <IconButton\n              aria-label={translations.previousPageAriaLabel}\n              data-testid=\"pagination-prev-btn-mobile\"\n              disabled={disabled || previousBtn.disabled}\n              onClick={previousBtn.onClick}\n              size={size}\n              tone='neutral'\n              variant='tertiary'\n            >\n              <ArrowLeft02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />\n            </IconButton>\n        }\n        <Stack alignItems='center' flexGrow={1}>\n          <StyledTypography data-testid=\"pagination-page-mobile\" variant=\"captionWeak\">\n            {page} {translations.of} {pageCount}\n          </StyledTypography>\n        </Stack>\n        {\n          !!nextBtn &&\n            <IconButton\n              aria-label={translations.nextPageAriaLabel}\n              data-testid=\"pagination-next-btn-mobile\"\n              disabled={disabled || nextBtn.disabled}\n              onClick={nextBtn.onClick}\n              size={size}\n              tone='neutral'\n              variant='tertiary'\n            >\n              <ArrowRight02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />\n            </IconButton>\n        }\n\n      </StyledPaginationMobileContainer>\n    );\n  }\n\n  const willRenderRowsPerPage = typeof rowsPerPage === \"number\";\n\n  return (\n    <StyledPaginationDesktopContainer willRenderRowsPerPage={willRenderRowsPerPage}>\n      <Stack\n        alignItems='center'\n        direction='row'\n        gap={theme.spacing(1)}\n      >\n        {items.map((item) => {\n          if (item.type === 'previous') {\n            return (\n              <StyledPrevNextBtn\n                key={item.type}\n                aria-label={translations.previousPageAriaLabel}\n                data-testid=\"pagination-prev-btn\"\n                disabled={disabled || item.disabled}\n                fdKey=\"pagination-prev-btn\"\n                onClick={item.onClick}\n                size={size}\n                startIcon={<ArrowLeft02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {translations.previous}\n                </StyledTypography>\n              </StyledPrevNextBtn>\n            )\n          }\n\n          if (item.type === 'start-ellipsis' || item.type === 'end-ellipsis') {\n            return (\n              <Box\n                key={item.type}\n              >\n                <StyledTypography data-testid=\"pagination-ellipsis\" variant=\"captionWeak\">\n                  ...\n                </StyledTypography>\n\n              </Box>\n            )\n          }\n\n          if (item.type === \"next\") {\n            return (\n              <StyledPrevNextBtn\n                key={item.type}\n                aria-label={translations.nextPageAriaLabel}\n                data-testid=\"pagination-next-btn\"\n                disabled={disabled || item.disabled}\n                endIcon={<ArrowRight02Icon color={theme.palette.semantic.text[\"text-weak\"]} size=\"md\" />}\n                fdKey=\"pagination-next-btn\"\n                onClick={item.onClick}\n                size={size}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {translations.next}\n                </StyledTypography>\n              </StyledPrevNextBtn>\n            )\n          }\n\n          if (item.selected) {\n            return (\n              <StyledSelectedPageBtn\n                key={item.page}\n                aria-label={translations.selectedPageAriaLabel}\n                data-testid=\"pagination-current-page\"\n                disabled={disabled || item.disabled}\n                fdKey=\"pagination-page\"\n                onClick={item.onClick}\n                size={size}\n                tone=\"neutral\"\n                variant=\"tertiary\"\n              >\n                <StyledTypography variant=\"captionWeak\">\n                  {item.page}\n                </StyledTypography>\n              </StyledSelectedPageBtn>\n            )\n          }\n\n          return (\n            <IconButton\n              key={item.page}\n              aria-label={`${translations.paginationPageAriaLabel} ${item.page}`}\n              data-testid=\"pagination-page\"\n              disabled={disabled || item.disabled}\n              fdKey=\"pagination-page\"\n              onClick={item.onClick}\n              size={size}\n              tone=\"neutral\"\n              variant=\"tertiary\"\n            >\n              <StyledTypography variant=\"captionWeak\">\n                {item.page}\n              </StyledTypography>\n            </IconButton>\n          )\n        })}\n      </Stack>\n      <Stack\n        alignItems='center'\n        flexGrow={0}\n      >\n        {typeof rowsPerPage === \"number\" && (\n          <StyledTypography data-testid=\"pagination-page-range\" variant=\"captionWeak\">\n            {getPaginationStatus(page, rowsPerPage, pageCount, translations)}\n          </StyledTypography>\n        )}\n      </Stack>\n    </StyledPaginationDesktopContainer>\n  );\n}\n\nexport default Pagination;"],"names":["StyledPaginationMobileContainer","styled","theme","display","flexDirection","alignItems","width","justifyContent","padding","spacing","gap","StyledPaginationDesktopContainer","willRenderRowsPerPage","paddingLeft","paddingRight","StyledSelectedPageBtn","IconButton","borderRadius","radius","border","palette","semantic","stroke","StyledTypography","Typography","color","text","StyledPrevNextBtn","Button","textDecoration","getPaginationStatus","page","rowsPerPage","pageCount","translations","start","end","showing","of","Pagination","boundaryPageCount","disabled","onChange","size","isMobile","useMediaQuery","breakpoints","down","items","usePagination","boundaryCount","count","useTheme","previousBtn","find","item","type","nextBtn","_jsxs","children","_jsx","previousPageAriaLabel","onClick","tone","variant","ArrowLeft02Icon","Stack","flexGrow","nextPageAriaLabel","ArrowRight02Icon","direction","map","fdKey","startIcon","previous","Box","endIcon","next","selected","selectedPageAriaLabel","paginationPageAriaLabel"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Grid2"),i=require("../../atoms/LinearProgress/index.cjs.js"),a=require("@mui/material/Typography"),o=require("../../../icons/ArrowLeft02/index.cjs.js");const n=require("@mui/material/styles").styled(t.Button)((({theme:e})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[e.breakpoints.up("tablet")]:{maxWidth:"unset"}})));module.exports=({step:t,totalSteps:p,backButtonProps:d,title:l})=>e.jsxs(s,{"data-testid":"progress-stepper-container",mt:3,children:[e.jsx(r,{mb:2,children:d&&e.jsxs(n,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[e.jsx(o,{}),d.label]})}),e.jsx(r,{mb:1,children:e.jsx(a,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${t} of ${p}`})}),e.jsx(r,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:p},((e,r)=>r+1)).map((s=>e.jsx(r,{sx:{width:"100%"},children:e.jsx(i.LinearProgress,{color:"primary",value:s<=t?100:0,variant:"determinate"},`${s}-progress-stepper`)},`${s}-progress-stepper-box`)))})]});
+"use strict";var e=require("react/jsx-runtime"),r=require("@mui/material/Box"),t=require("../../atoms/Button/index.cjs.js"),s=require("@mui/material/Grid2"),i=require("../../atoms/LinearProgress/index.cjs.js"),a=require("@mui/material/Typography"),n=require("../../../icons/ArrowLeft02/index.cjs.js");const o=require("@mui/material/styles").styled(t.Button)((({theme:e})=>({textDecoration:"none",padding:0,maxWidth:"none",height:"24px",[e.breakpoints.up("tablet")]:{maxWidth:"unset"}})));module.exports=({step:t,totalSteps:p,backButtonProps:d,title:l})=>e.jsxs(s,{"data-testid":"progress-stepper-container",mt:3,children:[e.jsx(r,{mb:2,children:d&&e.jsxs(o,{"data-testid":"progress-stepper-back-button",disabled:d.disabled,fdKey:"progress-stepper-back-button",onClick:d.onClick,variant:"tertiary",children:[e.jsx(n,{}),d.label]})}),e.jsx(r,{mb:1,children:e.jsx(a,{"data-testid":"progress-stepper-title",variant:"b1Strong",children:l||`Step ${t} of ${p}`})}),e.jsx(r,{"data-testid":"progress-stepper-bars",sx:{display:"flex",gap:.5},children:Array.from({length:p},((e,r)=>r+1)).map((s=>e.jsx(r,{sx:{width:"100%"},children:e.jsx(i.LinearProgress,{value:s<=t?100:0,variant:"determinate"},`${s}-progress-stepper`)},`${s}-progress-stepper-box`)))})]});
 //# sourceMappingURL=index.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n  step: number;\n  totalSteps: number;\n  backButtonProps?: {\n    disabled?: boolean;\n    onClick: () => void;\n    label: string;\n  };\n  title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: 0,\n  maxWidth: 'none',\n  height: '24px',\n  [theme.breakpoints.up('tablet')]: {\n    maxWidth: 'unset',\n  },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n  step,\n  totalSteps,\n  backButtonProps,\n  title,\n}) => {\n  return (\n    <Grid data-testid=\"progress-stepper-container\" mt={3}>\n      <Box mb={2}>\n        {backButtonProps && (\n          <BackButton\n            data-testid=\"progress-stepper-back-button\"\n            disabled={backButtonProps.disabled}\n            fdKey=\"progress-stepper-back-button\"\n            onClick={backButtonProps.onClick}\n            variant=\"tertiary\"\n          >\n            <ArrowLeft02 />\n            {backButtonProps.label}\n          </BackButton>\n        )}\n      </Box>\n      <Box mb={1}>\n        <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n          {title || `Step ${step} of ${totalSteps}`}\n        </Typography>\n      </Box>\n      <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n        {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n          <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n            <LinearProgress\n              key={`${stepNumber}-progress-stepper`}\n              color=\"primary\"\n              value={stepNumber <= step ? 100 : 0}\n              variant=\"determinate\"\n            />\n          </Box>\n        ))}\n      </Box>\n    </Grid>\n  );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","color","value"],"mappings":"6SAmBA,MAAMA,kCAAaC,OAAOC,EAAAA,OAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,4BAIsC,EAClDI,OACAC,aACAC,kBACAC,WAGEC,EAAAA,KAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAAAA,KAACd,iBACa,+BACZqB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,WAAUP,SAAA,CAElBC,EAAAA,IAACO,EAAW,CAAA,GACXb,EAAgBc,WAIvBR,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACRC,EAAAA,IAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,oBACtDX,GAAS,QAAQH,QAAWC,QAGjCO,MAACC,EAAG,CAAA,cAAa,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAAAA,IAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,EAAAA,IAACqB,EAAAA,eAAc,CAEbC,MAAM,UACNC,MAAOJ,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAHH,GAAGa,uBAFF,GAAGA"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/ProgressStepper/index.tsx"],"sourcesContent":["import Box from '@fd/components/atoms/Box';\nimport Button from '@fd/components/atoms/Button';\nimport Grid from '@fd/components/atoms/Grid';\nimport LinearProgress from '@fd/components/atoms/LinearProgress';\nimport Typography from '@fd/components/atoms/Typography';\nimport ArrowLeft02 from '@fd/icons/ArrowLeft02';\nimport styled from '@fd/utilities/styledUtilities';\n\ninterface IProgressStepper {\n  step: number;\n  totalSteps: number;\n  backButtonProps?: {\n    disabled?: boolean;\n    onClick: () => void;\n    label: string;\n  };\n  title?: string;\n}\n\nconst BackButton = styled(Button)(({ theme }) => ({\n  textDecoration: 'none',\n  padding: 0,\n  maxWidth: 'none',\n  height: '24px',\n  [theme.breakpoints.up('tablet')]: {\n    maxWidth: 'unset',\n  },\n}));\n\nconst ProgressStepper: React.FC<IProgressStepper> = ({\n  step,\n  totalSteps,\n  backButtonProps,\n  title,\n}) => {\n  return (\n    <Grid data-testid=\"progress-stepper-container\" mt={3}>\n      <Box mb={2}>\n        {backButtonProps && (\n          <BackButton\n            data-testid=\"progress-stepper-back-button\"\n            disabled={backButtonProps.disabled}\n            fdKey=\"progress-stepper-back-button\"\n            onClick={backButtonProps.onClick}\n            variant=\"tertiary\"\n          >\n            <ArrowLeft02 />\n            {backButtonProps.label}\n          </BackButton>\n        )}\n      </Box>\n      <Box mb={1}>\n        <Typography data-testid=\"progress-stepper-title\" variant=\"b1Strong\">\n          {title || `Step ${step} of ${totalSteps}`}\n        </Typography>\n      </Box>\n      <Box data-testid=\"progress-stepper-bars\" sx={{ display: 'flex', gap: 0.5 }}>\n        {Array.from({ length: totalSteps }, (_, index) => index + 1).map((stepNumber) => (\n          <Box key={`${stepNumber}-progress-stepper-box`} sx={{ width: '100%' }}>\n            <LinearProgress\n              key={`${stepNumber}-progress-stepper`}\n              value={stepNumber <= step ? 100 : 0}\n              variant=\"determinate\"\n            />\n          </Box>\n        ))}\n      </Box>\n    </Grid>\n  );\n};\n\nexport default ProgressStepper;\n"],"names":["BackButton","styled","Button","theme","textDecoration","padding","maxWidth","height","breakpoints","up","step","totalSteps","backButtonProps","title","_jsxs","Grid","mt","children","_jsx","Box","mb","disabled","fdKey","onClick","variant","ArrowLeft02","label","Typography","sx","display","gap","Array","from","length","_","index","map","stepNumber","width","LinearProgress","value"],"mappings":"6SAmBA,MAAMA,kCAAaC,OAAOC,EAAAA,OAAPD,EAAe,EAAGE,YAAO,CAC1CC,eAAgB,OAChBC,QAAS,EACTC,SAAU,OACVC,OAAQ,OACR,CAACJ,EAAMK,YAAYC,GAAG,WAAY,CAChCH,SAAU,4BAIsC,EAClDI,OACAC,aACAC,kBACAC,WAGEC,EAAAA,KAACC,iBAAiB,6BAA6BC,GAAI,EAACC,SAAA,CAClDC,EAAAA,IAACC,EAAG,CAACC,GAAI,EAACH,SACPL,GACCE,EAAAA,KAACd,iBACa,+BACZqB,SAAUT,EAAgBS,SAC1BC,MAAM,+BACNC,QAASX,EAAgBW,QACzBC,QAAQ,qBAERN,MAACO,MACAb,EAAgBc,WAIvBR,EAAAA,IAACC,GAAIC,GAAI,EAACH,SACRC,EAAAA,IAACS,EAAU,CAAA,cAAa,yBAAyBH,QAAQ,WAAUP,SAChEJ,GAAS,QAAQH,QAAWC,QAGjCO,EAAAA,IAACC,iBAAgB,wBAAwBS,GAAI,CAAEC,QAAS,OAAQC,IAAK,IAAKb,SACvEc,MAAMC,KAAK,CAAEC,OAAQtB,IAAc,CAACuB,EAAGC,IAAUA,EAAQ,IAAGC,KAAKC,GAChEnB,EAAAA,IAACC,EAAG,CAA4CS,GAAI,CAAEU,MAAO,QAAQrB,SACnEC,MAACqB,EAAAA,eAAc,CAEbC,MAAOH,GAAc3B,EAAO,IAAM,EAClCc,QAAQ,eAFH,GAAGa,uBAFF,GAAGA"}