npm - @flipdish/portal-library - Versions diffs - 6.0.0 → 6.0.2 - Mend

@flipdish/portal-library 6.0.0 → 6.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (236) hide show

package/dist/components/molecules/AlertSnackbar/index.cjs.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "use strict";var e=require("react/jsx-runtime"),t=require("react"),i=require("@mui/material/Box"),n=require("@mui/material/Snackbar"),r=require("@mui/material/styles"),a=require("../../../icons/Cancel/index.cjs.js"),o=require("../../../icons/Diamond/index.cjs.js"),s=require("../../atoms/Button/index.cjs.js"),l=require("../ButtonGroup/index.cjs.js");const c=e=>e.palette.semantic.icon["icon-inverse-strong"],d=r.styled(i)((({theme:e})=>{const t=(e=>({bg:e.palette.semantic.fill["fill-strong"],text:e.palette.semantic.text["text-inverse-strong"],border:e.palette.semantic.stroke["stroke-strong"]}))(e);return{display:"flex",alignItems:"center",justifyContent:"space-between",gap:e.spacing(3),padding:e.spacing(1.5,2),backgroundColor:t.bg,color:t.text,border:`1px solid ${t.border}`,borderRadius:e.radius["radius-8"],role:"alert"}})),p=r.styled(i)((({theme:e})=>({fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,flexShrink:1,minWidth:0}))),u=r.styled(i)({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}),y=r.styled(u)((({theme:e})=>({color:c(e)}))),g=r.styled(i)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),flex:1,minWidth:0}))),h=r.styled(i)((({theme:e})=>({display:"flex",gap:e.spacing(1),alignItems:"center",flexShrink:0}))),m=r.styled("button")((({theme:e})=>({background:"none",border:"none",color:"inherit",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:e.spacing(.5),margin:e.spacing(0,-.5),"&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),x=r.styled("button")((({theme:e})=>({background:"none",border:"none",fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,textDecoration:"underline",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer",color:"inherit",padding:0,whiteSpace:"nowrap","&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px",borderRadius:e.radius["radius-8"]}}))),b=r.styled(i)({maxWidth:"60vw"}),f=t.memo((({content:i,onClose:r,className:c,"data-testid":u,actions:f,textLink:k,open:j,autoHideDuration:W=5e3})=>{const[C,S]=t.useState(j??!0),v=void 0!==j?j:C,q=t.useCallback(((e,t)=>{"clickaway"!==t&&(void 0===j&&S(!1),r?.())}),[r,j]);return e.jsx(n,{anchorOrigin:{horizontal:"center",vertical:"bottom"},autoHideDuration:W,className:c,"data-testid":u,onClose:q,open:v,children:e.jsx(b,{children:e.jsxs(d,{role:"alert",children:[e.jsxs(g,{children:[e.jsx(y,{children:e.jsx(o,{})}),e.jsx(p,{children:i})]}),e.jsxs(h,{children:[k&&(()=>{if(!k)return;const t=k["data-testid"]??`text-link-${k.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(x,{"aria-label":k.label,"data-testid":t,onClick:()=>{k.onClick(),q()},type:"button",children:k.label})})(),f&&f.length>0&&(()=>{if(!f\|\|0===f.length)return;const t=[...f].sort(((e,t)=>{const i={tertiary:0,secondary:1,primary:2},n=e.type??"primary",r=t.type??"primary";return i[n]-i[r]}));return e.jsx(l,{align:"right",size:"small",children:t.map((t=>{const i=t["data-testid"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e.jsx(s.Button,{"aria-label":t.label,"data-testid":i,fdKey:t.label,onClick:()=>{t.onClick(),q()},tone:"inverse",variant:t.type??"primary",children:t.label},i)}))})})(),r&&e.jsx(m,{"aria-label":"Close notification",onClick:q,type:"button",children:e.jsx(a,{})})]})]})})})}));f.displayName="AlertSnackbar",module.exports=f;
2	+ //# sourceMappingURL=index.cjs.js.map

package/dist/components/molecules/AlertSnackbar/index.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs.js","sources":["../../../../src/components/molecules/AlertSnackbar/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo, useCallback, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Snackbar from '@mui/material/Snackbar';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport DiamondIcon from '@fd/icons/Diamond';\n\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n 'data-testid'?: string;\n}\n\n/** Text link configuration */\nexport interface TextLink {\n /** Text label for the link */\n label: string;\n /** Callback function when the link is clicked */\n onClick: () => void;\n /** Test ID for the link */\n 'data-testid'?: string;\n}\n\n/** Props for the AlertSnackbar component */\nexport interface AlertSnackbarProps {\n /** Content of the alert snackbar */\n content: string;\n /** Callback function when the alert snackbar is closed */\n onClose?: () => void;\n /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */\n actions?: ActionButton[];\n /** Text link configuration - separate from action buttons */\n textLink?: TextLink;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n 'data-testid'?: string;\n /** Whether the snackbar is open */\n open?: boolean;\n /** Duration in milliseconds the snackbar should be displayed */\n autoHideDuration?: number;\n}\n\nconst getDefaultColors = (theme: Theme) => {\n return {\n bg: theme.palette.semantic.fill['fill-strong'],\n text: theme.palette.semantic.text['text-inverse-strong'],\n border: theme.palette.semantic.stroke['stroke-strong'],\n };\n};\n\nconst getDefaultIconColor = (theme: Theme): string => {\n return theme.palette.semantic.icon['icon-inverse-strong'];\n};\n\nconst StyledContent = styled(Box)(({ theme }) => {\n const colors = getDefaultColors(theme);\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: theme.spacing(3),\n padding: theme.spacing(1.5, 2),\n backgroundColor: colors.bg,\n color: colors.text,\n border: `1px solid ${colors.border}`,\n borderRadius: theme.radius['radius-8'],\n role: 'alert',\n };\n});\n\nconst StyledText = styled(Box)(({ theme }) => ({\n fontSize: theme.typography.b1Weak.fontSize,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontFamily: theme.typography.b1Weak.fontFamily,\n fontWeight: theme.typography.b1Weak.fontWeight,\n letterSpacing: theme.typography.b1Weak.letterSpacing,\n flexShrink: 1,\n minWidth: 0,\n}));\n\nconst StyledIcon = styled(Box)({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n});\n\nconst StyledIconWrapper = styled(StyledIcon)(({ theme }) => ({\n color: getDefaultIconColor(theme),\n}));\n\nconst StyledContentLeft = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n flex: 1,\n minWidth: 0,\n}));\n\nconst StyledActions = styled(Box)(({ theme }) => ({\n display: 'flex',\n gap: theme.spacing(1),\n alignItems: 'center',\n flexShrink: 0,\n}));\n\nconst StyledCloseButton = styled('button')(({ theme }) => ({\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(0.5),\n margin: theme.spacing(0, -0.5),\n '&:hover': {\n opacity: 0.8,\n },\n '&:focus': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n}));\n\nconst StyledTextLink = styled('button')(({ theme }) => ({\n background: 'none',\n border: 'none',\n fontSize: theme.typography.b1Weak.fontSize,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontFamily: theme.typography.b1Weak.fontFamily,\n fontWeight: theme.typography.b1Weak.fontWeight,\n letterSpacing: theme.typography.b1Weak.letterSpacing,\n textDecoration: 'underline',\n textUnderlineOffset: '25%',\n textUnderlinePosition: 'from-font',\n cursor: 'pointer',\n color: 'inherit',\n padding: 0,\n whiteSpace: 'nowrap',\n '&:hover': {\n opacity: 0.8,\n },\n '&:focus': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n borderRadius: theme.radius['radius-8'],\n },\n}));\n\nconst SnackbarPaper = styled(Box)({\n maxWidth: '60vw',\n});\n\n/**\n * AlertSnackbar component is used to display important notifications to users.\n * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)\n * and/or a text link component.\n * The component wraps MUI's Snackbar component to provide a consistent,\n * accessible notification experience. It is wrapped with React.memo to optimize\n * performance by preventing unnecessary re-renders when props haven't changed.\n * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.\n */\nconst AlertSnackbar = memo(\n ({\n content,\n onClose,\n className,\n 'data-testid': dataTestId,\n actions,\n textLink,\n open: controlledOpen,\n autoHideDuration = 5000,\n }: AlertSnackbarProps) => {\n // Use internal state when not controlled\n const [internalOpen, setInternalOpen] = useState(controlledOpen ?? true);\n // When controlled (open prop is defined), use it; otherwise use internal state\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n const handleClose = useCallback(\n (_event?: Event | React.SyntheticEvent, reason?: string) => {\n if (reason === 'clickaway') {\n return;\n }\n // Update internal state for uncontrolled mode\n if (controlledOpen === undefined) {\n setInternalOpen(false);\n }\n // Call external callback if provided\n onClose?.();\n },\n [onClose, controlledOpen],\n );\n\n const renderActions = (): React.ReactNode => {\n if (!actions || actions.length === 0) {\n return undefined;\n }\n\n // Sort actions: Tertiary (left), Secondary (middle), Primary (right)\n const sortedActions = [...actions].sort((a, b) => {\n const orderMap: Record<ButtonType, number> = {\n tertiary: 0,\n secondary: 1,\n primary: 2,\n };\n const aType = a.type ?? 'primary';\n const bType = b.type ?? 'primary';\n return orderMap[aType] - orderMap[bType];\n });\n\n return (\n <ButtonGroup align=\"right\" size=\"small\">\n {sortedActions.map((action) => {\n const actionTestId =\n action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <Button\n key={actionTestId}\n aria-label={action.label}\n data-testid={actionTestId}\n fdKey={action.label}\n onClick={() => {\n action.onClick();\n handleClose();\n }}\n tone=\"inverse\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n );\n })}\n </ButtonGroup>\n );\n };\n\n const renderTextLink = (): React.ReactNode => {\n if (!textLink) {\n return undefined;\n }\n\n const linkTestId =\n textLink['data-testid'] ?? `text-link-${textLink.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledTextLink\n aria-label={textLink.label}\n data-testid={linkTestId}\n onClick={() => {\n textLink.onClick();\n handleClose();\n }}\n type=\"button\"\n >\n {textLink.label}\n </StyledTextLink>\n );\n };\n\n return (\n <Snackbar\n anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}\n autoHideDuration={autoHideDuration}\n className={className}\n data-testid={dataTestId}\n onClose={handleClose}\n open={isOpen}\n >\n <SnackbarPaper>\n <StyledContent role=\"alert\">\n <StyledContentLeft>\n <StyledIconWrapper>\n <DiamondIcon />\n </StyledIconWrapper>\n <StyledText>{content}</StyledText>\n </StyledContentLeft>\n <StyledActions>\n {textLink && renderTextLink()}\n {actions && actions.length > 0 && renderActions()}\n {onClose && (\n <StyledCloseButton\n aria-label=\"Close notification\"\n onClick={handleClose}\n type=\"button\"\n >\n <CancelIcon />\n </StyledCloseButton>\n )}\n </StyledActions>\n </StyledContent>\n </SnackbarPaper>\n </Snackbar>\n );\n },\n);\n\nAlertSnackbar.displayName = 'AlertSnackbar';\n\nexport default AlertSnackbar;\n"],"names":["getDefaultIconColor","theme","palette","semantic","icon","StyledContent","styled","Box","colors","bg","fill","text","border","stroke","getDefaultColors","display","alignItems","justifyContent","gap","spacing","padding","backgroundColor","color","borderRadius","radius","role","StyledText","fontSize","typography","b1Weak","lineHeight","fontFamily","fontWeight","letterSpacing","flexShrink","minWidth","StyledIcon","StyledIconWrapper","StyledContentLeft","flex","StyledActions","StyledCloseButton","background","cursor","margin","opacity","outline","outlineOffset","StyledTextLink","textDecoration","textUnderlineOffset","textUnderlinePosition","whiteSpace","SnackbarPaper","maxWidth","AlertSnackbar","memo","content","onClose","className","dataTestId","actions","textLink","open","controlledOpen","autoHideDuration","internalOpen","setInternalOpen","useState","isOpen","undefined","handleClose","useCallback","_event","reason","_jsx","Snackbar","anchorOrigin","horizontal","vertical","children","_jsxs","DiamondIcon","linkTestId","label","replace","toLowerCase","onClick","type","renderTextLink","length","sortedActions","sort","a","b","orderMap","tertiary","secondary","primary","aType","bType","ButtonGroup","align","size","map","action","actionTestId","Button","fdKey","tone","variant","renderActions","CancelIcon","displayName"],"mappings":"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"}

package/dist/components/molecules/AlertSnackbar/index.d.ts ADDED Viewed

@@ -0,0 +1,56 @@
+import * as react from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ButtonType } from '../../atoms/Button/getButtonStyles.js';
+/** Action button configuration */
+interface ActionButton {
+    /** Text label for the action button */
+    label: string;
+    /** Visual style of the action button */
+    type?: ButtonType;
+    /** Callback function when the action button is clicked */
+    onClick: () => void;
+    /** Test ID for the action button */
+    'data-testid'?: string;
+}
+/** Text link configuration */
+interface TextLink {
+    /** Text label for the link */
+    label: string;
+    /** Callback function when the link is clicked */
+    onClick: () => void;
+    /** Test ID for the link */
+    'data-testid'?: string;
+}
+/** Props for the AlertSnackbar component */
+interface AlertSnackbarProps {
+    /** Content of the alert snackbar  */
+    content: string;
+    /** Callback function when the alert snackbar is closed */
+    onClose?: () => void;
+    /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */
+    actions?: ActionButton[];
+    /** Text link configuration - separate from action buttons */
+    textLink?: TextLink;
+    /** Additional CSS class names */
+    className?: string;
+    /** Test ID for testing and automation */
+    'data-testid'?: string;
+    /** Whether the snackbar is open */
+    open?: boolean;
+    /** Duration in milliseconds the snackbar should be displayed */
+    autoHideDuration?: number;
+}
+/**
+ * AlertSnackbar component is used to display important notifications to users.
+ * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)
+ * and/or a text link component.
+ * The component wraps MUI's Snackbar component to provide a consistent,
+ * accessible notification experience. It is wrapped with React.memo to optimize
+ * performance by preventing unnecessary re-renders when props haven't changed.
+ * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.
+ */
+declare const AlertSnackbar: react.MemoExoticComponent<({ content, onClose, className, "data-testid": dataTestId, actions, textLink, open: controlledOpen, autoHideDuration, }: AlertSnackbarProps) => react_jsx_runtime.JSX.Element>;
+export { AlertSnackbar as default };
+export type { ActionButton, AlertSnackbarProps, TextLink };

package/dist/components/molecules/AlertSnackbar/index.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsx as e,jsxs as t}from"react/jsx-runtime";import{memo as i,useState as n,useCallback as r}from"react";import o from"@mui/material/Box";import a from"@mui/material/Snackbar";import{styled as l}from"@mui/material/styles";import s from"../../../icons/Cancel/index.js";import c from"../../../icons/Diamond/index.js";import{Button as p}from"../../atoms/Button/index.js";import d from"../ButtonGroup/index.js";const m=e=>e.palette.semantic.icon["icon-inverse-strong"],g=l(o)((({theme:e})=>{const t=(e=>({bg:e.palette.semantic.fill["fill-strong"],text:e.palette.semantic.text["text-inverse-strong"],border:e.palette.semantic.stroke["stroke-strong"]}))(e);return{display:"flex",alignItems:"center",justifyContent:"space-between",gap:e.spacing(3),padding:e.spacing(1.5,2),backgroundColor:t.bg,color:t.text,border:`1px solid ${t.border}`,borderRadius:e.radius["radius-8"],role:"alert"}})),f=l(o)((({theme:e})=>({fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,flexShrink:1,minWidth:0}))),h=l(o)({display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0}),y=l(h)((({theme:e})=>({color:m(e)}))),u=l(o)((({theme:e})=>({display:"flex",alignItems:"center",gap:e.spacing(1),flex:1,minWidth:0}))),b=l(o)((({theme:e})=>({display:"flex",gap:e.spacing(1),alignItems:"center",flexShrink:0}))),k=l("button")((({theme:e})=>({background:"none",border:"none",color:"inherit",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",padding:e.spacing(.5),margin:e.spacing(0,-.5),"&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px"}}))),x=l("button")((({theme:e})=>({background:"none",border:"none",fontSize:e.typography.b1Weak.fontSize,lineHeight:e.typography.b1Weak.lineHeight,fontFamily:e.typography.b1Weak.fontFamily,fontWeight:e.typography.b1Weak.fontWeight,letterSpacing:e.typography.b1Weak.letterSpacing,textDecoration:"underline",textUnderlineOffset:"25%",textUnderlinePosition:"from-font",cursor:"pointer",color:"inherit",padding:0,whiteSpace:"nowrap","&:hover":{opacity:.8},"&:focus":{outline:`2px solid ${e.palette.semantic.stroke["stroke-focus"]}`,outlineOffset:"2px",borderRadius:e.radius["radius-8"]}}))),W=l(o)({maxWidth:"60vw"}),C=i((({content:i,onClose:o,className:l,"data-testid":m,actions:h,textLink:C,open:S,autoHideDuration:v=5e3})=>{const[j,w]=n(S??!0),z=void 0!==S?S:j,H=r(((e,t)=>{"clickaway"!==t&&(void 0===S&&w(!1),o?.())}),[o,S]);return e(a,{anchorOrigin:{horizontal:"center",vertical:"bottom"},autoHideDuration:v,className:l,"data-testid":m,onClose:H,open:z,children:e(W,{children:t(g,{role:"alert",children:[t(u,{children:[e(y,{children:e(c,{})}),e(f,{children:i})]}),t(b,{children:[C&&(()=>{if(!C)return;const t=C["data-testid"]??`text-link-${C.label.replace(/\s+/g,"-").toLowerCase()}`;return e(x,{"aria-label":C.label,"data-testid":t,onClick:()=>{C.onClick(),H()},type:"button",children:C.label})})(),h&&h.length>0&&(()=>{if(!h\|\|0===h.length)return;const t=[...h].sort(((e,t)=>{const i={tertiary:0,secondary:1,primary:2},n=e.type??"primary",r=t.type??"primary";return i[n]-i[r]}));return e(d,{align:"right",size:"small",children:t.map((t=>{const i=t["data-testid"]??`action-button-${t.label.replace(/\s+/g,"-").toLowerCase()}`;return e(p,{"aria-label":t.label,"data-testid":i,fdKey:t.label,onClick:()=>{t.onClick(),H()},tone:"inverse",variant:t.type??"primary",children:t.label},i)}))})})(),o&&e(k,{"aria-label":"Close notification",onClick:H,type:"button",children:e(s,{})})]})]})})})}));C.displayName="AlertSnackbar";export{C as default};
2	+ //# sourceMappingURL=index.js.map

package/dist/components/molecules/AlertSnackbar/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sources":["../../../../src/components/molecules/AlertSnackbar/index.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { memo, useCallback, useState } from 'react';\n\nimport Box from '@mui/material/Box';\nimport Snackbar from '@mui/material/Snackbar';\nimport { styled, type Theme } from '@mui/material/styles';\n\nimport CancelIcon from '@fd/icons/Cancel';\nimport DiamondIcon from '@fd/icons/Diamond';\n\nimport Button from '../../atoms/Button';\nimport type { ButtonType } from '../../atoms/Button/getButtonStyles';\nimport ButtonGroup from '../ButtonGroup';\n\n/** Action button configuration */\nexport interface ActionButton {\n /** Text label for the action button */\n label: string;\n /** Visual style of the action button */\n type?: ButtonType;\n /** Callback function when the action button is clicked */\n onClick: () => void;\n /** Test ID for the action button */\n 'data-testid'?: string;\n}\n\n/** Text link configuration */\nexport interface TextLink {\n /** Text label for the link */\n label: string;\n /** Callback function when the link is clicked */\n onClick: () => void;\n /** Test ID for the link */\n 'data-testid'?: string;\n}\n\n/** Props for the AlertSnackbar component */\nexport interface AlertSnackbarProps {\n /** Content of the alert snackbar */\n content: string;\n /** Callback function when the alert snackbar is closed */\n onClose?: () => void;\n /** Action buttons configuration - supports Primary, Secondary, Tertiary buttons via ButtonGroup */\n actions?: ActionButton[];\n /** Text link configuration - separate from action buttons */\n textLink?: TextLink;\n /** Additional CSS class names */\n className?: string;\n /** Test ID for testing and automation */\n 'data-testid'?: string;\n /** Whether the snackbar is open */\n open?: boolean;\n /** Duration in milliseconds the snackbar should be displayed */\n autoHideDuration?: number;\n}\n\nconst getDefaultColors = (theme: Theme) => {\n return {\n bg: theme.palette.semantic.fill['fill-strong'],\n text: theme.palette.semantic.text['text-inverse-strong'],\n border: theme.palette.semantic.stroke['stroke-strong'],\n };\n};\n\nconst getDefaultIconColor = (theme: Theme): string => {\n return theme.palette.semantic.icon['icon-inverse-strong'];\n};\n\nconst StyledContent = styled(Box)(({ theme }) => {\n const colors = getDefaultColors(theme);\n return {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'space-between',\n gap: theme.spacing(3),\n padding: theme.spacing(1.5, 2),\n backgroundColor: colors.bg,\n color: colors.text,\n border: `1px solid ${colors.border}`,\n borderRadius: theme.radius['radius-8'],\n role: 'alert',\n };\n});\n\nconst StyledText = styled(Box)(({ theme }) => ({\n fontSize: theme.typography.b1Weak.fontSize,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontFamily: theme.typography.b1Weak.fontFamily,\n fontWeight: theme.typography.b1Weak.fontWeight,\n letterSpacing: theme.typography.b1Weak.letterSpacing,\n flexShrink: 1,\n minWidth: 0,\n}));\n\nconst StyledIcon = styled(Box)({\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n flexShrink: 0,\n});\n\nconst StyledIconWrapper = styled(StyledIcon)(({ theme }) => ({\n color: getDefaultIconColor(theme),\n}));\n\nconst StyledContentLeft = styled(Box)(({ theme }) => ({\n display: 'flex',\n alignItems: 'center',\n gap: theme.spacing(1),\n flex: 1,\n minWidth: 0,\n}));\n\nconst StyledActions = styled(Box)(({ theme }) => ({\n display: 'flex',\n gap: theme.spacing(1),\n alignItems: 'center',\n flexShrink: 0,\n}));\n\nconst StyledCloseButton = styled('button')(({ theme }) => ({\n background: 'none',\n border: 'none',\n color: 'inherit',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n padding: theme.spacing(0.5),\n margin: theme.spacing(0, -0.5),\n '&:hover': {\n opacity: 0.8,\n },\n '&:focus': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n },\n}));\n\nconst StyledTextLink = styled('button')(({ theme }) => ({\n background: 'none',\n border: 'none',\n fontSize: theme.typography.b1Weak.fontSize,\n lineHeight: theme.typography.b1Weak.lineHeight,\n fontFamily: theme.typography.b1Weak.fontFamily,\n fontWeight: theme.typography.b1Weak.fontWeight,\n letterSpacing: theme.typography.b1Weak.letterSpacing,\n textDecoration: 'underline',\n textUnderlineOffset: '25%',\n textUnderlinePosition: 'from-font',\n cursor: 'pointer',\n color: 'inherit',\n padding: 0,\n whiteSpace: 'nowrap',\n '&:hover': {\n opacity: 0.8,\n },\n '&:focus': {\n outline: `2px solid ${theme.palette.semantic.stroke['stroke-focus']}`,\n outlineOffset: '2px',\n borderRadius: theme.radius['radius-8'],\n },\n}));\n\nconst SnackbarPaper = styled(Box)({\n maxWidth: '60vw',\n});\n\n/**\n * AlertSnackbar component is used to display important notifications to users.\n * It can include optional action buttons (via ButtonGroup supporting Primary, Secondary, Tertiary variants)\n * and/or a text link component.\n * The component wraps MUI's Snackbar component to provide a consistent,\n * accessible notification experience. It is wrapped with React.memo to optimize\n * performance by preventing unnecessary re-renders when props haven't changed.\n * Uses semantic design tokens for colors and typography to ensure proper light/dark mode support.\n */\nconst AlertSnackbar = memo(\n ({\n content,\n onClose,\n className,\n 'data-testid': dataTestId,\n actions,\n textLink,\n open: controlledOpen,\n autoHideDuration = 5000,\n }: AlertSnackbarProps) => {\n // Use internal state when not controlled\n const [internalOpen, setInternalOpen] = useState(controlledOpen ?? true);\n // When controlled (open prop is defined), use it; otherwise use internal state\n const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;\n\n const handleClose = useCallback(\n (_event?: Event | React.SyntheticEvent, reason?: string) => {\n if (reason === 'clickaway') {\n return;\n }\n // Update internal state for uncontrolled mode\n if (controlledOpen === undefined) {\n setInternalOpen(false);\n }\n // Call external callback if provided\n onClose?.();\n },\n [onClose, controlledOpen],\n );\n\n const renderActions = (): React.ReactNode => {\n if (!actions || actions.length === 0) {\n return undefined;\n }\n\n // Sort actions: Tertiary (left), Secondary (middle), Primary (right)\n const sortedActions = [...actions].sort((a, b) => {\n const orderMap: Record<ButtonType, number> = {\n tertiary: 0,\n secondary: 1,\n primary: 2,\n };\n const aType = a.type ?? 'primary';\n const bType = b.type ?? 'primary';\n return orderMap[aType] - orderMap[bType];\n });\n\n return (\n <ButtonGroup align=\"right\" size=\"small\">\n {sortedActions.map((action) => {\n const actionTestId =\n action['data-testid'] ?? `action-button-${action.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <Button\n key={actionTestId}\n aria-label={action.label}\n data-testid={actionTestId}\n fdKey={action.label}\n onClick={() => {\n action.onClick();\n handleClose();\n }}\n tone=\"inverse\"\n variant={action.type ?? 'primary'}\n >\n {action.label}\n </Button>\n );\n })}\n </ButtonGroup>\n );\n };\n\n const renderTextLink = (): React.ReactNode => {\n if (!textLink) {\n return undefined;\n }\n\n const linkTestId =\n textLink['data-testid'] ?? `text-link-${textLink.label.replace(/\\s+/g, '-').toLowerCase()}`;\n\n return (\n <StyledTextLink\n aria-label={textLink.label}\n data-testid={linkTestId}\n onClick={() => {\n textLink.onClick();\n handleClose();\n }}\n type=\"button\"\n >\n {textLink.label}\n </StyledTextLink>\n );\n };\n\n return (\n <Snackbar\n anchorOrigin={{ horizontal: 'center', vertical: 'bottom' }}\n autoHideDuration={autoHideDuration}\n className={className}\n data-testid={dataTestId}\n onClose={handleClose}\n open={isOpen}\n >\n <SnackbarPaper>\n <StyledContent role=\"alert\">\n <StyledContentLeft>\n <StyledIconWrapper>\n <DiamondIcon />\n </StyledIconWrapper>\n <StyledText>{content}</StyledText>\n </StyledContentLeft>\n <StyledActions>\n {textLink && renderTextLink()}\n {actions && actions.length > 0 && renderActions()}\n {onClose && (\n <StyledCloseButton\n aria-label=\"Close notification\"\n onClick={handleClose}\n type=\"button\"\n >\n <CancelIcon />\n </StyledCloseButton>\n )}\n </StyledActions>\n </StyledContent>\n </SnackbarPaper>\n </Snackbar>\n );\n },\n);\n\nAlertSnackbar.displayName = 'AlertSnackbar';\n\nexport default AlertSnackbar;\n"],"names":["getDefaultIconColor","theme","palette","semantic","icon","StyledContent","styled","Box","colors","bg","fill","text","border","stroke","getDefaultColors","display","alignItems","justifyContent","gap","spacing","padding","backgroundColor","color","borderRadius","radius","role","StyledText","fontSize","typography","b1Weak","lineHeight","fontFamily","fontWeight","letterSpacing","flexShrink","minWidth","StyledIcon","StyledIconWrapper","StyledContentLeft","flex","StyledActions","StyledCloseButton","background","cursor","margin","opacity","outline","outlineOffset","StyledTextLink","textDecoration","textUnderlineOffset","textUnderlinePosition","whiteSpace","SnackbarPaper","maxWidth","AlertSnackbar","memo","content","onClose","className","dataTestId","actions","textLink","open","controlledOpen","autoHideDuration","internalOpen","setInternalOpen","useState","isOpen","undefined","handleClose","useCallback","_event","reason","_jsx","Snackbar","anchorOrigin","horizontal","vertical","children","_jsxs","DiamondIcon","linkTestId","label","replace","toLowerCase","onClick","type","renderTextLink","length","sortedActions","sort","a","b","orderMap","tertiary","secondary","primary","aType","bType","ButtonGroup","align","size","map","action","actionTestId","Button","fdKey","tone","variant","renderActions","CancelIcon","displayName"],"mappings":"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"}

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

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 {\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 CHANGED Viewed

@@ -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 CHANGED Viewed

	@@ -1 +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"}
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 {\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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ "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)}))})]})};
2	+ //# sourceMappingURL=index.cjs.js.map

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

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ 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};
2	+ //# sourceMappingURL=index.js.map

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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

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

	@@ -0,0 +1,2 @@
1	+ "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=te;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;
2	+ //# sourceMappingURL=index.cjs.js.map